REGUŁY CSS tworzą STYL tj.wygląd strony

CSS (ang.Cascading Style Sheets=Kaskadowe Arkusze Stylów) to zbiór reguł opisujących właściwości i wartości oraz zasady ich stosowania w celu uzyskania określonego wyglądu czyli STYLU strony. Służą do formatowania kodu źródłowego strony i rozmieszczenia go na stronie wraz z elementami grafiki. Reguły zawierają zawsze trzy elementy: selektor (ang.selectors) - nazywany znacznikiem lub wskaźnikiem, właściwość (ang.properties)  i  wartość (ang.values}   i są zapisywane w postaci;
selektor { właściwość: wartość;   właściwość: wartość;   właściwość: wartość; }

Element właściwość nazywany także cechą lub parametrem musi być zakończony dwukropkiem: a wartość należy zakończyć średnikiem;. W ostatniej wartości można pominąć średnik. Te dwa elementy łącznie nazywane są deklaracją (ang.deklaration) lub definicją a reguła CSS może zawierać jedną lub kilka deklaracji tworząc blok deklaracji (ang.declaration block). Zbiór reguł dla strony nazywany jest Arkuszem Styli i są ich trzy rodzaje o czym jest więcej na stronie DOKUMENT

Przykład reguły;  h1 {font-size:1em; font-weight:bold; color:red; text-align:center;}
składa się z czterech deklaracji formatujących tekst tytułu, umieszczonego między parą znaczników <h1> tekst tytułu </h1>,  w sposób powodujący wyświetlenie tytułu na ekranie w rozmiarze 1em = 16pikseli jako pogrubiony w kolorze czerwonym i wypośrodkowany. W literaturze w celach dydaktycznych stosowany jest zapis każdej deklaracji w oddzielnym wierszu, natomiast w praktyce na stronach stosuje się zapisy deklaracji w jednym wierszu.

WŁAŚCIWOŚCI i ich atrybuty

Właściwości to najczęściej znane z języka HTML dwa znaczniki połączone łącznikiem z tym że drugi nazywany jest atrybutem. Właściwość może przyjmować różne atrybuty jak podany niżej font. Zdarzają się właściwości z dwoma atrybutami przy określaniu obramowania np. border-bottom-color:. Niektóre zakończone dwukropkiem występują osobno jak np. color:, który także może być atrybutem dla właściwości np. background-color:. Istnieją także nowe określenia właściwości jak np. position lub float. Poniżej podano 20 podstawowych właściwości z wymienieniem po znaku łącznika ich najczęściej stosowanych 18 atrybutów a po dwukropku najczęściej stosowane wartości.

font to nazwa czcionki
-family: oznacza krój czcionki np. Verdana, Arial, Tachoma, "Trebuchet MS", sans-serif;
-style: określa wygląd czcionki np: normal; (domyślna-zwykła), italic; (pochyła-kursywa)
-size: to rozmiar czcionki tekstu np. w jednostkach px, em, lub %
-weight: to "waga" czcionki tekstu np: normal; (domyślna), bold; (pogrubiona)
text-decoration: underline;(podkreślony), none;(brak podkreślenia)
-align: wyrównuje tekst do krawędzi, left; (do lewej), center; (do środka), right; (do prawej), justify; (obustronnie tj. do obu marginesów)
-indent: określa wcięcie pierwszego wiersza w pikselach, dopuszczane są wartości ujemne
margin definiuje identyczne obustronne marginesy np. 20px; lub auto; tj.centryczne ustawienie
-top: margines górny, dopuszcza się wartości ujemne
-right: margines prawy
-bottom: margines dolny
-left: margines lewy, istnieje zapis zbiorczy wartości G P D L, o czym niżej
padding dopełnienie obustronne nazywane marginesem wewnętrznym
-top: dopełnienie górne, niedopuszczalne są wartości ujemne
-right: prawe
-bottom: dolne
-left: lewe, istnieje zapis zbiorczy wartości G P D L w tym auto, o czym niżej
border 1px solid #000; obramowanie 1px czarne, ma 16 kombinacji atrybutów
-top: obramowanie górne, posiada trzeci atrybut; style, width i color
-right: obramowanie prawe, linia pionowa rozdziału kolumn
-bottom: obramowanie dolne, linia pod tytułem, napisem, rozdział wierszy
-left: obramowanie lewe
background właściwości tła, ma atrybuty; -attachment, -image, -position, -repeat oraz
-color: kolor tła strony, paska, elementu
 
