docTEMAT Łączenie CSS z HTML
download 
Reklamacja Transkrypt
TEMAT Łączenie CSS z HTML
Opracował: DR
TEMAT Łączenie CSS z HTML
Istnieje kilka podstawowych metod łączenia CSS z HTML. W tej lekcji dowiesz się jak to
naleŜy wykonać.
W treści strony - jest to długi sposób, tak, więc za kaŜdym razem trzeba opisywać
Opis
Przykład
właściwości kolejnego obiektu, nawet, gdy jest identyczny od poprzedniego.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Tytuł strony</title></head>
<body>
<p style="
color: blue; text-decoration: underline;">
To jest przykładowy text</p>
</body>
<html>
1.
2.
3.
// 1
// 2
// 3
Otwieram tag akapitu 'p' i zaczynam określać stylami CSS wygląd tylko i wyłącznie tego akapitu.
Opisuję kaŜdą właściwość po kolei wg schematu: właściwość1:wartość; właściwość2:wartość.
Przykładowy napis.
Jest to proste, ale bardzo pracochłonne. Przypuśćmy, Ŝe chciałbyś zmienić kolor kaŜdego
nagłówka na stronie a tych nagłówków byłoby ze 99 (mnóstwo pracy). Odradzam uŜywanie
tej metody umieszczenia stylów.
W nagłówku strony - Jest to bardziej wydajny od poprzedniego. Pozwala na
Przykład
wielokrotne wykorzystanie fragmentu kodu, ale tylko w obrębie danej strony. Całą definicję
obiektu umieszczamy w sekcji head między znacznikami <style type="text/css"> </style>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tytuł strony
<style type="text/css">
p.klasa1 { właściwość1:wartość; właściwość2:wartość;}
table {właściwość1:wartość; właściwość2: wartość;}
span.gorne {właściwość1:wartość; właściwość2: wartość;}
</style>
</head>
<body>
<p class="klasa1">To jest przykładowy text</p>
<table>
<tr>
<td>Tutaj znajduje się tabela</td>
</tr>
</table>
<a>To jest fragment textu poza tabelą</a>
</body>
</html>
ZSP Oleśnica
-1-
// 1
// 2
// 3
// 4
// 5
// 6
Opis
Opracował: DR
- wg najnowszych standardów W3C tag font jest przestarzały. NaleŜy uŜywać span.
1. ,2,3 - w sekcji head wstawiam kolejno opis właściwości kolejnych selektorów
4. Wstawiam tag i przypisuję do niego klasę. Przeglądarka wie, Ŝe wcześniej taka klasa została opisana
i nadaje wszystkie cechy tej klasy danemu selektorowi [obiektowi na stronie]
5. Zobacz na opis tabeli w sekcji head - nie uŜyłem klasy. Tak, więc kaŜda tabela będzie posiadać
cechy przypisane do 'table'.
6. Tekst, który będzie miał właściwości klasy 'gorne'
Jak widzisz nazwy klas mogą być inne niŜ klasa1, klasa2, itp. Wykorzystując ten sposób
zaoszczędziliśmy sporo miejsca i czasu. Być moŜe nie jest to tak widoczne w tej chwili, ale
gdybym wstawił jeszcze kilka tabel i akapitów, a kaŜdy miałby wyglądać tak samo, to róŜnica
byłaby juŜ bardzo widoczna - zamiast zrobić jedną klasę, musiałbym za kaŜdym razem
wpisywać kilka linijek kodu.
W osobnym pliku - jest to najlepszy i najpopularniejszy sposób łączenia htm z css.
Opis
Przykład
Aby móc skorzystać z tej metody naleŜy w jakiś sposób poinformować przeglądarkę, z
jakiego pliku ma czytać. Wszystko znajduje się w sekcji head:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet"
href="plikstyli.css"
type="text/css" />
</head>
<body>
W tym miejscu umieszczasz treść strony.
MoŜesz skorzystać ze wszystkich klas opisanych w pliku 'plikstyli.css'.
</body>
</html>
1.
2.
3.
// 1
// 2
// 3
KaŜemy przeglądarce nastawić się na to, Ŝe za chwilę będzie wczytywać plik css [stylesheet].
Podaję ścieŜkę do pliku, w którym są opisane style. Powinien to być plik o rozszerzeniu *.css.
Określamy typ.
W tym miejscu nie muszę pisać chyba Ŝadnego schematu, poniewaŜ w tym wypadku naleŜy
zmienić jedynie ścieŜkę do pliku, aby wszystko działało jak trzeba. Główną zaletą tej metody
jest to, Ŝe dzięki odesłaniu do jednego pliku cały wygląd strony moŜe być opisany w jednym
miejscu, tak, więc oszczędność miejsca i czasu w ewentualnych zmianach. Z jednego pliku
moŜe korzystać nawet kilka witryn, np.: 'href="http//www.strona.pl/plik.css'
ZSP Oleśnica
-2-
Opracował: DR
Łączenie - wszystkich metod. Przykładowo, chcesz, aby wszystkie tabele na twojej
Przykład
<table class="tabele" style="właściwość1:wartość; właściwość2:wartość;...właściwośćn:wartość;">
<tr>
<td>TREŚĆ TABELI</td>
</tr>
</table>
Opis
witrynie wyglądały identycznie. Jest jednak jedna tabele, którą chcesz jakoś szczególnie
oznaczyć. MoŜesz wtedy wczytać plik '*.css' w sekcji head, przypisać tabelce odpowiednią
klasę, a dodatkowo w tej wyjątkowej tabeli opisać style.
Zasada jest bardzo prosta -im "bliŜej" znacznika tym bardziej znaczący opis.
Czyli najwaŜniejszy jest opis w style=" ", trochę mniej waŜny jest opis w sekcji head,
a najmniej znaczący w osobnym pliku. Oczywiście chodzi jedynie o sytuacje, kiedy właściwości jakiegoś
selektora opisane są w więcej niŜ w jednym miejscu.
ZSP Oleśnica
-3-
