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