Poradnik HTML5 i CSS3

Wstęp

CSS

Cascading Style Sheets - kaskadowe arkusze stylów, służące do opisu formy prezentacji stron WWW
Typy stylów
zewnętrzny - osobny plik, w htmlu dołączamy jako arkusz stylów
brak
wewnętrzny - umieszczany w head w znaczniku kontenerowym <style>
brak
lokalny - umieszczany bezpośrednio jako atrybut znacznika w <style>
brak

Reguły

Arkusz stylów składa się z reguł określających styl dla wybranych elementów dokumentu. Reguła składa się z selektora oraz deklaracji. Selektor określa grupę elementów, którego ma dotyczyć deklaracja. Deklaracja określa formatowanie i składa się z nazwy jednej z właściwości i jej wartości napisanej po dwukropku. Deklaracja musi być otoczona nawiasami klamrowymi.
brak
width - określa szerokość elementu wyrażona np. w pixelach lub procentach
height - określa wysokość elementu wyrażona np. w pixelach lub procentach
border - tworzy ramkę wokół obiektu; możemy podać od razu wartości np. "1px solid black" lub wpisywać je osobno lub np. jako "border-bottom" itp.
color - określa kolor czcionki np. "red"
background-color - określa kolor tła dla danego elementu np. "pink"
font-weight - określa jak czcionka ma być chuda lub gruba np. "bold" lub "800"
font-size - określa rozmiar czcionki wyrażony np. w pixelach
font-style - określa styl czcionki np. pochylony - "italic"
font-family - określa rodzaj czcionki np. "Times New Roman"
text-align - określa położenie tekstu np. "center"
text-decoration - określa dekoracje tekstu np. podkreślenie - "underline"
list-style-type - określa rodzaj znacznika w liście np. " circle" lub "upper-roman"
padding - określa dodatkowe miejsce elementu, wyrażona np. w pixelach lub procentach
margin - określa odległość od innego elementu, wyrażona np. w pixelach lub procentach
line-height - określa wysokość wiersza lini, wyrażona np. w pixelach lub procentach
background-repeat - określa czy tło ma się powtarzać np. "repeat" lub "repeat-x"
background-position - określa położenie tła np."left"
background-attachment - określa jak tło ma się zachowywać np przy scrollowaniu - " scroll"
overflow - określa jak ma się zachować element, gdy jego zawartość nie mieści się w jego ramach np. "hidden"
float - określa położenie elementu np. "left"
clear - określa z której strony element nie może być oblewany przez float
display - określa typ obiektu np. ułożenie w linii - "inline"
border-radius - określa zaokrąglenie ramki np w pixelach
text-indent - określa wcięcie pierwszej linii tekstu wyrażone np. w pixelach
letter-spacing - określa odstępy między literami wyrażone np. w pixelach
font-variant - pozwala na wyświetlanie małch liter jako dużych "small-caps"
position - określa pozycjonowanie elementu, wartości:

  1. static - statyczny, domyślny, elementy układają się jeden pod drugim; nie działa "top" itp.
  2. relative - względny, ma taki sam wpływ jak static działa "top" itp.
  3. absolute - bezwzględny, nie ma wpływu na inne elementy, pozycjonowany według relative lub okna przegladarki, działa "top" itp.
  4. fixed - stały, element przyklejony według okna przeglądarki, działa "top" itp.

z-index - określa jak element ma być ułożony(na górze), przyjmuje wartości numerowe

Stworzony przy pomocy W3schools i Wikipedia.