Skocz do zawartości
kris11

Poradnik CSS 1

Polecane posty

kris11

Wstęp

1.1 Krótki opis CSS dla HTML

W tej części zostanie pokazane jak łatwe jest tworzenie opisu wyglądu dokumentu. Zakładam, że znane są podstawy języka HTML. Zacznę od małego dokumentu HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Przyklad 1</TITLE>
</HEAD>
<BODY>
<H1>Przyklad 1</H1>
<P>To jest tekst na naszej stronie.
</BODY>
</HTML>

Aby ustawić kolor tekstu w znaczniku H1 jako niebieski można posłużyć się poniższą instrukcją:

H1 { color: blue }

CSS składa się z dwóch części: selektora (H1) i deklaracji (color: blue). Selektor to nic innego jak nazwa znacznika HTML. Deklaracja zawiera dwie części: właściwość (color) i wartość (blue).

Specyfikacja HTML 4.0 określa w jakim miejscu opis wyglądu może się znajdować:
- w dokumencie HTML;
- w osobnym pliku *.css.

Aby umieścić opis wyglądu wewnątrz dokumentu HTML należy użyć znacznika STYLE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Przyklad 1</TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Przyklad 1</H1>
<P>To jest tekst na naszej stronie.
</BODY>
</HTML>

Dla zwiększenia giętkości, zalecane jest aby autorzy korzystali z zewnętrznych opisów wyglądu. Takie rozwiązanie ma dwie zalety:
- treść opisu może być zmieniana bez modyfikacji źródłowego dokumentu HTML,
- pliki CSS mogą być współdzielone przez kilka dokumentów.
W celu przyłączenia zewnętrznego opisu wyglądu dokumentu należy wykorzystać znacznik LINK:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Przyklad 1</TITLE>
<LINK rel="stylesheet" href="przyklad.css" type="text/css">
</HEAD>
<BODY>
<H1>Przyklad 1</H1>
<P>To jest tekst na naszej stronie.
</BODY>
</HTML>

Znacznik LINK zawiera:

typ: "stylesheet";
nazwę i położenie opisu wyglądu wewnątrz atrybutu "href";
typ opisu wyglądu określonego przez: "text/css".

W celu pokazania większego związku między opisem wyglądu i językiem HTML zostanie zaprezentowany przykład trochę bardziej rozbudowany pod względem zawartości znacznika STYLE. Teraz dodana zostanie większa ilość kolorów:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Przyklad 1</TITLE>
<STYLE type="text/css">
BODY { color: red }
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Przyklad 1</H1>
<P>To jest tekst na naszej stronie.
</BODY>
</HTML>

Powyższy opis wyglądu zawiera dwie linie: pierwsza ustawia kolor znacznika BODY na wartość red (czerwony), zaś druga ustawia kolor znacznika H1 na wartość blue (niebieski). Ponieważ nie został określony kolor dla znacznika P, będzie on dziedziczony od znacznika 'ojcowskiego', zwanego BODY. Znacznik H1 jest także 'dzieckiem' w stosunku do znacznika BODY, ale druga instrukcja w znaczniku <STYLE> (tj. H1 { color: blue }) unieważnia dziedziczoną wartość.

CSS2 ma ponad 100 różnych właściwości, włączając w to color. Oto kilka innych jeszcze:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
<HTML> 
<HEAD> 
<TITLE>Przyklad 1</TITLE> 
<STYLE type="text/css"> 
BODY { 
   font-family: "Gill Sans", sans-serif; 
   font-size: 12pt; 
   margin: 3em; 
} 
</STYLE> 
</HEAD> 
<BODY> 
<H1>Przyklad 1</H1> 
<P>To jest tekst na naszej stronie. 
</BODY> 
</HTML>

Pierwszą rzeczą jaką można zauważyć to to, że kilka deklaracji jest zgrupowanych wewnątrz bloku zawartego wewnątrz nawiasów klamrowych ({...}), i oddzielonych od siebie przy pomocy średników. Ostatnia deklaracja nie musi być zakończona średnikiem.

Pierwsza deklaracja w znaczniku BODY ustawia czcionkę na "Gill Sans". Jeżeli wyżej wymieniona czcionka nie będzie dostępna, przeglądarka użyje czcionki "sans-serif". Znaczniki 'dzieci' w stosunku do znacznika BODY będą teraz dziedziczyły wartość właściwości font-family.
Druga deklaracja ustawia rozmiar czcionki znacznika BODY na wartość 12 punktów. Jednostka 'pt' jest powszechnie używana do określania rozmiaru czcionki i innych wartości związanych z długością. Jest to jednostka bezwzględna, która nie jest skalowalna względem środowiska.
Trzecia deklaracja używa jednostki względnej, która jest skalowalna w stosunku do otoczenia. Jednostka 'em' odnosi się do rozmiaru czcionki tego elementu. W tym przypadku rezultat jest taki, że marginesy wokół elementu BODY są trzy razy szersze niż rozmiar czcionki.

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Daniel

Źródło podaj, bo to nie Twoj :)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Gość
Temat jest zablokowany i nie można w nim pisać.
×
×
  • Utwórz nowe...