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".
Polecamy: Mega Sekurak Hacking Party
Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - wpiszcie go w koszyku, dzięki czemu otrzymacie 40% zniżki na bilet standard. Więcej szczegółów znajdziecie tutaj.
Książka: Wprowadzenie do bezpieczeństwa IT
Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!
Pomóż dzieciom
Polska Akcja Humanitarna od wielu lat dożywia dzieci. Prosimy, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękujemy!
Komentarze
Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać: kontakt@pasja-informatyki.pl. Dziękujemy za poświęcony czas - to dzięki Wam serwis staje się coraz lepszy!