Studio Deštník

Dnes je čtvrtek 23. listopadu 2017.
http://destnik.wz.cz
destnik@seznam.cz

Opera
Získejte Firefox!

Valid HTML 4.0!

Valid CSS!

CSS cascading style sheets

Pomocí kaskádových stylů můžeme ovládat formátování několika stránek najednou. Tímto dosáhneme jejich grafické podobnosti. Kaskádovými styly můžeme řídit velikost textu, jeho barvu, styl atd., ale i komplexně barvu pozadí, resp. url obrázku na pozadí.

Obsah:
  1. Připojení kaskádových stylů k dokumentu a základní informace
  2. Vlastnosti písma a textu
  3. Vlastnosti barev a pozadí
  4. Vlastnosti boxů
  5. Klasifikační vlastnosti
  6. Vlastnosti pro určení pozice
  7. Vlastnosti na straně prohlížeče
  8. Tvorba CSS souborů a praktické použití kaskádových stylů

  1. Připojení kaskádových stylů k dokumentu a základní informace
    Připojení CSS k HTML dokumentu provádíme :
    1. pomocí tagu LINK v hlavičce dokumentu: <LINK REL=StyleSheet TYPE=text/css HREF="url"> pokud se jedná o externí soubor s příponou .CSS.
    2. pomocí tagu STYLE v hlavičce dokumentu: <STYLE TYPE=text/css> definice stylu </STYLE>
    3. nebo pomocí elementu STYLE přímo v daném tagu: <TAG STYLE="definice stylu">

    Vysvětlení značek :
      A | B   Právě jedna z entit A a B
      A || B   Alespoň jedna z entit A a B
      [ ... ]   Skupiny
      ?   Předcházející entita je nepovinná
      {A,B}   Předcházející entita se opakuje najméně A-krát a nejvíce B-krát

    Typy elementů v HTML :
    • Blokové elementy jsou ty elementy, před i za kterými je zalomena řádka (např. H1, P).
    • Inline elementy jsou běžnou součástí texty na řádce. Nemají okolo sebe žádné zalomení řádek (např. B, STRONG).
    • Nahrazované elmety jsou ty, které jsou nahrazeny nějakým obsahem a pro jejichž zařazení do okolního textu stránky jsou důležité pouze jejich rozměry (např. IMG, OBJECT).

    Základní typy písem :
      serif   - patkové písmo (např. Times Roman)
      sans-serif   - bezpatkové písmo (např. Arial)
      cursive   - ozdobná kurzíva (např. Zapf-Chancery)
      fantasy   - ozdobné písmo
      monospace   - neproporcionální písmo (např. Courier)
    Pozn.: tyto typy písem se doporučuje vždy umisťovat na konec řady písem, např. {font-family: Garamond, Times, serif;}

    Jednotky použitelné v CSS :
      em   - výška aktuálního písma, odpovídá šířce písmene M
      ex   - výška písmene x
      px   - pixely, 1px=1 bod obrazovky
      in   - palce, 1in=2,54cm=72pt
      cm   - centimetry
      mm   - milimetry
      pt   - body, 1pt=1/72in=1/12pc=0,36mm
      pc   - pica, 1pc=12pt


  2. Vlastnosi písma a textu:
    VlastnostMožné hodnotyImplicitní hodnotaAplikuje se naDědí sePopis
    font-familyseznam písemzál.na prohl.všechny el.anorodina písma
    font-stylenormal | italic | obliquenormalvšechny el.anostyl písma, normal=normální, italic=kurzíva, oblique=skloněné
    font-variantnormal | small-capsnormalzál.na prohl.anonormální nebo kapitálky
    font-weightnormal | bold | bolder | lighter | 100 | 200 | ... | 900normal=400všechny el.anoduktus (tloušťka) písma
    font-sizexx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | délka | procentomediumvšechny el.anovelikost písma
    fontpředešlé vlastnosti...všechny el.anokomplexní nastavení vlastností písma
    word-spacingnormal | délkanormalvšechny el.anoo kolik se má zvětšit mezislovní mezera
    letter-spacingnormal | délkanormalvšechny el.anoo kolik se má zvětšit mezi mezi písmeny
    text-decorationnone | [underline || overline || line-through || blink]nonevšechny el.neozdoba písma, underline=podtržení, overline=čára nad, line-through=čára přes, blink=blikání
    vertical-alignbaseline | sub | super | top | text-top | middle | bottom | text-bottom | procentobaselineinline el.anovertikální zarovnání
    text-transformcapitalize | uppercase | lowercase | nonenonevšechny el.anopřevod textu na: cap.=kapitálky, upper.=velká pís., lower.=malá písmena
    text-alignleft | right | center | justifyzál.na prohl.blokové el.anozarovnání textu: left=doleva, right=doprava, center=na střet, justify=do bloku
    text-indentdélka | procento0blokové el.anovelikost odstavcové odrážky
    line-heightnormal | číslo | délka | procentonormalvšechny el.anovýška řádky, číslo udává násobek vel. písma (většinou aspoň 1,2)
  3. Vlastnosti barev a pozadí
    VlastnostMožné hodnotyImplicitní hodnotaAplikuje se naDědí sePopis
    colorRRGGBBzál.na prohl.všechny el.anobarva písma
    background-colorRRGGBB | transparenttransparentvšechny el.nebarva pozadí
    background-imageURL | nonenonevšechny el.neobrázek na pozadí
    background-repeatrepeat | repeat-x | repeat-y | no-repeatrepeatvšechny el.nesměry opak. pozadí
    background-attachmentscroll | fixedscrollvšechny el.nepozadí se pohybuje se stránkou (scroll) nebo je pevné (fixed)
    background-position[procento | délka]{1,2} | [top | center | bottom] || [left | center | right]0% 0% (=top left)blokové a nahrazované el.nepoloha obrázku na pozadí (X a Y souř.)
    backgroundpředešlé vlastnosti...všechny el.nekomplexní nastavení vlastností pozadí
  4. Vlastnosti boxů
    VlastnostMožné hodnotyImplicitní hodnotaAplikuje se naDědí sePopis
    margin-topdélka | procento | auto0všechny el.nevelikost horního okraje
    margin-rightdélka | procento | auto0všechny el.nevelikost pravého okraje
    margin-bottomdélka | procento | auto0všechny el.nevelikost dolního okraje
    margin-leftdélka | procento | auto0všechny el.nevelikost levého okraje
    margin[délka | procento | auto] {1,4}impl. hodn. jednotl. vlast.všechny el.nekomplexní nastavení velikostí okraů
    padding-topdélka | procento0všechny el.nevelikost vnitřního pravého okraje
    padding-rightdélka | procento0všechny el.nevelikost vnitřního pravého okraje
    padding-botomdélka | procento0všechny el.nevelikost vnitřního dolního okraje
    padding-leftdélka | procento0všechny el.nevelikost levého vnitřního okraje
    padding[délka | procento] {1,4}0všechny el.nekomplexní nastavení velikosti vnitřního okraje
    border-top-widththin | medium | thick | délkamediumvšechny el.nešířka horní části rámečku
    border-right-widththin | medium | thick | délkamediumvšechny el.nešířka pravé části rámečku
    border-bottom-widththin | medium | thick | délkamediumvšechny el.nešířka dolní části rámečku
    border-left-widththin | medium | thick | délkamediumvšechny el.nešířka levé části rámečku
    border-widththin | medium | thick | délkaimpl. hodn. jednotl. vlast.všechny el.nekomplexní nastaení šířky rámečku
    border-colorbarva {1,4}hodn. vlast. colorvšechny el.nebarva rámečku
    border-style[none | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4}nonevšechny el.nenastavení tvaru rámečku
    border-topborder-top-width || border-style || barvaimpl. hodn. jednotl. vlast.všechny el.nenastav. vlast. horní části rámečku
    border-rightborder-right-width || border-style || barvaimpl. hodn. jednotl. vlast.všechny el.nenastav. vlast. pravé části rámečku
    border-bottomborder-bottom-width || border-style || barvaimpl. hodn. jednotl. vlast.všechny el.nenastav. vlast. dolní části rámečku
    border-leftborder-left-width || border-style || barvaimpl. hodn. jednotl. vlast.všechny el.nenastav. vlast. levé části rámečku
    borderborder-width || border-style || barvaimpl. hodn. jednotl. vlast.všechny el.nekomplexní nastav. vlast. rámečku
    widthdélka | procento | autoautoblokové a nahrazované elementynešířka
    heightdélka | autoautoblokové a nahrazované el.nevýška
    floatleft | right | nonenonevšechny el.neumístění plovoucího objektu: left=vlevo, right=vpravo, none=normální objekt
    clearnone | left | right | bothnonevšechny el.nečekání na skočení plovoucích elementů: left=vlevo, right=vpravo, both=na obou stranách
  5. Klasifikační vlastnosti
    VlastnostMožné hodnotyImplicitní hodnotaAplikuje se naDědí sePopis
    displayinline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit blockvšechny el.nezpůsob zobrazení elementu
    white-spacenormal | pre | nowrapnormalblokové el.anozpůsob práce s mezerami, normal=normální, pre=mezery a konce řádek se zachovávají, nowrap=text se nebude zalamovat do řádek
    list-style-typedisc | circle | square | decimal | lower-roman | upprer-roman | lower-alpha | upper-alpha | nonediscel. mající display:list-itemanodruh odráže v seznamu
    list-style-imageURL | nonenoneel. mající display:list-itemanoobrázek použitý jako odrážka v seznamu
    list-style-positioninside | outsideoutsideel. mající display:list-itemanoumístění odrážky: outside=před textem, inside=uvnitř textu seznamu
    list-stylelist-style-type || list-style-position || list-style-imageimpl. hodn. jednotl. vlast.el. mající display:list-itemanokomplexní nastavení položek seznamu
  6. Vlastnosti pro určení pozice
    VlastnostMožné hodnotyImplicitní hodnotaAplikuje se naDědí sePopis
    positionabsolute | relative | staticstaticvšechny el.anozpůsob umístění elementu; static odpovídá běžnému formátování
    leftdélka | procento | autoautovšechny el.neposunutí el. vpravo, pokud je záporný pak vlevo
    topdélka | procento | autoautovšechny el.neposunutí el. dolů, pokud je záporný pak nahoru
    widthdélka | procento | autoautoblokové a nahrazované el. a el. mající position:absolute;nešířka elementu
    heightdélka | procento | autoautoblokové a nahrazované el. a el. mající position:absolute;nevýška elementu
    clipauto | rect([délka | auto] [délka | auto] [délka | auto] [délka | auto])autoel. mající position:absolute;nedefinice obdélníkové části el., která bude vidět (standartně je vidět celý el.)
    overflownone | clip | scrollnoneel. s relativní nebo absolutní pozicínezpůs. zobraz. el., jejichž obsah se nevejde do zobraz. prostoru; none=obsah el. přeteče, clip=obsah bude zaříznut, scroll=po obsahu půjde scrollovat
    z-indexauto | čísloautoel. s relativní nebo absolutní pozicínepozice el. na pseudoose z
    visibilityinherit | visible | hiddeninheritvšechny el.pro inheritviditelnost el.; visible=viditelný, hidden=skrytý
  7. Vlastnosti na straně prohlížeče
    VlastnostMožné hodnotyImplicitní hodnotaAplikuje se naDědí sePopis
    cursorauto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help různévšechny el.anoikona kurzoru myši
    scrolling-face-colorRGB | barvarůznéBODYanopopředí scrolovací lišty - 1 (od IE 5.5)
    scrolling-hightlight-colorRGB | barvarůznéBODYanostínování scrolovací lišty -2 (od IE 5.5)
    scrolling-3dlight-colorRGB | barvarůznéBODYanostínování scrolovací lišty - 3 (od IE 5.5)
    scrolling-shadow-colorRGB | barvarůznéBODYanostínování scrolovací lišty - 4 (od IE 5.5)
    scrolling-darkshadov-colorRGB | barvarůznéBODYanostínování scrolovací lišty - 5 (od IE 5.5)
    scrolling-track-colorRGB | barvarůznéBODYanopozadí scrolovací lišty - 6 (od IE 5.5)
    scrolling-arrow-colorRGB | barvarůznéBODYanošipky scrolovací lišty - 7 (od IE 5.5)

    vlastnosti scrollovací lišty
  8. Tvorba CSS souborů a praktické použití kaskádových stylů
    V CSS souboru se zpravidla vlastnosti jednotlivých elementů zapisují takto:
    ELEMENT1     { vlastnost1: hodnota; vlastnost2: hodnota; vlastnost3: hodnota; ...}
    ELEMENT2     { vlastnost1: hodnota; vlastnost2: hodnota; vlastnost3: hodnota; ...}
    ...
    Elementům se v tomto případě říká selektory a vlastnostem a jejim hodnotám deklarace.
    Př.:
    BODY          { font-family: Garamond, Times, serif; color: #FFFFFF; background-color: #000080; text-align: justify; }
    H1          { font-size: 16pt; text-align: center; }
    A          { text-decoration: none; color: #FFFF33; font-weight: 300; }
    Kromě již definovaných HTML elemetů mužeme zvoli jesště tzv. třídy. Ty se zapisují jako vlastnost daného elementu přimo do tagu: <A CLASS="trida" HREF="index.html">. Takovéto třídy potom v CSS definujeme takto:
    .trida1          { vlastnost1: hodnota; vlastnost2: hodnota; vlastnost3: hodnota; ...}
    .trida2          { vlastnost1: hodnota; vlastnost2: hodnota; vlastnost3: hodnota; ...}
    ...
    Př.:
    .bila          { font-style: italic; color: white; }
    .mail          { font-family: monospace; font-size: 10pt; }
    Stejným způsobem se kaskádové styly zapisují i mezi značky <STYLE TYPE=text/css>   </STYLE>.

Obsah | Další příklady užití