: Home / HTML / CSS / kurs HTML / Łączenie CSS z HTML-em
Łączenie CSS z HTML-em
Ocena użytkowników: / 1
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
piątek, 18 września 2009 02:41

Jest kilka sposobów na połączenie stylów CSS z HTMLem.

1. Wykorzystanie artybutu style:

<dowolny_znacznik style="właściwość: wartość">zawartość znacznika</dowolny_znacznik>


Przez `dowolny_znacznik' mam na myśli prawie dowolny znacznik. Np `title' nie powinien mieć stylów.
A teraz konkretne zastosowanie - zmiana koloru tła strony, oraz koloru czcionki w akapicie:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>


<head>

    <title>Przykład</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

</head>


<body style="background: yellow">

    <p style="color: red">Ten tekst będzie czerwony</p>

    <p>Ten bedzie miał domyślny kolor (najprawdopodobniej czarny)</p>

</body>

</html>


To rozwiązanie jest najprymitywniejszym i najgorszym. Dlaczego? Nawet jeśli chciałbyś, aby kilka akapitów miało taki sam styl, za każdym razem musisz dublować kod.
Gdy będziesz chciał zmienić 10 akapitów - musisz zmieniać kod w 10 miejscach. To jest rozwiązanie złe i używaj go w ostateczności.

2. Style w sekcji head

Skoro umieszczenie kodu CSS w atrybucie `style' jest złe, to co w zamian?
Można zawsze umieścić kod w sekcji head. Oto przykład:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>


<head>

    <title>Przykład</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <style type="text/css">

        body { background: yellow; }

        p { color: black; } /* w większości przeglądarek to jest wartość domyślna */

        p.mystyle { color: red; }

    </style>

</head>


<body>

    <p class="mystyle">Ten tekst będzie czerwony</p>

    <p>Ten bedzie miał domyślny kolor (najprawdopodobniej czarny)</p>

    <p class="mystyle">Ten tekst także będzie czerwony będzie czerwony</p>

</body>

</html>


Jak widać na powyższym przykładzie mamy dwa akapity o kolorze czerwonym. Jednak jeśli chcielibyśmy zmienić kolor na niebieski, to zmiana ogranicza się do jednego miejsca!
A o to właśnie nam chodzi, aby zrobić wiele przy minimalnym wysiłku.

Nadal jednak czuję niedosyt... Przecież na wielu stronach chciałbym mieć takie same akapity. Czy na każdej muszę dublować kod? Nie... patrz niżej:)

3. Osobny plik ze stylami

Jest to najlepszy sposób na łączanie stylów css z kodem HTML. Jego główne zalety:
kod odpowiedzialny za prezentację jest trzymany w jednym miejscu,
    więc dużo łatwiej jest nim zarządzać
    raz wczytany nie jest więcej pobierany z serwera! (szybciej się ładuje strona)
możliwość wielokrotnego wykorzystania kodu (nawet na kilku różnych stronach, a.pl, b.pl itp.)
zmniejszenie rozmiaru pliku html

Widzisz już że to wrecz wspaniała rzecz, jednak nadal nie wiesz jak to zrobić :P. Już to naprawiamy, oto kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>


<head>

    <title>Przykład</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

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

</head>


<body>

    <p class="mystyle">Ten tekst będzie czerwony</p>

    <p>Ten bedzie miał domyślny kolor (najprawdopodobniej czarny)</p>

    <p class="mystyle">Ten tekst także będzie czerwony będzie czerwony</p>

</body>

</html>


W pliku arkusz.css umieszczamy np.:
body { background: yellow; }

p { color: black; } /* w większości przeglądarek to jest wartość domyślna */

p.mystyle { color: red; }


Powyższy kod CSS jest pełnym kodem. Nie musisz w jakikolwiek sposób rozpoczynać kodu CSS w osobnym pliku. Sam kod CSS - bez nagłowków itp.

Sposób z osobnym plikiem jest sposobem zdecydowanie najlepszym. Czasem zdarza się, że pozostałe dwa sposoby są warte rozpatrzenia. Jednak zakładaj, że są złe (a wyjątki - ja zawsze - się zdarzą).

 

Tags:

Zobacz podobne artykuły

< Poprzednia   Następna >
 

Dodaj komentarz


Kod antysapmowy
Odśwież

5