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 i wartości kolorów
  3. Selektory
  4. Tło i obramowanie
  5. Model Box
  6. Tekst
  7. Fonty
  8. Listy
  9. Efekty tekstu
  10. Suplement

WSTĘP

Przykład 1.


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

Więcej:

Plansza http://plotkarka.eu/PI/css3/preludium.html

Kolor tekstu i wartość kolor

  • {color:} - kolor tekstu,

Więcej na:
Karta http://plotkarka.eu/KP/css3-color.html
Plansza http://plotkarka.eu/PI/css3-color/

Selektory

  • Typu
  • Potomka i dziecka
  • Klasy i 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,
  • [] - atrybutu,

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:} - właściwości obramowania,

Więcej na:
Karta http://plotkarka.eu/KP/css3-background.html
Plansza  http://plotkarka.eu/PI/css3-background/

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.

Więcej na:
Karta http://plotkarka.eu/KP/css3-box.html
Plansza http://plotkarka.eu/PI/css3-box/
 
----------------------------------------------

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:
Karta http://plotkarka.eu/KP/css3-fonts.html
Plansza http://plotkarka.eu/PI/css3-fonts/

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:
Karta http://plotkarka.eu/PI/css3-text.html
Plansza http://plotkarka.eu/PI/css3-text/

Efekty tekstu

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

Więcej na:
Karta http://plotkarka.eu/KP/css-text-decor-3.html
Plansza http://plotkarka.eu/PI/css-text-decor-3/

Listy

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

Więcej na:
Karta http://plotkarka.eu/KP/css-lists-3.html
Plansza http://plotkarka.eu/PI/css3-lists/

Suplement

Wartości i jednostki

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

Więcej na:
Plansza http://plotkarka.eu/PI/css3-values/

Atrybut style

  • atrybut style
Więcej na:
Karta: http://plotkarka.eu/KP/css-style-attr.html
Plansza: http://plotkarka.eu/PI/css-style-attr/

Model formatowania liniowego

  • {line-height:} - interlinia
Więcej na:
Plansza: http://plotkarka.eu/PI/css3-linebox/
Karta: http://plotkarka.eu/KP/css3-linebox.html

Kaskadowość i dziedziczenie

  • Reguła @import
Więcej na:
Plansza: http://plotkarka.eu/PI/css3-cascade/
Karta: http://plotkarka.eu/KP/css3-cascade.html

ŹRÓDŁA

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