1 CSS 3 Technologie Informacyjne Literatura:CSS. Tworzenie nowoczesnych stron WWW, Łukasz Pasternak, Wyd. Helion, 2012

2 CSS CSS - kaskadowe arkusze stylów (Cascading Style Sheets) - język dający możliwość zarządzania sposobem formatowania (wyglądem) www. Najważniejszym powodem wprowadzenia stylów było rozdzielenie struktury i prezentacji dokumentów. Wszystkie polecenia dotyczące formatowania można umieścić w jednym miejscu (tzw. arkuszu) i powiązać je z konkretnymi elementami, wstawionymi za pomocą HTML. *.css @charset „utf-8”; linijka kodowania rozpoczynająca plik CSS selektor { właściwość1: wartość; } Selektorem może być dowolny element HTML, natomiast nie każdemu elementowi można przypisać te same właściwości. CSS jest językiem swobodnego formatu: białe znaki są ignorowane.

3 X Sposoby definiowania CSS: styl lokalny, wewnętrzny arkusz stylu,Białymi znakami nie można poprzedzać wartości właściwości, w których występuje nawias: Np. selektor { background:url (katalog/gfx.jpg);} Białe znaki nie mogą pojawiać się przy odnoszeniu się do pseudoklas, pseudoelementów, selektorów atrybutów i selektorów specjalnych: Np. div h1:hover {deklaracje} p:selection {deklaracje} article#identyfikator {deklaracje} X div h1 :hover {deklaracje} p :selection {deklaracje} article #identyfikator {deklaracje} Sposoby definiowania CSS: styl lokalny, wewnętrzny arkusz stylu, zewnętrzny arkusz stylu. ograniczony zasięg

4 CSS Styl lokalny (inline) Styl wpisany jest wprowadzony wewnątrz dokumentu HTML w wybranym znaczniku i parametryzuje zmiany tylko w nim. Takie ustawienia stają się dominujące nad stylem osadzonym i zewnętrznym. < p style=„deklaracja; deklaracja; deklaracja”>

5 Wewnętrzny arkusz stylówCSS Wewnętrzny arkusz stylów Wewnętrzny arkusz stylów definiuje atrybuty dla całego dokumentu. Ustawienia tak wprowadzone stają się dominujące tylko nad stylem zewnętrznym. Osadzony arkusz stylu jest umieszczony wewnątrz dokumentu HTML, ale najczęściej wprowadza się go w nagłówku (w sekcji HEAD). Definicje stylów znajdują się między znacznikami . np.

< head>

6 Zewnętrzny arkusz styluCSS Zewnętrzny arkusz stylu Zewnętrzny arkusz stylu umożliwia scentralizowanie definicji stylu i uniknięcie konieczności wprowadzania poprawek w wielu plikach przy zmianie projektu. Wszystkie definicje stylu są zamieszczone w pliku zewnętrznym, z którym strona www jest połączona hiperłączem. Plik ten może mieć dowolną nazwę, ale musi mieć rozszerzenie nazwy .css, np. style.css. np. - znacznik nie ma zamykającego odpowiednika media – informuje przeglądarkę dla jakiego typu mediów przeznaczony jest dany arkusz. Tworzenie osobnych arkuszy np. dla urządzeń mobilnych jest konieczne.

