Linkowanie arkuszy z HTML

Linkowanie do zewnętrznego arkusza CSS

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

<LINK REL=StyleSheet HREF=”style.css” TYPE=”text/css” MEDIA=screen>
<LINK REL=StyleSheet HREF=”color-8b.css” TYPE=”text/css” TITLE=”8-bit Color Style” MEDIA=”screen, print”>
<LINK REL=”Alternate StyleSheet” HREF=”color-24b.css” TYPE=”text/css” TITLE=”24-bit Color Style” MEDIA=”screen, print”>
<LINK REL=StyleSheet HREF=”aural.css” TYPE=”text/css” MEDIA=aural>

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:

<LINK REL=StyleSheet HREF=”basics.css” TITLE=”Contemporary”>
<LINK REL=StyleSheet HREF=”tables.css” TITLE=”Contemporary”>
<LINK REL=StyleSheet HREF=”forms.css” TITLE=”Contemporary”>

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:

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

BODY
{ background: url(foo.gif) red; color: black }

P EM { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
–>
</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:

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

<!–

@import url(http://www.htmlhelp.com/style.css);

@import url(/stylesheets/punk.css);

DT { background: yellow; color: black }
–>
</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