spse:pm3:css-uvod [wiki Avrio.cz]

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
~~NOCACHE~~
~~REVEAL theme=dokuwiki&transition=convex&controls=1&show_progress_bar=1&build_all_lists=1&show_image_borders=0&horizontal_slide_level=2&enlarge_vertical_slide_headers=0&show_slide_details=1&open_in_new_window=1&size=1024x768~~

====== Kaskádové styly ======
===== Formátování HTML =====
  * HTML tagy
    * Starší způsob používaný přímo v kódu.
    * Pomocí tagů : <i> kurzíva </i>.
    * Pomocí tagů se některé věci nedají udělat.
  * CSS styly
    * Novější způsob
    * Používá tag <style> a obecný atribut "style",kterému se přiřazuje nějaká definice.
    * Vlastnosti: složitější, ale užitečnější a všeobecné.

====== Kaskádové styly (CSS) ======
  * Cascading Style Sheets, česky "kaskádové styly"
  * Vznikly někdy kolem roku 1997
  * Kolekce metod pro grafickou úpravu webových stránek
  * Cílem oddělit vzhled dokumentu od jeho struktury a obsahu
  * V současností existují vylepšené formy CSS2 a CSS3

==== Přehled vlastností CSS ====
  * [[font]]
  * [[text a odstavec]]
  * [[barvy a pozadí]]
  * [[velikost a obtékání]]
  * [[okraje]]
  * [[rámečky]]
  * [[seznamy]]
  * [[pozicování]]
  * [[tabulky]]
  * [[další vlastnosti IE]]
  * [[další vlastnosti]]
  * [[příklady zápisu (selektory)]]

==== Aplikace CSS ====

  * Přímo v textu pomocí atributu style="...".
    * <code html> <p style="color: red">Tento odstavec bude červený.</p> </code>
  * Pomocí stylopisu ("stylesheet") v hlavičce stránky.
    * Stylopis je jakýsi seznam stylů. Je v něm obecně napsáno, co má být jak zformátováno, například barva nadpisů.
    * <code html>
<style>
  p {
    color: red;
    }
</style>
</code>
---->
  * Použitím externího stylopisu - soubor *.css
    * na který se stránka odkazuje tagem <link>.
    * V souboru je umístěný stylopis.
    * Hlavní výhodou snadná duplicita a editace.
    * <code html><link rel="stylesheet" type="text/css" href="styly.css"></code>
<WRAP center round important 60%>
  * Vždy se snaže používat css nalinkované ze zvláštní souboru
    * přehlednost
    * zobrazování syntaxe
</WRAP>

<----
==== Syntax CSS ====
  * CSS nejsou součástí HTML – odlišnost zápisu!
  * Mezery a konce řádků, velikost písmen nehrají roli.
  * Hodnoty, které prohlížeč nezná, ignoruje.
  * Je nutné všimnout si, kde se používají uvozovky, dvojtečky, složené závorky, středníky a čárky.

======= Selektory ======

===== Univerzální selektor =====

Vybírá libovolný element (všechny elementy v dané hierarchii).

<code css >
* {
  color: blue;
}

</code>

===== Typový selektor =====
Vybírá element podle typu.

<code html><p>text odstavece</p></code>
<code css >
p {
  color: blue;
}
</code>

===== Selektor třídy =====
Vybere element označený definovanou třídou.

<code html>
<p class="odstavec">text odstavece</p>
<p class="poznamka">text poznámky</p>
<div class="poznamka">text poznámky</div>
</code>
<code css >
.odstavec {
  color: blue;
}
.poznamka {
  color: red;
}
div.poznamka {
  border: 1px solid red;
  padding: 2px;
}
</code>
Na stránce může být libovolné množství prvků se stejnou třídou.

====== Selektor ID ======
Každému prvku dokumentu lze nastavit speciální atribut ID (identifikátor) a jednoznačně jej tak pojmenovat v rámci dokumentu. Narozdíl od tříd lze identifikátor v dokumentu použít pouze jednou, výborně se tak hodí na označení unikátních prvků stránky (navigace, hlavička, patička, apod.).
<code html>
  <h1 id="nadpis-stranky">Naše firma, s.r.o.</h1>
  <p id="vitejte">Vítejte na našem webu!</p>
  <p id="kontakt">Kontakt: ... </p>
</code>

<code css>  

#nadpis-stranky { 
  background: gray; 
  border-top: 1px solid green; 
  border-bottom: 1px solid green; 
}
#vitejte { font-style: italic; text-align: center; }
#kontakt { font-size: small; } 

</code>


===== Selektor pseudo-třídy =====
Tip: [[https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/|An ultimate guide to CSS pseudo classes and pseudo elements yes]]

Příklad použití CSS na všechny nenavštívené odkazy:
<code css>
a:link {
  color: #039;
}
</code>

---->
Příklad použití CSS na všechny navštívené odkazy:
<code css >
a:visited {
  color: #930;
}
</code>
<----
---->
Příklad použití dynamického CSS aktivované ve chvíli, kdy uživatel na odkaz najede kurzorem myši (:hover používejte až za :link a :visited):
<code css >
a:hover {
  color: #f30;
  text-decoration: underline;
}
</code>
<----
---->
Příklad použití dynamického CSS aktivované prvku, který je připraven pro příjem vstupu ze vstupního zařízeni např. na který je právě kliknuto myší, stisknuta klávesa Enter nebo mezerník (:active používejte až za :link, :visited a :hover):
<code css >
a:active {
  color: #f30;
  text-decoration: underline;
}
</code>

<----
---->

Příklad použití dynamického CSS při výběru odkazu, tlačítka, výběrovného seznamu a dalších formulářových prvnků uživatelem např. pomocí klávesnice:
<code css >
a:focus {background: yellow;}
a:focus:hover {background: white;}
</code>

<----
---->

První podřízený prvek jiného prvku:
<code css >
p:first-child {text-indent: 2em;}
p:first-child em {font-weight: bold;}
</code>

<----
---->

První, druhá, předposlední a poslední buňka tabulky:
<code css >
td:first-child {width: 20%;}
td:nth-child(2) {width: 60%;}
td:nth-last-child(2) {width: 40%;}
td:last-child {width: 20%;}
</code>
Každá třetí řádek "counter" (3n) – pozor počátek je nula, proto je posun "offset" nastaven na jedničku (+1):
<code css >
tr:nth-child(3n+1) {
    background-color: #eee;
}
</code>

<----
---->

Příklad různého nastavení dvojice uvozovek pro celý dokument a atribut prvku <cite> v jazyce čeština a angličtina:

<code css >
:lang(cs) {quotes: '„' '“' "‚" "‘"}
:lang(en) {quotes: '“' '”' "‘" "’"}
cite[lang="cs"] {quotes: '„' '“' "‚" "‘"}
cite[lang="en"] {quotes: '“' '”' "‘" "’"}
</code>
<----
---->

Element F je přímým potomkem elementu E.
<code css>

li > span {
  color: red
}

</code>

Obarví element %%<span>%% v kódu

<code html>

<ul>
  <li><span>Text</span>
</ul>

</code>

<----


https://jecas.cz/css-selektory
http://www.garth.cz/zaklady-css/css-selektory/
https://tomas.dankovi.info/content/webove-stranky/css/selektory