Hipertekst i hipermedia
dr inż. Wioleta Szwoch
Katedra Inteligentnych Systemów
Interaktywnych
Plan wykładu
" CSS
 do czego służy
 podstawowe pojęcia
 nowości w CSS3
 CSS Cascading Style Sheet
" Mechanizm, język do definiowania stylu
prezentacji dokumentów w Internecie, określający
ich układ graficzny
 czcionki, kolory, marginesy, obramowania, itd.
" Preferowany sposób opisu formy prezentacji
dokumentów HTML
" Ułatwia spójne formatowanie zbioru dokumentów
" A
atwiejsza modyfikacja wyglądu stron
" Nie istnieje samodzielnie - ściśle powiązany z
językiem opisu struktury dokumentu
Dlaczego arkusze?
1. Rozdzielenie struktury od sposobu prezentacji
2. Pełniejsza kontrola autora nad sposobem
ostatecznej prezentacji dokumentu (pliki
 konfiguracyjne )
3. Skrócenie czasu  pielęgnacji strony przez
autora
4. Stworzenie możliwości bardziej elastycznego
zarządzania sposobem formatowania
(wyglądem) elementów znajdujących się w
dokumentach elektronicznych
CSS
" zbiór reguł
" składnia reguł
Osadzanie stylów na stronie
" Style wewnętrzne
 lokalne
 zagnieżdżone
" Style zewnętrzne
 dołączone
 importowane
Dołączanie reguł do dokumentu HTML
" styl wpisany (ang. inline)
" reguła formatująca w definicji elementu
" atrybut style
Dołączanie reguł do dokumentu HTML
" styl wpisany (ang. inline)
" styl wbudowany (ang. embedded)
" arkusz stylów w dokumencie HTML
"

Wycentrowany nagłówek

Wycentrowany akapit

Selektory kontekstowe
" Style CSS dodawane do elementów na podstawie ich
pozycji w drzewie dokumentu
" Pseudoklasy dynamiczne
 element "nabywa" lub "traci" pseudoklasę podczas interakcji z
użytkownikiem
" Pseudoklasy (predefiniowane konteksty)
A:link unvisited links
A:active active links
A:visited visited links
A:hover activation by pointer
P:first-line first line of paragraph
P:first-letter first letter of paragraph
Etykiety elementów stylu
"  Sztywna definicja
" możliwość nadania określonych atrybutów formatowania
dla elementu, który ma jednoznaczny identyfikator (ID),
czyli występuje tylko raz w drzewie dokumentu
...

...

Ala ma kota

Ola ma psa

Propagacja stylu
" Dziedziczenie
 styl zakresu otaczającego widoczny w zakresie
zagnieżdżonym
" Kaskada
 styl zakresu zagnieżdzonego przesłania styl
zakresu otaczającego
html
Dziedziczenie stylu
head body
" Elementy stylu  do-definiowywane :
title p

span



Przykład

pokazujący

dziedziczenie

Kaskada stylu
" Elementy stylu  prze-definiowywane :




Przykład

pokazujący

kaskadę

Kaskadyzacja
" Ważne elementy stylu (nie dające się nadpisać):
H1 {color: red ! important;
font-family: sans-serif;
text-align: right ! important}
" Priorytety kaskadyzacji:
1. styl wpisany (inline)
2. styl wbudowany (embedded)
3. styl zewnętrzny (linked)
Parametry tekstowe
" Wcięcie, wyrównanie, dekoracja, cień, odstępy,
transformacja wielkości liter
" Sterowanie sposobem wyświetlania tekstu:
 word-spacing
 letter-spacing
 text-decoration (none, underline, overline, line-through, blink)
 vertical-align
 text-transform (capitalize, uppercase, lowercase)
 text-align
 text-indent
 line-height
Parametry znakowe
" Font, styl, wariant, grubość, szerokość, rozmiar
" Sterowanie sposobem wyświetlania znaków:
 font (serif, ...)
 font-style (normal, italic, ...)
 font-variant (normal, small-caps, ...)
 font-weight (normal, bold, 100, ...)
 font-size (small, medium, large, ...)
 font-family
Parametry kolorystyczne
" Kolor pierwszego planu, kolor tła, obrazek jako tło
" Sterowanie sposobem wyświetlania kolorów i tła:
 color
 background
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
Parametry obramowania
" Sterowanie przestrzenią otaczającą wnętrze
(zawartość)
box width
box width
margin
margin
border
border
padding
padding
 wnętrze
 wnętrze
element width
element width
Parametry obramowania
" Formatowanie rozmiaru marginesów, grubości,
stylu i koloru obramowania
Pozycjonowanie w CSS
" Trzy schematy pozycjonowania:
 Normal flow
" normalne, domyślne, pozycja kolejnego elementu jest
determinowana położeniem poprzedniego;
 Floats
" przesunięcie elementu do lewej/prawej z możliwością
 opływania go zawartością kolejnych elementów;
 Absolute positioning
" położenie wskazane poprzez bezwzględne współrzędne
" Algorytm pozycjonowania uwzględnia właściwości:
 position (static, relative, absolute, fixed)
 float (left, right, none)
Pozycjonowanie w CSS
plik.css
Podsumowanie
" CSS jest preferowanym sposobem opisu formy
prezentacji dokumentów HTML
" Oddzielenie struktury of formy prezentacji