pzeleny@kurzygrafiky.cz        Tel.: 724 810 701

Košík je prázdný

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

------ © 2015 KURZY GRAFIKY ------ Všechna práva vyhrazena. Kopírovat obsah bez souhlasu autora je zakázáno.

Icons made by Freepik from www.flaticon.com is licensed by
CC BY 3.0

Soubory cookie nám pomáhají poskytovat, chránit a zlepšovat naše služby. Pokud budete náš web používat i nadále, vyjádříte tím svůj souhlas s našimi zásadami týkajícími se souborů cookie.

 

OBCHODNÍ PODMÍNKY

KURZYGRAFIKY.CZ

Prokop Zelený, DiS.
Veronské nám. 331
Praha 10  10900

pzeleny@kurzygrafiky.cz
tel.: 724 810 701

Soubory cookie nám pomáhají poskytovat, chránit a zlepšovat naše služby. Pokud budete náš web používat i nadále, vyjádříte tím svůj souhlas s našimi zásadami týkajícími se souborů cookie. Informace o cookies ZDE.

  
EU Cookie Directive Module Information