Szukaj na tym blogu

CSS

Ojcowie CSS -  Håkon Wium Lie i Bert Bos
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 (Część I: 1.-6., Część II: 7.-12.):
  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 (tabele, jednostki, dziedziczenie)

Część I

Wstęp

Przykład interaktywny 1. Styl strony


Reguła
selektor { właściwość: wartość; }
Selektor
selektor
Deklaracja
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.

Atrybut style

  • atrybut style 
  • kaskadowość, dziedziczenie, wartości domyślne
Więcej na:

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:

 Zadania (sprawdzian 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
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
  • {text-shadow:} - cień tekstu
Więcej na:

Listy

  • {list-style-type:} - typ listy
  • {list-style-image:} - punktor graficzny listy
  • {list-style:} - właściwości listy (typ, punktor graficzny, wcięcie)
Więcej na:

 Model formatowania liniowego

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

Suplement

Formatowanie tabel

  • {border-collapse:} - styl obramowania
Więcej na:

Wartości i jednostki

  • % - procent
  • px - piksel
  • pt - punkt
Więcej na:

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.)
Więcej na:

 Zadania (sprawdzian 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
  •  
Aktualizacja
Etykiety: , , , , ,