|
CSS - kaskadowe arkusze stylów
CSS - Kaskadowe arkusze stylów - to język opisu stylu dokumentów XHTML/XML i HTML. Dzięki niemu można oddzielić treść - zachowanej w pliku (X)HTML - od prezentacji, opisanej przez plik CSS. Dzięki kaskadowym arkuszom stylu możemy zmodyfikować wygląd każdego elementu (X)HTML a także iść dalej - zdefiniować własne klasy stylów, tak, że w zależności od nich dany element będzie prezentował się w różny sposób. Do dyspozycji mamy szeroką gamę środków - od zmiany czcionki, koloru, tła po dodanie obramowania, ustalenie pozycji elementu względem strony czy innych elementów. Stosując zaawansowane sztuczki można uzyskać zaskakujące efekty, przypominające użycie JavaScript, jednak pozbawione wad takiego wyjścia (możliwość wyłączenia przez użytkownika, rozbieżności w działaniu u różnych przeglądarek). Obecnie nadal obsługa standardu CSS przez przeglądarki internetowe nie jest doskonała, ale systematycznie poprawia się. Mimo wszystko, nawet przeglądarki stare i nieaktualne, jak Internet Explorer i Netscape Communicator (w wersji starszej niż 6), będą mogły skorzystać z większości dobrodziejstw CSS. Warto włożyć nieco pracy w naukę kaskadowych arkuszy stylu, gdyż jest to krok w stronę tworzenia stron nowoczesnych, o łatwo modyfikowalnym wyglądzie (nie trzeba zmieniać każdego pliku, gdyż styl mamy zapisany w jednym miejscu) a zatem będących dłużej w użyciu. Osadzanie stylów na stronie Style wewnętrzne
Style zewnętrzne Najlepiej jest zebrać wszystkie style i umieścić w osobnym pliku opatrzonym rozszerzeniem .css. Taki arkusze stylów załącza się do pliku HTML za pomocą kodu: Korzystanie z arkuszy stylów w samym kodzie HTML odbywa się poprzez dodanie do elementu np. <p> atrybutu class lub id np.: W przypadku wielu dokumentów składających się na stronę ta metoda jest najmniej pracochłonna i najłatwiejsza do wprowadzania wszelkich modyfikacji. Typy selektorów Selektor uniwersalne Selektor definiuje styl dla wszystkich elementów w dokumencie.
* {
background-color : white;
}
Selektor elementu Selektor definiuje styl dla wszystkich elementów danego typu.
p {
font-size : 12px;
}
td, th {
color : #ff0000;
}
Selektor potomka Selektor definiuje styl dla elementów typu podanego jako ostatni znajdującego wewnątrz elementu(-ów) poprzedzającego definicję.
/* styl dla elementów SPAN wewnątrz akapitu (P) */
p span {
color : blue;
}
/* styl dla elementów SPAN wewnątrz akapitu znajdującego się wewnątrz bloku (DIV) */
div p span {
color : blue;
}
Selektor atrybutu Każdy tag może posiadać atrybutami zgodne ze specyfikacją HTML.Dzięki temu możemy tak skonstruować selektor, aby odnosił się on do konkretnego tagu i jego atrybutu.
/* styl dla elementów A posiadających atrybut TITLE */
a[title] {
color : red;
}
/* styl dla elementów A posiadających atrybut TITLE o wartości ops_linku */
a[title=ops_linku] {
color : red;
}
Identyfikatory Selektor definiuje styl dla elementów o podanym identyfikatorze. Definicja musi zaczynać się od znaku #.
/* styl dla elementów posiadających ID = POGRUBIONY */
#pogrubiony {
font-weight : bold;
}
/* styl dla akapitów posiadających ID = POGRUBIONY */
p#pogrubiony {
font-weight : bold;
}
Klasy Selektor definiuje styl dla elementów posiadających atrybut CLASS identyczny z definicją stylu. Definicja musi zaczynać się od kropki.
/* styl dla elementów posiadających CLASS = POGRUBIONY */
.pogrubiony {
font-weight : bold;
}
/* styl dla akapitów posiadających CLASS = POGRUBIONY */
p.pogrubiony {
font-weight : bold;
}
Pseudoklasy CSS pozwala na dodatkowe formatowanie niektórych elementów dokumentu. Najczęściej używane są pseudoklasy linków.
/* styl zwykłego nieodwiedzonego linku */
A:link {
color : #990000;
}
/* styl odwiedzonego linku */
A:visited {
color : #990000;
}
/* styl linku po najechaniu na niego myszką */
A:hover {
color : #990000;
}
/* styl aktywnego - w momencie kliknięcia - linku */
A:active {
color : #990000;
}
|