Ú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:

přímo v textu

stylopisem v hlavičce, mezi tagy

<style>neconeconeco </style>

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:

<link rel="stylesheet" type="text/css" href="styly.css">

<HTML>

<HEAD>

<TITLE>

Nazev dokumentu

</TITLE>

<link rel="stylesheet" type="text/css" href="styly.css">

</HEAD>

<BODY>

Tohle bude moje prvni WWW stranka….

</BODY>

</HTML>

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:

<p class="lista">Text lišty s <a href="http://www.sci.muni.cz/"> odkazem</a></p>

Vlastnost	Hodnoty	Význam	Příklady
font-family	seznam písem	Druh písma, font	font-family: Arial CE, sans-serif
font-style	normal italic oblique	normální kurzíva skoněné	font-style: normal font-style: italic font-style: oblique
font-size	xx-small x-small small medium large x-large xx-large výška procento	mrňavé maličké malé střední velké obří maxipsí výška zvětšení	font-size: xx-small font-size: x-small font-size: small font-size: medium font-size: large font-size: x-large font-size: 14pt font-size: 16px font-size: 125%
font-weight	normal bold bolder lighter	normální tučné trochu tučnější trochu světlejší	font-weight: normal font-weight: bold font-weight: bolder font-weight: lighter
color	barva	barva písma	color:blue
background-color	barva transparent	barva pozadí průhledné pozadí	background-color: yellow background-color: transparent
background-image	none url(cesta)	obrázek na pozadí	background-image: url('pozadi5.gif')
background		všechny výše uvedé hodnoty	background: url('pozadi5.gif') no-repeat scroll silver center bottom

3

Úvod do jazyka HTML

evaf

2003-03-31T15:59:00