HOME    SKRIPTY
2. díl seriálu o CSS - Základní vlastnosti
Alpin | 31. května 2007

modrá) máte dvě číselná místa. Takže třeba barva #000000 je černá, #FFFFFF bílá. #FF0000 bude červená, #00FF00 zelená a #0000FF modrá.
Můžete si namíchat i vlastní barvu. K dispozici máte 256 sil každého barevného kanálu. Pomocí tohoto způsobu můžete tedy nadefinovat až 16 777 216 barev, což není málo a je to mnohem přesnější než definovat barvu slovně. Co říkáte na barvu #60A5F4?
Ale to jsme už odběhli od CSS vlastnosti color:

p {color: #985FD0;}
span {color: blue;}

Color můžeme přiřadit pomocí CSS třeba i tagu BODY. Tak budou mít všechny elementy bez definované vlastní barvy barvu BODY.

Backrground-color
Barvu pozadí nejčastěji definujeme přes vlastnost background-color. Tohle je právě jedna z vlastností, která se u všech elementů nedá pomocí HTML bez CSS definovat.
Barvy se zapisují stejně jako u vlastnosti color.

Div {background-color: blue;}
H2 {background-color: #70B823;}

Tak, dvě nejdůležitější vlastnosti by jsme měli odbyté :o) a jdeme na zbytek.

Vlastnosti pro formátování textu:

Font-family
Pro určení jaké písmo se má použít k zobrazení textu se používá vlastnost font-family. Jako hodnoty vlastnosti se zapisují názvy písem. Můžeme uvést i více písem oddělených čárkou. V tomto případě se další písma použijí, pokud nebude první uvedené písmo v systému uživatele prohlížejícího si vaší stránku nainstalováno.

p {font-family: Arial;}
div {font-family: Times New Roman, Times, serif;}

Font-size

Pokud chceme určovat velikost písma, využijeme tuto vlastnost.
Hodnoty se zadávají číselně s udanou jednotkou, nebo můžeme použít relativní slovní označení (pak ale nemáme jistotu, zda se velikost písma zobrazí ve všech prohlížečích stejně).

Jednotky jsou:
Pixely       - px
Body         - pt
Palce        - in
Centimetry   - cm
Milimetry    - mm
Picas        - pc
Ems          - em
Exs          - ex
Procenta     - %

Zkratku jednotky zapisujeme hned za číslo:
a {font-size: 3in}
p {font-size: 15px}


Slovní označení velikosti písma:
xx-small  - nejmenší
x-small
small
medium    - střední
large
x-large
xx-large  - největší

Slovní označení se dá použít místo číselného:

div {font-size: small}
span {font-size: x-large}

Font-style

Pomocí vlastnosti font-style můžeme určit styl písma. Hodnoty vlastnosti font-style můžou být pouze 3:

normal  - normální (beze změny)
italic  - kurzíva
oblique - vypadá to stejně jako kurzíva

h3 {font-style: italic}
#hlavni {font-style: normal}

Font-weight
Vlastnost font-weight určuje tloušťku a váhu písma. Váhu písma můžeme udávat buď opět slovně, nebo číselně.

Slovní jednotky jsou:
normal  - normální tloušťka písma
bold    - tlustší
bolder  - ještě tlustší
lighter - tenčí

h4 {font-weight: bold}
.uvod {font-weight: lighter}


Číselně je možno zadávat hodnotu v rozsahu 100 - 900. Hodnota se zadává bez jednotky:

.upozorneni {font-weight: 500}
span {font-weight: 900}

Font-variant
Pomocí font-variant můžeme určit vlastnost textu zodpovídající za zobrazení malých a velkých písmen.
Vlastnost má pouze dvě hodnoty:
normal - normální (beze změny)
small-caps - způsobí, že všechna písmena vzadaném elementu budou zobrazena jako kapitálky (velká písmena velikosti malých).

H1 {font-variant: small-caps;}

Text-decoration
Vlastnost určující dekoraci textu. Může nabývat pouze pěti textových hodnot. Čtyři znich můžete mezi sebou kombinovat:

underline    - podtržení
overline     - „nadtržení“ (čára nad textem)
line-through - proškrtnutý text
blink        - blikající text (nefunguje vIE!)
none         - bez dekorace

Všechny hodnoty mimo none lze mezi sebou kombinovat. Kombinované hodnoty se oddělují pouze mezerou.

.levy {text-decoration: blink underline;}
#paticka {text-decoration: overline underline line-through;}
a {text-decoration: none;}

Line-height
Výška řádkování se dá určit právě touto vlastností. Výšku řádku můžete zadat ve stejných délkových jednotkách jako u font-size nebo použít jednotku multiple (zapisuje se pouze číslo bez jednotky) udávající velikost řádkování jako násobky velikosti původního řádku.

#hlavicka {text-height: 3}
p {text-height: 25px}

Text-transform
Jako poslední textovou vlastnost vám představím text-transform. Hodnota této vlastnosti má čtyři možnosti:

capitalize - Transformuje první písmeno všech slov v elementu na                 velká
uppercase  - Transformuje všechna písmena velementu na velká
lowercase  - Transformuje všechna písmena velementu na malá
none       - Žádná transformace

a {text-transform: capitalize}
.zvyrazneni {text-transform: lowercase}

Tak to by byly textové vlastní vCSS.

Vlastnosti pozadí
Další docela důležitou skupinou vlastností vCSS jsou vlastnosti pozadí.

Background-color
Barva pozadí se zadává ve stejném formátu jako barva popředí (vlastnost color), čili slovně (blue, red, …) nebo hexadecimálním kódem (#AA44F4).

body {background-color: #FF00AA}
a {background-color: green}

Background-image
Obrázek na pozadí můžeme pomocí CSS přiřadit téměř jakémukoli viditelnému elementu. Pro zápis adresy použitého obrázku se používá trochu zvláštní zápis: url(cesta_k_souboru/obrazek.jpg).
Cestu můžeme zadávat absolutně či relativně, stejně jako vHTML.

#menu{background-image: url(http://www.server.cz/obrazky/obrazek.gif)}
td {background-image: url(raketa.jpg)}

Background-repeat

Background-repeat určuje systém opakování obrázku na pozadí. Hodnota této vlastnosti může nabývat čtyř hodnot:

no-repeat - bez opakování
repeat    - opakování ve všech směrech
repeat-x  - opakování vevodorovném směru
repeat-y  - opakování vesvislém směru

Tato vlastnost se hodí třeba, pokud děláte nějakou navigační lištu a potřebujete mít na pozadí nějaký obrázek a nechcete aby se vám opakoval i svisle.
Aby se tato vlastnost dala požít, musíte mít pomocí vlastnosti background-image přiřazen kelementu nějaký obrázek. Bez toho to jaksi nepůjde :o)

#lista{background-image: url(picture.png); background-repeat: repeat-x}.dekorace {background-image: url(grafika/tlacitko.gif); background-repeat: no-repeat}

Background-attachment

Background-attachment slouží kurčení „připojení“ pozadí kelementu který se bude skrolovat. Nejčastěji je takový element třeba tag body. Pomocí této vlastnosti můžete na stránce vytvořit efekt pevného pozadí a pohyblivého textu (pozadí se při skrollování vůbec nehýbe, text ano). Vypadá to pak velice zajímavě.

Tato vlastnost má pouze 2 hodnoty:

fixed  - pozadí je pevně na místě a nehýbe se ani při skolovaní              stránky nebo elementu
scroll - pozadí se skroluje spolu selementem nebo stránkou


div {background-image: url(smajlik.gif); background-attachment: fixed}

Background-position
Určuje pozici obrázku na pozadí elementu. Má smysl používat pouze vespolupráci s parametrem Background-image. Pozice se udává horizontálně a vertikálně.
Pozice obrázku se udává od levého horního rohu elementu.
Můžeme použít standardní délkové jednotky CSS nebo klíčová slova:

Pro horizontální určení:
left   - Do levé části elementu
center - Střed elementu
right  - Pravá část elementu

Vertikálně:
top    - Hořejšek elementu
center - Prostředek elementu
bottom - Spodek elementu

a {background-image: url(smajlik.gif); background-position: 5px 10px;}

Obrázek bude umístěn 5px vlevo a 10px odshora levého horního rohu.

a {background-image: url(smajlik.gif); background-position: right 21px;}

Obrázek bude umístěn úplně vpravo a 21px odshora.