Waciwoci-Czcionka

Waciwoci CSS- tekst

Cecha Opis Moliwe wartoci
color Deklaracja koloru tekstu Nazwy kolorw RGB(np. blue)
lub ich oznaczenia
szesnastkowe( np.#000800)
Line-height Deklaracja odstpu midzy
liniami
Wysokod podawana w
wybranej jednostce(1cm,
10pt,15px,70%)
Letter-spacing Deklaracja odstpu midzy
znakami tekstu
Odstp podawany w danej
jednostce
Text-align Deklaracja poziomego
wyrwnania tekstu
Left, right, center,justify
Text- decoration Deklaracja wyrnienia lub
deklaracja czcionki
None, underline(podkrelenie),
overline(linia nad), line-
through(przekreslenie),
blink(migotanie)
text-indent Deklaracja wcicia pierwszego Dugod podawana w danej
Cecha Opis Moliwe wartoci
font-family Deklaracja kroju czcionki Gwne kroje
czcionek:Arial,Verdena,
Georgia, Times New
Roman, Courier New,
Helvetica, Tahoma
Gwne rodziny
czcionek:serif,
Sans-serif
font-size Deklaracja rozmiaru czcionki Wysokod podawana w
wybranej jednostce(1cm, 10 pt,
15px, 70%) lub jako
predefiniowana wartod:xx-
small, x-small, small, medium,
large, x-large, xx-large, smaller,
larger
font-style Deklaracja stylu czcionki Normal, italic(pochylony),
oblique(pochylony)
font-variant Deklaracja typu czcionki Normal, small-caps(
"kapitaliki", czyli tekst napisany
wielkimi literami, lecz czcionk
o wielkoci maych liter)
font-weight Deklaracja gruboci czcionki Fighter, normal, bold, bolder,
100,200,300, 400, 500, 600,
700,800, 900
font Skrcona forma deklarowania
wszystkich waciwoci czcionki
w jednym miejscu
Oddzielone spacjami wartoci
w nastpujcej kolejnoci:
style, variant, weight, size,
family
wiersza tekstu jednostce
text-transform Deklaracja zmiany wielkoci
liter w tekcie
None, capitalize(zamienianie
pierwszych liter tekstu na due
litery), uppercase(zamienienie
wszystkich liter na due),
lowercase( zamienienie
wszystkich liter na mae)
word- spacing Deklaracja odlegoci midzy
wyrazami w tekcie
Dugod podawana w wybranej
jednostce
Przykad:
h1 {
text-decoration:overline;
word-spacing:10px;
text-align:center;
color:green;
}
Waciwoci CSS - to
cecha opis Moliwe wartoci
Background-attachment Definiuje, czy obrazek przewija si ze
stron, czy jest nieruchomy
fixed(to obrazkowe stanie
si nieruchome wzgldem
okna przegldarki
internetowej), scrool(to
obrazkowe stanie si
ruchome wzgldem okna
przegldarki internetowej.
Jest to warto domylna. )
Background-color Deklaracja koloru ta Nazwa koloru RGB lub zapis
szesnastkowy
Background- image Deklaracja obrazka jako ta Adres URL
Background-position Deklaracja pozycji obrazka ta Wsprzdne podawane w
wybranych jednostkach(10px
30px), procentach lub wartoci
predefiniowane:top, left, right,
bottom, center
Background-repeat Deklaracja sposobu powtarzania
obrazka w tle strony
repeat, repeat-x, repeat-y, no-
repeat
Background Skrcona forma deklarowania
wszystkich waciwoci ta w jednym
miejscu
Oddzielone spacjami wartoci
w nastpujcej kolejnoci:
color, image, repeat,
attachment, position
Przykad:
body {
background-image:url(/img/tlo.jpg)
background- attachment:fixed;
background-repeat:no-repeat;
}
lub forma skkrcona:
body{ background:url(/img/tlo.jpg) no-repeat fixed}

Waciwoci CSS- obramowanie
cecha opis Moliwe wartoci
border-color
border-top-color
border- left-color
border-right-color
border-bottom-color
Deklaracja koloru wszystkich
krawdzi lub wybranej(grna,
lewa, prawa, dolna)
Nazwa koloru RGB lub zapis
szesnastkowy( domylnie
przeroczyste)
Border-style Deklaracja stylu wszystkich lub
wybranej krawdzi
None, hidden,
dotted(kropkowane),
dashed(kreskowane), double,
groove, ridge, inset, outset
Border- width Deklaracja gruboci wszystkich
krawdzi lub wybranej
krawdzi
Grubod okrelona w pikselach
lub predefiniowana( thin-
cienka, medium-rednia, thick-
gruba)
border Skrcona forma deklarowania
wszystkich waciwoci
obramowania w jednym
miejscu lub wybranej krawdzi
Oddzielone spacjami wartoci
w nastpujcej kolejnoci:
width, style, color
przykad:
div { border- style:dotted;
border-color:red;
border-width:medium;
}
lub forma skrcona
div{border: medium dotted red}




Wasciwoci CSS- odsyacze(linki)
Selektor-pseudoklasa Opis
a:link Deklaracja odsyacza na stronie
a:visited Deklaracja linku odwiedzonego
a:hover Deklaracja linku po najechaniu mysz
a:active Deklaracja linku przy klikniciu
Przykad
odsyacz zwyky i odwiedzony
a:link, a:visited
{
color:b;ack; text-decoration:none;
background-color:gray;
border-style:dolid;
}
odsyacz aktywny i po najechaniu myszk
a:active, a:hover
{ color:silver;
text- decoration:none;
background-color:black;
border-style:dashed;}


Waciwoci CSS- listy
Cecha Opis Moliwe wartoci
List-style-type Deklaracja typu markera w
listach wyliczeniowych
Disc, circle, square,
decimal,lower-roman, upper-
roman, upper-alpha, lower-
greek, lower-latin, upper-latin,
hebrew, armenian, georgian,
cjk-ideographic, hiragana,...
List-style-position Deklaracja pozycji znacznika
wypunktowania listy
Inside, outside
List-style-image Deklaracja obrazka
zastpujcego marker w listach
Adres URL
List-style Skrcona forma deklarowania
wszystkich waciwoci list
Oddzielone spacjami wartoci
w nastpujcej kolejnoci: type,
position, image

Waciwoci CSS- kursor
Cecha Opis Moliwe wartoci
coursor Deklaracja typu kursora Adres URL z kursorem lub
wasciwod predefiniowana:
auto, crosshair, default,
pointer, move, e-resize, ne-
resize, nw-resize, n-resize, se-
resize, su-resize, s-resize, w-
resize, text, wait, help

Przykad :zmiana wygldu kursora na krzyyk po najechaniu na tabel:
table, tr, td
{
cursor:crosshair;
}
Waciwoci CSS-rozmiary
Cecha Opis Moliwe wartoci
height Deklaracja wysokoci elementu Wysokod podawana w
wybranej jednostce(1cm, 10pt,
15px,70%
width Deklaracja szerokoci elementu Szerokod podawana w
wybranej jednostce(1cm, 10pt,
15px,70%
Przykad
Ustawienie wysokoci(95%) i szerkoci (80%) dla elementu div:
div {
height:95%;
width:80%
}

Waciwoci CSS- marginesy
Cecha Opis Moliwe wartoci
Margin- top
Margin-left
Margin-right
Margin-bottom
Deklaracja grnego, lewego,
prawego lub dolnego
marginesu
Odlegod podawana w
wybranej jednostce(1cm, 10pt,
10px, 70%
margin Skrcona forma deklarowania
wszystkich marginesw
jednoczenie
Wartoci oddzielone spacjami
w kolejnoci: top, right,
bottom,left;
Podanie jednej wartoci
spowoduje zmian dla
wszystkich marginesw,
podanie dwch wartoci
spowoduje zmian dla grnego
i dolnego, oraz dla lewego i
prawego, trzy wartoci to
zmiana dla marginesu grnego,
prawego i lewego,
dolnego(trzecia wartod)

Przykad: Ustawienie marginesw dla strony: grny-0px, prawy i lewy 10px, dolny 5px:
body {
margin:0px 10px 5px;
}



Styl wpisany: <znacznik style="cecha: warto">

Styl osadzony: w sekcji head -
<style type="text/css">
<!--
selektor{cecha:warto;}
-->
</style>

styl zewntrzny: w sekcji head-
<link rel="Stylesheet" type="text/css" href="style.css">