KATEGORIA:

Zewnętrzny arkusz stylów – css

arkusz stylów

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?

  1. W Notepadzie++ naciskamy klawisze „ctrl + n” i nowy plik zapisujemy jako: „style.css”.
  2. 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 🙂

facebook inaczej

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *