spse:pm3:css-uvod

Rozdíly

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

Odkaz na výstup diff

Obě strany předchozí revize Předchozí verze
Následující verze		 Předchozí verze
spse:pm3:css-uvod [2020/10/20 20:12] – jendaspse:pm3:css-uvod [2024/07/07 16:48] (aktuální) – upraveno mimo DokuWiki 127.0.0.1
Řádek 47: Řádek 47:
 </style> </style>
 </code> </code>
 +---->
   * Použitím externího stylopisu - soubor *.css   * Použitím externího stylopisu - soubor *.css
     * na který se stránka odkazuje tagem <link>.     * na který se stránka odkazuje tagem <link>.
Řádek 52: Řádek 53:
     * Hlavní výhodou snadná duplicita a editace.     * Hlavní výhodou snadná duplicita a editace.
     * <code html><link rel="stylesheet" type="text/css" href="styly.css"></code>     * <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 ==== ==== Syntax CSS ====
   * CSS nejsou součástí HTML – odlišnost zápisu!   * CSS nejsou součástí HTML – odlišnost zápisu!
Řádek 59: Řádek 66:
   * Je nutné všimnout si, kde se používají uvozovky, dvojtečky, složené závorky, středníky a čárky.   * 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
  • spse/pm3/css-uvod.1603224723.txt.gz
  • Poslední úprava: 2024/07/07 16:48
  • (upraveno mimo DokuWiki)