color: barwa tekstu, tła, obramowania itp np. blue lub #0000FF, bez atrybutu
display: inline; - zmienia położenie elementów listy z pionowego w poziome, stosowany w menu
letter-spacing: -2px; - odległość między literami -2px oznacza skupienie liter a 2px rozsunięcie liter
line-height: 200%; 2em; - ustala minimalny odstęp między wierszami tekstu
list-style-type:none; margin-left:0px; padding-left:0 - usuwa wcięty lewy margines elementów listy, w IE7 sprawia wrażenie zbędnej reguły, widoczny jej brak jest w Firefox
 
Pozycjonowanie i wymiarowanie elementów na stronie
position: położenie dowolnego elementu na stronie
absolute; pozycjonowanie elementu względem górnej lewej krawędzi przeglądarki - ekranu, wyznaczane deklaracjami selektora top:Npx; i left:Mpx;
relative; pozycjonowanie względem górnej lewej krawędzi elementu, naogół krawędzi kolumny, wyznaczane deklaracjami selektora top:Npx; i left:Mpx;
float położenie elementu pływającego z tekstem
-left położenie elementu przy lewej krawędzi i otaczanie elementu tekstem
-right położenie elementu przy prawej krawędzi i otaczanie elementu tekstem
clear: usuwa skutki stosowania float tj. puste przestrzenie rzędu 5-10px. IE7 zachowuje się niezgodnie z CSS. (HTML XHTML CSS W.Gajda str.175 -176)
both; przy stosowaniu left i right
left; right; przy stosowaniu jednego float
width: szerokość elementu naogół w pikselach, 900px = 297mm na ekranie 17", 1px = 0.33mm
height: wysokość elementu w pikselach, em lub %
top: right: bottom: left: odstępy elementu od krawędzi okna przeglądarki w px, em, %
 
Drukowanie wybranych fragmentów strony
#head, #sidebar, #footer {display:none;} usuwa z druku nagłówek, pasek boczny, stopkę itp
#content {float:none; width:auto;} usuwa z druku działanie float:left; i width:600px tworzących kolumnę.
h3 {font-size:18pt; margin-left:6%;} deklaruje wymiar czcionek w punktach z marginesem w %
* {color:black !important;} deklaruje kolor dla całej strony z WAŻNOŚCIĄ usuwającą wszelkie konflikty specyficzności. Deklaracja ! important umieszczana jest na końcu przed średnikiem i można ją stosować nie tylko przy wydrukach.

WARTOŚCI zapis zbiorczy G P D L

Wartość przypisana do właściwości stosującej atrybuty; margin, padding, border, może być określana dwoma sposobami. Zapisem typu margin-top: ..; margin-right: ..; margin-bottom: ..; margin-left; ..; lub tzw. zapisem zbiorczym np. margin:40px 20px 0 30px; gdzie kolejność wartości jest określana zapisem: GÓRA - PRAWA strona - DÓŁ - LEWA strona czyli  G P D L;,  który zakończony jest zawsze średnikiem. Wartość nie musi być liczbą może oznaczać także; kolor, położenie tekstu lub elementu, styl konturu i inne.

Skrócony zapis zbiorczy typu G P oznacza; G P D=G L=P i tak zapis margin:20px 10px; oznacza faktycznie margin:20px 10px 20px 10px;, a zapis margin:0 auto; oznacza margin:0 auto 0 auto; Zapis typu G oznacza G=P=D=L, stąd margin:0; oznacza margin:0 0 0 0;

