Sem budu postupně přepisovat poznámky, které zatím mám čistě jen v googleDocs. Pro začátek se počítá s tím, že už jste si prošli sekci HTML, protože CSS je na HTML navázané.
CSS (Cascading Style Sheets) je jazyk pro popis vzhledu a formátování webových stránek. Umožňuje oddělit obsah HTML od jeho vizuální prezentace. Vložíme ho do HTML dokumentu pomocí techniky, kterou vidíte na příkladu dole.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>V tomto případě se CSS soubor jmenuje styles.css a je umístěn ve stejném adresáři jako HTML soubor. Můžeme také vložit CSS přímo do HTML dokumentu pomocí <style> tagu uvnitř <head> sekce, ale oddělené CSS soubory jsou obecně preferovány pro lepší organizaci a údržbu kódu.
Selektory určují, na které HTML elementy se CSS pravidla aplikují. Existuje několik základních typů:
/* Element selector */
h1 {
color: blue;
}
/* Class selector */
.mojeTrida {
font-size: 16px;
}
/* ID selector */
#mojeID {
background-color: yellow;
}
/* Universal selector */
* {
margin: 0;
padding: 0;
}CSS vlastnosti definují, jak budou elementy vypadat. Každá vlastnost má název a hodnotu oddělenou dvojtečkou.
Barvy můžeme definovat několika způsoby - názvy barev, hexadecimální hodnoty, RGB nebo HSL.
p {
color: red; /* názvy barev */
color: #ff0000; /* hexadecimální */
color: rgb(255, 0, 0); /* RGB */
color: hsl(0, 100%, 50%);/* HSL */
}Vlastnosti fontů kontrolují vzhled textu - typ písma, velikost, tučnost a styl.
body {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
line-height: 1.5;
}Vlastnosti textu umožňují formátovat zarovnání, dekoraci a další aspekty textu.
h1 {
text-align: center;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 2px;
}Každý HTML element je reprezentován jako obdélníkový box. Box model se skládá ze čtyř částí: content (obsah), padding (vnitřní okraj), border (ohraničení) a margin (vnější okraj).
.box {
width: 200px;
height: 100px;
padding: 20px; /* vnitřní okraj */
border: 2px solid black; /* ohraničení */
margin: 10px; /* vnější okraj */
box-sizing: border-box; /* zahrnuje padding a border do šířky */
}Vlastnost position určuje, jak se element umisťuje na stránce. Existuje několik hodnot:
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: white;
z-index: 100;
}Vlastnost display určuje, jak se element chová v layoutu stránky. Nejčastější hodnoty jsou:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.hidden {
display: none;
}Flexbox je moderní způsob vytváření flexibilních layoutů. Umožňuje snadno zarovnávat a distribuovat prostor mezi elementy.
.flex-container {
display: flex;
flex-direction: row; /* směr: row, column */
justify-content: center; /* zarovnání hlavní osy */
align-items: center; /* zarovnání křížové osy */
flex-wrap: wrap; /* zalamování */
gap: 20px; /* mezery mezi elementy */
}
.flex-item {
flex: 1; /* růst a zmenšování */
flex-basis: 200px; /* základní velikost */
}Grid je dvourozměrný layoutový systém, který umožňuje vytváření komplexních mřížkových layoutů.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 3 sloupce */
grid-template-rows: auto 1fr auto; /* 3 řádky */
grid-gap: 20px; /* mezery */
height: 100vh;
}
.grid-item {
grid-column: 1 / 3; /* rozprostře přes 2 sloupce */
grid-row: 2; /* umístí do 2. řádku */
}Media queries umožňují aplikovat různé styly podle velikosti obrazovky nebo jiných charakteristik zařízení.
/* Výchozí styly pro desktop */
.container {
width: 1200px;
margin: 0 auto;
}
/* Tablet */
@media (max-width: 768px) {
.container {
width: 90%;
padding: 0 20px;
}
}
/* Mobil */
@media (max-width: 480px) {
.container {
width: 100%;
padding: 0 10px;
}
}Pseudotřídy a pseudoelementy umožňují stylovat elementy v určitých stavech nebo vytvářet virtuální elementy.
/* Pseudotřídy */
a:hover {
color: red;
}
li:first-child {
font-weight: bold;
}
input:focus {
border-color: blue;
}
/* Pseudoelementy */
p::before {
content: "→ ";
font-weight: bold;
}
p::after {
content: " ←";
}CSS umožňuje vytvářet plynulé přechody a animace bez použití JavaScriptu.
/* Přechody */
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}
/* Animace */
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
.bouncing-element {
animation: bounce 1s infinite;
}CSS nabízí různé jednotky pro definování velikostí. Důležité je vědět, kdy kterou použít:
.container {
width: 100%; /* celá šířka rodiče */
max-width: 1200px; /* maximálně 1200px */
padding: 2rem; /* padding relativní k root fontu */
font-size: 1.2em; /* 20% větší než rodič */
}
.hero {
height: 100vh; /* celá výška obrazovky */
width: 50vw; /* polovina šířky obrazovky */
}Kromě základních selektorů existují pokročilejší možnosti pro přesnější výběr elementů:
/* Kombinátory */
div p { } /* všechny p uvnitř div (potomci) */
div > p { } /* pouze přímé děti */
h1 + p { } /* p hned za h1 (sourozenec) */
h1 ~ p { } /* všechny p za h1 (sourozenci) */
/* Attribute selektory */
[href] { } /* elementy s atributem href */
[href="example.com"] { }/* přesná hodnota */
[href*="example"] { } /* obsahuje "example" */
[href^="https"] { } /* začína na "https" */
[href$=".pdf"] { } /* končí na ".pdf" */
/* Strukturní pseudotřídy */
:first-child { } /* první dítě */
:last-child { } /* poslední dítě */
:nth-child(2n) { } /* každé druhé dítě */
:nth-child(odd) { } /* liché děti */
:nth-of-type(3) { } /* třetí element daného typu */CSS rozhoduje o tom, které pravidlo se aplikuje na základě specificity. Je důležité rozumět tomuto systému:
/* Specificita: 1 */
p {
color: black;
}
/* Specificita: 10 */
.text {
color: blue;
}
/* Specificita: 100 */
#hlavni {
color: red;
}
/* Specificita: 111 */
#hlavni .text p {
color: green;
}Z-index kontroluje, který element se zobrazí navrchu při překrývání. Funguje pouze s positioned elementy.
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000; /* vysoký z-index pro modály */
}
.tooltip {
position: absolute;
z-index: 999; /* pod modály, ale nad obsahem */
}
.dropdown {
position: relative;
z-index: 10; /* nad normálním obsahem */
}CSS proměnné umožňují ukládat hodnoty pro opakované použití a snadnou údržbu kódu.
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size-base: 16px;
--spacing-unit: 8px;
--border-radius: 4px;
}
.button {
background-color: var(--primary-color);
color: white;
padding: calc(var(--spacing-unit) * 2);
border-radius: var(--border-radius);
font-size: var(--font-size-base);
}
.button--secondary {
background-color: var(--secondary-color);
}Ačkoli Flexbox a Grid jsou modernější, float se stále používá pro obtékání textu kolem obrázků.
.image-left {
float: left;
margin: 0 20px 20px 0;
width: 200px;
}
.image-right {
float: right;
margin: 0 0 20px 20px;
width: 200px;
}
.clearfix::after {
content: "";
display: table;
clear: both; /* vymaže float */
}Vlastnost overflow kontroluje, jak se zacházet s obsahem, který se nevejde do elementu.
.container {
width: 300px;
height: 200px;
overflow: hidden; /* skryje přebývající obsah */
}
.scrollable {
overflow: auto; /* přidá scrollbar jen když potřeba */
overflow-x: hidden; /* skryje horizontální scrollbar */
overflow-y: scroll; /* vždy zobrazí vertikální scrollbar */
}
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* přidá "..." na konec */
}Transforms umožňují otáčet, škálovat, posouvat a naklánět elementy bez ovlivnění layoutu.
.transform-examples {
transform: rotate(45deg); /* otočení o 45° */
transform: scale(1.5); /* zvětšení na 150% */
transform: translate(50px, 100px); /* posun o 50px vpravo, 100px dolů */
transform: skew(20deg, 10deg); /* nakloní element */
}
.combined-transform {
transform: translate(50px, 50px) rotate(45deg) scale(1.2);
transform-origin: center center; /* bod otáčení */
transition: transform 0.3s ease; /* plynulý přechod */
}
.hover-effect:hover {
transform: translateY(-10px); /* pozvedne při hover */
}Tipy pro ladění CSS a předcházení častým chybám:
/* Debug helper */
* {
outline: 1px solid red !important; /* dočasně - ukáže všechny elementy */
}
/* Častá chyba - zapomenutý position */
.absolute-element {
position: absolute; /* NUTNÉ pro z-index, top, left atd. */
top: 10px;
left: 10px;
z-index: 10;
}
/* Box-sizing fix */
*, *::before, *::after {
box-sizing: border-box; /* zahrnuje padding/border do width */
}Preprocessory rozšiřují CSS o funkce jako proměnné, nesting, mixins a funkce. Nejpopulárnější je Sass/SCSS.
// SCSS syntax
$primary-color: #3498db;
$margin-base: 16px;
@mixin button-style($bg-color) {
background-color: $bg-color;
padding: $margin-base / 2;
border-radius: 4px;
border: none;
&:hover {
background-color: darken($bg-color, 10%);
}
}
.button {
@include button-style($primary-color);
&--large {
padding: $margin-base;
font-size: 1.2em;
}
}Několik užitečných rad pro efektivní psaní CSS:
/* Reset základních stylů */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* BEM pojmenování */
.card {
/* blok */
}
.card__title {
/* element */
}
.card--featured {
/* modifikátor */
}
/* Mobile-first přístup */
.container {
width: 100%;
padding: 1rem;
}
@media (min-width: 768px) {
.container {
max-width: 750px;
margin: 0 auto;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}