 |
| Ojcowie CSS - Håkon Wium Lie i Bert Bos |
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.
Zadania:
- 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 (tabele, jednostki, dziedziczenie)
Część I
Wstęp
Przykład interaktywny 1. Styl stronyReguła
selektor { właściwość: wartość; }Selektor
selektorDeklaracja
właściwość: wartość;
Rodzaje stylu:
- Elementu (lokalny, wpisany - atrybut style)
- Strony (wewnętrzny - element <style>)
- Witryny (zewnętrzny - element link)
Więcej:
Kolor tekstu i wartość kolor
{color:}- kolor tekstu,- Modele barw
Więcej na:
Selektory
- element - typu,
- ele1 ele2 - potomka,
- ele1>ele2 - 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,
- element[atrybut="wartość"] - atrybutu o wartości,
- selektor1, selektor2 [,...] - grupowanie selektorów.
Więcej na:
Atrybut style
- atrybut style
- kaskadowość, dziedziczenie, wartości domyślne
Tło i obramowanie
{background-attachment:}- sposób przewijania tła,{background-color:}- kolor tła,{background-image:}- tło graficzne elementu,{background-repeat:}- powtarzanie tła graficznego,{background-position:}- pozycja tła graficznego,{background:}- właściwości tła (kolor, obraz, sposób przewijania, powtarzania i pozycja tła),{border-style:}- styl linii obramowania,{border-color:}- kolor linii obramowania,{border-width:}- szerokość obramowania{border:}- właściwości obramowania (styl, kolor, szerokość linii obramowania),{border-radius:}- zaokrąglone narożniki,
Więcej na:
Model formatowania blokowego "Box Model"
{width:}- szerokość elementu,{height:}- wysokość elementu,{margin:}- margines zewnętrzny,{margin-top:}- margines zewnętrzny górny,{margin-right:}- margines zewnętrzny prawy.{margin-bottom:}- margines zewnętrzny dolny.{margin-left:}- margines zewnętrzny lewy.{padding:}- margines wewnętrzny,{padding-top:}- margines wewnętrzny górny.{padding-right:}- margines wewnętrzny prawy.{padding-bottom:}- margines wewnętrzny dolny.{padding-left:}- margines wewnętrzny lewy.{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]
- https://egzamin-inf03.blogspot.com/search/label/CSS[1]
Część II
Fonty
{font-family:}- rodzaj fontu,{font-size:}- wielkość fontu,{font-style:}- styl fontu,{font-variant:}- wariant fontu,{font:}- właściwości fontu (rodzaj, wielkość[/interlinia), styl, wariant){line-height:}- interlinia
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.
Efekty tekstu
{text-decoration:}- wyróżnienia tekstu{text-shadow:}- cień tekstu
- Karta: http://plotkarka.eu/KP/css-text-decor-3.html
- Plansza: http://plotkarka.eu/PI/css-text-decor-3/
Listy
{list-style-type:}- typ listy{list-style-image:}- punktor graficzny listy{list-style:}- właściwości listy (typ, punktor graficzny, wcięcie)
Model formatowania liniowego
{line-height:}- interlinia{vertical-align:}- wyrównywanie w pionie
Suplement
Formatowanie tabel
{border-collapse:}- styl obramowania
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 importuje reguły stylów
- Polecenie !important spowoduje, że przypisana cecha będzie miała pierwszeństwo przed innymi, nawet jeśli ma niższy priorytet.
- Inne (np. Kolejność stylów CSS, ich pierwszeństwo w formatowaniu elementów strony - to styl: Lokalny, Wewnętrzny, Zewnętrzny.)
Zadania (sprawdzian 2.):
- https://egzamin-e14.blogspot.com/search/label/CSS[2]
- https://egzamin-ee09.blogspot.com/search/label/CSS[2]
Zadania:
Więcej na:
ŹRÓDŁA
[CSS21]Bert Bos et al.; CSS 2.1; W3C Recommendation 7 June 2011;
URL: https://www.w3.org/TR/CSS2
