Linkowanie arkuszy z HTML « CSS tutoriale

Linkowanie arkuszy z HTML

Apr 02
2009

Comments Off

Linkowanie do zewnętrznego arkusza CSS

Zewnętrzny arkusz CSS jest połączony z dokumentem HTML za pomocą znacznika LINK:

Znacznik <LINK> znajduje się wewnątrz znacznika HEAD. Opcjonalny atrybut TYPE okresla typ mediów np.: text/css.

Zewnętrzne arkusze nie powinny zawierać znaczników <HEAD> lub <STYLE>. Powinny jedynie zawierać reguły, np.:

P { margin: 2em }

Znacznik <LINK> pozwala rónież na atrybut MEDIA (opcjonalny), który określa rodzaj medium do którego stosuje sie dany arkusz. Mozliwe wartości:

screen, ekran komputerowy;
print, drukarka;
projection, projektor;
aural, syntezatory mowy;
braille;
tty;
tv;
all, wszystkie urządzenia.

Atrybut REL określa związek pomiedzy dokumentem HTML a linkowanym plikiem. REL=StyleSheet pkresla preferowany arkusz stylów, natomiast REL=”Alternate StyleSheet” określa alternatywny arkusz.

Obecne przeglądarki moga wybierać pomiędzy arkuszami.

Style mozna również podawać w kilku arkuszach, np:

Zewnętrzne arkusze stylów są doskonałym rozwiązaniem, ponieważ moga z nich korzystać różne strony. Używając zewnętrznych arkuszy, projektant może zmienić wygląd całej witrny w przeciagu minuty.

Arkusze wenątrz dokumentów HTML

Arkusz styłów można umieścić wewnątrz dokumentu HTML stosując element STYLE:

Element STYLE umieszony jest w sekcji HEAD dokumentu HTML. Wymagany atrybut TYPE precyzuje rodzaj mediów.

Arkusz umieszony w dokumencie HTML może być wykorzystywany jedynie przez ten dokument.

Importowanie arkuszy stylów

Arkusz mozna importować komendą @import. Komenda ta może pojawić się w pliku CSS lub wewnątrz elementu STYLE:

Komenda @import musi pojawić się pierwsza w arkuszu. Wszystkie reguły oznaczone jako ważne mają automatyczny prirytet. Nawet jeśli konkretny arkusz zawiera regułę DT {background: aqua}, osytania definicja jest nadrzędna, w tym przypadku: DT kolor żółty.

Kolejność w jakiej arkusze są importowane ma wpływ na reguły w nich zawarte.

Style w elementach

Style mogą występować w poszczególnych elementach przy użyciu atrybutu STYLE. Atrybut STYLE do każdego elementu dokumentu HTML z wyjątkiem BASEFONT, PARAM i SCRIPT. Przykład deklaracji:

<P STYLE=”color: red; font-family: ‘New Century Schoolbook’, serif”> Paragraf z czcionką w kolorze czerwonym, typ czcionki: New Century Schoolbook, jeśli jest takowy dostępny.</P>

New Century Schoolbook znajduje się w pojedynczy cytat, ponieważ cała deklaracja jest w cudzysłowiu.

Srosowanie tego typu rozwiązania nie jest wygodne.

Atrybut CLASS

Atrybut CLASS precyzuje do jakiej klasy należy dany element. Na przykład: tworzymy dwie klasy: punk i warning:

.punk { color: lime; background: #ff80c0 }
P.uwaga { font-weight: bolder; color: red; background: white }

W dokumecie HTML klasy pojawiają się w znacznikach, które chcemy żeby posiadały daną klasę:

<H1 CLASS="punk">Proprietary Extensions</H1>
<P CLASS="uwaga">Many proprietary extensions can have negative side-effects, both on supporting and non-supporting browsers…

Klasa punk może być stosowana z każdym elementem, ponieważ nie jest przypisana konkretnemu elementowi w arkuszu stylów. Klasa uwaga może być stosowana jedynie z elementem P

Najlepiej nazywać klasy wedłuch ich funkcji. Nazwa klasy: uwaga jest o wiele lesza aniżeli nazwa np.: bald, która może stracić swoje znaczenie jeśli projektant zdecyduje się na zmianę tej wartości.

Atrybut ID

Atrybut ID definiuje styl dla konkretnego elementu do którego przypiszemy dany identifikator.

#wdg97 { font-size: larger }

Atrybut ten może pojawić się w dokumencie HTML w taki sposób

<P ID="wdg97">Welcome to the Web Design Group!</P>

Każdy atrybut ID musi mieć unikalną wartość w dokumencie. Wartość ta to litery, liczby i myślniki.

Element SPAN

Element SPAN wprowadzono do dokumentów HTML aby pozwolić projektantom na nadanie stylu segmentowi a nie konkretnym elementom HTML. SPAN może również wystąpić jako selektor w arkuszu stylów. Przyjmuje on również atrybuty STYLE, CLASS i ID.

SPAN jest elementem wewnątrz dokumentu HTML podobnie jak EM i STRONG. Różnica pomiędzy nimi jest taka, że EM i STRONG posiadają znaczenie strukturalne, którego znacznik SPAN nie posiada. Jets on elementem czysto stylistycznym.

Przyklad SPAN:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<HTML>
<HEAD>
<TITLE>Example of SPAN</TITLE>
<META HTTP-EQUIV=”Content-Style-Type” CONTENT=”text/css”>

<STYLE TYPE=”text/css” MEDIA=”screen, print, projection”>
<!–

.firstwords { font-variant: small-caps }
–>

</STYLE>

</HEAD>
<BODY>
<P><SPAN CLASS="firstwords">Pierwsze słowa paragrafu mogą </SPAN> być w małej czcionce. Można również zmienić styl pojedynczego
<SPAN STYLE=”font-family: Arial”>słowa</SPAN>.</P>

Element DIV

Element DIV jest podobny do elementu SPAN w swojej funkcji. Różnica polega na tym, że element ten zawiera blok elementów. Na przykład:

<DIV CLASS="note">
<H1>Divisions</H1>
<P>Element DIVdefiniuje specyfikacja HTML 3.2. Atrybut ALIGN dozwolony jest w HTML 3.2. HTML 4.0 daje elementy CLASS, STYLE i ID, między innymi.</P>
<P>Ponieważ DIV może zawierać inne bloki, jest on bardzo ważnym znacznikiem definiującym większe sekcje dokumentu. </P>
<P>W zależnosci od typu dokumentu, można stosować i nie stosować końcowego znacznika. </P>
</DIV>

Szybkie menu

Written by admin in: CSS, Tutorial |

Comments are closed.

Visit Our Friends!

A few highly recommended friends...

Pages List

General info about this blog...

CSS tutoriale