SELEKTORY

Selektor to część reguły CSS określającej elementy XHTML, którym zostanie nadany wskazany styl tj. wygląd. Selektor w kodzie źródłowym strony spełnia rolę nazwy łączącej elementy XHTML z regułą CSS, w arkuszu styli i może mieć konstrukcje prostą lub złożoną co dotyczy także jego działania. Specyfikacja CSS przewiduje 10 selektorów z których w Bibliotece opisano 7 a zastosowano 6, najczęściej używanych z specyfikacji CSS 1. Pozostałe to selektory; atrybutów, dzieci i bezpośredniego rodzeństwa z nieobowiązującej specyfikacji CSS 2.1 i CSS 3. Selektory wymieniono wg. częstości ich stosowania.

SELEKTOR ELEMENTU

Selektor elementu lub prosty to jeden z znaczników języka XHTML obejmujący swym zasięgiem wszystkie jego wystąpienia. Przykłady:
em {color: red;} wszystkie wyrazy objęte znacznikiem em będą koloru czerwonego
p {font-size: 12px; color: blue;} każdy tekst objęty znacznikiem p będzie niebieski o wymiarze 12px

SELEKTOR IDENTYFIKATORA ID

Selektor identyfikatora ID charakteryzuje wyróżnik krzyżyka # po którym jest umieszczona nadana nazwa selektora. Stosujemy go w bardziej skomplikowanej konstrukcji występującej tylko raz na stronie z możliwością korzystania ze skryptów JavaScript np. generujących aktualną datę i godzinę. Może to być np. tytuł strony, menu lub stopka i może mieć formę:
#pasek {font-size:1em; color:white; background:red;} Celem tego stylu CSS jest wyświetlenie na ekranie liter o wymiarze 1em, koloru białego na tle czerwonym. Cel ten osiągamy wpisując na stronie w sekcji <body> polecenie;
<div id="pasek">TREŚĆ NAPISU NA PASKU</div>
W efekcie otrzymamy czerwony pasek biegnący przez całą szerokość ekranu z delikatnym napisem w lewym rogu. Chcąc uzyskać; grube litery, wycentrowany napis, krótszy pasek o szerokości 500px oraz przesunąć pasek na środek ekranu, musimy dopisać definicje zawierające; -weight:bold, -align:center, width:500px, oraz margin -left i -top, co przedstawiono poniżej:
#pasek {font-size:1em; font-weight:bold; color:white; text-align:center;
background:red; width:500px; margin-left:230px; margin-top:300px;}

SELEKTOR POTOMNY

Selektor potomny lub potomka, dawniej kontekstowy najbardziej użyteczny składa się co najmniej z dwóch selektorów dokonując ich modyfikacji na podstawie kontekstu. Przykładowo w nagłówku objętym selektorem #naglowek chcąc umieścić jego nazwę oraz informację zamiast kolejnych nowych elementów div stosujemy zapis; <h1>TYTUŁ</h1> oraz <h2>Informacja</h2> a w arkuszy styli umieszczamy selektory:   #naglowek h1 {font-size: 24px;}   oraz   #naglowek h2 {font-size: 12px;. W obu regułach zastosowano znaczniki h1 i h2 zgodnie z ich funkcją a ich działanie dotyczy tylko nagłówka. Poza nagłówkiem znaczniki h1 oraz h2 mogą być stosowane z innymi parametrami w innych elementach strony.

SELEKTOR KLASY

