Podstawy CSS  

Autor: Bożena Jurczyk

Opublikowano: 2011-05-10

Wprowadzenie

Cascading Style Sheets (kaskadowe arkusze stylów), czyli CSS, to język wręcz niezbędny do kontroli wyglądu tworzonej strony. Bardzo ważne jest, aby pamiętać, że CSS nie odpowiada za układ dokumentu ani za organizację, ale za formatowanie zawartej w nim treści, dzięki czemu możliwe jest oddzielenie struktury dokumentu od sposobu jego prezentacji. Poza tym CSS oferuje o wiele więcej opcji formatowania, niż HTML, które zajmują mniej miejsca, i – co równie ważne – dzięki umieszczeniu wszystkich stylów w zewnętrznych arkuszach umożliwiają łatwą aktualizację wyglądu witryny.

Pisząc stronę, musimy pamiętać o znaczeniu poszczególnych znaczników w HTML, który przydziela tekstowi pewne role. Można więc określić, co będzie nagłówkiem, listą, nowym akapitem itd. CSS pozwala na uproszczenie kodu HTML, ograniczając go jedynie do przedstawienia struktury i eliminując wszystkie znaczniki i atrybuty formatujące tekst. Dlatego można zrezygnować z takich znaczników, jak <font>, <b>, <table> – jeśli są używane do stworzenia układu strony. To wszystko możemy teraz zrobić za pomocą arkuszy stylów.

Po przeczytaniu tego artykułu będziesz wiedział:

• jaka jest budowa stylu,
• czym są selektory, klasy i identyfikatory w CSS,
• co to jest dziedziczenie i kaskadowość.

Implementacja

Ogólny schemat klasy CSS – selektor {właściwość: wartość; właściwość: wartość; … }. Każda klasa stylu składa się z następujących elementów:

• selektor – informuje przeglądarkę, do jakich znaczników strony odnosi się styl,
• blok deklaracji – to kod po selektorze znajdujący się pomiędzy nawiasami klamrowymi; są to różne deklaracje stylów,
• deklaracje – są to pary typu „właściwość: wartość”,
• właściwość – jedno lub wiele słów oddzielonych myślnikami, odnoszące się do konkretnej właściwości, np. koloru, wielkości czcionki, szerokości itd.,
• wartość – nadaje konkretny efekt wizualny wybranym elementom strony.

Selektory

Istnieje kilka grup selektorów:

