Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Wstawianie stylów

Rozciąganie stylu

Email Drukuj PDF

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

Rozciąganie stylu polega na objęciu stylem pewnego fragmentu (liniowego) w dokumencie HTML. Posługujemy się tutaj poleceniem

<span> </span>

Na przykład:

<p>Jakiś akapit i <span style="font-family: Courier; font-size: 15pt; font-weight: bold; color: red; ">fragment objęty poleceniem span </span> oraz reszta akapitu.</p>

Jakiś akapit i fragment objęty poleceniem span oraz reszta akapitu

W polecenu span możemy wykorzystać także klasy, jeśli są zdefiniowane w nagłówku dokumentu (arkusz zagnieżdżony) czy jakimś zewnętrznym arkuszu. Gdybyśmy wstawili w nagłówku dokumentu, w definicji stylów (i raczej bez polskich znaków, gdyż starsze przeglądarki mogą wykazać błąd) polecenie

.BardzoWazne {font-family: Helvetica, sans-serif; font-size: 14pt; font-weight: bold; color: lime; }

możemy je wykorzystać w definicji span. Na przykład:

<span class="BardzoWazne">To jest fragment dokumentu, formatowany zgodnie z definicją klasy BardzoWazne.</span>

To jest fragment dokumentu, formatowany zgodnie z definicją klasy BardzoWażne.

Inny przykład, w którym kilka pierwszych wyrazów akapitu jest wyświetlanych za pomocą małych kapitalików. Korzystamy tutaj z definicji:

.PierwszeWyrazy {font-variant: small-caps}

którą obejmujemy pierwsze trzy wyrazy - <span class="PierwszeWyrazy">.

To jest akapit, w którym trzy pierwsze wyrazy są wyświetlane za pomocą małych kapitalików.

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V