CSS TYPE="text/css" HREF="http

Transkrypt

CSS TYPE="text/css" HREF="http
CSS
Prosty, blokowo zorientowany model dokumentu. Każdy element to blok (prostokąt),
posiadający marginesy (margins), ramkę (border), marginesy wewnętrzne (padding)
i zawartość (content).
Z punktu widzenia formatowania elementy dzielą się na inline (wiersze) i block-level
(akapity).
CSS1 zawiera 5 podstawowych rodzajów formatowania (properties): kolor tekstu
i tła; rodzaj pisma; odstępy między wierszami i wyrazami; bloki (marginesy, ramki
itp); określenie kategorii elementu (block-level, inline).
Styl (szablon) to podpowiedź dla programu interpretującego dokument HTML; wynik
jest zależny m.in. od możliwości tegoż programu (UA).
Deklaracja szablonu:
<LINK REL="STYLESHEET" TYPE="text/css" HREF="http://...">
Określenie formatowania poszczególnych elementów:
element {właściwość: wartość}
np. H1 {color: pink}
ele1, ele2, ele3 {właściwość: wartość; właściwość: wartość...}
Dziedziczenie
Elementy zagnieżdzone dziedziczą właściwości od elementów nadrzędnych
Kontekst:
Brak mechanizmu ogólnego, występuje tylko mechanizm oparty na hierarchii
elementów. Podanie kilku elementów zamiast jednego oznacza przypisanie reguły
formatowania dla tak określonego elementu zagnieżdżonego:
P DIV EM { właściwość }
przypisuje właściwość tylko EM wewnątrz DIV, wewnątrz P.
Podział elementów na kategorie:
<P CLASS="ważny">
<P CLASS="przykład">
P.ważny {... }
P.przykład{...}
Właściwości:
Kolory: color, background
Kroje pisma:
font-family: Garamond | serif | sans-serif | monospace ...
font-style: normal | italic | oblique,
font-variant: normal | small-caps,
font-size: larger | smaller | 12pt | 150% | 1.5em
1
font-weight: normal | bold | bolder | lighter | 100..900
<DIV CLASS="STRONG">Uwaga:</DIV>
DIV.STRONG { font-weight: bolder }
Tekst:
word-spacing: normal | 1pt | .3em (dodatk. odstęp między wyrazami);
letter-spacing: normal | 1pt | .1em (dodatk. odstęp między znakami);
text-decoration: none | undeline | overline | line-through | blink
vertical-align: baseline | sub | super | top
text-transform: capitalize | uppercase | lowercase | none
text-align: left | right | center | justify
text-indent: none | 20pt
line-height: normal | 1.2 | 1.2em | 120%
Bloki: Określenie marginesów wewnętrznych oraz zewnętrznych, ramki, wielkości
(obrazki)
Kategorie:
display: block | inline | list-item | none
IMG { display: none }
2