Wstawianie stylów

autor: Dominik Tomaszuk, ostatnia modyfikacja: 2007-07-16

szukaj: style css wstawianie stylów zagnieżdżanie stylów dołączanie zewnętrznego arkusza stylów importowanie arkusza stylów kurs css

Zagnieżdżanie stylów wewnątrz dokumentu

Przykład:

<!-- prolog na początku -->
<head>
 <!-- to są właściwe style, w sekcji head -->
   <style type="text/css">
    p { font-size: 10px; font-family: monospace }
    h1,h2 { text-align: center; color: blue }
   </style>
 <!-- koniec stylów -->
</head>
<!-- dalsza część jest dokumentu -->

Style lokalne w dokumencie

Jest to metoda nie zalecana, ponieważ jest niewydajna. Zadaniem styli przecież jest ułatwianie pracy i maksymalne jej skracanie. Jedną z ważnych funkcji CSS jest możliwość wykorzystywania ich w kilku dokumentach, czego nie oferuje ta metoda. Radzę korzystać z innych rodzajów wstawiania styli. Jeśli ktoś chce dla jednego znacznika przypisywać różne właściwości (i używać go kilka razy w dokumencie XHTML) polecam class lub id.

Przykład:

<!-- wsześniej prolog i sekcja head -->
<body>
<p style="color: red; font-size: 10pt">XYZ</p>
<p style="color: green">ABC</p>
</body>
<!-- dalej koniec dokumentu -->

Dołączanie zewnętrznego arkusza stylów

Jest to metoda najczęściej spotykana. Daje ona najwięcej możliwości i w pełni wykorzystuje funkcje stylów. Po stworzeniu zewnętrznego pliku CSS można go wykorzystać w kilku stronach (zyskacie naprawdę dużo czasu:-).

Przykład pliku zewnętrznego:

/* jest to przykład zewnętrznego pliku z rozszerzeniem CSS */
p { font-size: 10px; font-family: monospace }
h1,h2 { text-align: center; color: blue }

Przykład pliku XHTML:

<!-- prolog na początku -->
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<!-- dalsza część jest dokumentu -->

Można też arkusz stylu zewnętrznego dołączyć w znaczniku <? ?> (patrz: 'Prolog i składnia'). Ta metoda nie jest obowiązkowa ale zalecana ze względu za zgodność z XML.

Importowanie arkusza stylów

Przykład:

<!-- prolog na początku -->
<head>
 <!-- to są właściwe style, w sekcji head -->
   <style type="text/css">
   @import url(http://www.xyz.pl/style.css)
   </style>
</head>
<!-- dalsza część jest dokumentu -->

Inne metody

Rozciąganie stylu przez znaczniki <span>, <div> i inne przez atrybut style.

W XHTML 1.1 atrybut style jest w statusie Deprecated.

Oba sposoby są podobne. Różnią się tylko tym, że <div> jest bardziej elastyczny. Nie są to popularne metody.

Przykład z <span>:

<!-- prolog i sekcja head -->
<body>
<!-- 1 możliwość -->
<span class="klasa">
<dl>
<dt>to jest lista</dt>
<dd>jeden</dd>
<dd>dwa</dd>
<dd>trzy</dd>
</dl>
</span>
<!-- 2 możliwość -->
<span style="font-size: 10pt; color: green">
<dl>
<dt>to jest lista</dt>
<dd>jeden</dd>
<dd>dwa</dd>
<dd>trzy</dd>
</dl>
</span>
</body>
<!-- dalej koniec dokumentu -->

Przykład z <div>:

<!-- prolog i sekcja head -->
<body>
<!-- 1 możliwość -->
<div class="klasa">
<table summary="przykład" border="1">
<tbody>
<tr>
<td>zz</td>
<td>zz</td>
</tr>
</tbody>
</table>
</div>
<div style="font-size: 10pt; text-align: right">
<table summary="przykład" border="1">
<tbody>
<tr>
<td>vv</td>
<td>vv</td>
</tr>
</tbody>
</table>
</div>
</body>
<!-- dalej koniec dokumentu -->

Uwaga! W XHTML powinno dołączać się również arkusz stylów tak samo jak w XML.

Zobacz też 'Inne ważne zasady' i 'Prolog'.

Dominik Tomaszuk

szukaj: style css wstawianie stylów zagnieżdżanie stylów dołączanie zewnętrznego arkusza stylów importowanie arkusza stylów kurs css

Zagadnienia poruszane w tej części kursu:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!