Cascading Style Sheets CSS Selektory Selektory

Rozměr: px

Začít zobrazení ze stránky:

Download "Cascading Style Sheets CSS Selektory Selektory"

Ondřej Marek
před 8 lety
Počet zobrazení:

1 CSS <!DOCTYPEHTMLPUBLIC"/W3C/DTDHTML4.0/EN"> JohanSebastianBachwasaprolificomposeṙ <HTML><HEAD><TITLE>Bach'shomepage TITLE> <STYLEtype="text/cs"> BODY><H1>Bach'shomepage H1> 1{color:red} h STYLE> HEAD> < BODY> HTML> Cascading Style Sheets současná verze: 2.1 W3C Candidate Recommendation * libovolný element E element E E F F potomek E E > F F syn E E:first-child E, který je prvním synem svého otce Selektory Selektory E:link E je zdrojová kotva nenavštíveného odkazu E:visited E je zdrojová kotva navštíveného odkazu E:active E je uživatelem právě aktivován E:hover nad E se vznáší myš E:focus E má focus

STYLE> HEAD> < BODY> HTML> Cascading Style Sheets současná verze: 2.

2 Selektory E:lang(c) E je jazyka c E + F F je bezprostředním bratrem E E[foo] E má nastaven atribut foo E[foo="bar"] E má nastaven atribut foo na bar E[foo~="bar"] E, jehož atribut foo je seznamem mezerami oddělených hodnot, z nichž jedna je bar Selektory E[foo ="bar"] E, jehož atribut foo je seznamem pomlčkami oddělených hodnot, z nichž první je bar E.foo pro HTML zkratka za E[class~="foo"] E#foo E, jehož ID je foo Selektory h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } h1, h2, h3 { font-family: sans-serif } [lang=fr],.warning, #myid div p *[href] div ol>li p h1.opener + h2 *[lang ="en"] p.pastoral.marine a:focus:hover :first-line :first-letter :before :after Pseudoelementy

foo pro HTML zkratka za E[class~="foo"] E#foo E, jehož ID je foo Selektory h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } h1, h2, h3 {

3 1. styly prohlížeče 2. styly uživatele 3. styly autora 4. important styly autora 5. important styly uživatele Kaskáda Uvnitř skupin rozhoduje specifičnost selektorů, při shodě vítězí poslední. url("fancyfonts.css") print { p { font-family: serif; } } all, braille, embossed, handheld, print, projection, screen, speech, tty, tv px em, ex in, cm, mm, pt, pc procenta Velikosti Barvy aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow ActiveBorder, ActiveCaption, AppWorkspace, #08f, #0088ff, rgb(0, 136, 255), rgb(0%, 53%, 100%) transparent

css") screen; @media print { p { font-family: serif; } } all, braille, embossed, handheld, print, projection, screen, speech, tty, tv px em, ex in, cm, mm,

4 Barvy a pozadí color background-color background-image background-repeat repeat, repeat-x, repeat-y, no-repeat background-attachment scroll, fixed background Box model Box model Margin margin (margin-top, margin-right, margin-bottom, margin-left) auto marginy se hroutí Padding padding (padding-top, padding-right, padding-bottom, paddingleft) Box model Okraje border-width (border-top-width, border-right-width, borderbottom-width, border-left-width) thin, medium, thick border-color (border-top-color, border-right-color, borderbottom-color, border-left-color) border-style (border-top-style, border-right-style, borderbottom-style, border-left-style) none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

