[home]
techniki internetowe[home] 20/VIII
[top]

Everything that's realistic has some sort of ugliness in it. Even a flower is ugly when it wilts, a bird when it seeks its prey, the ocean when it becomes violent

Sharon Tate

CSS 2.1

Kaskadowe arkusze stylów

Reguła składa się z selektora i deklaracji.

selektor { deklaracje }

Deklaracja składa się właściwości po której następuje dwukropek oraz wartości po której następuje średnik.

właściwość :  wartość ;

Przykład reguły:

body { margin: 28px; background-color: yellow; }

Grupowanie selektorów:

h1, h2, h3 { color: #FF0000; }

Selektory identyfikatora i klasy: id a class:

div#content { background-color: #FFFF00; } p.warning { color: red; }

Pseudoklasy (np. :hover, :link, :visited) i pseudoelementy (p:first-letter)

Selektory kontekstowe:

h1 em { color: red; font-style: normal; }

font-style — po polsku mówimy „krój czcionki„

Przykłady:

Jeśli kilka reguł dotyczy tego samego elementu, to CSS rozstrzyga którą regułę zastosować używając procesu nazywanego kaskadą. Kaskada przypisuje importance do każdej reguły.

importance uporządkowane od największej do najmniejszej:

Wygrywa reguła o największej importance. Jeśli dwie reguły mają taką samą importance, to wygrywa reguła o większej specyficzności. Jeśli specyficzności są takie same, to wygrywa reguła zdefiniowana jako ostatnia.

Obliczanie specyficzności reguły. Specyficzność reguły jest liczbą obliczaną z czterech składników: a, b, c oraz d.

selektorspecyficznośćprzy podstawie 10
style="color: red;"1,0,0,01000
#content #repo { }0,2,0,0200
#content .simple { }0,1,1,0110
div#content { }0,1,0,1101
#content0,1,0,0100
p.comment .simple { }0,0,2,121
p.comment { }0,0,1,111
div p { }0,0,0,22
p { }0,0,0,11

Dziedziczenie jest użyteczne ponieważ pozwala nam uniknąć dodawania tych samych deklaracji do elementów potomnych. Zamisat pisać coś takiego:

p, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li { color: black; }

możemy napisać coś takiego

body { color: black; }

Uwaga: nie wszystkie właściwości są dziedziczone, na przykład border (dlaczego? zdrowy rozsądek?)

Elementy blokowe (block) i elementy wewnętrzne (inline). Elementy div i span

Z CSS albo bez CSS

Materiały w sieci

"Web design" is a much more complicated profession than it was ten years ago, but we still believe in the ability of the self-taught professional to develop top-notch skills through immersion in the kinds of resources and communities we've collected below.

The ALA Primer Part Two: Resources For Beginners
[top]