• Selektory znaczników – odnoszą się do każdego wystąpienia wybranego znacznika. Ich nazwy są takie same jak nazwy znaczników, do których są stosowane, jednak bez znaków „<” i „>”. Mają niestety pewne ograniczenie: ich zastosowanie dotyczy wszystkich wystąpień znacznika, zatem jeżeli chcemy zastosować styl tylko do części znaczników, musimy użyć bardziej precyzyjnych selektorów.
  Przykłady:**
  p {background-color: #CCCCFF; text-align: center; } – style dla wszystkich akapitów,

  h1{ font-family: Arial; margin-top: 10px; } – style dla wszystkich nagłówków 1. stopnia.

• Selektory klas – umożliwiają  nadanie utworzonego stylu dla dowolnego znacznika na stronie. Wystarczy utworzyć taką klasę i zastosować ją dla wybranych elementów, nie stylizując pozostałych. Selektor taki rozpoczyna się kropką, dalej jest nazwa klasy, w której można używać jedynie liter, cyfr, łączników i znaków podkreślenia, z tym że bezpośrednio po kropce musi być litera.

  Rozróżniane są małe i wielkie litery.
  Przykłady:**
  .images { width: 100px; height: 100px;} – elementy, do których zostanie przypisana ta klasa, będą miały wymiary 100x100px,

  .specialText { font-size:18px; font-style:italic; } – tekst wyróżniony tym stylem będzie pochylony, a czcionka będzie wielkości 18px.

  Po utworzeniu takiego stylu musimy go jeszcze dołączyć do wybranych elementów na stronie. Dokonamy tego poprzez wpisanie w kodzie HTML nazwy naszej klasy pod wartość atrybutu class wybranego znacznika. Użyta tu nazwa klasy powinna być już bez kropki.
  Przykłady:**
  <img class="images" title="Mój Obrazek" src="../Picture.png" alt="Obrazek uszkodzony"/>

  <span class=”specialText”>Tekst ten będzie wyróżniony dołączonym stylem.<span/>

• Selektory ID – nadają się idealnie do podpięcia stylu do pojedynczego elementu strony, dzięki czemu identyfikują niepowtarzalne części witryny. W przeciwieństwie do selektora klasy, możemy użyć takiego stylu tylko raz na stronie. Znak rozpoczynający selektor klasy to „#”. Po nim bezpośrednio jest nazwa identyfikatora elementu, do którego będzie zastosowany.  Zasady tworzenia nazwy są takie same jak w przypadku klas.
  Przykłady:**
  #header{ height:auto; background-color:#9ED4FF;} – wysokość dostosowuje się do zawartości i posiada określone tło,

  Styl ten będzie użyty do elementu na stronie, który będzie posiadał atrybut:

  id = #header, np.:  <div id="header"></div>

• Selektor uniwersalny – jest dostępny wszystkim znacznikom na stronie, niezależnie od ich typu. Na przykład selektor * { font-weight: italic; } sprawi, że cały tekst na stronie będzie pochylony.

• Selektory zagnieżdżone, czyli selektory potomka. Przy tych selektorach należy omówić parę niezbędnych pojęć:

  drzewo HTML – to hierarchiczny układ elementów HTML, gdzie każdy element strony ma dokładnie jednego rodzica (oprócz elementu HTML),
  przodek – element będący o jeden lub więcej poziomów wyżej w drzewie hierarchii niż dany element, czyli znacznik, zawierający ten element,
  potomek – element będący o jeden lub więcej poziomów niżej w drzewie hierarchii w stosunku do danego elementu, czyli znaczniki będące w danym znaczniku.
  rodzic – jest najbliższym przodkiem danego znacznika, czyli jest dokładnie jeden poziom wyżej w drzewie HTML,
  dziecko – znacznik, który znajduje się bezpośrednio w danym elemencie,
  brat – znacznik będący na tym samym poziomie w drzewie hierarchii.

Drzewo HTML umożliwia tworzenie selektorów potomka zagnieżdżonego w różnym stopniu w innych znacznikach. Selektory takie tworzy się według reguły: przodek potomek { }, gdzie przodków może być więcej niż jeden, np. #content ul a { } oznacza wybór tylko tych znaczników <a>, które znajdują się w liście niepunktowanej, a która z kolei znajduje się wewnątrz elementu o id content. Selektor znacznika, który zamierzamy sformatować, znajduje się zawsze na końcu.

Rozważmy jeszcze taką sytuację: znacznik <a> znajduje się w znaczniku <p>, który z kolei jest zagnieżdżony w  elemencie listy <li>. Następujące selektory odpowiadają dokładnie za ten sam wybór znacznika <a>: p a { }, li p a { },body p a { }, co oznacza, że aby odwołać się do danego elementu, nie musimy zawsze wymieniać wszystkich jego przodków.

• **Selektor dziecka

  rodzic > dziecko { }**
  Tak utworzony selektor nada styl elementom będącym dokładnie o jeden poziom niżej w drzewie hierarchii niż jego rodzic. W przeciwieństwie do selektorów potomka, selektor ten pozwala dokładnie określić dziecko, do którego chcemy zastosować styl. W tym celu używamy znaku „>”.

• **Selektor brata

  brat1 + brat2 { }**
  Selektor ten umożliwia nadanie stylów sąsiadującym ze sobą elementom o tym samym rodzicu, dokładniej – elementowi znajdującemu się po prawej stronie znaku „+”.

• Selektor atrybutu
  Umożliwia on formatowanie elementu na podstawie jego atrybutów, dzięki czemu możemy nadać styl wyłącznie elementowi o określonych atrybutach, a nawet o określonych wartościach tych atrybutów. Można je stosować zarówno do znaczników, jak i klas, np.:

  a[href="startStrony"] { color:Green;} – wyróżni wszystkie linki odnoszące się do startu strony,
  input[type="text"] – odniesie się do wszystkich pól tekstowych formularza,

Grupowanie selektorów

Jeżeli chcemy, aby utworzony przez nas styl został przypisany do wielu selektorów, wystarczy wymienić je rozdzielając przecinkami. Na przykład styl p, h1, .special, #content { } nada styl wszystkim akapitom, nagłówkom pierwszego poziomu, elementom z klasą .special oraz elementom o id content.

Pseudoklasy i pseudoelementy

Są to specjalne elementy kodu HTML, umożliwiające w prosty sposób zlokalizowanie pewnych charakterystycznych elementów lub zdarzeń na stronie.

Pseudoelementy:

• :before – pozwala dodać treść przed określonym elementem. Tekst taki nazywa się technicznie treścią generowaną dynamicznie. Niestety, przeglądarka Internet Explorer 6 i niżej całkowicie to ignoruje,
• :after – tworzy dynamicznie treść za wybranym elementem,
• :first-child – formatuje wszystkie elementy, które są pierwszym dzieckiem pewnego elementu. Należy jednak pamiętać, że selektor ten zawiera tylko nazwę dziecka, zatem sformatuje wszystkie te elementy, które są pierwszym dzieckiem dowolnego innego elementu,
• :first-letter – umożliwia wyróżnienie pierwszej litery elementu podanego w selektorze,
• :first-line – nadaje styl pierwszej linii znajdującej się w elemencie, na który wskazuje selektor.

Najczęściej stosowane pseudoklasy pozwalające formatować odnośniki w zależności od stanu:

• :link – dotyczy linków jeszcze nieodwiedzonych, nad którymi nie znajduje się kursor (tylko odsyłacze),
• :visited – dotyczy linków, które zostały już kliknięte i odwiedzone, z zapisaniem informacji w przeglądarce (również tylko odsyłacze),
• :hover – odnosi się do linków, nad którymi w danym momencie znajduje się kursor myszy (oprócz przeglądarek IE 6 i niżej można zastosować do każdego elementu),
• :active – umożliwia nadanie stylu dla odnośnika w momencie jego kliknięcia, czyli od wciśnięcia przycisku do jego zwolnienia.

Przykłady:

input:focus: { color:Green; } – zmieni kolor tła pola tekstowego, który w danej chwili zdobędzie fokus na stronie,

h1.important:before { content: "Uwaga"; } – doda przed każdym nagłówkiem 1. stopnia tekst „Uwaga”.

Dziedziczenie

Dziedziczenie jest procesem, w którym elementy niższego poziomu dziedziczą style elementów znajdujących się wyżej w drzewie hierarchii. Mówiąc prościej, właściwości jakiegoś elementu są dziedziczone przez elementy w nim zagnieżdżone. Oczywiście pod warunkiem, że nie otrzymają bezpośrednio swoich własnych wartości. Dotyczy to wszystkich stylów (selektorów znaczników, klas, identyfikatorów, potomków), dzięki czemu wielokrotnie upraszcza arkusze stylów. Przykładowo, jeżeli nadamy styl dla znacznika body, to wszystkie elementy w nim się znajdujące odziedziczą go. Istnieją jednak pewne właściwości, których nie można dziedziczyć. Należą do nich:

• właściwości określające położenie elementów na stronie, marginesów, kolorów tła i obramowania,
• niektóre znaczniki mają swój określony i charakterystyczny dla nich styl, np. nagłówki zawsze będą większe niż pozostały tekst w akapicie, zaś odnośniki będą koloru niebieskiego.

W przypadku wystąpienia konfliktu stylów wygrywa ten, który jest bardziej precyzyjny. Nazywamy to kaskadą.

Kaskadowość

Kaskadowość stylów określa sposób rozwiązywania sytuacji, kiedy do jednego elementu na stronie przypisanych jest kilka różnych stylów. Oto kilka zasad ułatwiających określenie, który styl będzie zastosowany:

• zawsze zostanie zastosowany styl bezpośrednio określony dla danego znacznika,

• jeżeli znacznik nie posiada bezpośrednio stylu, to pierwszeństwo ma styl najbliższego przodka,

• w przypadku zastosowania stylów mających różne selektory i nie kolidujących ze sobą – są one zwyczajnie łączone, jednak w przeciwnym przypadku stosujemy formułę umożliwiającą określenie precyzji stylu – przypisuje ona dla poszczególnych stylów określone wagi:

  • selektor znacznika, w tym pseudoelementy: 1
  • selektor klasy, w tym pseudoklasy: 10
  • selektor identyfikatora: 100
  • styl wpisany: 1000

  W przypadku kilku selektorów precyzja jest sumą wszystkich wartości. Style dziedziczone nie są brane tu pod uwagę. Przykład:

  #head p a – waga 102 = 100 (identyfikator) + 1 (znacznik) + 1 (znacznik)

  .myClass #head a:link – waga 121 = 100 (identyfikator) + 20 (klasa i pseudoklasa) +1 (znacznik)

  a.special:link – waga 21 = 20 (klasa i pseudoklasa) + 1 (atrybut)

  p:first-letter – waga 2 = 1 (selektor) + 1 (pseudoelement)

• jeżeli kolidują ze sobą style o takiej samej precyzji, wygrywa ten styl, który został dodany jako ostatni.

Podsumowanie

W tym artykule poznaliśmy podstawową budowę stylu. Dowiedzieliśmy się też o różnych sposobach stosowania klas CSS do elementów znajdujących się na stronie oraz możliwościach rozwiązywania konfliktów stylów odnoszących się do tego samego znacznika.

W kolejnym artykule nauczymy się, w jaki sposób możemy dołączyć style do naszej witryny oraz ważnej roli, jaką odgrywają dwa znaczniki: <div> oraz <span>.