Kaskádové styly - nutné základy
Pokud již ovládáte HTML kód a budete chtít začít formátovat dokument pomocí CSS (kaskádových stylů), budete potřebovat umět některé základní vlastnosti. Seznam nejčastěji používaných parametrů najdete v následující tabulce.
Zápis přímo do HTML tagu (inline zápis)
Zápis přímo do HTML tagu je nejrychlejší a nejjednodušší způsob, jak upravovat vzhled stránky pomocí CSS. Většinou se používá hlavně v redakčních systémech a složitějších stránkách, kde nemá správce možnost zasahovat přímo do struktury webu.
Zápis provádíme jako atribut tagu, přímo v začátku značky, parametrem „style“. Následující ukázka změní barvu písma nadpisu na červenou.
<h1 style=“color:red“>text nadpisu </h1>
Zápis v hlavičce stránky
Pokud chcete formátovat více prvků v jedné webové stránce, je vhodnější použít zápis do hlavičky stránky.
<head>
<style>
H1 {color:red}
</style>
</head>
Poté již nemusíte uvádět změny formátování pro jednotlivé H1 tagy. Každý jednotlivý nadpis úrovně 1 se automaticky zobrazí v červené barvě.
<h1> text nadpisu </h1>
Externím CSS souborem
Hlavním a nejčastějším způsobem, jak formátovat webové stránky pomocí kaskádových stylů, je připojení externího souboru. Ten řídí vzhled všech prvků obsažených v HTML kódu stránky. Tento CSS soubor je textový (kód) podobně jako HTML a lze ho i obdobným způsobem upravovat.
Vytvořte soubor, který se bude jmenovat styl.css. V něm napište tento text:
body {background: red}
Do hlavičky html dokumentu (např. index.html), který chci stylem ovlivnit, napište odkaz na soubor kaskádových stylů). Pozor si dávejte zejména na umístění obou souborů a správný zápis cesty.
<link rel="stylesheet" type="text/css" href="/styl.css">
Do souboru index.html jsme pomocí externího css souboru přidali červené pozadí.
Některé často používané vlastnosti a hodnoty:
Text a formátování | ||
font-family | Typ písma | Arial, Times |
font-size | Velikost písma | 15px, 120% |
font-weight | Tloušťka písma | normal, bold |
font-style | Styl písma | normal, italic |
line-height | výška řádku | 10px, 10% |
letter-spacing | mezery mezi písmeny | 5pt |
word-spacing | mezery mezi slovy | 10pt |
text-align | zarovnání textu | left, center, right |
text-decoration | podtržení textu | none, underline |
text-indent | odsazení prvního řádku | 10pt, 10px |
Barvy a pozadí | ||
Color | barva písma | red, #00ff00 |
background-color | barva pozadí | green, #ff0000 |
background-image | obrázek v pozadí | url(image.jpg) |
background-repeat | opakování pozadí | repeat, no-repeat |
background-position | pozice pozadí | top, center, botám, left, right |
Pole a layout stránky - velikost, vnitřní a vnější okraje, rámečky | ||
Padding | vnitřní okraj | 10px |
(padding-top, padding-right, padding-bottom, padding-left) | ||
Border | rámeček | 1px solid black |
(border-top, border-right, border-bottom, border-left) | ||
margin | vnější okraj | 20px |
(margin-top, margin-right, margin-bottom, margin-left) | ||
Width | šířka prvku | 500px, 50% |
Height | výška prvku | 200px, 20% |
min-width | minimální šířka | 400px |
max-width | maximální šířka | 800px |
min-height | minimální výška | 600px |
max-height | maximální výška | 900px |
Pozice a zobrazení | ||
Position | umístění objektu | relative, absolute |
Top | posun shora | 10px, 10% |
Right | posun zprava | 10px, 10% |
Bottom | posun zdola | 10px, 10% |
Left | posun zleva | 10px, 10% |
Overflow | přetečení | overflow, auto |
z-index | pořadí elementů (osa z) | 1, 2, atd… |
float | plovoucí prvek (umístění) | left, right |
display | zobrazení prvku | none, block, inline |
visibility | viditelnost prvku | visible, hidden |
Seznamy | ||
list-style-type | typ odrážky, číslování | none, disc, square atd. |
list-style-image | odrážka obrázkem | URL('pozadi5.gif') |
list-style-position | posun odrážek | inide, outside |
Tabulky | ||
table-layout | nastavení šířky tabulky | auto, fixed |
border-collapse | typ rámečku tabulky | separate, collapse |
border-spacing | mezery mezi rámečky | 5px |
Odkazy
<style> - Styly je nutné zapisovat do hlavičky stránky, nebo do externího souboru.
a {color:red; text-decoration:none;}
odkazy budou červeně a bez podtržení
a:hover {color:green;} --- odkazy budou při najetí myší zeleně
Seznamy
V html používáme značky <ul> a <li>.
padding: 5px; - vnitřní okraj prvku
float:left; - prvky vedle sebe zarovnané levým okrajem
Například: li {width:50px; background:silver; float:left} – jednotlivé položky seznamu budou mít šířku 50 pixelů, šedé pozadí a zobrazí se vedle sebe v řádku.
Pole v HTML - <div>
overflow: auto; - posuvník, pokud je text delší než políčko
U jednotlivých polí je vhodné používat parametry width, height a background. Popřípadě vlastnosti float.
Například:
HTML soubor
<div id=“header“>
</div>
CSS soubor:
#header {width:940px; height:130px; padding:5px; margin-top:30px; background:#ECECEC; }