Ú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….
soubor styly.css:
body {background-color: #663300; color: #FFCC99; font-weight: bold}
A:link {font-size: medium; color: #FF6600; font-weight: bold}
A:visited {font-size: medium; color: #FF6600; font-weight: bold}
A:hover {font-size: medium; color: #FFCC99; font-weight: bold}
h1 {background-color: #666666}
h2 {color: red}
h3 {color: #ffcc00}
h6 {color: #ffcc00; font-size: small}
td {border: #000000; border-style: inset; background-color:#444444; font-weight: bold;
padding: 5}
ul {background-color:#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 {background-color: blue; color: white}
.lista a {color: white}
V HTML souboru:
Vlastnost Hodnoty Význam Příklady
font-family seznam písem Druh písma, font-family: Arial CE, sans-serif
font
normal normální font-style: normal
font-style italic kurzíva font-style: italic
oblique skoněné font-style: oblique
xx-small mrňavé font-size: xx-small
x-small maličké font-size: x-small
small malé font-size: small
medium střední font-size: medium
font-size large velké font-size: large
x-large obří font-size: x-large
xx-large maxipsí font-size: 14pt
výška výška font-size: 16px
procento zvětšení font-size: 125%
normal normální font-weight: normal
bold tučné font-weight: bold
font-weight bolder trochu font-weight: bolder
tučnější
lighter trochu font-weight: lighter
světlejší
color barva barva písma color:blue
barva barva pozadí background-color: yellow
background-color transparent průhledné background-color: transparent
pozadí
background-image none obrázek na background-image: url('pozadi5.gif')
url(cesta) pozadí
background všechny výše background: url('pozadi5.gif') no-repeat scroll
uvedé hodnoty silver center bottom