MiniRepetytorium CSS

CSS
Kaskadowe arkusze stylów (ang. Cascading Style Sheets) to język służący do opisu formy prezentacji (wyświetlania) stron WWW opracowany przez organizację W3C. Obecnie obowiązującym standardem jest wersja CSS 2.1[1] oraz zatwierdzone moduły CSS3.

Tematy:
  1. Wstęp
  2. Kolor tekstu, wartość kolorów
  3. Selektory
  4. Atrybut style
  5. Tło i obramowanie
  6. Model Box
  7. Tekst
  8. Fonty
  9. Listy
  10. Efekty tekstu
  11. Model formatowania liniowego
  12. Suplement (jednostki, dziedziczenie)

Część 1.

Wstęp

Przykład 1.


Reguła
selektor { właściwość: wartość; }
Selektor
selektor
Deklaracja
właściwość: wartość;

Rodzaje stylu:

  • Lokalny, Wewnętrzny, Zewnętrzny.

Więcej:

Kolor tekstu i wartość kolor

  • {color:} - kolor tekstu,
  • modele barw

Więcej na:

Selektory

  • element - typu,
  • e1 e2 - potomka,
  • e1>e2 - dziecka,
  • [e].nazwa - klasy,
  • [e]#nazwa - identyfikatora,
  • ::first-letter - pierwszy znak,
  • ::first-line - pierwsza linia,
  • :link - pseudoklasa linków,
  • :visited - pseudoklasa linków odwiedzonych,
  • :active - pseudoklasa elementów aktywnych,
  • :hover - pseudoklasa elementów wskazanych,
  • element[atrybut] - atrybutu,
  • s1, s2 - grupowanie selektorów.

Atrybut style

  • atrybut style 
  • kaskadowoć
Więcej na:

Tło i obramowanie

  • {background:} - właściwości tła,
  • {background-attachment:} - sposób przewijania tła,
  • {background-color:} - kolor tła,
  • {background-image:} - tło graficzne elementu,
  • {background-repeat:} - powtarzanie tła graficznego,
  • {border-style:} - styl linii obramowania,
  • {border-color:} - kolor linii obramowania,
  • {border:} - właściwości obramowania,
  • {border-radius:} - właściwości obramowania,

Więcej na:

Model Box

  • {width:} - szerokość elementu,
  • {height:} - wysokość elementu,
  • {margin:} - margines zewnętrzny,
  • {margin-top:} - margines zewnętrzny górny,
  • {padding:} - margines wewnętrzny,
  • {padding-top:} - margines wewnętrzny górny.
  • {visibility:} - widzialność.
  • {float:} - oblewanie.
  • {clear:} - oblewanie.
  • {display:} - wyświetlanie.

Więcej na:

 Zadania (sprawdzian 1.):


Część 2.

Fonty

  • {font:} - właściwości fontu,
  • {font-family:} - rodzaj fontu,
  • {font-size:} - wielkość fontu,
  • {font-style:} - styl fontu,
  • {font-variant:} - wariant fontu,
  • {line-height:} - interlinia

Więcej na:

Tekst

  • {text-align:} - wyrównywanie tekstu,
  • {text-indent:} - wcięcie pierwszego wiersza akapitu,
  • {letter-spacing:} - odstępy między literami,
  • {word-spacing:} - ostęp między wyrazami.
  • {text-transform:} - transformacja tekstu.

Więcej na:

Efekty tekstu

  • {text-decoration:} - wyróżnienia tekstu.

Więcej na:

Listy

  • {list-style:} - właściwości listy
  • {list-style-image:} - punktor graficzny listy

Więcej na:

 Model formatowania liniowego

  • {line-height:} - interlinia
  • {vertical-align:} - wyrównywanie w pionie
Więcej na:

Suplement

Wartości i jednostki

  • % - procent
  • px - piksel
  • pt - punkt

Więcej na:

Kaskadowość i dziedziczenie

  • Reguła @import
  • inne
Więcej na:

 Zadania (sprawdzian 2.):

ŹRÓDŁA

[CSS21]
Bert Bos et al.; CSS 2.1; W3C Recommendation 7 June 2011;
URL: https://www.w3.org/TR/CSS2