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
• Ł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
• <style> w nagłówku dokumentu
(<head>)
Dołączanie reguł do dokumentu HTML
•
styl wpisany (ang. inline)
•
styl wbudowany (ang. embedded)
• styl zewnętrzny (ang. external)
• arkusz stylów w zewnętrznym pliku
• związanie z HTML poprzez <link>
p
{ color : red }
Składnia reguł
• Selektor może zawierać:
– nazwy elementów ( H1)
– nazwy klas ( .parzysty)
– identyfikatory ( #txt15)
selektor
właściwość
cecha
deklaracja
blok deklaracji
reguła
wskazuje elementy dokumentu,
które maja być sformatowane
opisuje formatowanie
Składnia reguł
• Grupowanie selektorów
• Grupowanie deklaracji
p, H1 { color : red }
p
{ color : red ; font-style : italic
}
;
• selektory proste
• selektory uniwersalne
• selektory potomka
• selektory dziecka
• selektory sąsiednie lub rodzeństwa
• selektory identyfikatora
• selektory klasy
• pseudoklasy
• pseudoelementy
P { color:red; font-size:14pt; }
* { color:red; font-size:14pt; }
Selektory kontekstowe
• To samo znakowanie w różnym kontekście
• Atrybut
class
(nazwa kontekstu)
– specyfikuje styl dla grupy elementów
<head>
<style>
.
center
{
text-align:center;
}
</style>
</head><body>
<h1
class
="
center
">Wycentrowany nagłówek</h1>
<p
class
="
center
">Wycentrowany akapit</p>
</body>
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
...
<style type=”text/css”>
#ala
{color: red}
#ola
{color: green}
</style>
...
<p ID=”
ala
”> Ala ma kota </p>
<p ID=”
ola
”> Ola ma psa </p>
...
Propagacja stylu
• Dziedziczenie
– styl zakresu otaczającego widoczny w zakresie
zagnieżdżonym
• Kaskada
– styl zakresu zagnieżdzonego przesłania styl
zakresu otaczającego
Dziedziczenie stylu
• Elementy stylu ”do-definiowywane” :
<html>
<head>
<title>dziedziczenie</title>
<head>
<body style=” font-family: sans-serif”>
Przykład
<p style=” color: blue”>
pokazujący
<span style=”font-weight: bold”>
dziedziczenie
</span>
</p>
</body>
</html>
html
head
title
body
p
span
Kaskada stylu
• Elementy stylu ”prze-definiowywane” :
<html>
<head>
<title>dziedziczenie</title>
<head>
<body style=”
color:
blue”>
Przykład
<p style=”
color:
red”>
pokazujący
<span style=”
color:
green”>
kaskadę
</span>
</p>
</body>
</html>
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ść)
margin
margin
box
box width
width
border
border
padding
padding
„wnętrze”
„wnętrze”
element
element width
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