Struktura dokumentu

Zewnętrzny arkusz

niedziela, 10 styczeń 2010 11:43 Administrator
Drukuj

Tematy: metody wstawiania stylów | styl lokalny | rozciąganie stylu | wydzielone bloki | zagnieżdżanie arkusza | zewnętrzny arkusz | import arkusza

Każdą stronę można dołączyć do zewnętrznego arkusza stylów, w którym są zdefiniowane własności różnych elementów. Na przykład, strony są dołączane do zewnętrznego arkusza, pliku tekstowego o nazwie arkusz.css (rozszerzenie .css). Arkusz został zapisany następująco:

body {text-align: justify; margin-left: 1cm; margin-right: 1cm; margin-top: 1cm; }
p {font-family: Arial, Helvetica; font-size: 10pt; font-weight: normal; text-indent: 3 em; }
a, a:active, a:visited, a:hover {text-decoration: none; color: blue; }
h1 {font-size: 24pt; }
h2 {font-size: 20pt; }
h3 {font-size: 16pt; }
h1, h2, h3 {font-family: Arial, Helvetica; font-weight: bold; color: #808000; }
td {font-family: Arial, Helvetica; font-size: 10pt; font-weight: normal; }
li {font-family: Arial, Helvetica; font-size: 10pt; font-weight: normal; }

Uwaga: arkusz powinien zawierać wyłącznie same definicje stylów.


Aby dołączyć arkusz do strony, trzeba podać polecenie w ramach head:

<head>
<link rel="stylesheet" href="/sciezka/arkusz.css" type="text/css">
</head>

href wskazuje ścieżkę do katalogu, w którym jest umieszczony arkusz. Może on być, oczywiście, ulokowany w tym samym folderze, co strony zawierające odniesienie do niego. Wszystkie definicje zewnętrzego arkusza stylów są automatycznie przyjmowane przez elementy danej strony.

Stosowanie zewnętrznego arkusza ma tę zaletę, że nie jest konieczne wprowadzanie stylów na konkretnej stronie, zmniejszamy objętość plików, a także możemy za pomocą zmiany jednego parametru w arkuszu stylów zmienić wygląd wszystkich stron, które się odwołują do tego arkusza (np. kolor tytułu czy wielkość czcionki akapitów).