O języku formatowania treści CSS, wspominaliśmy już klika razy w ciągu naszego kursu. Warto dowiedzieć się trochę więcej o tym nieodłącznym kompanie języka HTML.
Zależność pomiędzy językiem HTML, a CSS można zapisać następująco. Język Html opisuje dane elementy na stronie, możemy powiedzieć, że służy do nazywania ich. W języku html możemy określić nagłówek i paragraf. Natomiast w języku CSS możemy określić jaki rozmiar i kolor czcionki mogą one posiadać.
Rozwinięciem skrótu CSS (ang. Cascading Style Sheets) są kaskadowe arkusze stylów. Słowo arkusz można traktować jako plik, w którym zapisujemy reguły formatowania. Reguły formatowania przypisujemy do konkretnych elementów HTML poprzez znane nam z lekcji wcześniejszej selektory. Dowiedzmy się trochę więcej o samych regułach formatowania, a później przejdziemy do selektorów.
Reguły CSS to inaczej zbiory zasad służące do formatowania treści. Zbudowane są one z własności (ang. property) oraz jej wartości (ang. value).
Nazwa wartości musi być zawsze poprzedzona dwukropkiem :
, a cała reguła zakończona średnikiem ;
.
własność: wartość;
Jeśli nazwa własności jest kilkuczłonowa, zazwyczaj kolejne wyrazy oddzielane są myślnikiem -
, tak jak background-color
.
Własność background-color
używana jest do dodania koloru tła do elementu. Wartość blue to kolor niebieski.
background-color: blue;
Jeśli do własności dodamy więcej niż jedną wartość, wówczas oddzielamy je zwykłą spacją.
font: 16px Arial;
Przy pomocy reguły font
(ang. czcionka) możemy modyfikować m.in. rozmiar czcionki i jej rodzaj (rodzinę).
Rozmiar czcionki podajemy najczęściej w znanych nam już pikselach px
. Przez rozmiar czcionki mam na myśli jej wysokość, liczoną od szczytu najwyższej litery do dołu litery, która jest najniżej, np. ly.
Deklaracja czcionki, której chcemy użyć, wymaga znajomości jej pełnej nazwy. Jeśli pracowaliście kiedyś w edytorach tekstowych to zapewne znacie czcionkę Arial. Jest ona jedną z bardziej popularnych czcionek w użytku codziennym.
O czcionkach i o innych regułach CSS można mówić godzinami, nawet przeznaczymy na to cały kurs, ale teraz nie będziemy bardziej zagłębiać się w te tematy, bo to jednak nadal kurs Html. Przejdźmy teraz do selektorów.
Selektory CSS
Reguły CSS nie zadziałają dopóki nie przypiszemy ich do określonych elementów html, które aktualnie chcemy sformatować. Za powiązanie reguł CSS z elementami języka Html odpowiedzialne są tzw. selektory (ang. selector od select – wybierać). Jest wiele sposobów tworzenia selektorów w języku CSS. Posłużą do tego m.in same elementy html oraz atrybuty id
i class
.
Selektorem może być:
- element html np. p
- id elementu html, np. #header
- klasa elementu html, np. .klasa
Zapis selektora będzie kompletny, gdy dodamy do niego nawiasy klamrowe {}
. W nawiasach klamrowych będziemy dodawać reguły CSS.
p {} #header {} .klasa {}
Dodaliśmy na razie same selektory bez reguł CSS. Zapis ten jest poprawny, jednak nic on nie spowoduje. Musimy pomiędzy nawiasami klamrowym dodać jeszcze reguły CSS.
p {background-color: blue;} #header {background-color: blue;} .klasa {background-color: blue;}
Sam sposób zapisu selektorów i reguł CSS jest dowolny jeśli chodzi o używanie białych znaków, czyli spacji i enterów. Natomiast dobrą praktyką jest taki zapis.
p { background-color: blue; }
- selektor (spacja) {
- (dwie spacje) reguła CSS
- (dwie spacje) reguła CSS
- }
Zapis powyżej nie jest już językiem Html, jest to język CSS. Języka CSS nie możemy bezpośrednio dodawać do strony, gdyż nie zostanie on prawidłowo zinterpretowany przez przeglądarkę internetową. Jest kilka sposobów dodania języka CSS do naszej strony. A więc poznajmy je teraz.
Dodawanie CSS na stronę
Styl zapisany w języku CSS możemy dodać do strony na kilka sposobów. Style możemy dodawać bezpośrednio do elementu używając atrybutu style=""
. CSS możemy również zamieścić w specjalnie do tego przeznaczonym elemencie html <style>
. Trzecim sposobem jest utworzenie oddzielnego pliku, w którym będziemy przetrzymywać wszystkie nasze reguły CSS.
Sposoby dodawania CSS:
- atrybut
style=""
- elementy
<style>
- zewnętrzny plik CSS
<style="">
Pierwszym sposobem dodania CSS na stronę, jest dodanie stylu do konkretnego elementu html, stosując atrybut style
. Style dodane w ten sposób nazywane są liniowymi stylami (ang. inline style), z tego względu, że dodajemy je bezpośrednio do elementu, czyli liniowo. Dodajmy atrybut style
do, na razie pustego, elementu <p>
.
<p style=""></p>
Do atrybutu style
wstawiamy reguły CSS, bez selektora, ponieważ nadajemy ten styl tylko temu konkretnemu elementowi.
Spróbujmy dodać styl do elementu p
stosując atrybut style
. Powiedzmy, że chcemy, żeby tło elementu przybrało kolor żółty. W tym celu użyjemy poznanej przed chwilą reguły background-color
oraz przypiszemy do niego wartość koloru żółtego, czyli yellow
.
<p style="background-color: yellow;">Żółte Tło</p>
Żółte Tło
Jeśli pamiętacie lekcję o elementach liniowych i blokowych, to teraz możecie gołym okiem zobaczyć o czym była mowa na podstawie naszego paragrafu pomalowanego na żółto. Jak pewnie pamiętacie element <p>
jest elementem blokowym i znaczy to, że według definicji powinien zająć obszar całej linii. Czy tak rzeczywiście jest?Tak zgadza się. Tekst paragrafu jest dość krótki, a pomimo tego tło rozlało nam się na całą linię. Możemy już sami potwierdzić, że element <p>
jest elementem blokowym.
Zobaczmy jeszcze jak zmieni się nasz tekst, jeśli dodamy jeszcze jedną poznaną przez nas regułę CSS, mianowicie font
.
<p style="background-color: yellow; font: 28px Arial;">Żółte Tło</p>
Żółte Tło
Nie to, żebyśmy chcieli kiedyś coś takiego tworzyć, ale przy pomocy styli wszystko jest możliwe.
Dodaliśmy w ten sposób styl do pojedynczego elementu. A co jeśli chcielibyśmy dodać ten sam styl do wszystkich paragrafów na stronie, a mielibyśmy tych paragrafów 10? Czy nadal korzystalibyśmy ze styli liniowych?
<p style="font: 16px Arial;">Paragraf 1</p> <p style="font: 16px Arial;">Paragraf 2</p> <p style="font: 16px Arial;">Paragraf 3</p> <p style="font: 16px Arial;">Paragraf 4</p> <p style="font: 16px Arial;">Paragraf 5</p> <p style="font: 16px Arial;">Paragraf 6</p> <p style="font: 16px Arial;">Paragraf 7</p> <p style="font: 16px Arial;">Paragraf 8</p> <p style="font: 16px Arial;">Paragraf 9</p> <p style="font: 16px Arial;">Paragraf 10</p>
Sami widzicie, że utrzymanie takiego kodu to byłby koszmar. Jeśli byśmy chcieli zmienić rozmiar czcionki (np. na 15px) musielibyśmy dokonać tego w 10 miejscach, ergonomią to tego nazwać nie można. Istnieje więc może jakiś lepszy sposób dodania tych styli hurtowo do danego elementu html? Oczywiście, właśnie do tego służą selektory.
<style>
Drugim sposobem (bardziej cywilizowanym), dodania CSS do strony, jest zamieszczenie wszystkich reguł CSS w specjalnie do tego przeznaczonym elemencie html <style>
.
<style> </style>
Hmm.. element html, do którego dodajemy CSS, ciekawe. Tak właśnie element <style> jest elementem html, inaczej nie mógłby być zinterpretowany odpowiednio przez przeglądarkę.
Możemy to wytłumaczyć na tej zasadzie.. Element <style> wskazuje przeglądarce miejsce, w którym będziemy używać języka CSS i wszystko co się znajdzie w tym elemencie musi być przez nią interpretowane jako język styli, a nie html.
W którym zatem miejscu możemy umieścić element <style>?
- w zasadzie w całym dokumencie html, zarówno w sekcji
<body>
jak i<head>
, z jednym warunkiem, zawsze powyżej elementu, którego formatowanie dotyczy
<body> <style> p {font: 16px Arial;} </style> <p>Paragraf</p> </body>
- Jednak dobrą praktyką jest umieszczanie elementu <style> na samym dole sekcji
<head>
, czyli w tzw. ustawieniach strony
<head> <style> </style> </head>
Jak już wiemy, gdzie najlepiej umiejscowić element <style>, możemy zacząć dodawać do niego reguły CSS. Przedstawmy jeszcze tylko element, który będziemy stylizować.
<p>Paragraf do sformatowania.</p>
Najpierw musimy wskazać element html, który chcemy sformatować, czyli posłużymy się selektorem elementu html, czyli w tym przypadku będzie to po prostu p
.
<style> p {} </style>
Dodajmy teraz reguły CSS, które już znamy, tzn. font
i background-color
.
<style> p { font: 28px Arial; background-color: yellow; } </style>
I złóżmy to teraz w całość.
<style> p { font: 28px Arial; background-color: yellow; } </style> <p>Paragraf do sformatowania.</p>
Paragraf do sformatowania.
Spróbujmy teraz jeszcze pobawić się innymi rodzajami selektorów. Dodajmy trzy paragrafy jednemu nadamy unikalne id, a dwóm pozostałym tę samą klasę.
<p id="first">Paragraf z unikalnym id.</p> <p class="yellow">Paragraf z klasą.</p> <p class="yellow">Paragraf z klasą</p>
Dodajmy teraz ich selektory w CSS do elementu <style>
<style> #first { background-color: blue; } .yellow { background-color: yellow; } </style>
Paragraf z unikalnym id.
Paragraf z klasą.
Paragraf z klasą
Atrybut id
jest unikalny tzn. że powinien być nadany tylko jednemu elementowi, natomiast klasa jest ogólnym określeniem elementu. Wielu elementom można przypisać tą samą klasę i w ten sposób łatwo formatować wiele elementów html na raz.
Rozumiecie już chyba przewagę stosowania selektorów nad stylami liniowymi. Zmiany dokonywane w jednym miejscu dla wszystkich elementów html są bardzo wygodne i znacznie ułatwiają pracę.
Posługiwanie się elementem <style>
jest już znacznym ułatwieniem dla kodującego. Jednak dobrą praktyką jest umieszczenie całego CSS w zewnętrznym pliku specjalnie do tego przeznaczonym z rozszerzeniem .css. Dowiedzmy się jak to zrobić.
CSS w oddzielnym pliku
Najlepszym sposobem dodawania styli do strony, jest dołączenie ich w oddzielnym pliku ze stylami. Plik taki tworzymy podobnie jak dokument html, tylko rozszerzenie pliku zmieniamy na .css. Najczęstszymi nazwami dla plików css są main albo style, nazwa ta może być dowolna jednak dobrą praktyką jest stosowanie nazw ogólnie stosowanych. Stwórzmy nowy plik o nazwie main.css, otwórzmy go w edytorze naszego wyboru i uzupełnijmy go kodem CSS.
p { font: 28px Arial; background-color: yellow; }
Jak widzicie nie zastosowaliśmy elementu <style>
. Nie jest on konieczny, gdyż rozszerzeniem .css, deklarujemy, że w całym pliku będziemy posługiwać się właśnie językiem CSS i przeglądarka nam to odpowiednio zinterpretuje.
Gdzie umieścić nasz plik ze stylami?
Dobrą praktyką jest trzymanie wszystkich plików ze stylami w jednym folderze. Najczęściej folder tan nazywamy po prostu css i umiejscawiamy tam wszystkie nasze css’owe pliki. Dodajmy do naszego głównego katalogu ten folder i umieśćmy tam nasz plik main.css. Jednak to nie wystarczy, aby style nam zadziałały musimy do nich stworzyć odwołanie ze strony internetowej, przy pomocy elementu <link>
.
<link>
Element <link>
(ang. połączenie), pozwala nam na import zewnętrznych plików (np. tych ze stylami) do naszej strony internetowej.
Pamiętajmy, żeby nie mylić elementu <link>
z elementem <a>
, który zwyczajowo nazywany jest linkiem, jednak z poprzednim elementem nie ma nic wspólnego.
Element <link>
umieszczamy zawsze w sekcji <head>
.
<head> <link rel="stylesheet" href="css/main.css"> </head>
Atrybutem href
znanym nam już z lekcji wcześniejszej wskazujemy lokalizację naszego pliku ze stylami. Natomiast atrybut rel
(ang. relation – związek), wskazujemy jakiego rodzaju jest to plik. W tym przypadku mamy do czynienia z plikiem kaskadowych arkuszy stylów, czyli atrybut rel
przyjmie wartość stylesheet
(ang. arkusz styli).
Poniżej przedstawiony został zapis dwóch plików, w jedynym znajduje się język CSS, a w drugim język HTML.
p { font: 28px Arial; background-color: yellow; }
<head> <link rel="stylesheet" href="css/main.css"> </head> <body> <p>Paragraf formatowany plikiem zewnętrznym.</p>
Paragraf formatowany plikiem zewnętrznym.
Niezależnie, który sposób dołączenia CSS wybierzemy, formatowanie będzie zupełnie takie samo, sposoby od siebie różnią się wygodą dodawania, utrzymaniem kodu oraz tzw. czystością kodu. Dobrą praktyką jest rozdzielanie kodu HTML od CSS, dlatego najbardziej preferowanym sposobem dodawania CSS na stronę jest zamieszczanie CSS w oddzielnych plikach.
- atrybut
style
(style liniowe) – niepolecany, używany w ostateczności - element
<style>
– używany zazwyczaj do tzw. projektów na szybko, albo szkoleniowych, chcemy dodać formatowania, jednak nie chcemy, albo nie możemy mnożyć plików - zewnętrzny plik CSS – polecany, dobra praktyka, tak na prawdę jedyny właściwy sposób
Rozmiar kodu CSS przeciętnie zajmuje od kilkuset do kilku tysięcy linijek, przy niedużych projektach. Wyobraźcie sobie, że tworzycie nawet niewielką stronę i w pliku głównym strony, nie dość, że musicie przedzierać się przez gąszcz html to jeszcze sami dorzucacie sobie kilkaset linijek kodu CSS. Zewnętrzny plik CSS to tylko jedna linijka.
Dodatkową zaletą stosowania zewnętrznych plików CSS jest możliwość pobrania przez przeglądarkę tego pliku tylko raz, a potem pobieranie go z pamięci podręcznej (ang. cache). W momencie, gdy CSS jest bezpośrednio na stronie takiej możliwości nie ma, za każdym przeładowaniem strony musimy pobierać cały CSS jeszcze raz.
Sami widzicie, że stosowanie zewnętrznych plików CSS to same zalety.
Podsumowanie CSS podstawy – Kurs CSS
Na tej lekcji przeszliśmy przez duży zakres materiału. Wiemy już co to jest CSS, jak zbudowane są jego reguły oraz jak tworzyć selektory. Wiemy już również w jaki sposób dodać CSS do strony. Więcej o CSS i jego regułach dowiemy się na kursie CSS, który aktualnie jest w przygotowaniu. Pozostawmy na razie CSS i wróćmy do html rozpoczynając następną lekcję.