Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- spse:pm3:css-uvod [2020/10/20 20:41] – jenda
+++ spse:pm3:css-uvod [2024/07/07 16:48] (aktuální) – upraveno mimo DokuWiki 127.0.0.1
@@ Řádek 68: / Řádek 68: @@
 ======= Selektory ======
-====== Univerzální selektor ======
+===== Univerzální selektor =====
 Vybírá libovolný element (všechny elementy v dané hierarchii).
@@ Řádek 79: / Řádek 79: @@
 </code>
-====== Typový selektor ======
+===== Typový selektor =====
 Vybírá element podle typu.
@@ Řádek 89: / Řádek 89: @@
 </code>
-====== Selektor třídy ======
+===== Selektor třídy =====
 Vybere element označený definovanou třídou.
@@ Řádek 110: / Řádek 110: @@
 </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 ======
+===== 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]]
@@ Řádek 122: / Řádek 142: @@
 </code>
+---->
 Příklad použití CSS na všechny navštívené odkazy:
 <code css >
@@ Řádek 128: / Řádek 149: @@
 }
 </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 >
@@ Řádek 136: / Řádek 158: @@
 }
 </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 >
@@ Řádek 144: / Řádek 167: @@
 }
 </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 >
@@ Řádek 149: / Řádek 176: @@
 a:focus:hover {background: white;}
 </code>
+<----
+---->
 První podřízený prvek jiného prvku:
 <code css >
@@ Řádek 154: / Řádek 185: @@
 p:first-child em {font-weight: bold;}
 </code>
-První, druhá, předposlední a poslední buňka tabulky:
+<----
+---->
+První, druhá, předposlední a poslední buňka tabulky:
 <code css >
 td:first-child {width: 20%;}
@@ Řádek 168: / Řádek 202: @@
 }
 </code>
+<----
+---->
 Příklad různého nastavení dvojice uvozovek pro celý dokument a atribut prvku <cite> v jazyce čeština a angličtina:
@@ Řádek 175: / Řádek 213: @@
 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>
+<----