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
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
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; }
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
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ń <LINK REL="stylesheet" TYPE="text/css" HREF="nazwa_pliku.css” MEDIA="print|screen|all" > MEDIA="print|screen|all" > obowiązkowe opcjonalne
C S S 6 Łączenie deklaracji stylu z dokumentem HTML (II) osadzone Część dokumentu HTML w sekcji Część dokumentu HTML w sekcji <HEAD> <STYLE type="text/css" media="screen|print|all"> media="screen|print|all"> polecenia CSS... </STYLE></HEAD> opcjonalne
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 !!!
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
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:
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.
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
C S S 12 Opracowanie Anna Śmigielska