webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> kursy online >> kurs xhtml >> Część 8

Wstawianie stylów

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

szukaj: style css style css wstawianie stylów wstawianie stylów zagnieżdżanie stylów zagnieżdżanie stylów dołączanie zewnętrznego arkusza stylów dołączanie zewnętrznego arkusza stylów importowanie arkusza stylów importowanie arkusza stylów kurs css 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

Zagadnienia poruszane w tej części kursu:

Chcesz zaistnieć w sieci?
Projektowanie stron.
Zobacz nasze realizacje!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org