Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (ang. Cascading Style Sheets - CSS) to język służący do opisu formy wyświetlania stron WWW. Arkusz stylów CSS to lista reguł ustalających w jaki sposób ma zostać wyświetlona przez przeglądarkę internetową zawartość wybranego elementu HTML.
 
Arkusz stylów CSS może być osadzony na trzy sposoby:
  • arkusz zewnętrzny
  • zagnieżdżony
  • wpisany w znaczniku (lokalny)
Najlepszą metodą z punktu widzenia przejrzystości kodu jest podpięcie arkusza zewnętrznego, pozostałe sposoby są najbardziej przydatne na etapie projektowania strony.
 
Styl lokalny (wpisany, inline) stosuje się do zmiany wyglądu kilku wyrazów lub linijek tekstu. Stosowanie tego stylu jest kłopotliwe, gdy chcemy zmienić wiele elementów na stronie. Wymaga to wpisania dużej ilości kodu.
np.
<p style="font-size: 20pt; color: red; font-family: arial; font-style:  italic;">różowy słoń ma usiąść na tępych gwoździach</p>
Spowoduje wyświetlenie pochylonego, czerwonego napisu przy użyciu czcionki Arial i wielkości liter 20 punktów.
 
Styl zagnieżdżony (osadzony)
Zastosowanie stylu osadzonego ma większy sens niż stylu wpisanego, bo cały kod arkusza wpisujemy tylko raz umieszczając go w części <head> każdej strony.
 
Przykładowy osadzony arkusz CSS wygląda tak:
<style>
body {background-color: black; font-size: 20pt; font-family: arial}
p {text-align: justify; color: red} 
</style>
W powyższym arkuszu stylów określono, że tło ma mieć kolor czarny, wielkość liter ustalono na 20 punktów, a czcionkę na Arial. Dodatkowo tekst zamknięty znacznikami <p></p> będzie napisany kolorem czerwonym i wyjustowany.
Moim zdaniem powtarzanie arkusza CSS na każdej podstronie nie ma większego sensu. Łatwiej jest stworzyć zewnętrzny arkusz stylu, który można później podlinkować do każdej podstrony wpisując na niej tylko jedną linię kodu.
 
Zewnętrzny arkusz stylu
Zewnętrzny arkusz stylu to osobny plik o rozszerzeniu .css, w który wpisuje się wszystkie definicje stylów jeden raz. W każdej z dołączonych do serwisu stron należy w części <head> wpisać:
<link rel="stylesheet" href="/style/style.css">
style.css to nazwa pliku, w którym umieściliśmy nasze definicje stylu, oczywiście nazwa może być dowolna, a rozszerzenie nie. Jeżeli plik style.css znajduje się w jakimś osobnym folderze to przed nazwą pliku podaje się ścieżkę dostępu do pliku (np. style/style.css)
 
W pliku style.css można wpisać np. takie definicje:
body {text-align: justify; margin-left: 1cm; margin-right: 1cm; margin-top: 1cm;}
p {font-family: Arial, Helvetica; font-size: 10pt; font-weight: normal; text-indent: 3em;}
h1 {font-size: 24pt;}
h2 {font-size: 20pt;}
h3 {font-size: 16pt;}
h1, h2, h3 {font-family: Arial, Helvetica; font-weight: bold; color: #808000;}
Na każdej stronie można zastosować styl mieszany tzn. połączenie stylu wpisanego np. z zewnętrznym i osadzonym.
 

A co to ta kaskadowość?

Kaskadowość określa hierarchię ważności stylów w dokumencie HTML. W pierwszej kolejności uwzględniane są definicje wpisane do arkusza zewnętrznego. Ważniejsze od nich są jednak te wpisane w arkuszu zagnieżdżonym. Gdybym w arkuszu zewnętrznym i zagnieżdżonym opisał np. kolor tekstu i w zewnętrznym wpisałbym czerwony, a w zagnieżdżonym niebieski to kolor wyświetlony na stronie byłby niebieski, chyba że po raz trzeci wpisałbym go bezpośrednio lokalnie w znaczniku, czyli najbliżej opisywanego elementu. Wtedy to kolor opisany lokalnie byłby najważniejszy i nadpisałby zarówno arkusz zewnętrzny jak i zagnieżdżony. I na tym polega kaskadowość.

 
Kaskadowość to zasada, że im bliżej znacznika znajduje się styl tym jest ważniejszy tzn. najmniej ważny jest zewnętrzny, później osadzony, a najważniejszy wpisany bezpośrednio w znaczniku.
 
A teraz zachęcam Was do obejrzenia filmowej wersji lekcji o kaskadowości CSS, której autorem jest Mirosław Zelent. Proponuję jednak puszczenie jej z prędkością 1,5.
 
 
Jaka jest ogólna konstrukcja stylu?

selektor {cecha: wartość}

Deklaracje stylu zawarte są w nawiasach klamrowych { }. Jeżeli rozbudujemy definicję stylu jednego selektora o kilka cech to obowiązkowo rozdzielamy deklaracje średnikami np.:

p {font-family: Helvetica; font-size: 12pt;}

Jedna reguła może mieć wiele selektorów. Kolejne selektory oddziela się przecinkiem. Takie grupowanie zmniejsza ilość kodu więc jest szczególnie uzasadnione np.

h1, h2, h3 {font-family: Arial, Helvetica; font-weight: bold; color:  #808000;}

 

html how 2

HTML

 

w3s

colorpicker

Walidator HTML oraz CSS

© 2021 classroom.pl All Rights Reserved.
DMC Firewall is developed by Dean Marshall Consultancy Ltd