CSS (Kaskádové styly – Cascading Style Sheets)
- Proweby.cz
- 17. 5. 2024
- Slovník webových, online marketingových a IT pojmů, C.
Co je CSS?
CSS (Cascading Style Sheets) je stylovací jazyk používaný pro popis vzhledu a formátování dokumentů psaných v značkovacích jazycích, jako je HTML. CSS umožňuje oddělit obsah webových stránek (HTML) od jeho vzhledu, což usnadňuje správu a údržbu webového designu.
Hlavní vlastnosti CSS
- Oddělení obsahu a vzhledu: CSS umožňuje oddělit strukturu obsahu (HTML) od vizuálního stylu. Tím se zjednodušuje údržba a aktualizace webových stránek.
- Kaskádový efekt: CSS umožňuje aplikovat styly na různé úrovně dokumentu, přičemž styly mohou být definovány na úrovni jednotlivých prvků, tříd, ID nebo celé stránky. Kaskádový efekt určuje, jak jsou styly aplikovány, pokud jsou definovány na více úrovních.
- Responzivní design: CSS umožňuje vytvářet responzivní webové stránky, které se automaticky přizpůsobují různým zařízením a velikostem obrazovky.
- Opakované použití stylů: Pomocí CSS můžete definovat styly, které mohou být opakovaně použity napříč různými stránkami a prvky, což zlepšuje konzistenci designu.
Základní syntaxe CSS
CSS pravidla se skládají z selektoru a deklarace. Selektor určuje, na jaké prvky HTML se styl aplikuje, a deklarace obsahuje vlastnosti a hodnoty, které určují vzhled těchto prvků.
/* Selektor určuje, že styl se aplikuje na všechny <p> elementy */
p {
color: blue; /* Barva textu bude modrá */
font-size: 16px; /* Velikost písma bude 16 pixelů */
margin: 10px; /* Okraje kolem elementu budou 10 pixelů */
}
Typy CSS selektorů
- Element selektory: Aplikují styl na všechny instance daného HTML elementu (např.
p,h1,div). - Class selektory: Aplikují styl na všechny elementy s danou třídou (např.
.myClass). - ID selektory: Aplikují styl na jediný element s daným ID (např.
#myId). - Attribute selektory: Aplikují styl na elementy s určitým atributem (např.
input[type="text"]). - Pseudo-class selektory: Aplikují styl na specifický stav elementu (např.
a:hoverpro stylování odkazů při přejetí myší).
Použití CSS
CSS může být aplikováno na webové stránky několika způsoby:
- Inline styly: Definovány přímo v HTML elementu pomocí atributu
style.<p style="color: blue; font-size: 16px;">Toto je příklad inline stylu.</p> - Interní styly: Definovány v rámci hlavičky HTML dokumentu pomocí tagu
<style>.<head> <style> p { color: blue; font-size: 16px; } </style> </head> - Externí styly: Definovány v externím souboru s příponou
.css, který je propojen s HTML dokumentem pomocí tagu<link>.<head> <link rel="stylesheet" href="styles.css"> </head>
Výhody používání CSS
- Konzistence: CSS umožňuje snadno udržovat konzistentní styl napříč celým webem.
- Údržba: Změny v designu mohou být provedeny rychle a jednoduše úpravou CSS souboru, aniž by bylo nutné měnit HTML kód.
- Rychlost načítání: Použití externích CSS souborů může zlepšit rychlost načítání webových stránek, protože styly mohou být načteny jednou a poté cachovány pro další použití.
CSS je základním nástrojem pro tvorbu moderních webových stránek a aplikací, který umožňuje tvůrcům webu kontrolovat vzhled a rozvržení jejich obsahu.
Autor článku
Přemek Kubák – Proweby.cz
SEO konzultant a tvůrce webů.
Tel. 777 217 552, E-mail: proweby@proweby.cz
Nejnovější reference
Cacik.cz
8.4.2023
Bytyjahodnice.cz
21.6.2023
Kralovicedomy.cz
27.12.2023
Akkrajcikova.cz
29.5.2023
Rkpremia.cz
15.1.2023
Top články
Nejnovější příspěvky
Zpětný odkaz (link)
9. 3. 2025
Zoom
9. 3. 2025
Změna algoritmu
9. 3. 2025
Zdrojový soubor
9. 3. 2025