Okraje border-width (border-top-width, border-right-width, borderbottom-width, border-left-width) thin, medium, thick border-color (border-top-color, border-right-color,

5 Box model Okraje border-top, border-right, border-bottom, border-left border Vizuální formátování Anonymní blokový box someemphasized em>text p> <div>sometext p>moretext p> < div> Anonymní inline box Vizuální formátování display block, inline, none, inline-block list-item run-in table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption position static, relative, abolute, fixed float left, right, none clear none, left, right, both Vizuální formátování width, min-width, max-width height, min-height, max-height line-height vertical-align baseline, middle, sub, super, text-top, text-bottom, top, bottom

table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption position static, relative, abolute, fixed float left, right, none clear none,

6 Generovaný obsah pseudoelementy :before a :after content normal string uri counter attr(identifier) open-quote, close-quote, no-open-quote, no-close-quote quotes Generovaný obsah citace uotes:"\201e"\201c"\201a"\2018"; uotes:"\201c"\201d"\2018"\2019"; q{fontstyle:italic; }q:before{content:openquote; }q:after{content:closequote; }q:lang(en){ q } Vizuální efekty overflow visible, hidden, scroll, auto clip rect(top, right, bottom, left) visibility visible, hidden, collapse Generovaný obsah ṗnote:before{content:"note:"} {border:solidgren} ontent:"theend"; body:after{ isplay:block; argintop:2em; extalign:center; cd mt }

}q:after{content:closequote; }q:lang(en){ q } Vizuální efekty overflow visible, hidden, scroll, auto clip rect(top, right, bottom, left) visibility

7 Generovaný obsah seznamy list-style-type disc, circle, square, decimal, decimal-leading-zero, lower-roman, upperroman, lower-greek, lower-latin, upper-latin, armenian, georgian, none list-style-image list-style-position inside, outside list-style Stránkovaná média page-break-before auto, always, avoid, left, right page-break-after auto, always, avoid, left, right page-break-inside auto, avoid orphans widows Generovaný obsah číslování counter-reset counter-increment counterbincrement:chapter;/*ad1tochapter*/ counterbreset:section;/*setsectionto0*/ ontent:"chapter"counter(chapter)"."; ontent:counter(chapter)"."counter(section)"; }h1:before{content:counter(chno,uperblatin)"."} h2:before{content:counter(section,uperbroman)"b"} divṇote:before{content:counter(notecntr,disc)"} counterbincrement:section; h1:before{ }h2:before{ c arginleft:4cm; }@page:right{ arginleft:3cm; arginright:4cm; }@page:first{ argintop:10cm m}

orphans widows Generovaný obsah číslování counter-reset counter-increment counterbincrement:chapter;/*ad1tochapter*/ counterbreset:section;/*setsectionto0*/ ontent:"chapter"counter(chapter)".

8 Písmo font-family serif, sans-serif, cursive, fantasy, monospace "NimbusSansL","DejaVuSans"șansbserif font-style normal, italic, oblique font-variant normal, small-caps font-weight normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 Písmo font-size xx-small, x-small, small, medium, large, x-large, xx-large smaller, larger px, em, ex, in, cm, mm, pt, pc font caption, icon, menu, message-box, small-caption, status-bar Text text-indent text-align left, right, center, justify text-decoration none, underline, overline, line-through, blink letter-spacing word-spacing text-transform capitalize, uppercase, lowercase, none white-space normal, pre, pre-wrap, pre-line Tabulky display table, inline-table, table-row, table-row-group, table-header-group, tablefooter group, table-column, table-column-group, table-cell, table-caption sloupce: border, background, width, visibility caption-side top, bottom table-layout auto, fixed vertical-align baseline, top, bottom, middle visibility collapse

icon, menu, message-box, small-caption, status-bar Text text-indent text-align left, right, center, justify text-decoration none, underline, overline, line-through, blink letter-spacing word-spacing

9 border-collapse collapse, separate border-spacing empty-cells show, hide Tabulky Uživatelské rozhraní cursor auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n- resize, se-resize, sw-resize, s-resize, w-resize, text, wait, progress, help uri outline-width, outline-style, outline-color outline Vývoj Historie CSS 1 W3C Recommendation , revised CSS 2 W3C Recommendation CSS 2.1 W3C Candidate Recommendation W3C Working Draft Budoucnost modularizace Odkazy a literatura Odkazy W3C Cascading Style Sheets Home Page Jak psát web W3C CSS Validation Service CSS Zen Garden Literatura Petr Staníček: CSS Kaskádové styly, kompletní průvodce Petr Staníček: CSS, hotová řešení

Podobné dokumenty

1: Úvod 9. Co a kde v knize naleznete... 9 Zdroje Doporučení pro další studium... 11

1: Úvod 9. Co a kde v knize naleznete... 9 Zdroje Doporučení pro další studium... 11 Obsah 3 1: Úvod 9 Dříve než začnete......................... 9 Co a kde v knize naleznete....................... 9 Zdroje............................... 10 Doporučení pro další studium.....................