CSS – Cascading style sheet přehled vlastností selektory

CSS – Cascading style sheet přehled vlastností selektory

CSS – Cascading style sheet
přehled vlastností
selektory
Evropský sociální fond
Praha a EU – Investujeme do vaší budoucnosti
Obsah
1 Přehled některých vlastností a hodnot ................................................................................... 2
1.1 Formátování textu ............................................................................................................ 2
1.2 Barvy a pozadí v dokumentu ............................................................................................ 2
1.3 Kurzor myši ....................................................................................................................... 3
1.4 Stylování seznamů ............................................................................................................ 3
1.5 Ohraničení objektů ........................................................................................................... 3
1.6 Vlastnosti objektů............................................................................................................. 4
1.7 Obtékání objektů .............................................................................................................. 4
2 Vlastní třídy v CSS .................................................................................................................... 5
2.1 Selektory ........................................................................................................................... 5
2.1.1 Značky ........................................................................................................................ 5
2.1.2 Výčet více značek ...................................................................................................... 6
2.1.3 Vnořování značek ...................................................................................................... 6
2.1.4 Vlastní třídy ............................................................................................................... 6
2.1.5 Identifikátory ............................................................................................................. 7
2.2 Značky DIV a SPAN............................................................................................................ 7
Evropský sociální fond
Praha a EU – Investujeme do vaší budoucnosti
1
1 Přehled některých vlastností a hodnot
1.1 Formátování textu
vlastnost
font-family
font-style
font-weight
font-size
text-decoration
text-align
vertical-align
vertical-align
hodnoty
serif
cursive
arial
…
normal
italic
normal
bold
číslo jednotky (12px)
none
underline
overline
line-through
left
center
right
justify
top
middle
bottom
sub
super
význam
druhy písma
normální písmo
kurzíva
normální písmo
tučné písmo
velikost písma
normální písmo
podtržené písmo
nadtržené písmo
přeškrtnuté písmo
zarovnání textu – horizontální
platí pouze pro blokové značky!
zarovnání textu – vertikální
platí pouze pro blokové značky!
dolní index
horní index
1.2 Barvy a pozadí v dokumentu
vlastnost
color
background-color
background-image
background-repeat
background-position
hodnoty
barva (název; hex; dec)
barva
url(„obrázek“)
repeat-x
repeat-y
no-repeat
top
bottom
left
right
center
Evropský sociální fond
Praha a EU – Investujeme do vaší budoucnosti
význam
barva textu
barva pozadí
obrázek na pozadí
opakování obrázku v ose x
opakování obrázku v ose y
pouze zobrazení obrázku
pozice obrázku
možno kombinovat:
např. „top left“
2
1.3 Kurzor myši
vlastnost
cursor
hodnoty
auto
default
crosshair
pointer
text
wait
help
význam
hodnoty
disc
circle
square
decimal
lower-roman
lower-alpha
upper-alpha
none
url(„obrázek“)
outside
inside
význam
hodnoty
číslo jednotky (1px)
barva
dotted
dashed
solid
double
význam
šířka ohraničení
barva ohraničení
Změna kurzoru
1.4 Stylování seznamů
vlastnost
list-style-type
list-style-image
list-style-position
druh odrážky
odrážka tvořená obrázkem
odsazení (neodsazení)
1.5 Ohraničení objektů
vlastnost
border-width
border-color
border-style
border-collapse
separate
collapse
styl ohraničení
zapíná / vypíná mezery mezi
buňkami v tabulce.
použití u značky <table>
Poznámka
-
Lze použít i vlastnost border a složenou hodnotu:
o Border: 1px solid black;
Lze ohraničit pouze jednu stranu:
o Border-top: 1px solid black;
o Border-left: 1px solid black;
o …
Evropský sociální fond
Praha a EU – Investujeme do vaší budoucnosti
3
1.6 Vlastnosti objektů
vlastnost
padding (padding-top…)
margin (margin-top…)
width
height
hodnoty
číslo jednotky (10px)
význam
vnitřní ohraničení
vnější ohraničení
šířka objektu
výška objektu
1.7 Obtékání objektů
vlastnost
float
clear
hodnoty
left
right
left
right
both
význam
Připoutání k dané straně
Zrušení obtékání objektu
připoutaného k dané straně
Vlastnost float se používá k přichycení stylovaného objektu k pravé nebo levé straně.
Pokud je objekt přichycen ke straně, je obtékán z druhé strany.
Vlastnost clear se použije pro objekt, který již nemá pokračovat v obtékání
přichyceného objektu k dané straně. Hodnota both říká, že objekt neobtéká žádný
z přichycených objektů a začne pod nimi.
Evropský sociální fond
Praha a EU – Investujeme do vaší budoucnosti
4
2 Vlastní třídy v CSS
2.1 Selektory
Obecný zápis stylu:
Selektor {
vlastnost: hodnota;
vlastnost2:hodnota;
}
Příklady zápisu selektorů
•
•
•
•
•
značky
výčet více značek
vnořování značek
vlastní třídy
identifikátory
2.1.1 Značky
značka {
vlastnost:hodnota;
vlastnost2:hodnota;
}
Nejjednodušším způsobem je nastylovat konkrétní značku. Veškeré výskyty značky
pak budou formátované podle vytvořeného stylu.
Příklad
a {
color:green;
font-weight:bold;
}
Všechny odkazy na stránce budou psány zelenou barvou a tučně.
Evropský sociální fond
Praha a EU – Investujeme do vaší budoucnosti
5
2.1.2 Výčet více značek
značka1, značka2 {
vlastnost:hodnota;
vlastnost2:hodnota;
}
Pokud bude uvedeno více značek oddělených čárkami, styl bude platit pro všechny
uvedené značky.
Příklad:
h1, h2, h3 {font-style:italic;}
Všechny nadpisy první, druhé a třetí úrovně budou psány kurzívou.
2.1.3 Vnořování značek
Značka1 značka2 {
vlastnost:hodnota;
vlastnost2:hodnota;
}
Pokud budou 2 (případně i více) značky vypsány za sebou, styl bude platit pro každou
značku2, která se vyskytuje uvnitř značky1.
Příklad:
p a {color:red;}
Každý odkaz, který je uvnitř odstavce, bude mít červenou barvu.
p a img {border:1px solid black;}
Každý obrázek, který je uvnitř odkazu, který je uvnitř odstavce, bude ohraničen.
2.1.4 Vlastní třídy
.nazevTřídy {
vlastnost:hodnota;
vlastnost2:hodnota;
}
Někdy je vhodné udělat styl, který půjde využít kdekoliv (nezávisle na značce).
Například „zvýrazněný text“ bude třeba použít v odstavci, v nadpisu, u odkazu – ale ne u
všech výskytů těchto značek. K tomu pomáhají vlastní třídy. V CSS se vlastní třída vytvoří
znakem „.“ (tečka) a názvem třídy. V HTML stačí ke značce, která má být nastylována, přidat
atribut class a jako hodnotu atributu uvést název třídy vytvořené v CSS.
Evropský sociální fond
Praha a EU – Investujeme do vaší budoucnosti
6
Příklad:
Definice třídy v CSS:
.vyrazne {font-weight:bold; text-decoration underline;}
Použití v HTML:
<h1 class=“vyrazne“>Zvýrazněný nadpis</h1>
<p>Normální odstavec</p>
<p class=“vyrazne“>Zvýrazněný odstavec</p>
Nadpis a druhý odstavec budou psány tučně a podtrženě
2.1.5 Identifikátory
Identifikátory jsou podobné jako třídy. Rozdíl je v definici (místo . se píše #) a
v použití (místo atributu class se použije atribut id). V rámci jedné stránky lze identifikátor
použít pouze jednou – třída lze použít vícekrát.
2.2 Značky DIV a SPAN
Někdy je vhodné použít vytvořenou třídu pouze na část textu (např. jednu větu nebo
jedno slovo v rámci odstavce) nebo naopak na celý blok textu. K tomu slouží v HTML
značky SPAN (řádková) a DIV (bloková).
Příklad:
(předpoklad existence tříd „zahlavi“ a „vyrazne“)
<div class=“zahlavi“>
<h1>Nadpis</h1>
<img src=“logo.jpg“ alt=“logo“>
</div>
<p>
Na tomto si dejte <span class=“vyrazne“>opravdu</span>
záležet
</p>
Evropský sociální fond
Praha a EU – Investujeme do vaší budoucnosti
7