CSS - wprowadzenie

CSS (Cascading Style Sheets) - Kaskadowe Arkusze Stylów - tworzony od 1994 roku i rozwijany język służący do programowania wyglądu stron HTML.

Zanim stworzono CSS do opisu wyglądu strony używano specjalnych znaczników (np. <font size="3" face="arial"> , <center>) albo atrybutów (np. color="green"). Programowanie wyglądu strony przy użyciu tych znaczników było: 1/ uciążliwe dla dużych stron (poza tym zwiększało ich rozmiar), 2/zaciemniało strukturę treści dokumentu. Poza tym w przypadku, gdy trzeba było zmienić wygląd strony należało przeglądać i zmieniać wszystkie pliki *.html, które tą stronę tworzyły.

W przypadku CSS możliwe jest zakodowanie wyglądu strony w jednym pliku (np. style.css), a później w każdym z plików HTML wskazywanie na ten plik jako źródło styli używanych do wyświetlania strony. W ten sposób zmieniając jeden plik, możemy zmieniać wygląd wszystkich dokumentów HTML.

Style definiujemy w formie reguł:

selektor {
  cecha: wartość;
  inna-cecha: wartość;
}

Selektor wskazuje do których elementów dokumentu XHTML mają być dodane wymienione między nawiasami style.
Najprostszym selektorem jest podanie nazwy znacznika. Wtedy style będą dodane do wszystkich elementów danego typu.

Przykładowo, jeśli wszystkie paragrafy mają mieć powiększoną czcionkę:

p {
  font-size: 1.2em;
}

Arkusze stylów

Reguły stylów mogą być zawarte w zewnętrznym pliku z rozszerzeniem .css (arkuszu stylów).
Arkusze stylów dodajemy do dokumentu XHTML przy pomocy znacznika link wewnątrz nagłówka dokumentu.

<head>
 ...
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

Atrybuty:

  • rel - definiuje typ relacji między dołączanym dokumentem, a dokumentem XHTML — w tym przypadku stylesheet (arkusz stylów)
  • type - typ dołączanego dokumentu
  • href - adres dołączanego elementu (pełny adres URL lub nazwa pliku)

Struktura arkusza stylów jest taka sama jak zawartość omówionego powyżej znacznika style — jest to zbiór reguł opisanych przez selektory i cechy stylów.

Plusy i minusy

Eliminuje wszystkie minusy powyższych metod i prawie nie ma wad :)

Selektory

Element

Podstawowy selektor to nazwa znacznika — wybiera wszystkie elementy danego typu.

/* szary kolor tła całego dokumentu */
body {
  background-color: #CCCCCC;
}
 
/* czerwony kolor wszystkich elementów strong */
strong {
  color: red;
}

Identyfikator

Można wskazać w stylach element o konkretnym identyfikatorze id.

/* szary kolor tła nagłówka */
#header {
  background-color: #CCCCCC;
}
 
/* usunięcie stylów listy o identyfikatorze menu */
ul#menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

Klasa

Identyfikator id ma pewne ograniczenie — w dokumencie może znajdować się tylko jeden element o takim identyfikatorze. Jeśli chcemy w pewien sposób wyróżnić kilka elementów możemy im nadać klasę (lub klasy) przy pomocy atrybutu class

Np.

<ul id="menu">
  <li class="first">Strona główna</li>
  <li>O autorze</li>
  <li class="new current">Nowości</li>
  <li class="new last">Artykuły</li>
</ul>
 
<p class="new">To jest nowość!</p>

Dany element może mieć kilka klas (oddzielonych spacjami). Kolejność wymienionych klas nie ma znaczenia.

Selektory wykorzystujące klasy wyglądają następująco:

/* dowolny element z klasą new ma być czerwony */
.new {
  color: red;
}
 
/* element li z klasą current ma być pogrubiony */
li.current {
  font-weight: bold;
}
 
