Kurs języka HTML i CSS

Poradnik webmastera

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

Budowa stylu

Email Drukuj PDF

Pokażmy od razu przykład stylu, obejmującego wybrany fragment tekstu. Jest to jeden ze sposobów wstawiania tzw. stylu lokalnego.

Przykład 1

<p style="font-size: 20pt; font-weight: bold; background: darkseagreen; color: white; width: 75%; ">Style to doskonałe narzędzie dla autora witryny.</p>

Style to doskonałe narzędzie dla autora witryny.

Ogólne polecenie stylu ma postać selektor { cecha: wartość } - w jęz. angielskim selector { property: value }.

  • Selektorem jest po prostu polecenie języka, np. p, li, td, body itd.
  • Cechą jest pewna własność danego znacznika, np. wielkość i styl czcionki dla akapitu.
  • Wartość konkretyzuje cechę, np. 12pt czy bold dla czcionki.

Zawartość nawiasów klamrowych, czyli cechę i wartość, określamy także łącznie mianem deklaracji stylu.

Inne przykłady, ilustrujące użycie stylów definiowanych w części nagłówkowej dokumentu lub w zewnętrznym arkuszu stylów.

Przykład 2

p {font-family: Times New Roman}

Selektorem jest p, cechą - rodzina czcionek, wartością - Times New Roman.

To jest czcionka Times New Roman

Przykład 3

h1 {font-size: 30pt}

Selektorem jest h1, cechą - wielkość czcionki, wartością - 30 punktów.

30-punktowy tytuł stopnia pierwszego

Przykład 4

ul {font-weight: bold}

Selektorem jest ul, cechą - waga czcionki, wartością - pogrubienie.

  • punkt pierwszy wykazu
  • punkt drugi wykazu
  • punkt trzeci wykazu

Przykład 5

h2 {color: #FF0000}

Selektorem jest h2, cechą - kolor, wartością - kolor czerwony.

Czerwony nagłówek stopnia drugiego

Przykład 6

Możemy oczywiście łączyć ze sobą różne cechy i wartości, zgodnie ze schematem:

Selektor { cecha1: wartość1; cecha2: wartość2 }

Proszę zwrócić uwagę na średnik rozdzielający pary cech:wartości.

h3 {font-variant: small-caps; font-size: 15pt; color: green; font-family: Courier}

Tytuł stopnia trzeciego, 15-punktowy, zielony, kapitaliki

Jak widać, konstrukcja stylu jest prosta i nie powinna sprawiać kłopotów nawet początkującemu webmasterowi.

Ze względu na fakt, że przeglądarki interpretują ciągle nie wszystkie style, zaleca się uważne ich wykorzystywanie. Należy uważnie sprawdzić zachowanie głównych przeglądarek, zanim poślemy naszą stronę na serwer, gdyż interpretacje są niekiedy odmienne i poprawnie skonstruowana strona może być bez kłopotu wyświetlana w jednej z nich, a błędnie w innej - zaskakujące bywają niekiedy interakcje styló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