03 CSS wydruk

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>

{ 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 }

{ 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>

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

...

#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

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