Klasa charakteryzuje się wyróżnikiem kropki "." po którym jest umieszczona nadana nazwa stylu tj. selektor. Selektor klasy stosujemy zawsze gdy element na stronie pojawia się więcej niż jeden raz. Pisząc wiersze lub teksty piosenek chcemy aby ich treść była wycentrowana ale poszczególne zwrotki tj. nieparzyste akapity były przesunięte w lewo a parzyste w prawo. Stosujemy wtedy formę:
p.lewy {tekst-align:left; margin-left:150px;}
p.prawy{tekst-align:left; margin-left:200px;}
oraz grupujemy oba selektory określając szczegółowo czcionkę
p.lewy,   p.prawy (font-size: 0.8em; font-weight:normal; color:blue;}
Zamierzony cel osiągamy wpisując na stronie w sekcji <body> przemiennie polecenia
<p class= "lewy">Akapit, wiersz, zwrotka nieparzysta</p>
<p class= "prawy">Akapit, wiersz, zwrotka parzysta</p>
Zamiast znacznika <div> przed class wpisujemy znacznik <p> gdyż jest to selektor prosty. Możliwe jest określenie różnych czcionek dla każdego akapitu. W grupowym selektorze możemy określić wyrównanie do obu marginesów deklaracją text-align:justify;
W literaturze zwłaszcza starszej spotyka się w arkuszach CSS przed znacznikiem zapis div np. div#pasek {deklaracja;} lub div.pasek {deklaracja;} Taki zapis wyróżnia elementy blokowe selektorów identyfkatorów i klas od pozostałych pięciu selektorów i pseudoklas ale jego głównym celem jest poprawne działanie arkusza w starych typach przeglądarek, zwłaszcza amerykańskich.

SELEKTOR PSEUDOKLAS

Do pseudoklas zaliczają się pseudoklasy łącza a najpopularniejszą z nich jest :hover.
a.link { font:normal; color:blue;}
a.link:hover { color:red; background:white;}
Pierwszy selektor powoduje że kolor łącza nieodwiedzonego - nienaruszonego jest niebieski. Słowo link jest selektorem tj. dowolną nazwą łączącą oba selektory. Drugi selektor powoduje że po pojawieniu się nad nim kursora, kolor połączenia odwiedzonego zmienia się na czerwony a tła na biały. Cel osiągamy wpisując w sekcji <body> polecenie:
<a href="adres strony wewnętrznej lub zewnętrznej" class="link">Adres strony</a>
Sposoby określania adresów stron podano na stronie   XHTML / Łącza

SELEKTOR PSEUDOELEMENTU

Pozwala przypisać różne wymyślone style do elementów na stronie www. Wyróżnikiem jest dwukropek jak w wypadku selektora pseudoklas. Chcąc wyróżnić pierwszą literę akapitu stosujemy zapis: p: first-letter {font-size:1.5em; color:blue;}. W wypadku wzorów matematycznych możemy stosować zapis p.wzór: first-letter { deklaracje; }. W sekcji BODY w znacznikach XHTML stosujemy wtedy zapis <p class="wzór">S = prędkość x czas</p> otrzymując w efekcie dużą literę S na początku wzoru, jak na stronie TEKSTY / OZDOBNIKI.

SELEKTOR UNIWERSALNY

Najrzadziej stosowany oznaczany znakiem gwiazdki (*). Obejmuje wszystkie elementy dokumentu. Przykład ;   *{color: blue;} spowoduje zastosowanie koloru niebieskiego we wszystkich tekstach, nagłówkach, listach itd.

GRUPOWANIE SELEKTORÓW

W wypadku gdy cztery selektory np; dl dt dd i h1 mają wyświetlać czcionkę w tym samym kolorze np. czerwonym stosujemy grupowanie selektorów rozdzielając je przecinkami i zamiast czterech selektorów mamy jeden selektor grupowy: dl, dt, dd, h1 {color: red;}. Inny przykład w   Selektor klasy

SŁOWNIK

Określenia anglojęzyczne i ich odpowiedniki stosowane przez różnych tłumaczy i autorów opisujących CSS.

Arkusze stylów CSS
external - zewnętrzne, dołączone, umieszczone w osobnym pliku z rozszerzeniem .css  typu  nazwa.css
embedded - osadzone, zagnieżdżone, umieszczone na stronie w sekcji  head  między <style type="text/css"> a </style>
inline - wewnętrzne, wpisane, bezpośrednie, lokalne, umieszczone w wierszu kodu XHTML