Wykorzystano fragmenty wykładów dra inż. J. Kuchty ARKUSZE STYLÓW CSS Waldemar Korłub KASK ETI Politechnika Gdańska
Motywacje Początkowe wersje języka HTML: <p align= center > <font color= red Treść </font> </p> size= 3 face= arial > 2
Motywacje Treść i sposób jej prezentacji wymieszane w jednym dokumencie Trudność w ponownym wykorzystaniu tych samych zestawów styli CSS: Rozdzielenie treści od formatowania Różne zestawy stylów w różnych kontekstach Możliwość ponownego użycia tych samych styli w wielu miejscach 3
CSS Dedykowana składnia: selektor { atrybut1: wartosc1, wartosc2; atrybut2: wartosc1, wartosc2;... } 4
Style w HTML CSS1 <HTML> <HEAD> <TITLE>title</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF= http://style.com/cool.css > <STYLE TYPE="text/css"> @import url(http://style.com/basic); H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Nagłówek jest niebieski</h1> <P STYLE="color: green"> Akapit jest zielony. </P> </BODY> </HTML> 5
Wartości atrybutów CSS1 Słowa kluczowe Miary długości (<length> = <absolute> <relative>) Bezwzględne (<absolute>): 1in, 2cm, 3mm, 4pt, 5pc Względne (<relative>): 1em, 2ex, 3px Procentowe (<percentage>): 150% URL (<url>): url(http://www.mysite.com/my.gif) Kolor (<color>) Wyliczany: (white black silver gray red green blue yellow maroon lime navy olive purple fuchsia aqua teal) RGB: rgb(255,255,128) 6
Właściwości czcionki CSS1 font-family: ((<family-name> <generic-family>),)* (<family-name> <generic-family>) family-name: np. Times, Helvetica generic-family: (serif sans-serif monospace cursive fantasy) font-size: ((xx-small x-small small medium large x-large xx-large) (smaller larger) <length> <percentage>) font-style: (normal italic oblique) font-weight: (normal bold bolder lighter 100 200 300 400 500 600 700 800 900) font-variant: (normal small-caps ) font: ( <font-style> <font-variant> <font-weight> )? ( <font-size> <line-height> )? <font-family>
Właściwości listy CSS1 list-style-type: (disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none) list-style-image: (<url> none) list-style-position: (inside outside) list-style: (<list-style-type> <list-style-position> <list-style-image>) 8
Właściwości koloru i tła CSS1 color: <color> background-color: <color> transparent background-image: (none <url>) background-repeat: (repeat repeat-x repeat-y norepeat) background-attachment: (scroll fixed) background-position: (<percentage> <length>){1,2} (top center bottom) (left center right) background: <background-color> <background-image> <backgroundrepeat> <background-attachment> <background-position> 9
Właściwości tekstu CSS1 word-spacing: (normal <length> ) letter-spacing: (normal <length> ) text-decoration: (none underline overline line-through blink) vertical-align: (baseline sub super top text-top middle bottom text-bottom) text-transform: ( capitalize uppercase lowercase none ) text-align: (left right center justify ) text-indent: (<length> <percentage> ) line-height: (normal <number> <length> <percentage>) liczba <number> oznacza współczynnik mnożenia wysokości czcionki 10
Ustawienia marginesów CSS1 margin-top: (<length> <percentage> auto) margin-right: (<length> <percentage> auto) margin-bottom: (<length> <percentage> auto) margin-left: (<length> <percentage> auto) margin: (<length> <percentage> auto ){1,4} 1 wartość - wszystkie marginesy 2 wartości - 1. górny i dolny, 2. lewy i prawy 3 wartości - 1. górny, 2. lewy i prawy, 3. dolny 4 wartośći - 1. górny, 2. prawy, 3. dolny, 4. lewy 11
Definiowanie odstępów CSS1 padding-top: (<length> <percentage>) padding-right: (<length> <percentage>) padding-bottom: (<length> <percentage>) padding-left: (<length> <percentage>) padding: (<length> <percentage> ){1,4} 12
Rodzaj i kolor obramowania CSS1 border-style: (none dotted dashed solid double groove ridge inset outset) border-color: <color>{1,4} 13
Szerokość obramowania CSS1 border-top-width: (thin medium thick <length>) border-right-width: (thin medium thick <length>) border-bottom-width: (thin medium thick <length>) border-left-width: (thin medium thick <length>) border-width: (thin medium thick <length>){1,4} 14
Krawędzie obramowania CSS1 border-top: (<border-top-width> <border-style> <color>) border-right: (<border-right-width> <border-style> <color>) border-bottom: (<border-top-width> <border-style> <color>) border-left: (<border-top-width> <border-style> <color>) border: (<border-width> <border-style> <color>) 15
Model elementu blokowego Style CSS <div style="border: 1px solid black;"> <div style= border-color: red; border-style: solid; border-width: 4px 8px 16px 32px; padding: 5px 10px 15px 20px; margin: 20px 40px; width: 150px; height: 100px;"> <p style="border: 1px solid green; margin: 0px;"> Zawartość</p> </div> </div> 16
Właściwości obrazka CSS1 width: (<length> <percentage> auto) height: (<length> <percentage> auto) float: (left right none) clear: (none left right both) 17
Inne właściwości CSS1 display: (block inline list-item none) white-space: (normal pre nowrap) 18
Selektory selektor { atrybut1: wartosc1, wartosc2; atrybut2: wartosc1, wartosc2;... } 19
Wybór stylu przez klasę CSS1 <HTML> <HEAD> <TITLE>Title</TITLE> <STYLE TYPE="text/css"> H1.pastoral { color: #00FF00 } </STYLE> </HEAD> <BODY> <H1 CLASS= pastoral >Way too green</h1> </BODY> </HTML> 20
Wybór stylu przez ID CSS1 #z98y { letter-spacing: 0.3em } H1#z98y { letter-spacing: 0.5em } <P ID= z98y >Wide text</p> 21
Pseudoklasy CSS1 a:link { color: red } /* unvisited link */ a:visited { color: blue } /* visited links */ a:active { color: lime } /* active links */ 22
Pierwsza linia CSS1 <STYLE TYPE="text/css"> P:first-line { font-variant: small-caps } </STYLE> 23
Inicjał CSS1 <STYLE TYPE="text/css"> P { font-size: 12pt; line-height: 12pt } P:first-letter { font-size: 200%; float: left } SPAN { text-transform: uppercase } </STYLE> 24
Pseudoklasy interakcyjne CSS2 :hover - element wskazywany przez mysz :focus - element przyjmuje komunikaty z klawiatury 25/48
Selektory CSS1 Grupowanie stylów: selektor1, selektor2, selektor3 { }... Definicja kontekstowa stylu n UL LI { font-size: small } n UL UL LI { font-size: x-small } 26
Selektory kontekstowe CSS1 Selektor potomka: ul li { font-size: small } ul li ul li { font-size: x-small } Selektor dziecka ul.events > li { font-size: small } 27
Selektory kontekstowe CSS1 Selektor elementu posiadającego obie klasy: div.news.header {... } Selektor elementu posiadającego id i klasę: div#main.news {... } Przykład złożonego selektora: div#main.news ul.events > li.deadline span.note.date {... } 28
Selektory atrybutów Style CSS Selektor filtrujący po atrybutach elementu: element[atrybut1][atrybut2] {... } element[atrybut= wartość ] {... } Pola formularza typu text: input[type= text ] {... } W połączeniu z atrybutem data- z HTML5: HTML: <div data-role= tooltip >...</div> CSS: div[data-role= tooltip ]{... } 29
Selektory atrybutów Style CSS Selektor atrybutu zawierającego określony wyraz: p[title~= wyraz ] {... } Selektor atrybutu-zawierającego-łączniki i zaczynającego się od podanej wartości: div[data-role = main ] {... } Selektor atrybutu o wartości rozpoczynającej się od podanej: p[title~= wyraz ] {... } 30
Selektory atrybutów Style CSS Selektor atrybutu o wartości kończącej się na podanej: p[title$= ostatniwyraz ] {... } Selektor atrybutu zawierającego określony tekst (w dowolnym miejscu): p[title = fraza ] {... } 31
Ten sam kod w różnych przeglądarkach CSS1 Firefox 7.0.1 IE 9 32
Style dla różnych urządzeń CSS2 @media print { BODY { font-size: 10pt } } @media screen { BODY { font-size: 12pt } } @media screen, print { BODY { line-height: 1.2 } } 33/48
Rozpoznawane urządzenia CSS2 all wszystkie urządzenia aural syntezatory mowy braille urządzenia brailowskie dotykowe embossed drukarki brailowskie handheld urządzenia poręczne (mały ekran) print drukarki projection projektory screen monitory ekranowe tty terminale tv telewizory 34/48
Grupy urządzeń CSS2 continuous paged visual aural tactile grid bitmap interactive static both all 35/48
CSS2 Zależność między typem a grupą urządzenia Media Types continuous paged Media Groups visual aural tactile grid bitmap interactive static aural continuous aural N/A both braille continuous tactile grid both emboss paged tactile grid both handheld both visual both both print paged visual bitmap static projection paged visual bitmap static screen continuous visual bitmap both tty continuous visual grid both tv both visual, aural bitmap both 36/48
Typy zawartości CSS2 display: (inline block inline-block list-item run-in compact marker table inline-table table-row-group table-header-group tablefooter-group table-row table-column-group table-column table-cell table-caption none inherit) 37/48
Pozycjonowanie bloku CSS2 position: (static relative absolute fixed inherit) static: Domyślna wartość Elementy rozmieszczone zgodnie z normal flow n Elementy blokowe: jeden pod drugim od góry elementu nadrzędnego, odległości między blokami określone przez atrybuty margin n Elementy inline: jeden po drugim od lewej do prawej, zaczynając od lewej krawędzi elementu nadrzędnego; gdy wyczerpie się miejsce w poziomie, rozpoczyna się nowa linia 38/48
Pozycjonowanie bloku CSS2 fixed: Elementy rozmieszczone względem okna przeglądarki, poza normal flow Nie zmieniają swojej pozycji nawet jeśli użytkownik przewija stronę w przeglądarce Mogą zasłaniać inne elementy strony 39/48
Pozycjonowanie bloku CSS2 relative: Elementy rozmieszczone względem pozycji w normal flow, którą zajmowałyby, gdyby wykorzystane zostało pozycjonowanie static Pozycja określana przy użyciu atrybutów top, left, bottom, right (określają przesunięcie względem standardowej pozycji np. top: 20px, przyjmują również wartości ujemne) Choć element jest pozycjonowany w innym miejscu, w normal flow wciąż zachowywane jest miejsce, które zajmowałby przy pozycjonowaniu static 40/48
Pozycjonowanie bloku CSS2 absolute: Elementy rozmieszczone względem pierwszego elementu nadrzędnego o pozycjonowaniu innym niż static. Jeśli taki element nie zostanie znaleziony, pozycjonowane względem elementu <body> poza normal flow Mogą zasłaniać inne elementy strony 41/48
Kolejność rysowania CSS2 W przypadku nakładających się elementów, o kolejności rysowania decyduje atrybut z-index: z-index: (auto <integer> inherit) Wyższe wartości przesuwają element w stronę pierwszego planu 42/48
Pisanie z prawej na lewo CSS2 direction: (ltr rtl inherit) unicode-bidi: (normal embed bidi-override inherit) 43/48
Przekroczenie zakresu bloku CSS2 overflow: (visible hidden scroll auto inherit ) visible hidden 44/48
Przycinanie zawartości bloku CSS2 clip: (<shape> auto inherit ) shape: rect ( <top> <right> <bottom> <left> ) 45/48
Przykład przycinania CSS2 P { clip: rect(5px, 10px, 10px, 5px); } P { clip: rect(5px, -5px, 10px, 5px); } 46/48
Określenie widoczności CSS2 visibility: (visible hidden collapse inherit) collapse - stosuje się dla tabel dynamicznych 47/48
Dodawanie zawartości przed i po bloku CSS2 P.note:before { content: "Note: " } BODY:after { content: "The End"; display: block; margin-top: 2em; text-align: center; } 48/48
Dodawana zawartość CSS2 content: <string> <uri> <counter> attr(x) open-quote close-quote no-open-quote no-close-quote 49/48
Definiowanie cudzysłowów CSS2 /* Specify pairs of quotes for two levels in two languages */ Q:lang(en) { quotes: ' " ' ' " ' " ' " " ' " } Q:lang(no) { quotes: "«" "»" "<" ">" } /* Insert quotes before and after Q element content */ Q:before { content: open-quote } Q:after { content: close-quote } 50/48
Cudzysłowy w języku 1. CSS2 <HTML lang="en"> <HEAD> <TITLE>Quotes</TITLE> </HEAD> <BODY> <P><Q>Quote me!</q> </BODY> </HTML> efekt: "Quote me!" 51/48
Cudzysłowy w języku 2. CSS2 <HTML lang="no"> <HEAD> <TITLE>Quotes</TITLE> </HEAD> <BODY> <P><Q>Trøndere gråter når <Q>Vinsjan på kaia</q> blir deklamert.</q> </BODY> </HTML> efekt: «Trøndere gråter når <Vinsjan på kaia> blir deklamert.» 52/48
Automatyczne numerowanie CSS2 counter-reset: (<identifier> <integer>? )+ none inherit counter-increment: (<identifier> <integer>? )+ none inherit 53/48
Numerowanie nagłówków CSS2 H1:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter; /* Add 1 to chapter */ counter-reset: section; /* Set section to 0 */ } H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section; } 54/48
Wyświetlanie znaczników CSS2 LI:before { LI:after { display: marker; content: url("smiley.gif")} display: marker; content: url("sad.gif")} 55/48
Różne marginesy dla prawej i lewej strony CSS2 @page :left { margin-left: 4cm; margin-right: 3cm; } @page :right { margin-left: 3cm; margin-right: 4cm; } 56/48
Inne marginesy dla pierwszej strony CSS2 @page { margin: 2cm } @page :first { margin-top: 10cm} 57/48
Sterowanie podziałem stron CSS2 page-break-before: (auto always avoid left right inherit) page-break-after: (auto always avoid left right inherit) page-break-inside: (auto avoid inherit) 58/48
Identyfikacja określonej strony CSS2 @page rotated {size: landscape} TABLE {page: rotated; page-break-before: right} 59/48
Sieroty i wdowy CSS2 orphans: <integer> inherit widows: <integer> inherit 60/48
Dodatkowe właściwości czcionki CSS2 font-stretch: (normal wider narrower ultracondensed extra-condensed condensed semicondensed semi-expanded expanded extraexpanded ultra-expanded inherit ) font-size-adjust: <number> none inherit 61/48
Reguła opisu czcionki CSS2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Font test</title> <STYLE TYPE="text/css" MEDIA="screen, print"> @font-face { font-family: "Robson Celtic"; src: url("http://site/fonts/rob-celt") } H1 { font-family: "Robson Celtic", serif } </STYLE> </HEAD> <BODY> <H1> This heading is displayed using Robson Celtic</H1> </BODY> </HTML> 62/48
Dodatkowa właściwość tekstu CSS2 text-shadow: none [<color> <length> <length> <length>?,]* [<color> <length> <length> <length>?] inherit 63/48
64/48 CSS2 Dodatkowe kolory systemowe ActiveBorder ActiveCaption AppWorkspace Background ButtonFace ButtonHighlight ButtonShadow ButtonText CaptionText GrayText Highlight HighlightText InactiveBorder InactiveCaption InactiveCaptionText InfoBackground InfoText Menu MenuText ScrollBar ThreeDDarkShadow ThreeDFace ThreeDHighlight ThreeDLightShadow ThreeDShadow Window WindowFrame WindowText
Właściwości konturów CSS2 outline-style: (none dotted dashed solid double groove ridge inset outset hidden) outline-color: <color>{1,4} outline-width: (thin medium thick <length>) 65/48
Wyświetlanie tabel CSS2 display: table (w HTML: TABLE) inline-table (w HTML: TABLE) table-row (w HTML: TR) table-row-group (w HTML: TBODY) table-header-group (w HTML: THEAD) table-footer-group (w HTML: TFOOT) table-column (w HTML: COL) table-column-group (w HTML: COLGROUP) table-cell (w HTML: TD, TH) table-caption (w HTML: CAPTION) 66/48
Domyślne style dla tabel CSS2 TABLE { display: table } TR { display: table-row } THEAD { display: table-header-group } TBODY { display: table-row-group } TFOOT { display: table-footer-group } COL { display: table-column } COLGROUP { display: table-column-group } TD, TH { display: table-cell } CAPTION { display: table-caption } 67/48
Wizualny model tabeli CSS2 Położenie podpisu tabeli: caption-side: top bottom left right inherit
Warstwy tabeli CSS2 69/48
Określenie szerokości tabeli CSS2 table-layout: (auto fixed inherit ) fixed - szerokość tabeli zależy tylko od szerokości kolumn auto - szerokości kolumn są dopasowywane do zawartości 70/48
Obramowania poszczególnych komórek CSS2 TABLE { border: outset 10pt; border-collapse: separate; border-spacing: 15pt } TD { border: inset 5pt } TD.special { border: inset 10pt } 71/48
Określenie wysokości tabeli CSS2 vertical-align: baseline - linia bazowa komórki jest dopasowywana do linii bazowej pierwszej komórki w wierszu top - górna krawędź komórki jest wyrównywana do górnej krawędzi wiersza bottom - dolna krawędź komórki jest wyrównywana do dolnej krawiędzi wiersza middle - środek wysokości komórki jest wyrównywana do środka wysokości wiersza 72/48
Właściwości kursora cursor: auto crosshair default hand move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help CSS2 73/48
Biblioteki komponentów CSS ponowne wykorzystywanie stylów na różnych podstronach/w różnych projektach Bootstrap: http://getbootstrap.com/css/ Foundation: http://foundation.zurb.com/docs/ Chico UI: http://chico-ui.com.ar/ Metro UI CSS: http://metroui.org.ua/ i wiele innych Style CSS 74
Flexbox Layout 75 Kontener może modyfikować rozmiar swoich potomków Wypełnienie pustego miejsca poprzez rozciąganie elementów Unikanie przepełnienia (overflow) poprzez ograniczenie rozmiaru potomków Szczególnie istotne z punktu widzenia responsywności aplikacji internetowej
Flexbox Layout kontener 76.container { display: flex; } Kierunek rozmieszczania elementów: flex-direction: row row-reverse column column-reverse;
Flexbox Layout kontener 77 Zawijanie (reflow) flex-wrap: nowrap wrap wrap-reverse; flex-flow: < flex-direction > < flex-wrap >
Flexbox Layout kontener 78 Wyrównanie w poziomie justify-content: flex-start flex-end center space-between space-around
Flexbox Layout kontener 79 Wyrównanie w pionie align-items: flex-start flex-end center baseline stretch
Flexbox Layout potomek 80 align-self: auto flex-start flex-end center baseline stretch
Flexbox Layout potomek 81 Wypełnianie dostępnej przestrzeni flex-grow: <number>;
Literatura CSS1 CSS 3: http://www.w3schools.com/css3/default.asp http://www.w3schools.com/cssref/css3_browsersup port.asp http://www.w3schools.com/cssref/default.asp http://www.w3.org/style/css/ Validator: http://jigsaw.w3.org/css-validator/ 82