Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Struktura dokumentu

Zagnieżdżanie arkusza

Email Drukuj PDF

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

Bardzo często spotykanym sposobem definiowania stylów na stronie jest zagnieżdżanie definicji w nagłówkowej części dokumentu. W tym celu wystarczy wpisać odpowiedni blok informacji między poleceniami <head> i </head>.

Przykładowo, niniejsza strona zawiera krótki zestaw stylów, zdefiniowany następująco w części nagłówkowej:

<head>
<style type="text/css">
<!--
body {margin-left: 1cm; margin-right: 1cm; }
p {font-size: 10pt; font-family: Arial, Helvetica; font-weight: normal; }
-->
</style>
</head>

Zdefiniowano w nim 1-centymetrowe marginesy strony oraz 10-punktową czcionkę Arial (oraz inne czcionki "rezerwowe") dla akapitów. Proszę zwrócić uwagę na wiersz <!-- i -->, czyli znaki komentarza obejmujące definicję. "Chowają" one definicję przed przeglądarkami nie interpretującymi stylów, co zapobiega niepotrzebnemu wyświetleniu treści definicji stylów w tych przeglądarkach.

Style definiujemy w "klasyczny" sposób, za pomocą zestawu Selektor { cecha: wartość}. Na przykład p {font-family: Helvetica} czy ul {font-size: 10pt; font-family: Times}.

Zagnieżdżanie arkusza zaleca się w przypadku tych stron, w których stosuje się unikatowe style. Gdy kilka stron jest formatowanych za pomocą tego samego zestawu stylów, lepiej jest oczywiście stosować dołączanie wspólnego, zewnętrznego arkusza stylów (opisujemy to tutaj), co skraca czas przygotowania i zmniejsza wielkość plików.

 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 3586
Artykułów : 513
Zakładki : 28
Odsłon : 21781717