7 CSS /* v License: none (public domain) */ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; body { line-height: 1; ol, ul { list-style: none; blockquote, q { quotes: none; blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; table { border-collapse: collapse; border-spacing: 0; Arkusz resetujący Arkusz resetujący pozwala na globalne zresetowanie domyślnych styli CSS narzuconych przez każdą przeglądarkę wszystkim HTML-owym elementom. Dołącza się go jako osobny, zewnętrzny plik.

8 CSS Komentarze warunkowe Komentarze zwykłePrzygotowanie osobnych arkuszy stylów dla IE. Komentarze warunkowe pozwalają na poinformowanie konkretnej przeglądarki o przygotowanych dla niej stylach. * lte – starsze lub równe /* Komentarz wielolinijkowy */ Nie ma komentarza jednolinijkowego. Ułatwiają opis kodu, pracę w zespole, umożliwiają wyłączanie fragmentów kodu. Komentarze zwykłe

9 CSS Dziedziczenie stylówElementy leżące niżej w hierarchii (potomkowie), jeśli nie zaznaczymy inaczej, dziedziczą atrybuty formatowania, które zostały nadane ich przodkom. Wyjątkiem są np. marginesy i dopełnienia. W niektórych przeglądarkach internetowych zdarza się błędna interpretacja dziedziczenia stylów. Za pomocą wartości inherit można wymusić dziedziczenie, które działa na potomkach danego elementu przodka. np.

10 CSS Selektory specjalne Identyfikatory KlasyIdentyfikatory stosujemy, kiedy chcemy odnieść się do jednego akapitu lub listy, bez naruszania pozostałych. Na stronie może być tylko jeden identyfikator o danej nazwie. Niedozwolone jest wstawianie spacji w zapisie identyfikatorów. HTML CSS Np.

11 Grupowanie selektorówCSS Selektory elementów Selektor typu Odnosi się do wszystkich elementów HTML do których jest przypisany Np. p {deklaracje} Technika pozwala na przypisanie jednej reguły kilku selektorom naraz. article, nav, div, li, p {deklaracje} Pozwala ograniczać klasy i identyfikatory ułatwiając modyfikacje strony. Selektor potomka tworzymy przynajmniej za pomocą dwóch selektorów, przy czym ten drugi ma być potomkiem tego pierwszego, to znaczy, że ma znajdować się w elemencie, który został wskazany przez pierwszy selektor. selektor potomek { właściwość:wartość; } Grupowanie selektorów Selektor potomka Np. div span { color:red; } Do każdego elementu span w danym dokumencie HTML, który znajduję się w elemencie div dodaj właściwość, która zmieni kolor tekstu na czerwony

12 CSS Stylistyka czcionek PogrubienieStosowanie w HTML znacznika jest niezalecane, w jego miejsce stosuje się właściwość CSS font-weight. W dalszym ciągu używa się natomiast znacznika , który wskazuje tekst istotny dla internauty oraz robotów indeksujących. CSS pozwala zdefiniować dla niektórych rodzajów czcionek 9 stopni grubości bold – pogrubienie bolder, lighter – wejście na wyższy i zejście na niższy stopień pogrubienia w porównaniu z wartością przodka number – wartości liczbowe: 100, 200, 300, 400, 500, 600, 700, 800, 900 Przykład: CSS HTML span#dwa { font-weight: bold;} font-weight: normal|bold|bolder|lighter|number| tekst normalny tekst pogrubiony

13 CSS Stylistyka czcionek KursywaW HTML stosujemy znacznik odpowiadający za formatowanie fizyczne i znacznik , który odpowiada za formatowanie logiczne. Znacznik lepiej zastąpić formatowaniem poprzez font-style. font-style: normal|italic|oblique|; italic– pochylenie (osobny plik z czcionką pochyloną) oblique – pochylenie („ręczne”) Przykład: CSS HTML span { font-style: normal;} span#dwa {font-style: italic;} span#trzy{font-style: oblique;} tekst normalny tekst pochylony tekst pochylony

14 CSS Stylistyka czcionek Wariant fontuDo napisania tekstu kapitalikami (czcionka wielkich liter o wysokości liter małych) wykorzystujemy font-variant. font-variant: normal|small-caps|; small-caps– kapitaliki Przykład: CSS HTML span { font-variant: normal;} span#dwa {font-variant: small-caps;} tekst normalny kapitaliki

15 CSS Stylistyka czcionek Rozmiar czcionkiDo określenia wielkości czcionki służy font-size. (nie stosujemy znacznika w HTML) font-size: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit; length – rozmiar w px, cm, itd. smaller, larger, itd. – wartości względne Przykład: CSS HTML span { font-size: 15px;} Tekst o wielkości 15px

16 CSS Stylistyka czcionek Rodzaj czcionkiDo określenia rodzaju czcionki służy font-family. Jeśli jakaś czcionka nie jest zainstalowana w systemie wówczas zostanie wyświetlona w formacie domyślnym, np. Times New Roman*. Nazwy fontów, które składają się z więcej niż jeden wyraz należy pisać w cudzysłowie. W stylach lokalnych zamiast cudzysłowów stosuje się apostrofy. font-family: font; Przykład: CSS HTML span#jeden { font-family: Georgia;} span#dwa { font-family: „Comic Sans”;} * font-family: Arial, Helvetica, Verdana, sans-serif; W przypadku, gdy przeglądarka nie znajdzie Ariala, tekst wyświetlony zostanie Helveticą, a następnie Verdaną, lub domyślnym stylem bezszeryfowym. (serif-szeryfowe, monospace-o stałej szerokości, cursive – imitujące pismo odręczne) Tekst pisany Georgią Tekst pisany Comic Sans Styl lokalny:

17 CSS Stylistyka czcionek Łączenie właściwościGrupę właściwości dla jednego elementu można napisać zbiorowo. W przypadku elementu font należy zachować odpowiednią hierarchię : na końcu należy umieścić font-size, line-height i font-family, natomiast kolejność cech przed nimi jest dowolna. Np. font: italic small-caps bold 25px/1.1 Arial, Helvetica, sans-serif; Import plików z czcionkami @font-face { font-weight: normal; font-style: normal; font-variant: normal; font-family: 'MojFont'; src: url('mojFont.eot?') format('eot'), url('mojFont.woff') format('woff'), url('mojFont.ttf') format('truetype'), url('mojFont.svg#svgFontName') format('svg'); } deklarujemy użycie własnego pliku z krojem pisma określamy styl informujemy przeglądarkę gdzie znajdują się potrzebne pliki (ścieżka dostępu do pliku .eot) Znak zapytania powoduje, że IE<9 myśli, że dalsza część deklaracji fonta, to query string (w IE nie jest możliwa deklaracja więcej niż jednego formatu) IE toleruje tylko Embedded OpenType. Pozostałe przeglądarki chętnie przyjmą .ttf.

18 text-decoration: none|underline|line-through|overline|blinkCSS Stylistyka tekstu Dekoracja text-decoration: none|underline|line-through|overline|blink underline – podkreślenie line-through – przekreślenie overline – nadkreślenie blink – migotanie (tylko Firefox i Opera) Odstęp między wierszami line-height: normal | | | | inherit Zwiększa czytelność akapitu. Wysokość linii jest właściwością dziedziczoną, żeby uniknąć nakładania się wierszy lepiej nie wprowadzać sztywnej wartości.

19 CSS Stylistyka tekstu Przekształcenie tekstutext-transform: capitalize | uppercase | lowercase | none | inherit Konwersja z dużych na małe litery i odwrotnie. capitalize – zamiana pierwszych liter wyrazu na duże lowercase– konwersja na małe litery uppercase– konwersja na duże litery Odstęp między literami (kerning) letter-spacing: normal | | inherit Odstęp między wyrazami word-spacing: normal | | inherit Zwiększają czytelność tekstu. Wartości dodatnie pozwalają rozstrzelić tekst, a ujemne ścieśnić go.

20 CSS Stylistyka tekstu Wcięcie akapitutext-indent: | | inherit Wprowadzanie tabulacji/ukrywanie tekstu. W przypadku, gdy nadamy właściwości dużą wartość ujemną tekst zostanie ukryty. W ten sposób można zastąpić multimedia i wspomóc przeszukiwanie strony. Łamanie wiersza i białe znaki white-space: normal pre nowrap pre-wrap pre-line inherit Białe znaki w HTML są ignorowane, polecenie stosuje się aby tego uniknąć, czyli wyświetlić tekst w takiej formie w jakiej został napisany (tekst preformatowany). pre – tekst preformatowany no-wrap – nie pozwala na łamanie wiersza dopóki nie napotka na
pre-wrap - respektuje enter, łamie wiersz na końcu szerokości strony pre-line- respektuje enter, łamie wiersz na końcu szerokości strony, zmienia wielokrotne spacje na jedną

21 text-align: left | right | center | justify | inheritCSS Stylistyka tekstu Wyrównanie tekstu w poziomie text-align: left | right | center | justify | inherit Wyrównanie tekstu w pionie vertical-align: baseline | sub | super top | text-top | middle | bottom text-bottom | | | inherit baseline – wartość domyślna, wyrównanie do linii bazowej rodzica top – do góry bottom – do dołu middle – do środka sub – indeks dolny super – indeks górny

22 CSS Stylistyka list Listatext-align: disc| circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek lower-latin | upper-latin | armenian | georgian | none | inherit decimal – liczby arabskie decimal-leading-zero – liczby arabskie od 0 lower-roman – małe liczbie rzymskie upper-roman – duże liczbie rzymskie lower-greek - małe greckie lower-latin – małe łacińskie upper-latin - duże łacińskie ul – listy numerowane ol – listy wypunktowane dl – lista definicji Przykład: CSS HTML: ol{ list-style-type: upper-roman; }

1. list-item 1
2. list-item 2
3. list-item 3