Kaskadowe arkusze stylów CSS. Reguła CSS – definiuje sposób formatowania elementów na stronie WWW Części składowe reguły CSS selektor{ właściwość: wartość;

Prezentacja na temat: "Kaskadowe arkusze stylów CSS. Reguła CSS – definiuje sposób formatowania elementów na stronie WWW Części składowe reguły CSS selektor{ właściwość: wartość;"— Zapis prezentacji:

1 Kaskadowe arkusze stylów CSS

2 Reguła CSS – definiuje sposób formatowania elementów na stronie WWW Części składowe reguły CSS selektor{ właściwość: wartość; … }

3 CSS a HTML Zobaczmy to na przykładzie. Aby w HTML-u zmienić kolor tekstu na niebiesko, tworzymy zapis : Treść akapitu W CSS zrobimy to już bez pomocy znacznika : Treść akapitu W deklarowaniu stylu STYLE występuje składnia: właściwość: wartość;

4 Umiejscowienie CSS w dokumencie HTML Reguły wpisane umieszczane w znacznikach HTML (atrybut STYLE) w części strony WWW np: Treść akapitu

5 Umiejscowienie CSS w dokumencie HTML Reguły osadzone umieszczane w nagłówku dokumentu HTML (w sekcji ) p{ color: blue; } Tresc akapitu PIERWSZEGO

6 Umiejscowienie CSS w dokumencie HTML Reguły zewnętrzne umieszczane w pliku zewnętrznym (w osobnym pliku z rozszerzeniem.CSS) Znacznik wskazuje lokalizację zewnętrznego pliku CSS, w naszym przypadku plik nazywa się "style.css". Tresc akapitu PIERWSZEGO

7 Przykład.c1 { font-style: normal; font-size: 8pt; text-align: right;}.c2 { font-style: italic; text-indent: 10em;} Zewnętrzny plik style-1.css zawiera wpis: Zapis dokumentu HTML Widok pod przeglądarką

8 Selektor identyfikatora Reguła CSS definiująca selektor identyfikatora Odwołanie do klasy identyfikatora w znaczniku HTML: #nazwaIdentyfikatora { właściwość: wartość; właściwość: wartość; … } formatowana zawartość

9 Przykład Styl możemy również zadeklarować w pliku zewnętrznym !!!

10 Klasy CSS Klasy CSS – umożliwiają definiowanie stylów, które mogą być stosowane w dowolnych znacznikach HTML Klasa CSS zależna reguła CSS definiująca klasę zależną odwołanie do klasy zależnej w znaczniku HTML selektorHTML.nazwaKlasy { właściwość: wartość; właściwość: wartość;} formatowana zawartość

11 Przykład klasy zależnej w definicji reguły CSS

12 Klasy CSS Klasa CSS niezależna reguła CSS definiująca klasę niezależną odwołanie do klasy niezależnej w znaczniku HTML.nazwaKlasy { właściwość: wartość; właściwość: wartość; } Formatowana zawartość strony

13 Przykład klasy niezależnej w definicji reguły CSS

14 Formatowanie tekstu w dokumentach HTML AtrybutOpis font-family Określa krój pisma. Wartościami są nazwy czcionek (takie jak Arial, Times lub Palatino) lub nazwa jednej z pięciu rodzin ogólnych: SERIF(times), SANS- SERIF(helvetica), CURSIVE(zaph chancery), FANTASY(western), MONOSPACE(courier) font-size Określa wielkość czcionki w oparciu o rozmiar absolutny, względny, w stosunku do wartości em oraz w procentach. (pt, in, cm, px) font-style Określa styl czcionki. Jest on reprezentowany przez wartości normal, italic i oblique font-weight Określa grubość czcionki. Podstawowymi wartościami są normal, bold, bolder i lighter

15 Formatowanie tekstu w dokumentach HTML AtrybutOpis font Umożliwia jednoczesne dokonanie wszystkich dotychczas omawianych ustawień. Powinny być deklarowane w porządku: font-style, font-weight, font- size, font-family. color Definiuje kolor elementu tekstu i jest określany za pomocą jednego ze słów kluczowych: black, maroon lub kodem hexadecymalnym. text-decoration Umożliwia wprowadzanie dodatkowych ozdobników, takich jak podkreślenie, przekreślenie i miganie. Może przyjmować cztery wartości: none, overline, line-through i blink.

16 Formatowanie tekstu w dokumentach HTML AtrybutOpis background Umożliwia jednoczesne definiowanie szeregu wartości atrybutów tła. Porządek jest następujący: background- color, background-image, background-position. background: gray line-height Ustawia odległość między liniami pisma (interlinia) - w (pt), (in), (cm), (px). margin-left margin-right margin-top margin-bottom Ustawia marginesy - w (pt), (in), (cm), (px). Przykład margin-left: 1.5cm text-align Ustawia justowanie (do lewej – left), do środka (center), do prawej (right). text-indent Ustawia odległość od lewego marginesu - w (pt), (in), (cm), (px).

17 Przykład Przy takim zapisie tekst w akapicie będzie pisany czcionką typu Verdana o rozmiarze 10pt, będzie pogrubiona oraz pochyła P { font-family:verdana,"Times New Roman"; font-size:10pt; font-weight:bold; font-style: italic; }

18 Przykład

19

20

21

22

23

24

25 Widzialność elementu w przeglądarce hidden element jest niewidoczny visible element jest widoczny selektor {visibility: hidden|visible ;}

26 Definicja właściwości wyliczeń nazwy punktorów: disc koło circle okrąg square kwadrat decimal liczby (cyfry arabskie) lower-roman liczby (małe cyfry rzymskie) upper-roman liczby (duże cyfry rzymskie) lower-alpha kolejne małe litery alfabetu łacińskiego upper-alpha kolejne duże litery alfabetu łacińskiego selektor {list-style-type: disc|circle|square|decimal| lower-roman|upper-roman|lower-alpha|upper-alpha ;}

27 Definicja właściwości wyliczeń postać punktora: none brak URL adres pliku graficznego z obrazem punktora położenie punktorow: outside na zewnątrz inside wewnątrz selektor {list-style-image: none|url(URL) ;} selektor {list-style-position: outside|inside ;}

28 Przykład