1 / 17

CSS – Kaskádové styly

CSS – Kaskádové styly. Labsky @vse.cz IZI 228. k ontextový selektor pro < a > u vnitř <p>. Pravidlo CSS. selektor { d eklarace } h1 { text-align: center; color: blue } h 2 , h3 { margin: 10px; font-style: italic; border: 1 px } p a { text-decoration: none; font-weight: bold;

bowie
Download Presentation

CSS – Kaskádové styly

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS – Kaskádové styly Labsky@vse.cz IZI 228

  2. kontextový selektor pro <a> uvnitř <p> Pravidlo CSS selektor {deklarace} h1 {text-align: center; color: blue} h2, h3{margin: 10px;font-style: italic;border: 1px} p a { text-decoration: none; font-weight: bold; font-family: helvetica; } vybere 1 nebo více elementů z dokumentu určí jejich formátovací vlastnosti

  3. třída pseudotřída (vybírá pouze určité výskyty elementu) pseudoelement (vybírá jen části elementu) a:link {color: red} a:visited {color: blue} a:active{color: lime} p {font-size: 12pt} p:firstletter {font-size: 200%; float: left} p:firstline {font-variant: small-caps} Pravidlo CSS (2) - selektory p.novinka {letter-spacing: 0.3em; background-color: green;} .novinka {background-image: url(new.png); } generická třída <p class=“novinka”>Erant in quadam civitate rex et regina.</p>

  4. Dědičnost Hodnoty některých vlastností se dědí na obsažené elementy: p.novinka {color: blue} <p class=“novinka”>Hiantibus Filium Diu ac<em>Pressule</em> Iamque proximas civitates et attiguas regiones fama pervaserat deam.</p> • Dědičné CSS vlastnosti: • většina vlastností písma (font-*), • barva, horiz. zarovnání textu (text-align), • odsazení první řádky odstavce (text-indent), • způsob práce s mezerami (white-space) • Nedědičné: • vlastnosti pozadí (background-*), • velikost elementu a okrajů, ohraničení (padding-*,border-*, margin-*) • plovoucí vlastnosti (float, clear) • podtržení resp. přeškrtnutí textu (text-decoration), • vertikální zarovnání textu (vertical-align)

  5. I. Odkazem z <head> dokumentu na sdílený styl: <linkrel="stylesheet" type="text/css" href="http://server/styl.css"> styl.css II. V <head> pro 1 dokument: @import url(http://server/basic.css); h1, h2, h3, p { text-align: left; } /* specialni nadpis */ h1.zeleny { color: #00FF00; } <styletype="text/css"> <!-- h1, h2, h3, p { text-align: left } h1.zeleny { color: #00FF00 } --> </style> III. Přímo pro výskyt elementu: <p style=“text-align:center; color:blue"> … </p> Připojení CSS k dokumentu

  6. Aplikace v kaskádě • Autor může uplatnit více stylů, • uživatel může teoreticky aplikovat své styly, • na element se může vztahovat více pravidel i v rámci 1 stylu •  Přednost mají: • specifičtější pravidla • h1 em{color: red}vs.em {color: green;} • později uvedená pravidla v pořadí: • style atribut, • class atribut, • pravidla v elementech <style> a <link> dle pořadí uvedení elementů, • implicitní hodnota dle prohlížeče. • (pravidla v importujícím stylu mají přednost před importovanými)

  7. Typy vlastností CSS • Písmo (font-*) • Barvy a pozadí (color, background-*) • Text (text-*, …) • Box (margin-*, padding-*, border-*, …) • Řízení pozice • Klasifikační vlastnosti

  8. jméno (jména) fontů generická rodina písma jako poslední alternativa, podporovány jsou: (serif, sans-serif, cursive, fantasy, monospace) font-style: normal | italic | oblique font-variant: normal | small-caps italika sešikmený font-weight:normal | bold | bolder | lighter | 100 | 200 | … | 900 400 700 font-size:<absolutní velikost> | <rel. velikost> | <jednotky> | <procenta> • Procenta a jednotky em a ex • se zde vztahují k velikosti • textu nadřazeného elementu • xx-small | x-small | small | medium • | large | x-large | xx-large • smaller | larger (všechny se dědí) Vlastnosti písma font-family: "new century schoolbook", times,serif

  9. background-image: <url> | none table { background-image: url(globus.png) } background-repeat: repeat | repeat-x | repeat-y | no-repeat background-attachment: scroll | fixed center center right bottom left top … 50% 50% 100% 100% 50% 2cm 5cm 50px B background-position:0% 0% nebo pomocí slov pomocí procent a délek (dědí se jen color) Vlastnosti barev a pozadí červenou zadáte jedním z 5 způsobů: color: <barva> em { color:red} em { color: #f00 } em { color: #ff0000 } em { color: rgb(255,0,0) } em { color: rgb(100%, 0%, 0%)} background-color: <barva> | transparent

  10. (nedědí se text-decoration, vertical-align) Vlastnosti textu word-spacing: normal|<jednotky> letter-spacing: normal|<jednotky> text-decoration: none |underline || overline || line-through || blink vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <procenta> I vertikální pozice inline elementu vzhledem k rodiči text-transform: none |capitalize | uppercase | lowercase B text-align: left| right | center | justify B text-indent: <jednotky> | <procenta> line-height: normal | <jednotky> | <procenta> | <číslo>

  11. implicitně 0 nadřazeného blokového elementu padding: <jednotky> | <procenta> | auto (padding-top -right -bottom -left) border-width: <jednotky> | thin | medium | thick {1,4} border-color: <barva> {1,4} implicitně totožné s color border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset {1,4} border-(top|right|bottom|left)-width, border-(top|right|bottom|left) (nedědí se) Vlastnosti boxů margin: <jednotky> | <procenta> | auto (margin-top -right -bottom -left) height width

  12. float: none|left | right plavat po levé resp. pravé straně nadřazeného elementu, text bude obtékat (pro inline elementy ruší jejich inline charakter – už nejsou součástí řádku). clear: none|left | right | both počkat na skončení plovoucích elementů vlevo, vpravo, resp. po obou stranách? Puellae supplicatur et in humanis vultibus deae tantae numina placantur, et in matutino progressu virginis et victimis et epulis veneris absentis nomen propitiatur, iamque per plateas et commeantem populi frequenter floribus sertis et solutis adprecantur. float: right Haec honorum clear: both Puellae supplicatur et in humanis vultibus deae tantae numina placantur, et in matutino progressu virginis et victimis et epulis veneris absentis nomen propitiatur, iamque per plateas et commeantem populi frequenter floribus sertis solutis adprecantur. (nedědí se) Plovoucí elementy B width: <jednotky> | <procenta> | auto B height: <jednotky> | <procenta> | auto

  13. (nedědí se) Řízení pozice position: static | relative | absolute | fixed | inherit jako absolutní poziční systém, ale element se nehýbe při scrollování klasický box v normální pozici pozice určí absolutní pozici elementu vzhledem k jeho nadřazenému blokovému elementu, na normální pozici nezabírá žádné místo pozice (top, right, bottom, left) určí jen posunutí elementu vzhledem k jeho normální pozici, na normální pozici je stále zabráno místo P top: auto | <jednotky> | <procenta> | inherit P left: určují umístění levého horního rohu obsahu elementu (viz box model) alternativně umístění pravého dolního rohu P right, bottom

  14. (dědí se visibility, white-space a list-style-*) Klasifikační vlastnosti display: block | list-item | inline | none img { display: none} visibility: inherit | visible|hidden P z-index: auto | <číslo> pokud je obsah moc veliký, má přetéci mimo vyhrazenou plochu, být oříznut, nebo scrollovat? P overflow: none| clip | scroll zalomení řádku se neděje automaticky dle šířky okna, ale jen explicitně pomocí <br> elementu B white-space: normal | pre |nowrap chování jako u <pre>(preformatted) elementu několik mezer, tabů, newlinů se smrskne vždy do 1 mezery list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none L L list-style-position: outside | inside list-style-image: <url> | none L L list-style-position: <type> || <position> || <image>

  15. Jednotky délky pro CSS • Relativní • px, • em, ex • Absolutní • cm, mm, • in (2.54 cm), pt (1/72 in), pc (12 pt)

  16. Shrnutí • Pravidlo =selektor{vlastnost: hodnota; …} • Dědičnost, kaskádovitá aplikace • CSS vlastnosti neodpovídají potenciálně podobným formátovacím vlastnostem v HTML (text-align a align, background a background) – konflikty • Nepoužívat formátování v HTML pokud lze aplikovat CSS • Zejména klasifikační a poziční vlastnosti CSS se vyplatí používatstřídmě • Ze skriptovacích jazyků můžete hodnoty CSS vlastností dynamicky měnit (dynamické HTML, příště)

  17. Odkazy • Stránky demonstrující užitečnost a sílu CSS – inspirace www.csszengarden.com • Layout stránky, sloupce, galerie s plovoucími obrázky, layout formulářů http://www.alistapart.com/stories/practicalcss/ • Sofistikované CSS layouty http://www.alistapart.com/topics/css • EditCSS plugin do Mozilla Firefox • Proč používat styly?http://www.w3schools.com/html/html_whyusehtml4.asp • W3C CSS1 a CSS2 standardhttp://www.w3.org/TR/REC-CSS1http://www.w3.org/TR/REC-CSS2

More Related