Lekcja 2: Jak działa CSS?

W tej lekcji nauczysz się jak stworzyć swój pierwszy arkusz stylów. Poznasz podstawy modelu CSS i jaki kod jest porerzebny aby CSS działał w dokumencie HTML.

Wiele właściwości używanych w Kaskadowych Arkuszach Stylów (CSS) jest podobnych do tych w HTML. Więc, jeżeli jesteś przyzwyczajony do stosowania HTML jako układ graficzny, najprawdopodobniej rozpoznasz wiele z kodów. Popatrzmy na konkretny przykład.

Podstawa składni CSS

Powiedzmy że chcemy ładny czerwony kolor tła na stronie:

Używając HTML możemy zrobić to tak:


	<body bgcolor="#FF0000">

Dzięki CSS ten sam rezultat można osiągnąć w taki sposób:


	body {background-color: #FF0000;}

Jak już pewnie zauważyłeś, kod jest bardzo podobny dla HTML i CSS. Powyższy przykład pokazuje także fundamentalny model CSS:

Rysunek tłumaczy selektor, właściwość oraz wartość

Ale gdzie umieszczam mój kod CSS? To jest dokładnie to czym się teraz zajmiemy.

Dodawanie CSS do dokumentu HTML

Są trzy sposoby stosowania CSS w dokumentach HTML. Te metody są przedstawione poniżej. Sugerujemy abyś skupił się na trzeciej metodzie tzn. zewnętrznej.

Metoda 1: W linii (atrybut style)

Pierwszym sposobem jest użycie atrybutu style. Poniżej umieszczony jest przykład użycia tej metody do zmiany koloru tła elementu na czerwony:

<html>
	  <head>
		<title>Example</title>
	  </head>
	  <body style="background-color: #FF0000;">
		<p>This is a red page</p>
	  </body>
	</html>

Metoda 2: Wewnętrzna (znacznik style)

Innym sposobem jestt umieszczenie kodu CSS dzięki użyciu znacznika HTML - <style>. Przykład poniżej:

<html>
	  <head>
		<title>Example</title>
		<style type="text/css">
		  body {background-color: #FF0000;}
		</style>
	  </head>
	  <body>
		<p>This is a red page</p>
	  </body>
	</html>

Metoda 3: Zewnętrzna (odnośnik do arkusza stylów)

Sugerowaną metodą jest umieszczenie odnośnika do tak zwanego zewnętrznego arkusza stylów. Przykłady w tym kursie będą wykorzystywały właśnie tą metodę.

Zewnętrzny arkusz stylów jest po prosru plikiem tekstowym z rozszerzeniem .css. Tak jak każdy inny plik, możesz umieścić arkusz stylów na swoim serwerze internetowym lub na dysku twardym.

Na przykład, powiedzmy że arkusz stylów nazywa się arkusz.css i znajduje się w folderze style. Sytuację można zilustrować następująco:

Folder "style" zawiera plik "arkusz.css"

Sztuką jest utworzenie odnośnika z dokumentu HTML (default.htm) do arkusza stylów (arkusz.css). Taki odnośnik można stworzyć jedną linią kodu HTML:

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

Zauważ jak określiliśmy ścieżkę do arkusza stylów za pomocą atrybutu href.

Linia kodu musi zostać umieszczona w sekcji nagłówkowej dokumentu HTML tzn. pomiędzy znacznikiem <head> i </head>. Tak jak tutaj:

<html>
	  <head>
		<title>Mój dokument</title>
		<link rel="stylesheet" type="text/css" href="style/arkusz.css" />
	  </head>
	  <body>
	  ...

Ten odnośnik mówi przeglądarce, że powinna korzystać z układu graficznego zdefiniowanego w pliku CSS podczas wyświetlania dokumentu HTML.
Naprawdę mądrą rzeczą jest to, że wiele dokumentów HTML może zostać połączonych z tym samym plikiem arkusza stylów. Innymi słowy, jeden plik CSS może kontrolować układ graficzny w wielu dokumentach HTML.

Rysunek przedstawia jak wielę documentów HTML może odnosić się do jednego arkusza stylów

Ta technika zaoszczędzi ci mnóstwo czasu. Jeżeli, na przykład, będziesz chciał zmienić kolor tła strony internetowej zawierającej 100 dokumentów HTML, arkusz stylów uchroni cię od ręcznej zmiany wszystkich 100 stron. Używając CSS, zmianę można zrobić w parę sekund tylko poprzez modyfikacje w centralnym arkuszu stylów.

Poćwiczmy teraz wszystko czego się nauczyliśmy.

Sprawdź to sam

Otwórz Notatnik (lub jakikolwiek edytor tekstowy) i stwórz dwa pliki - plik HTML oraz plik CSS - z następującą zawartością:

default.htm

<html>
	  <head>
		<title>Mój dokument</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	  </head>
	  <body>
		<h1>Mój pierwszy arkusz stylów</h1>
	  </body>
	</html>

style.css

body {
	  background-color: #FF0000;
	}

Teraz umieść oba pliki w tym samym folderze. Pamiętaj aby zapisać pliki z poprawnymi rozszerzeniami (odpowiednio ".htm" oraz ".css")

Otwórz default.htm w swojej przeglądarce i zobacz jak strona uzyskała czerwone tło. Gratulacje! Zrobiłeś swój pierwszy arkusz stylów!

Pospiesz się do następnej lekcji gdzie popatrzymy na parę właściwości w CSS.

<< Lesson 1: Co to jest CSS?

Lesson 3: Kolory i tła >>