/* element li z klasą last ma mieć ramkę z prawej strony */
li.first {
  border-right: 1px solid blue;
}
 
/* element li z klasami new i current ma mieć tekst pochylony i kolor zielony
    UWAGA: wskazywanie kilku klas jednocześnie może nie działać w IE6 :P
 */
li.last.current {
  font-style: italic;
  color: green;
}

Nazwy klas powinny być związane z semantycznym znaczeniem danych elementów, a nie z ich stylami.

Przykładowo dobre nazwy klas to first, last, new, important itp, a złe nazwy to red, big, large-green-font itp.

Hierarchia elementów

W selektorach możemy też wykorzystać wiedzę o strukturze stylowanego dokumentu XHTML i odwoływać się do elementów znajdujących się wewnątrz innych elementów.

/* element em wewnątrz paragrafu ma być pogrubiony */
p em {
  font-weight: bold;
}
 
/* element em wewnątrz nagłówka ma być pochylony */
h1 em {
  font-style: italic;
}
 
/* element li wewnątrz listy o identyfikatorze #menu ma mieć tło żółte */
ul#menu li {
  background-color: yellow;
}
 
/* element li o klasie current wewnątrz listy o identyfikatorze #menu ma mieć tło szare */
ul#menu li.current {
  background-color: #CCCCCC;
}

UWAGA!!!
Taki selektor wyznacza wszystkie elementy niżej w hierarchii — nie tylko bezpośrednie dzieci. Może to stwarzać problemy np. przy zagnieżdżonych listach.

Grupy elementów

Jeśli te same style dotyczą różnych elementów, można je pogrupować:

/* wszystkie nagłówki mają być pogrubione */
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}
 
/* elementy listy o id menu i elementy list o klasie links mają być niebieskie */
#menu li, ul.links li {
  color: blue;
}

Grupować możemy dowolne selektory oddzielając je przecinkami.

Pseudo-klasy dla linków (i nie tylko)

Specyfikacja CSS definiuje pewne pseudo-klasy pozwalające wskazywać elementy o pewnych specyficznych własnościach.

Przykładowo dla linków mamy:

/* link w stanie "spoczynku" ma być niebieski z podkreśleniem */
a:link {
  color: blue;
  text-decoration: underline;
}
 
/* link odwiedzony ma być szary */
a:visited {
  color: #CCCCCC;
}
 
/* link nad którym jest kursor myszy ma być pomarańczowy z niebieskim tłem */
a:hover {
  color: orange;
  background-color: blue;
}
 
/* link który jest klikany ma być pomarańczowy bez tła */
a:active {
  color: orange;
  background-color: transparent;
}

Ze względu na działanie kaskady (o niej już za chwilę) kolejność definicji stylów dla linków ma znaczenie.
Warto trzymać się kolejności definiowanej przez zasadę LoVe HAte (:link :visited :hover :active).

Pseudo-klasa :hover pozwalająca wskazać elementy nad którymi znajduje się kursor myszy może być używany nie tylko do linków:

/* rząd tabeli nad którym jest kursor myszy ma być szary
    UWAGA: w IE6 :hover działa tylko na linkach :P
 */
tr:hover {
  background-color: #CCCCCC;
}

Dziedziczenie

Dziedziczenie jest dość naturalną cechą stylów CSS. Polega ono na tym, że elementy dokumentu XHTML dziedziczą reguły stylów po elementach, w których się znajdują.

Przykładowo wszystkie elementy em i strong znajdujące się wewnątrz paragrafu dziedziczą po tym paragrafie czcionkę, jej kolor i rozmiar (o ile ich własne style tego nie definiują na nowo).

Należy jednak pamiętać, że nie wszystkie cechy stylów są dziedziczone!

Dziedziczone są wszystkie właściwości czcionki i tekstu, także kolor tekstu color, ale już tło i kolor tła background-color nie są dziedziczone! — Dlaczego zatem elementy znajdujące się wewnątrz innych mają to samo tło?

Dziedziczenie w Firebug

W widoku HTML w Firebugu po prawej stronie znajdują się reguły CSS dotyczące zaznaczonego elementu dokumentu. Można tam prześledzić proces dziedziczenia (im niżej tym głębiej w strukturze dokumentu, aż do właściwości dziedziczonych z elementu body).

Kaskada

Kaskada jest kluczową cechą stylów CSS. Pozwala ona stwierdzić jakie style mają być nadane elementowi, jeśli jest on wskazany przez klika selektorów lub ma style nadane w kilku różnych arkuszach lub kilkoma metodami aplikowania stylów (patrz początek zajęć).

Hierarchia reguł budowana jest na podstawie sposobu dołączenia stylów do elementu i na podstawie specyficzności elementu.

Kaskada w Firebugu

Podobnie jak w przypadku dziedziczenia, w widoku HTML po prawej stronie zauważyć możemy kaskadę reguł przydzielonych do danego elementu. Przekreślone właściwości oznaczają takie, których wartość została nadpisana na niższym poziomie kaskady (wyżej na liście w Firebug).

Model "pudełkowy" - box model

Tzw model pudełkowy służy definiowaniu rozmiarów i odstępów między elementami blokowymi dokumentu XHTML.
Rozmiary elementów blokowych opisywane są wysokością i szerokością (width height), odstępem padding, ramką border i marginesem margin.

boxdim.gif

http://www.w3.org/TR/CSS2/box.html

3d-box-model.png

http://www.hicksdesign.co.uk/boxmodel/

Walidator CSS

Pod adresem http://jigsaw.w3.org/css-validator/ znajduje walidator pozwalający sprawdzić poprawność stylów CSS dołączonych do strony o podanym adresie, przesłanych jako plik lub wpisanych/wklejonych w okno (analogicznie do walidatora CSS).

UWAGA
Skoro już wiemy o walidatorze CSS, to z niego korzystamy i arkusze stylów w rozwiązywanych zadaniach muszą się poprawnie walidować.


Pomoce naukowe


Zadanie 4

  1. Wszystkie dodane dotychczas style przenieść do zewnętrznego arkuszu - stworzyć plik style.css na swoim serwerze i dołączyć go do nagłówku dokumentu znacznikiem link. Na żadnej stronie nie powinien pozostać żaden atrybut style!!! Wszystkie style od tego momentu opisujemy w arkuszu CSS.
  2. W arkuszu CSS wykorzystać wszystkie poznane selektory (przez element, identyfikator, klasę, hierarchię, grupę selektorów, pseudo-klasę linków) do nadania stylów różnym elementom na stronie.
  3. Wykorzystać poznane właściwości modelu pudełkowego (border, margin, padding) do nadania stylów elementom blokowym na stronie (np. nagłówkom, paragrafom, blokom cytatów, listom).

Każda podstrona musi oczywiście być poprawnym ("walidującym się") i semantycznie poprawnym XHTML-em.
Arkusz CSS musi być poprawnym ("walidującym się") dokumentem CSS.

A także:

  • Przemyśleć jakie elementy wyglądu strony chcielibyście mieć omówione na zajęciach (typu "jak zrobić zaokrąglone narożniki?", "jak zrobić elementy menu, które wygląda jak na takiej czy takiej stronie") i przesłać propozycje na maila.

termin: piątek godzina 0:00 (północ z piątku na sobotę)
punkty: 3

  • 1 punkt za przeniesienie stylów do zewnętrznego walidującego się arkusza stylów - żaden element XHTML nie ma mieć atrybutu style
  • 1 punkt jeśli dodatkowo wykorzystano wszystkie poznane typy selektorów
  • 1 punkt jeśli dodatkowo poprawnie wykorzystano właściwości modelu pudełkowego do nadania stylów elementom blokowym.

Za każdy dzień spóźnienia odejmowany jest 1 punkt.

Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy