CSS: Prvek a atribut style
Nyní se podíváme na prvek <style>:
<style type="text/css"> .jméno_třídy { deklarace } #jméno_identifikátoru { deklarace } jméno_tagu { deklarace } </style>
V praxi to může vypadat třeba takto:
<style type="text/css"> .modra {color: blue} #zeleny {color: green; font-size: 11px} input {color: red } </style>
Tímto jsme definovali třídu modra, identifikátor modry a tag input. Navíc u většíny prvků můžeme definovat parametr style:
<input style="color: green; font size: 11px">
Třídy - class
Třídy se definují v tagu <style> takto:
.název_třídy { deklarace }
Chceme-li potom třídu použít uěláme to pomocí atributu class jehož parametrem je název třídy:
<input class="název_třídy">
Tím předáme deklaraci třídy danému tagu
Identifikátory - id
Mají stejné využití jako třídy, ale užívají se spíše ve spojení s JavaScriptem, kde se na stránce
vyskytuje pouze jeden identifikátor, jinak skript funguje chybně a nebo nefunguje - ID exituje na stránce pouze jednou.
Deklarace identifikátoru:
#název_identifikátoru { deklarace }
odkaz na identifikátor:
<input id="název_identifiktoru">
Selektory
Jak jsem již řekl můžete definovat styl jednotlivých tagů tag { deklarace }:
h1 {color: blue}
Nadpisy budou nyní vždy modré. Důležité je tag zapsat bez spičatých závorek!! Také můžeme deklarovat styl hned několika prvků.
h1, h2, h3 {color: blue}
Nebo podle pořadí tagů
h1 strong {color: blue}
Pokud použijete v nadpisu první úrovně prvek <strong>, formátovaný text bude modrý
Dále je možné tagy upřesnit pomocí pseudoelementůA:link { styl nenavštíveného odkazu } A:visited { styl navštíveného odkazu } A:active { styl aktivního odkazu } A:hover { styl odkazu po přejetí myši } P:first-line { styl prvního řádku odstavce }
Dohromady
Nakonec můžete použít třídu, identifikátor a selektor dohromady
A#idx.classx:hover {color: red} A.classx:hover#idx { color: red} A:hover.classx#idx { color: red}
Všechny řádky jsou naprosto ekvivalentní a styl se bude aplikovat pouze na takto upraven odkaz
<a href="nekam.html" class="classx" id="idx">Odkaz</a>
Soubory *.css
Tak jako skripty v JavaScriptu, tak i styly můžete mít uložené mimo stránku - externě. Což je nejednodušší možnost aplikaci stylů na všechny stránky webu.
Soubor stylů ma koncovku css a odvolat se na něj můžeme v hlavičce stránky pomocí prvku
<link href="soubor.css" rel="stylesheet" type="text/css" />
Samotný soubor obsahuje jen obsah, který by normálně byl mezi tagy <style> a </style>
Vyhledávání
Základy
Reference
Vlastnosti
CSS vlastnosti abecedně
- backgroud-position backgroundbackground-attachementbackground-colorbackground-imagebackground-repeatborderborder-bottomborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-colorborder-leftborder-left-colorborder-left-styleborder-left-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-styleborder-topborder-top-colorborder-top-styleborder-top-widthborder-widthbottomheightline-heightmarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmin-heightmin-widthpaddingpadding-bottompadding-leftpadding-rightpadding-topwidth
Poradna
Pokud si nevíte rady, chcete kontakt na spolehlivého tvůrce webu, či vás zajímá cizí názor, ozvěte se.