Kurs języka HTML i CSS

Poradnik webmastera

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

Wydzielone bloki

Email Drukuj PDF

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

Style możemy nadawać elementom dokumentu, posługując się bardzo elastycznym poleceniem bloku -  bardziej trafne jest w zasadzie określenie "warstwa", gdyż często wiąże się z pozycjonowaniem absolutnym elementów. Na sposób ten warto zwrócić szczególną uwagę, gdyż pozwala on bardzo elastycznie operować położeniem rozmaitych elementów na stronach. Warto zauważyć, że w ostatnich latach wydatnie zmniejszyła się rola ramek i tabel na stronach internetowych, zaś fachowcy zalecają stosowanie warstw.

Blok wydzielamy za pomocą polecenia <div> </div>. Fragment dokumentu objęty blokiem możemy w swobodny sposób formatować za pomocą stylów. Możemy sobie wyobrazić, że w części nagłówkowej dokumentu znajdą się klasy tytułów czy akapitów, natomiast w bloku utworzonym doraźnie w dokumencie zdefiniujemy czcionki, barwy itp., a także powołamy się na klasy z nagłówka.

Przykład bloku ze stylami zdefniowanymi bezpośrednio w bloku:

<div style=""font-family: verdana, arial; color: olive; position: relative; left: 100px; width: 550px; ">
Fragment dokumentu objęty blokiem (tytuł, akapit i wykaz)
</div>

Tytuł stopnia pierwszego

Jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit jakiś tam akapit.

  • punkt wykazu
  • punkt wykazu
  • punkt wykazu

Przykład bloku ze stylami zdefiniowanymi w części nagłówkowej dokumentu:

Zakładamy, że w nagłówku (albo w arkuszu dołączanym lub importowanym) utworzyliśmy klasę o nazwie notatka.

.notatka {font-family: verdana, arial; font-weight: bold; color: blue; margin-left: 10%; margin-right: 10%; }

A teraz skorzystamy z tego stylu, wydzielając jakiś fragment dokumentu blokiem i przypisując mu klasę notatka:

<div class="notatka">
fragment dokumentu objęty blokiem
</div>

Tytuł notatki

Treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki treść notatki

Wydzielane bloki są podobne w działaniu do span, ale obejmują szersze fragmenty dokumentu. Mogą zawierać w sobie tytuły, akapity, wykazy, a nawet inne bloki. Dzięki temu nadają się do wydzielania większych, logicznych fragmentów dokumentów i nadawania im specyficznego formatowania za pomocą stylów. W ostatnich latach służą wręcz do tworzenia całych layoutów stron internetowych

 

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 : 3556
Artykułów : 513
Zakładki : 28
Odsłon : 19030854