Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

C S S 1 Cascading Style Sheets HTML pozwala zarządzać strukturą dokumentu, STYLE mają nam służyć do jego upiększania Kaskadowe Arkusze Stylów.

Podobne prezentacje


Prezentacja na temat: "C S S 1 Cascading Style Sheets HTML pozwala zarządzać strukturą dokumentu, STYLE mają nam służyć do jego upiększania Kaskadowe Arkusze Stylów."— Zapis prezentacji:

1 C S S 1 Cascading Style Sheets HTML pozwala zarządzać strukturą dokumentu, STYLE mają nam służyć do jego upiększania Kaskadowe Arkusze Stylów

2 C S S 2 Postać polecenia CSS selektor { właściwość : wartość ; właściwość : wartość ;... }... UWAGA !!! ; obowiązkowe ; obowiązkowe ostatni ; w poleceniu można opuścić lecz nie jest to zalecane ostatni ; w poleceniu można opuścić lecz nie jest to zalecane

3 C S S 3 PRZYKŁADPRZYKŁAD P { text-indent: 10pt; } H1, H2 { font-style: bold; } A { color: red; text-decoration: none } A.extra {color: #0000ff; background: #ffff00; } BODY { background:#aaffaa; text-align:center; }.duzy {font-size:20pt; }

4 C S S 4 zewnętrzne (I) Umieszczane w osobnym pliku *.css osadzone (II) Umieszczane jako część dokumentu HTML w sekcji Umieszczane jako część dokumentu HTML w sekcji wpisane (III) Umieszczane jako definicja stylu bezpośrednio w kodzie HTML Sposoby łączenia deklaracji stylu z dokumentem HTML

5 C S S 5 W jednym dokumencie HTML może być kilka definicji LINK. Parametr media pozwala tworzyć inny wygląd strony na różnych mediach np. ekran z granatowym tłem i żółtymi literami. Wydruk czarne litery i białe tło. Łączenie deklaracji stylu z dokumentem HTML (I) zewnętrzne Jako osobny plik *.css zawierający listę poleceń MEDIA="print|screen|all" > obowiązkowe opcjonalne

6 C S S 6 Łączenie deklaracji stylu z dokumentem HTML (II) osadzone Część dokumentu HTML w sekcji Część dokumentu HTML w sekcji opcjonalne

7 C S S 7 Łączenie deklaracji stylu z dokumentem HTML (III) wpisane Umieszczenie definicji stylu w kodzie HTML UWAGA !!! nie podaje się nazwy selektora i nawiasów { } nie podaje się nazwy selektora i nawiasów { } ; nadal obowiązkowe !!! ; nadal obowiązkowe !!!

8 C S S 8 Selektory:   Znacznik   Klasa   Skojarzona: znacznik.nazwa   nieskojarzona :.nazwa  znacznika  Pseudoklasy- dla znacznika   Pseudoelementy – 1 linia, znak   Identyfikatory – #tylko raz,   Skojarzony   nieskojarzony

9 C S S 9 Odwołanie do klasy w HTML: UWAGA !!! Nazwa klasy bez poprzedzającej kropki. Nazwa klasy bez poprzedzającej kropki. Nazwa identyfikatora bez poprzedzającego # Nazwa identyfikatora bez poprzedzającego # Użycie identyfikatora w HTML:

10 C S S 10 Selektory: Pseudoklasy Występują dla znacznika. Pozwalają zdefiniować formatowanie dla różnych stanów odsyłacza: A:linkA:visitedA:hoverA:active łącze nigdy nie wybrane łącze już odwiedzane łącze aktualnie wskazywane łącze po jego kliknięciu UWAGA !!! Pseudoklasy muszą być definiowane w tej kolejności Pseudoklasy muszą być definiowane w tej kolejności Przed i po : nie może być spacji. Przed i po : nie może być spacji.

11 C S S 11 PRZYKŁADPRZYKŁAD Plik.css.wciety {text-indent: 2cm ; } P.czerwony { color: red ; } H1.duzy { font-size: 25pt } Plik.html ten tytuł jest inny nie dziala - klasa duzy tylko dla H1 tekst czerwony

12 C S S 12 Opracowanie Anna Śmigielska


Pobierz ppt "C S S 1 Cascading Style Sheets HTML pozwala zarządzać strukturą dokumentu, STYLE mają nam służyć do jego upiększania Kaskadowe Arkusze Stylów."

Podobne prezentacje


Reklamy Google