Programowanie webowe | 04. CSS potrzebny do egzaminu

Selektory, atrybuty, wartości

Mirosław Zelent

CSS (ang. Cascading Style Sheets) to tak zwane kaskadowe arkusze stylów i jak wiemy służą one do opisania wyglądu elementów witryny, uprzednio zdefiniowanych w HTML. Kodem CSS możemy także wpływać na położenie elementów i wzajemne relacje między nimi. Natomiast w związku z taką definicją, pojawia się nam w głowach naturalne pytanie: W jaki sposób w praktyce dokonać przypisania stylów do konkretnego znacznika HTML? Otóż aby nadać style potrzebujemy ten konkretny element "uchwycić" (czyli wybrać spośród wszystkich innych) – jako uchwyty stosujemy w CSS tzw. selektory.

Selektory, atrybuty, wartości

Ogólny schemat zapisywania kodu CSS prezentuje się następująco:

selector
 {
    property: value;
 }

Selektor (jak sama nazwa wskazuje: selekcja = wybór) określa jednoznacznie do których elementów z kodu HTML zostaną zastosowane właściwości podane w tzw. ciele selektora (czyli pomiędzy nawiasami klamrowymi). Każda właściwość (ang. property = właściwość, atrybut, cecha) określa jakiś aspekt wyglądu elementu, zaś wartość tego atrybutu (ang. value) zapisana jest po dwukropku i zakończona średnikiem. Oczywiście najlepiej jest zobaczyć przykładowy zapis, zamiast ogólnej konwencji:

body
 {
    background-color: gray;
    font-family: Arial;
 }

W tym przypadku naszym selektorem uchwyciliśmy sekcję <body> czyli całe ciało witryny, nadając jej szary kolor tła oraz krój czcionki Arial. Znaki białe (spacje, przejścia do nowej linii) są opcjonalne - można je wyciąć, przygotowując tzw. "wersję min" arkusza. Wówczas plik zajmuje mniej miejsca (nieco szybciej się wczytuje internaucie przez internet), ale oczywiście taki arkusz siłą rzeczy jest mało czytelny. Najczęściej więc pracujemy na zwykłym arkuszu, a "wersję min" przygotowujemy jedynie po zakończeniu pracy nad witryną (tzw. wersja produkcyjna kodu, która trafia na serwer). Zapis pozbawiony znaków białych wyglądałby tak:

body{background-color:gray;font-family:Arial;}

Oczywiście "uchwycić" w CSS możemy nie tylko znaczniki – samo posługiwanie się tagami szybko okazałoby się niewystarczające – na przykład taki zapis:

div
 {
    width: 350px;
 }

Taki selektor złapie każdego jednego diva na stronie i ustawi mu 350 pikseli szerokości. Nie jest to sytuacja w żaden sposób wygodna, gdyż zazwyczaj struktura divów składa się z bardzo wielu różnych bloków, które siłą rzeczy potrzebują zróżnicowanych szerokości. A zatem musimy mieć w CSS możliwość złapania pojedynczego znacznika div, jednego konkretnego pojemnika (lub ewentualnie kilku, jeżeli zdarzy się tak, że jakieś bloki rzeczywiście mogą, albo nawet powinny mieć tę samą szerokość). I jak zapewne wiemy, do celu uchwycenia konkretnych elementów służy w arkuszach stylów albo klasa (ang. class) albo identyfikator (ang. ID). W kolejnym artykule poznamy różnicę pomiędzy nimi.

Operator myślnika, subatrybuty

Znak myślnika - oddaje hierarchię właściwości: najpierw następuje właściwość główna (background), następnie operator myślnika, a potem subatrybut właściwości głównej (color):

 body { background-color: gray; }

Za każdym razem, kiedy widzisz w CSS myślnik, zastosuj prostą regułę: idąc zawsze od prawej strony zapisu do lewej, zadawaj sobie pytania o napotykane właściwości, aż do momentu, gdy dotrzesz do selektora. W naszym przypadku mamy: kolor [czego?] tła [tła czego?] sekcji body. Im bardziej coś jest po lewej stronie w CSS, tym wyżej znajduje się w tej kaskadzie. To właśnie z tego powodu zapisy CSS najłatwiej jest czytać "od prawej do lewej".

Poprzedni wpis

Następny wpis