Wprowadzenie do kaskadowych arkuszy stylów

Czym jest CSS?

CSS (ang. Cascading Style Sheets - kaskadowe arkusze stylów) są językiem umożliwiającym opis prezentacji dokumentu HTML, czyli wygląd czcionek, kolorów, rozmiarów czy położenia konkretnych elementów HTML.

Dlaczego warto z niego korzystać

Oddzielenie warstwy treści od warstwy prezentacji.

Dzięki oddzieleniu warstwy treści od warstwy prezentacji zyskujemy swobodę w modyfikacji naszej strony. Chcąc zmodyfikować jakiś element na stronie nie musimy edytować każdego pliku w celu poprawki, a jedynie arkusz stylów, w którym zdefiniowany jest cały wygląd strony.

Zwiększenie szybkości działania strony.

Korzystając z CSS pozbywamy się z kodu strony wszelkich znaczników i atrybutów służących do opisania jej wyglądu. Skutkuje to zmniejszeniem objętości każdej podstrony. Dodatkowo po pierwszym załadowaniu strony, arkusz stylów zapisywany jest w pamięci tymczasowej przeglądarki i przy każdym następnym odświeżeniu czy przejściu na kolejną podstronę pobierany jest z naszego dysku, a nie z Internetu co przyśpiesza czas ładowania strony.

Definicja wyglądu dla różnych urządzeń

Za pomocą CSS możemy zdefiniować inny wygląd strony dla różnych mediów. Mediami określa się tu miedzy innymi drukarki, małe monitory, telewizory, czy drukarki Braille'a.

Ułatwienie dostępu niepełnosprawnym

Używając arkuszy stylów ułatwimy dostęp do naszej strony niepełnosprawnym. Dzieje się to na skutek możliwości wyłączenia lub modyfikacji kodu CSS dla danej strony (funkcja przydatna osobom niedowidzącym). Użycie arkuszy stylów ułatwia również przetwarzanie kodu strony przez programy ułatwiające korzystanie z sieci osobom niepełnosprawnym (programy czytające treść stron, czy przetwarzające ją na język Braille'a).

SEO

Używanie stylów CSS ma także pozytywne znaczenie w kwestii SEO czyli pozycjonowania stron w wyszukiwarkach internetowych. Niektóre wyszukiwarki jak chociażby Google doceniają strony o czystym kodzie oraz takie gdzie stosunek kodu do treści właściwej strony jest znaczący na korzyść treści.

Sposoby osadzania kodu CSS w dokumencie HTML

Istnieją trzy sposoby osadzania arkusza stylów wewnątrz dokumentu HTML. Różnią się one miejscem umieszczenia kodu CSS oraz priorytetem jego użycia.

zewnętrzny arkusz stylów - kod CSS znajduje się w osobnym pliku, który dołączany jest do kodu strony poprzez wstawienie w sekcji HEAD:

Priorytet rośnie wraz z odległością opisu wyglądu znacznika od jego deklaracji tzn największy priorytet ma arkusz lokalny następnie wewnętrzny, a na samym końcu zewnętrzny.

Przykład użycia arkuszy stylów

Jako, że uczyć się jest najlepiej na przykładach przedstawię przykładowy kod strony, a następnie omówię jego elementy.

KOD HTML:

<html>
<head>
<title>Pierwsze starcie z CSS</title>
<link href='' rel="nofollow" type="text/css" /> (1)
</head>
<body>
<div id="strona"> (2)
<div id="top"><p class="grubas">TOP</p></div> (3)
<div id="menu">MENU</div>
<div id="tresc">TRESC</div>
<div id="stopka"><p class="grubas">STOPKA</p></div>
</div>
</body>
</html>

KOD CSS:

#strona {
width: 500px;
height: 700px;
}
#top {
height: 150px;
background-color: blue;
}
#menu{
height: 500px;
width: 30%;
background-color: green;
float: left;
}
#tresc{
height: 500px;
width: 70%;
background-color: yellow;
float: right;
}
#stopka{
height: 50px;
background-color: red;
}
.grubas {
font-weight: bold;
}

Zacznijmy od opisania nowych rzeczy z kodu HTML:

(1) - dołączamy zewnętrzny arkusz stylów znajdujący się w pliku „style.css"
(2) - przypisujemy atrybut „id" znacznikowi „div", który określa unikalny w skali całego dokumentu identyfikator elementu. W całym dokumencie nie mogą znaleźć się dwa (lub więcej) elementy o takim samym identyfikatorze
(3) - przypisanie znacznikowi „p" atrybutu „class" określjącego przynależność elementu do klasy. Jeśli chcemy zastosować jeden styl dla wielu elementów w dokumencie należy przypisać go do wybranej klasy.

Pseudoklasy

Pseudoklasy umożliwiają zdefiniowanie wyglądu elementu dla jego fragmentu (np pierwsza litera) lub gdy znajduje się on w specjalnym stanie (np kliknięcie).
Najpopularniejsze pseudoklasy to:

- :hover :: najechanie myszką na element a:hover {
  font-size: 50px;
  }

Przykład

:active :: kliknięcie na element a:active {
color: green;
}

Przykład

:visited :: odwiedzone hiperłącze a:visited {
text-decoration: none;
}

Przykład

:focus :: uaktywnienie kontrolki tekstowej (input, textarea) input:focus {
background-color: #ABC;
}

Przykład

:first-letter :: definicja wyglądu pierwszej litery p:first-letter {
color: red;
}

Przykład

:first-line :: definicja wyglądu pierwszej lini p:first-line {
text-transform: uppercase;
}

Przykład

Czego w HTML nie znajdziemy?

Jak można było zauważyć wiele rzeczy dostępnych w CSS można zrobić równie dobrze za pomocą samego HTML. Kaskadowe arkusze stylów prócz możliwości opisu dokumentu znanych z HTML dają nam serie nowych właściwości. Zaliczyć do tego można kompleksowy opis wyglądu ramek, marginesów czy wypełnień.
Różnorodność wprowadzonych właściwości umożliwia nam praktycznie nieograniczoną możliwość opisu wyglądu naszych stron. Jedynym mankamentem związanym z arkuszami stylów jest różnorodność silników interpretujących kod CSS. Jako, że każda przeglądarka posiada swój własny silnik nie zawsze prezentowana przez nią strona odpowiada temu czego się spodziewaliśmy. Można co prawda temu zaradzić poprzez użycie odpowiednich sztuczek, które wpływają na wygląd strony w określonej przeglądarce, ale ujmuje to znacząco elastyczności CSS. Większym problemem związanym z silnikiem interpretującym arkusze stylów, jest brak wsparcia dla niektórych właściwości języka. Przeglądarką sprawiającą najwięcej problemów z interpretacją kodu CSS jest paradoksalnie najpopularniejszy na rynku Internet Explorer.

Źródło: Bełdzio

Licencja: Creative Commons - bez utworów zależnych

html technologia css programowanie