Úvod do CSS
(Cascading Style Sheets)
,,Kaskádové styly"
WWW návod:
http://www.jakpsatweb.cz/
... Jak psát web
CSS soubor metod pro grafickou úpravu webových stránek. Oddělení formátování
od textu.
Stylopis = šablona = kolekce stylů pro formátování
Styly musí být deklarovány:
1. přímo v textu
2. stylopisem v hlavičce, mezi tagy
3. externím souborem, na nějž ukazuje hlavička
Ad 3. (externí soubor):
Je třeba vytvořit soubor, který se pojmenuje např. styly.css. V něm je popis
stylu. Do hlavičky html dokumentu, který chci stylem ovlivnit, musím napsat odkaz
na tento soubor:
Nazev dokumentu
Tohle bude moje prvni WWW stranka....
1
soubor styly.css:
body {backgroundcolor: #663300; color: #FFCC99; fontweight:
bold}
A:link {fontsize: medium; color: #FF6600; fontweight: bold}
A:visited {fontsize: medium; color: #FF6600; fontweight: bold}
A:hover {fontsize: medium; color: #FFCC99; fontweight: bold}
h1 {backgroundcolor: #666666}
h2 {color: red}
h3 {color: #ffcc00}
h6 {color: #ffcc00; fontsize: small}
td {border: #000000; borderstyle: inset; background
color:#444444; fontweight: bold; padding: 5}
ul {backgroundcolor:#444444}
selektor {vlastnost: hodnota; vlastnost2: hodnota}
Př.:
body {color: red}
Vlastní třídy:
Definice vlastních stylů, které nejsou obsaženy v HTML.
Př.:
ve stylopisu:
.lista {backgroundcolor: blue; color: white}
.lista a {color: white}
V HTML souboru:
2
Vlastnost Hodnoty Význam Příklady
fontfamily
seznam
písem
Druh písma,
font
font-family: Arial CE, sans-serif
fontstyle
normal
italic
oblique
normální
kurzíva
skoněné
fontstyle: normal
fontstyle: italic
fontstyle: oblique
fontsize
xxsmall
xsmall
small
medium
large
xlarge
xxlarge
výška
procento
mrňavé
maličké
malé
střední
velké
obří
maxipsí
výška
zvětšení
fontsize: xxsmall
fontsize: xsmall
fontsize: small
fontsize: medium
fontsize: large
fontsize: xlarge
fontsize: 14pt
fontsize: 16px
fontsize: 125%
fontweight
normal
bold
bolder
lighter
normální
tučné
trochu
tučnější
trochu
světlejší
fontweight: normal
fontweight: bold
fontweight: bolder
fontweight: lighter
color barva barva písma color:blue
background
color
barva
transparent
barva pozadí
průhledné
pozadí
backgroundcolor: yellow
backgroundcolor: transparent
background
image
none
url(cesta)
obrázek na
pozadí
backgroundimage: url('pozadi5.gif')
background
všechny výše
uvedé
hodnoty
background: url('pozadi5.gif') norepeat scroll silver
center bottom
3