3

kurs

css

Kurs CSS - Wprowadzenie do css

css

CSS - kaskadowe arkusze stylów odpowiadają za prezentację poszczególnych elementów strony. CSS oddziela część graficzną od części definiującej strukturę witryny - HTML. Dzięki temu ilość kodu na stronie ulega zmniejszeniu co wpływa na czytelność i szybsze działanie serwisu. Ponadto praca w oddzielnych dokumentach jest znacznie łatwiejsza.

Do przygotowania takiego dokumentu wystarczy dowolny edytor tekstowy np. notatnik.

W dokumencie CSS opisujemy wygląd znaczników utworzonych w HTML. Dzięki kilku linijkom dodatkowych deklaracji sprawimy, że wygląd naszej strony internetowej nabierze nowego - ciekawego charakteru.

Innym niezaprzeczalnym atutem stosowania kaskadowego arkusza stylów jest fakt, że wygląd wielu elementów możemy zdefiniować bezpośrednio w pliku, bez konieczności tworzenia osobnych grafik, co wpływa na szybkość ładowania strony.

Wstawianie stylów z zewnętrznego pliku

To najczęściej stosowana metoda, dzięki której my jako osoby zarządzające stroną internetową możemy aktualizować ją zdecydowanie sprawniej i wygodniej.

<head>

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

</head>

W powyższym zapisie plik styl.css jest zewnętrznym arkuszem stylów.

W zewnętrznym arkuszu stylów możemy zdefiniować wygląd globalnie - dla wszystkich akapitów z dokumentu HTML, przy pomocy deklaracji zapisanej w jednej linii.

Jak zatem przygotować formatowanie akapitu z dokumentu HTML w CSS?

W pliku HTML wstawiamy akapit:

<p>Tekst będzie koloru czerwonego, pogrubiony.</p>

Dla pliku CSS przygotujemy następującą deklarację:

p { color: red; font-weight: bold; }

W przeglądarce internetowej otrzymamy taki efekt:

Przykład

Tekst będzie koloru czerwonego, pogrubiony.

Styl lokalny

Wygląd poszczególnych elementów definiujemy bezpośrednio w pliku HTML.

<p style="color: red; font-weight: bold;">Tekst będzie pogrubiony, 

w kolorze czerwonym.</p>
Przykład

Tekst będzie pogrubiony, w kolorze czerwonym.

Kaskadowość stylu CSS oznacza, że występuje kolejność ważności czytania stylu. Im styl bliżej znacznika tym ma on pierwszeństwo nad kolejnym. W naszym przypadku styl zdefiniowany w pliku zewnętrznym będzie nadpisany przez styl lokalny.

Dodatkowo style są dziedziczone co oznacza, że styl zadeklarowany dla "rodzica" ma wpływ także na "potomków".

<div style="text-align: center;"><p>Tekst będzie wyśrodkowany.</p></div>
Przykład

Tekst będzie wyśrodkowany.

Zapraszam także na kurs html od podstaw.

comments powered by Disqus

Do góry