2.Díl: Vlastnosti
Základní vlastnosti
Color
Asi nejpoužívanější vlastností je barva. Anglicky color. V CSS je také vlastnost color. Udává barvu textu v elementu. Barvu můžete zadávat slovně (black, red, lime, …) nebo pomocí Hexadecimálního (šestnáctková soustava) formátu. Hexadecimální formát má následující syntaxi: #RRGGBB. Místo těchto písmen se dosazují šestnáctková čísla 0 - F. K udání síly každého barevného kanálu ( RR - červená, GG - zelená, BB - 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.