Dnes je neděle 28. února 2021.
http://destnik.wz.cz
destnik@seznam.cz
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:Vlastnost | Možné hodnoty | Implicitní hodnota | Aplikuje se na | Dědí se | Popis |
---|---|---|---|---|---|
font-family | seznam písem | zál.na prohl. | všechny el. | ano | rodina písma |
font-style | normal | italic | oblique | normal | všechny el. | ano | styl písma, normal=normální, italic=kurzíva, oblique=skloněné |
font-variant | normal | small-caps | normal | zál.na prohl. | ano | normální nebo kapitálky |
font-weight | normal | bold | bolder | lighter | 100 | 200 | ... | 900 | normal=400 | všechny el. | ano | duktus (tloušťka) písma |
font-size | xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | délka | procento | medium | všechny el. | ano | velikost písma |
font | předešlé vlastnosti | ... | všechny el. | ano | komplexní nastavení vlastností písma |
word-spacing | normal | délka | normal | všechny el. | ano | o kolik se má zvětšit mezislovní mezera |
letter-spacing | normal | délka | normal | všechny el. | ano | o kolik se má zvětšit mezi mezi písmeny |
text-decoration | none | [underline || overline || line-through || blink] | none | všechny el. | ne | ozdoba písma, underline=podtržení, overline=čára nad, line-through=čára přes, blink=blikání |
vertical-align | baseline | sub | super | top | text-top | middle | bottom | text-bottom | procento | baseline | inline el. | ano | vertikální zarovnání |
text-transform | capitalize | uppercase | lowercase | none | none | všechny el. | ano | převod textu na: cap.=kapitálky, upper.=velká pís., lower.=malá písmena |
text-align | left | right | center | justify | zál.na prohl. | blokové el. | ano | zarovnání textu: left=doleva, right=doprava, center=na střet, justify=do bloku |
text-indent | délka | procento | 0 | blokové el. | ano | velikost odstavcové odrážky |
line-height | normal | číslo | délka | procento | normal | všechny el. | ano | výška řádky, číslo udává násobek vel. písma (většinou aspoň 1,2) |
Vlastnost | Možné hodnoty | Implicitní hodnota | Aplikuje se na | Dědí se | Popis |
---|---|---|---|---|---|
color | RRGGBB | zál.na prohl. | všechny el. | ano | barva písma |
background-color | RRGGBB | transparent | transparent | všechny el. | ne | barva pozadí |
background-image | URL | none | none | všechny el. | ne | obrázek na pozadí |
background-repeat | repeat | repeat-x | repeat-y | no-repeat | repeat | všechny el. | ne | směry opak. pozadí |
background-attachment | scroll | fixed | scroll | všechny el. | ne | pozadí 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. | ne | poloha obrázku na pozadí (X a Y souř.) |
background | předešlé vlastnosti | ... | všechny el. | ne | komplexní nastavení vlastností pozadí |
Vlastnost | Možné hodnoty | Implicitní hodnota | Aplikuje se na | Dědí se | Popis |
---|---|---|---|---|---|
margin-top | délka | procento | auto | 0 | všechny el. | ne | velikost horního okraje |
margin-right | délka | procento | auto | 0 | všechny el. | ne | velikost pravého okraje |
margin-bottom | délka | procento | auto | 0 | všechny el. | ne | velikost dolního okraje |
margin-left | délka | procento | auto | 0 | všechny el. | ne | velikost levého okraje |
margin | [délka | procento | auto] {1,4} | impl. hodn. jednotl. vlast. | všechny el. | ne | komplexní nastavení velikostí okraů |
padding-top | délka | procento | 0 | všechny el. | ne | velikost vnitřního pravého okraje |
padding-right | délka | procento | 0 | všechny el. | ne | velikost vnitřního pravého okraje |
padding-botom | délka | procento | 0 | všechny el. | ne | velikost vnitřního dolního okraje |
padding-left | délka | procento | 0 | všechny el. | ne | velikost levého vnitřního okraje |
padding | [délka | procento] {1,4} | 0 | všechny el. | ne | komplexní nastavení velikosti vnitřního okraje |
border-top-width | thin | medium | thick | délka | medium | všechny el. | ne | šířka horní části rámečku |
border-right-width | thin | medium | thick | délka | medium | všechny el. | ne | šířka pravé části rámečku |
border-bottom-width | thin | medium | thick | délka | medium | všechny el. | ne | šířka dolní části rámečku |
border-left-width | thin | medium | thick | délka | medium | všechny el. | ne | šířka levé části rámečku |
border-width | thin | medium | thick | délka | impl. hodn. jednotl. vlast. | všechny el. | ne | komplexní nastaení šířky rámečku |
border-color | barva {1,4} | hodn. vlast. color | všechny el. | ne | barva rámečku |
border-style | [none | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | none | všechny el. | ne | nastavení tvaru rámečku |
border-top | border-top-width || border-style || barva | impl. hodn. jednotl. vlast. | všechny el. | ne | nastav. vlast. horní části rámečku |
border-right | border-right-width || border-style || barva | impl. hodn. jednotl. vlast. | všechny el. | ne | nastav. vlast. pravé části rámečku |
border-bottom | border-bottom-width || border-style || barva | impl. hodn. jednotl. vlast. | všechny el. | ne | nastav. vlast. dolní části rámečku |
border-left | border-left-width || border-style || barva | impl. hodn. jednotl. vlast. | všechny el. | ne | nastav. vlast. levé části rámečku |
border | border-width || border-style || barva | impl. hodn. jednotl. vlast. | všechny el. | ne | komplexní nastav. vlast. rámečku |
width | délka | procento | auto | auto | blokové a nahrazované elementy | ne | šířka |
height | délka | auto | auto | blokové a nahrazované el. | ne | výška |
float | left | right | none | none | všechny el. | ne | umístění plovoucího objektu: left=vlevo, right=vpravo, none=normální objekt |
clear | none | left | right | both | none | všechny el. | ne | čekání na skočení plovoucích elementů: left=vlevo, right=vpravo, both=na obou stranách |
Vlastnost | Možné hodnoty | Implicitní hodnota | Aplikuje se na | Dědí se | Popis |
---|---|---|---|---|---|
display | inline | 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 | block | všechny el. | ne | způsob zobrazení elementu |
white-space | normal | pre | nowrap | normal | blokové el. | ano | způ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-type | disc | circle | square | decimal | lower-roman | upprer-roman | lower-alpha | upper-alpha | none | disc | el. mající display:list-item | ano | druh odráže v seznamu |
list-style-image | URL | none | none | el. mající display:list-item | ano | obrázek použitý jako odrážka v seznamu |
list-style-position | inside | outside | outside | el. mající display:list-item | ano | umístění odrážky: outside=před textem, inside=uvnitř textu seznamu |
list-style | list-style-type || list-style-position || list-style-image | impl. hodn. jednotl. vlast. | el. mající display:list-item | ano | komplexní nastavení položek seznamu |
Vlastnost | Možné hodnoty | Implicitní hodnota | Aplikuje se na | Dědí se | Popis |
---|---|---|---|---|---|
position | absolute | relative | static | static | všechny el. | ano | způsob umístění elementu; static odpovídá běžnému formátování |
left | délka | procento | auto | auto | všechny el. | ne | posunutí el. vpravo, pokud je záporný pak vlevo |
top | délka | procento | auto | auto | všechny el. | ne | posunutí el. dolů, pokud je záporný pak nahoru |
width | délka | procento | auto | auto | blokové a nahrazované el. a el. mající position:absolute; | ne | šířka elementu |
height | délka | procento | auto | auto | blokové a nahrazované el. a el. mající position:absolute; | ne | výška elementu |
clip | auto | rect([délka | auto] [délka | auto] [délka | auto] [délka | auto]) | auto | el. mající position:absolute; | ne | definice obdélníkové části el., která bude vidět (standartně je vidět celý el.) |
overflow | none | clip | scroll | none | el. s relativní nebo absolutní pozicí | ne | způ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-index | auto | číslo | auto | el. s relativní nebo absolutní pozicí | ne | pozice el. na pseudoose z |
visibility | inherit | visible | hidden | inherit | všechny el. | pro inherit | viditelnost el.; visible=viditelný, hidden=skrytý |
Vlastnost | Možné hodnoty | Implicitní hodnota | Aplikuje se na | Dědí se | Popis |
---|---|---|---|---|---|
cursor | auto | 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. | ano | ikona kurzoru myši |
scrolling-face-color | RGB | barva | různé | BODY | ano | popředí scrolovací lišty - 1 (od IE 5.5) |
scrolling-hightlight-color | RGB | barva | různé | BODY | ano | stínování scrolovací lišty -2 (od IE 5.5) |
scrolling-3dlight-color | RGB | barva | různé | BODY | ano | stínování scrolovací lišty - 3 (od IE 5.5) |
scrolling-shadow-color | RGB | barva | různé | BODY | ano | stínování scrolovací lišty - 4 (od IE 5.5) |
scrolling-darkshadov-color | RGB | barva | různé | BODY | ano | stínování scrolovací lišty - 5 (od IE 5.5) |
scrolling-track-color | RGB | barva | různé | BODY | ano | pozadí scrolovací lišty - 6 (od IE 5.5) |
scrolling-arrow-color | RGB | barva | různé | BODY | ano | šipky scrolovací lišty - 7 (od IE 5.5) |
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.
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>.