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; }
