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:
- Wstęp
- Kolor tekstu, wartość kolorów
- Selektory
- Atrybut style
- Tło i obramowanie
- Model Box
- Tekst
- Fonty
- Listy
- Efekty tekstu
- Model formatowania liniowego
- Suplement (jednostki, dziedziczenie)
Część 1.
Wstęp
Przykład 1.Reguła
selektor { właściwość: wartość; }Selektor
selektorDeklaracja
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.
Więcej na:
Atrybut style
- atrybut style
- kaskadowoć
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:
- Karta: http://plotkarka.eu/KP/css3-box.html
- Plansza: http://plotkarka.eu/PI/css3-box/
Zadania (sprawdzian 1.):
- https://egzamin-e14.blogspot.com/search/label/CSS[1]
- https://egzamin-ee09.blogspot.com/search/label/CSS[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:
- 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:
Model formatowania liniowego
{line-height:}
- interlinia{vertical-align:}
- wyrównywanie w pionie
Suplement
Wartości i jednostki
- % - procent
- px - piksel
- pt - punkt
Więcej na:
- Plansza: http://plotkarka.eu/PI/css3-values/
Kaskadowość i dziedziczenie
- Reguła @import
- inne
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