Czym jest zewnętrzny arkusz stylów?
Język css odpowiada za wygląd na stronie www. Dzięki niemu możemy precyzyjnie określić jak mają wyglądać i jak mają być ułożone na stronie wszystkie jej elementy. Dawniej w znacznikach html wpisywało się cechy poszczególnych elementów:
<p style="color: yellow; font-size: 23px;"></p>
Dziś już tak się nie robi. W pliku html wpisuje się znaczniki html i treść wyświetlaną na stronie. W pliku css natomiast wpisuje się selektory, ich cechy i wartości. Dlaczego tak? Ponieważ przy pisaniu dużego serwisu, który ma wiele podstron, możemy zdefiniować wygląd wielu elementów jednocześnie. Możemy zdecydować, że odnośniki będą zielone, tło fioletowe, nagłówki z czcionką 24 px a zwykły tekst na 10 px. Jeśli nam się to ODWIDZI, możemy w jednym miejscu zmienić kolor i zmiany będą dotyczyć całego serwisu. Wcześniej musielibyśmy zmieniać każdy znacznik, do którego wpisaliśmy dany styl.
Jak dodać zewnętrzny arkusz stylów?
- W Notepadzie++ naciskamy klawisze „ctrl + n” i nowy plik zapisujemy jako: „style.css”.
- W indexie, w znacznikach
<head></head>
umieszczamy informację, że wygląd strony należy „pobrać”/odczytać z arkusza stylów, który znajduje się w innym miejscu niż nasz index.html. Podajemy ścieżkę do pliku (konkretne miejsce, w którym zapisaliśmy plik css). Wygląda to tak:
<link rel="Stylesheet" type="text/css" href="style.css"/>
Z czego zbudowany jest język css?
Język css jest bardzo prosty. Spójrz na przykład:
body{
background: yellow;
}
h1{
font-size: 30px;
color: green;
}
p{
color: brown;
font-weight: 900;
}
Najpierw wpisujemy selektor – czyli znacznik html, który chcemy „ostylować”. Następnie otwieramy klamrę i w nowej linii (po naciśnięciu przycisku TAB) wpisujemy cechę (w języku angielskim). Przykładowe cechy:
- tło (background),
- rozmiar czcionki (font-size),
- nazwa czcionki (font-family),
- kolor tekstu (color),
- ułożenie tekstu (text-align).
Następnie dwukropek i po nim konkretna wartość.
Zewnętrzny arkusz stylów ma wielką zaletę. W google chrome (i pewnie w innych przeglądarkach także) można go łatwo edytować i podglądać zmiany na żywo. Jak to zrobić? Wystarczy np. kliknąć prawym przyciskiem myszy na dowolny element na stronie i wybrać z listy polecenie „Zbadaj element” lub „Inspect element”. Po prawej stronie wyświetli się okno ze stylami css. Tam można klikać, zmieniać kolory, czcionki, dodawać nowe wartości i wszystkie zmiany widzieć w czasie rzeczywistym. Taki kod można potem skopiować i wkleić do swojego arkusza stylów lub zrobi komuś dowcip, np. tuningując jego profil na fb.
Zmiany będą widoczne tylko do czasu odświeżenia strony 🙂