Cascading style sheets css3 nowoczesne style: grafika i animacja stron www

Tworzeniem standardów HTML i CSS zajmuje się organizacja The World Wide Web Consortium (W3C) https://www.w3.org/  . Na jej stronach znajduje się pełna specyfikacja stylów: https://www.w3.org/standards/webdesign/ , choć trzeba przyznać, że lepiej – wygodniej jest w praktyce korzystać ze strony: https://www.w3schools.com/ gdzie znajduje się wykaz pełnych referencji CSS.

Podstawowa składnia CSS3

Style CSS często nazywane są regułami. Te dwie nazwy stosowane są zamiennie. Styl/reguła składa się z dwóch głównych części:
Selektora - informuje przeglądarkę, co ma być sformatowane
Bloku deklaracji - zawiera listę instrukcji formatowania do użycia przez przeglądarkę nadając styl selektorowi
p {color:blue; font-size:1.2em;}
lub adekwatny zapis charakterystyczny dla arkusza stylów:
p {
color:blue;
font-size:1.2em;
}

    blok    deklaracji
selektor          deklaracja             deklaracja
p     {color  :       blue;    font-size  :     12px;}
    właściwość  wartość    właściwość    wartość
Powyższe style należy czytać:
Paragraph (p), zostanie sformatowany na kolor niebieski, a czcionka będzie miała wielkość 12 pikseli. Proste prawda?
Kolejny przykład:
h2 {
  font-size: 1.05em;
  font-weight: bold;
}

Tekst zawarty w selektorze h2 będzie miał wielkość 1.05em (em to jedna z jednostek CSS) oraz będzie pogrubiony.
Zerknij do katalogu z przykładami, oglądaj dokument html, i porównuj go z zapisami w dołączonym do niego (podlinkowanym) arkuszu stylów.

SELEKTORY – podstawy wiedzy

Selektory wskazują do czego odnoszą się style, czyli np. styl wskazuje, że kolor czcionki będzie zielony a jej rozmiar będzie miał wielkość 13px:
p {color:green; font-size:13px;}

Selektory znaczników czyli style dla całej strony

Znaczniki poznałeś/aś w części o budowie html. Każdemu znacznikowi za pomocą CSS można przyznać określone właściwości, np. określmy dla znacznika h5 wielkość czcionki :
h4 {
  font-size: 0.8em;
}

Selektor ID to unikalny elementy strony

Selektor id nie może się powtarzać, służy do identyfikacji niepowtarzalnych części strony, takich jak banery, paski nawigacyjne czy główny obszar z treścią. Poniższy przykład ustawia kolor tła oraz szerokość i wysokość banera:
#banerek {
 background: #DD0000;
 height: 100px;
 width: 390px;
}
Przypisanie w kodzie html selektora ID:
<div id="banerek"> czyli kontener div zostanie sformatowany wg specyfikacji #banerek.

Selektor klasy

Selektor klasy tworzony jest w stylach css i przypisywane są do niego określone cechy. W kodzie html możemy dowolną ilość razy odwołać się do selektora klasy. Poniższy przykład ustawia kolor tła oraz szerokość i wysokość banera:
.banerek {
 background: #DD0000;
 height: 100px;
 width: 390px;
}
Przypisanie w kodzie html selektora klasy:
<div class="banerek">
Generalnie raczej odchodzi się od używania Selektorów ID na rzecz bardziej uniwersalnych Selektorów klasy.

Zobacz w bocznym menu podobne do: Cascading style sheets css3 nowoczesne style: grafika i animacja stron www