Vše, co potřebujete vědět o CSS (kaskádových stylech) – co je to, k čemu slouží, jak si přes CSS naformátovat webovou stránku.
Co je to CSS
CSS je zkratka z anglického Cascading Style Sheet. V překladu to znamená Dopis Kaskádových Stylů. CSS je jednoduchý mechanismus pro vizuální formátování internetových dokumentů.
Když použijete CSS na dokument HTML, můžete upravit prvky, jako je font, barva a mezery. To vám umožňuje zachovat konzistentní vzhled na více stránkách webu. CSS odděluje obsah od designu, čímž zajišťuje, že webové stránky jsou přístupné a mají efektivní styl, čímž se zlepšuje uživatelská zkušenost.
Před studiem CSS doporučuji prohlédnout si nejprve tento kompletní HTML návod .
Historie CSS
Zrod CSS, formálně známý jako Cascading Style Sheets , se datuje do roku 1996, kdy W3C (World Wide Web Consortium) vydalo CSS1 . Zavedení CSS způsobilo revoluci ve webdesignu tím, že poskytlo novou, efektivnější metodu stylu webových stránek. Od té doby se CSS vyvinulo v několika verzích. CSS2.1 , který přišel po CSS1, zavedl funkce jako pevné umístění a z-index. Nejnovější evoluce, CSS3 , rozdělila specifikaci na moduly a zavedla nové funkce, jako jsou animace, flexbox pro rozložení a mediální poptávky pro responzivní design.
Když pochopíte, co je CSS a jeho historický kontext, budete lépe připraveni využít jeho plného potenciálu při vývoji webu.
Kde všude se používá CSS
Tento jazyk se používá k vizuální stylizaci většiny stránek na internetu. CSS se používá například k definování rozložení stránky, její barvy a celkový styl stránky. Pomocí CSS můžete nastavit fonty, obrázky, pozadí stránky, rozmístění jednotlivých částí stránky a podobně.
Ve WordPress používají CSS jednotlivá témata . Určuje jejich rozložení, celkový design a styl.
Základy CSS
Pochopení základů CSS zahrnuje učení se jeho syntaxe a struktury a jak používat selektory a vlastnosti ke stylování webových prvků.
Syntax a struktura
CSS se skládá ze série pravidel, která definují způsob zobrazení prvků HTML. Tato pravidla se skládají ze selektorů a deklarací. Samotná deklarace se skládá z vlastností a jejich příslušných hodnot, které jsou strukturovány následujícím způsobem:
selektor {
vlastnosť: hodnota;
}Selektory jsou názvy přiřazené prvkům na webové stránce, které chcete upravit. Prohlášení jsou uzavřena ve složených závorkách{} a deklarují, jak chcete upravit styl vybraných prvků.
Selektory a vlastnosti
Existují různé typy selektorů :
- Selektory prvků , které vybírají prvky HTML na základě názvu značky.
- Selektory tříd , které vybírají prvky na základě atributu
class. Jejich předponou je.(tečka). - Selektory ID , které vybírají jedinečný prvek na základě jeho atributu
ids předponou#(symbol hash).
Za každým selektorem může následovat jedno nebo více deklarací , což jsou páry vlastnost – hodnota oddělené dvojtečkou a ukončené středníkem.
Vlastnosti jsou aspekty prvků HTML, které chcete upravit, jako napříkladcolor ,font-size ,margin ,padding atp. Pravidlo představuje celý příkaz včetně selektoru a bloku deklarací.
.trieda {
color: blue;
font-size: 14px;
}Za každou vlastností následuje hodnota , která určuje, jak má být vlastnost na prvek použita. Každý pár vlastnost – hodnota je deklarace .
Po pochopení základů syntaxe, selektorů a vlastností CSS můžete začít upravovat styl prvků webové stránky, abyste vytvořili vizuálně působivý webový obsah.
Integrace CSS
Integrace CSS do kódu HTML vám pomáhá kontrolovat prezentaci vašich webových stránek. Ať už dáváte přednost ponechání stylů v blízkosti značek, rovnováze mezi dostupností a udržovatelností nebo zcela odděleným záležitostem, CSS vám nabízí řadu metod pro použití stylů.
Inline CSS
Inline CSS je, když použijete styl přímo ve svých značkách HTML pomocí atributustyle . Tato metoda se obecně používá pro aplikaci jedinečných stylů na jeden prvek HTML. Zde je příklad:
<p style="color: blue;">Tento text je modrý.</p>Používání inline CSS ovlivňuje udržovatelnost vašich HTML dokumentů, protože styly nejsou centralizované, což ztěžuje zprávu, když existuje více instancí stejného stylu.
Interní CSS
Interní styl CSS je definován v části<head> dokumentu HTML v rámci značek<style> . Toto je realizovatelná možnost, když pracujete s jedním HTML dokumentem a chcete použít styly, které jsou jedinečné pro tuto stránku.
<head>
<style>
body {
background-color: lightgrey;
}
</style>
</head>Nepotřebujete žádné další soubory a styly se používají konzistentně na celé stránce, ale stejně jako v případě inline CSS, interní styl nepodporuje opětovné použití na více stránkách.
Externí CSS
Pomocí externího CSS vytvoříte odkaz na samostatný soubor.css z dokumentu HTML, který může ovládat styly pro více stránek na webu. Tato metoda se dosáhne pomocí značky<link> v sekci<head> :
<head>
<link rel="stylesheet" href="styles.css">
</head>Vaše styly jsou obsaženy v jediném souboru s příponou.css , což usnadňuje úpravu a údržbu. Svůj CSS napíšete v textovém editoru a nahrajete šablonu se styly spolu se soubory HTML. Toto je nejefektivnější metoda úpravy více dokumentů HTML s konzistentním designem.
Upravení stylu textu
V CSS máte možnost ovládat vizuální aspekty textu, od rodiny písem až po mezer mezi písmeny. Vlastnosti použijete k definování toho, jak by se měl váš text zobrazovat na vašem webu, čímž se zajistí čitelnost a estetický vzhled.
Písma a typografie
Při výběru písem pro svoji webovou stránku zvažte estetický vzhled i čitelnost. Font family (rodina písem) určuje typ písma, kterým může být konkrétní název, například „Arial“, nebo obecná skupina, například „serif“. Vlastnost font-size upravuje velikost vašeho textu a obvykle je definována v pixelech, em nebo rem.
Příklad použití rodiny písem:
p {
font-family: Arial, sans-serif;
}Příklad použití velikosti písma:
h1 {
font-size: 32px;
}Vlastnosti a efekty textu
Různé vlastnosti ovlivňují další aspekty textu:
- Color : určuje barvu textu. Můžete použít pojmenované barvy, hexadecimální, RGB nebo HSL hodnoty.
- Letter Spacing : zvětšuje nebo zmenšuje mezeru mezi znaky, obvykle měřenou v pixelech nebo em.
Nezapomeňte zachovat konzistenci vlastností textu, abyste vytvořili soudržný vzhled svého webu.
CSS Box Model
CSS Box Model je základní koncept, který určuje, jak se prvky vykreslují na webové stránce. Definuje strukturu a rozložení každého prvku HTML jako obdélníkový rámeček, který obsahuje okraje, okraje, výplň a skutečný obsah.
Okraje a obrysy
V rámečkovém modelu ohraničení zahrnují obsah a odsazení, přičemž fungují jako prostředník mezi odsazením a okraji. Kdykoli nastavujete šířku orámování pomocí CSS, definujete tloušťku tohoto orámování. Vlastnostborder lze rozdělit na podvlastnosti pro každou stranu (border-top ,border-right ,border-bottom ,border-left ), což vám umožňuje přizpůsobit každý jednotlivě. Můžete také definovat styl (solid ,dotted ,dashed atd.) a barvu orámování.outline je podobný okraji, ale nezabírá místo v krabicovém modelu – je nakreslen mimo rámeček prvku a neovlivňuje polohu prvku.
Okraje a odsazení
Okraje jsou vnější vrstvou modelu boxu a vytvářejí prostor mezi okrajem jednoho boxu a druhého. Zhroutí se, když se setkají; větší velikost okraje se použije, když mají sousední pole okraje. Okraje jsou průhledné a mají následující vlastnosti:margin-top ,margin-right ,margin-bottom ,margin-left kód> .
Odsazení se nachází přímo uvnitř okrajů, obklopuje skutečný obsah a jeho primárním úkolem je vytvořit prostor v rámečku, mezi obsahem a okrajem. Na rozdíl od okrajů lze definovat barvu výplně to se shoduje s vaším designem, protože je součástí krabice prvku. Má také individuální vlastnosti pro každou stranu (padding-top ,padding-right ,padding-bottom apadding-left ).
Pamatujte, že vlastnosti CSSwidth aheight odkazují na velikost obsahu. Pokud zahrnete okraje a odsazení, zvětší celkovou velikost pole, pokud nepoužijete vlastnostbox-sizing nastavenou na hodnotuborder-box , která upraví velikost obsahu k zahrnout vycpávky a okraje v rámci deklarované šířky a výšky.
Vizuální formátování
V CSS je vizuální formátování klíčovým aspektem, který určuje, jak se prvky zobrazují na webové stránce. Vaše pochopení jeho principů ovlivňuje vše od rozložení až po kontext skládání.
Pozadí a barvy
CSS vám umožňuje nastavit barvu pozadí a obrázek pozadí prvků. Vlastnosti jakobackground-color používáte k určení plné barvy, zatímcobackground-image vám umožňuje umístit obrázek za obsah. Vlastnostbackground kombinuje tato nastavení spolu s dalšími nastaveními, jako jsoubackground-position abackground-repeat , čímž vám poskytuje jemnou kontrolu nad vizuály pozadí prvku.
Polohování a Z-index
K ovládání rozložení prvků používá CSS vlastnost position s hodnotami jako static, relative, absolute, fixed a sticky. Vlastnostz-index funguje ve spojení s polohováním pro určení pořadí zásobníku prvků; vyššíz-index znamená, že prvek bude blíže k vrcholu kontextu skládání. Pamatujte, žez-index ovlivňuje pouze prvky, které mají hodnotuposition jinou nežstatic .
Flexbox a CSS Grid
Flexbox a CSS Grid jsou výkonné modely rozložení, které nabízejí různé přístupy k vytváření responzivních návrhů. Flexbox funguje na jednorozměrné ose, řádkové nebo sloupcové, díky čemuž je ideální pro lineární rozložení. K manipulaci s rozložením použijte vlastnosti jakodisplay: flex a další podřazené vlastnosti, jako napříkladflex-grow aflex-shrink .
Na druhé straně CSS Grid funguje na dvourozměrném mřížkovém systému, který je řízen vlastnostmi jakodisplay: grid . Definujetegrid-template-columns agrid-template-rows k vytvoření rámce pro váš obsah. CSS Grid snadno umožňuje složitá rozložení, což vám umožňuje umístit prvky na přesná místa v rámci struktury mřížky.
Pokročilé techniky navrhování
V této části se dozvíte, jak zlepšit vizuální přitažlivost a interaktivitu svých webových stránek pomocí CSS. Zvládnutí těchto technik vám umožní vytvářet dynamické, responzivní návrhy, které upoutají pozornost uživatele.
Transformy a přechody
Transformace vám umožňují prvky otáčet , zmenšovat , naklánět a překládat změnit jejich vykreslení na webové stránce. Když použijete transformaci, změna je okamžitá, ale její kombinací s přechody můžete ovládat načasování.
- Otočit :
transform: rotate(45deg); - Měřítko :
transform: scale(1.5); - Přeložit :
transform: translate(30px, 50px); - Zkosení :
transform: skew(20deg, 15deg);
Přechody umožňují plynulé změny mezi stavy. Když zadáte přechod, musíte definovat, která vlastnost se přenese, trvání, funkci časování a případné zpoždění.
transition: background-color 0.5s ease-in-out 0s;Vyladěním těchto parametrů vytvoříte plynulý, přirozený pohyb, který dodá vaší stránce sofistikovanost.
Animace
Animace CSS posouvají interaktivitu na další úroveň definováním posloupnosti stylů, kterými bude prvek procházet. Chcete-li vytvořit animaci, musíte nejprve určit Keyframes , které načrtávají počáteční a koncové body animace, jakož i všechny mezikroky:
@keyframes slidein {
from { transform: translateX(0%); }
to { transform: translateX(100%); }
}Chcete-li animaci aktivovat, aplikujte ji na prvek a definujte její trvání a funkci časování a počet iterací:
prvok {
animation: slidein 3s easy-in-out infinite;
}Animace se mohou nekonečně opakovat nebo se mohou přehrávat určitý počet krát, což vám poskytuje přesnou kontrolu nad tím, jak prvky interagují s uživateli na vaší lokalitě. Díky těmto pokročilým technikám designu bude váš web vynikat profesionálním, uhlazeným vzhledem a poutavou uživatelskou zkušeností.
Responzivní webový design
Responzivní webový design (RWD) zajišťuje, že vaše webové stránky vypadají dobře a fungují dobře na různých zařízeních. Zaměřuje se na poskytování plynulého zážitku na různých velikostech obrazovek pomocí proměnlivých mřížek, flexibilních obrázků a Media Queries.
Media Queries
Media Queries jsou základním kamenem responzivního webového designu. Umožňují vám použít styly CSS na základě velikosti obrazovky zařízení, orientace a rozlišení. Můžete například napsat mediální dotaz na změnu rozložení stránky, když je šířka zobrazené oblasti menší než 768 pixelů:
@media (max-width: 768px) {
.container {
width: 100%;
}
}Tento kód zajišťuje, že třída.container zabere celou šířku obrazovky na zařízeních se zobrazovací oblastí širší než 768 pixelů.
Responzivní jednotky
V responzivním designu je důležité používat jednotky, které umožňují přizpůsobení vašeho rozložení prostředí uživatele.
Pixely ( px ) jsou absolutní jednotky a nepřizpůsobují se velikosti obrazovky, což může vést ke špatnému uživatelskému dojmu na mobilních zařízeních.
Namísto toho použijte relativní jednotky, jako jsou procenta ( % ), šířka oblasti zobrazení ( vw ) a výška oblasti zobrazení ( vh ). Například změna velikosti prvků v procentech může způsobit, že se obsah změní úměrně k zobrazené oblasti:
.content {
width: 80%;
}Díky tomu je div.content o 80 % širší než jeho nadřazený prvek, což umožňuje plynulé rozložení, které se přizpůsobuje různým zařízením.
Frameworky a předprocesory
Na své cestě za vytvářením stylových, responzivních webových návrhů zjistíte, že frameworky CSS a preprocesory jsou výkonnými nástroji, které zvyšují efektivitu a udržovatelnost vašeho kódu. Využijte tyto nástroje ke zefektivnění pracovního postupu a aplikujte sofistikované styly s menší námahou.
Populární CSS frameworky
Bootstrap : Jako jeden z nejpoužívanějších frameworků CSS vám Bootstrap poskytuje komplexní sadu předem připravených šablon stylů. Získáte responzivní gridový systém, předem navržené komponenty a JavaScript pluginy, které výrazně urychlí proces vývoje.
Foundation : Jedná se o sofistikovaný framework na podnikové úrovni navržený pro modularitu a flexibilitu. Foundation vám nabízí modulární přístup s různými šablonami, který vám pomůže snadno vytvářet složitá rozložení a responzivní návrhy.
Tailwind CSS : Na rozdíl od tradičních frameworků, Tailwind CSS funguje na principu, který je v první řadě užitečný a nabízí vám atomické třídy pro vytváření vlastních návrhů bez opuštění kódu HTML.
Používání předprocesorů
SASS : Tento preprocesor rozšiřuje CSS o funkce, jako jsou proměnné, vnořená pravidla a mixiny. Pomocí SASS můžete psát více uspořádané a udržovatelné šablony stylů, které se poté zkompilují do standardního CSS.
LESS : Podobně jako SASS, LESS vylepšuje CSS o proměnné, mixy a funkce, což vám umožňuje vytvářet dynamičtější a efektivnější styly. Kompiluje se také do CSS, čímž se zajistí kompatibilita prohlížeče.
Stylus : Stylus, který nabízí velkou flexibilitu a výraznou syntaxi, je předprocesor, který může běžet synchronně i asynchronně a vyhovuje širokému spektru projektových požadavků.
Pomocí CSS frameworků můžete využít komponenty a mřížkové systémy připravené k použití, zatímco předprocesory vám umožňují psát CSS v programovací konstrukci, která se nakonec zkompiluje do kódu srozumitelného pro prohlížeč.
Osvědčené postupy CSS
Při práci s CSS zajišťuje používání osvědčených postupů, že vaše šablony se styly jsou nejen efektivní, ale také udržovatelné a škálovatelné. Mějte na paměti tyto koncepty, abyste zvýšili výkon a soudržnost svých projektů.
Efektivní psaní CSS
Selektory a specifičnost:
- Pomocí selektorů tříd dosáhnete nízké specifičnosti a jednodušší přepsání.
- Vyhněte se příliš specifickým selektorům, abyste snížili složitost a zlepšili výkon.
Optimalizace výkonu:
- Minimalizujte používání drahých vlastností, jako je
box-shadowafilter, které mohou způsobit překreslení a přeformátování. - Implementujte lazy loading ( líné načítání ) pro obrázky mimo obrazovky pomocí
loading="lazy", abyste ušetřili šířku pásma a zvýšili rychlost stránky.
Architektura a metodologie CSS
Organizační strategie:
- Přijměte metodiku, jako je BEM (Block Element Modifier) , abyste dosáhli konzistentní konvence pojmenování.
- Strukturujte svůj CSS pomocí jasné hierarchie, přičemž pro větší projekty zvažte SMACSS (Scalable and Modular Architecture for CSS) .
Škálovatelnost a udržovatelnost:
- Pomocí předprocesorů CSS , jako je Sass, můžete využít proměnné, mixy a funkce pro dynamičtější šablony se styly.
- Zvažte modulární architektury CSS, jako je OOCSS (Object-Oriented CSS), abyste podpořili opětovné použití a snížili redundanci.
Dodržováním těchto postupů vytvoříte styl CSS, který nejen dobře funguje, ale se také přizpůsobí vašemu projektu a zároveň zůstane jednoduchý na údržbu.
Práce s CSS
Pochopení toho, jak pracovat s CSS, zahrnuje více než jen psaní pravidel stylu; vyžaduje to i přísné testování a zajištění konzistentnosti stylů v různých prohlížečích.
Ladění a testování
Když narazíte na problém s CSS, prvním krokem je použití nástrojů pro vývojáře ve webovém prohlížeči. Tyto nástroje vám umožňují kontrolovat a upravovat HTML a CSS v reálném čase. Pro zjednodušený proces ladění:
- Zkontrolujte prvek, který se nezobrazuje správně.
- Zkontrolujte vlastnosti CSS, které jsou na něj použity.
- Upravte vlastnosti a monitorujte změny v prohlížeči, abyste identifikovali problematický kód.
Pro testování je nezbytné zkontrolovat CSS na různých webových stránkách a prvcích v rámci vaší webové stránky, abyste zajistili jednotnost. Automatizované testovací nástroje dokáží simulovat širokou škálu scénářů aplikováním vašich CSS na různé HTML struktury, aby se zachytily nesrovnalosti nebo neočekávané chování.
Kompatibilita prohlížeče a náhrady
Podpora prohlížeče pro funkce CSS se liší a je vaší zodpovědností zajistit, aby se vaše webové stránky vykreslovaly správně ve všech hlavních prohlížečích. Řešení kompatibility prohlížeče :
- Ke kontrole kompatibility vlastností CSS použijte zdroje jako caniuse.com
- Proveďte záložní verze pro starší prohlížeče. Pokud například používáte funkci moderního rozložení, jako je mřížka CSS, v případě prohlížečů, které nepodporují mřížku, poskytněte záložní přístup k tradičnější technice rozložení, jako je float nebo display: table.
V případě funkcí, které se ladně zhoršují, zvažte použití dotazů na funkce s@supports , abyste použili styl pouze tehdy, když prohlížeč podporuje určitou vlastnost nebo hodnotu. To zajišťuje, že vaše webová stránka zůstane funkční a vizuálně přitažlivá, i když prohlížeč uživatele nevykreslí všechna vylepšení stylu.
CSS a dostupnost
Když přistupujete k webdesignu, začlenění principů dostupnosti do vašeho CSS je klíčové. Pamatujte, že ačkoli CSS primárně řídí vizuální prezentaci, může mít vliv i na použitelnost obsahu pro uživatele se zdravotním postižením.
Sémantické značení: CSS vždy spárujte se sémantickým HTML. Použijte prvky HTML, které vyjadřují význam o typu obsahu, který zapouzdřují, jako například<header> pro hlavičku sekcí nebo<nav> pro navigační odkazy . To zajišťuje, že po odstranění stylů zůstane obsah srozumitelný.
- Vizuální design:
- Barvy: Zajistěte dostatečný kontrast mezi barvami textu a pozadí. Nepoužívejte barvu jako jedinou metodu přenosu informací.
- Text: Pro úpravu velikosti textu použijte relativní jednotky (například em nebo rem), aby uživatelé mohli měnit velikost textu podle svých potřeb.
AR a ARIA: Atributy ARIA (Accessible Rich Internet Applications) mohou doplňovat HTML, aby se zlepšila dostupnost při vytváření složitých webových komponent. Napříkladrole="button" zpřístupňuje prvek, který není nativním prvkem tlačítka, jako tlačítko pro asistenční technologie.
- Techniky CSS:
- Správně skrýt prvky pomocí
visibility:hiddennebodisplay:none, aby byly skryty i před čtečkami obrazovky. - Použijte styly
focuspro interaktivní prvky, abyste poskytli jasné pokyny k navigaci pomocí klávesnice.
- Správně skrýt prvky pomocí
| CSS | Vliv na dostupnost |
| color | Musí mít vysoký kontrast s pozadím kvůli čitelnosti |
| font-size | Pro přiblížení/zvětšení použijte relativní jednotky |
| display/visibility | Použijte je ke skrytí prvků ke zlešení čitelnosti |
Využitím těchto praktik ve svém CSS zlepšíte dostupnost svého webového obsahu, čímž se stane inkluzivnějším a uživatelsky přívětivějším pro každého.
Specifikace a dokumentace CSS
Vaše schopnost efektivně využívat styl CSS spočívá v důkladném pochopení jeho specifikací a dokumentace. Pokyny a reference načrtnuté W3C jsou rozhodující pro zvládnutí webového designu.
Specifikace W3C
Za vývoj specifikací CSS je zodpovědné World Wide Web Consortium (W3C) . Zjistíte, že tyto specifikace pokrývají širokou škálu informací, od základní struktury až po pokročilé funkce.
Specifikace CSS jsou navrženy tak, aby vás informovaly o tom, jak správně implementovat různé aspekty CSS ve webových dokumentech.
Například Media Queries rozšiřují možnosti @media pravidel přidáním parametrů pro přizpůsobení velikosti zobrazení, barevné hloubky a variací poměru stran. Pracovní skupina CSS hraje klíčovou úlohu při vývoji těchto norem, přičemž zajišťuje, aby byly komplexní a aktuální.
Odkazy a zdroje CSS
Různé online platformy poskytují praktické reference a zdroje CSS . Webové dokumenty MDN vynikají jako cenný zdroj a nabízejí vyčerpávající dokumentaci o CSS. Zde naleznete podrobné informace o:
- Syntax CSS : Pochopení správného formátu pro psaní CSS včetně selektorů, pseudotříd, pseudoprvků, vlastností a hodnot.
- Příklady pravidel stylu : Praktická aplikace pravidel CSS pro nastavení stylů ve webových dokumentech.
Využijte tyto zdroje k prohloubení svých znalostí a zlepšení implementace CSS v různých médiích a platformách. Pamatujte, že kaskáda je základním konceptem CSS, kde pořadí pravidel CSS a jejich specifičnost určují, jak se styly aplikují na prvky HTML.
Učení se CSS
Když se začnete učit CSS, najdete množství zdrojů a metod ke zlepšení svých dovedností v oblasti vývoje webu. Je důležité začít s komplexními návody a poté aplikovat své znalosti prací na praktických cvičeních a projektech.
Výukové programy a příručky CSS
Začněte svou cestu pomocí příruček CSS , které poskytují podrobné pokyny a jasné příklady . Platformy jako W3Schools nabízí interaktivní návody, kde si to můžete okamžitě sami vyzkoušet úpravou CSS a prohlížením výsledků v jejich online editoru. Každá kapitola obvykle obsahuje příklady, které pomohou upevnit koncepty.
Podobně je MDN Web Docs důvěryhodným zdrojem pro výuku webových technologií včetně CSS. Jejich výukové programy CSS pokrývají základy od úpravy stylu HTML, krabicového modelu, selektorů až po pokročilejší témata, jako jsou animace a techniky rozložení.
Cvičení a projekty CSS
Po převzetí základů prostřednictvím návodů je důležité získat praktické zkušenosti. Najděte cvičení CSS a vytvořte malé projekty, abyste mohli aplikovat to, co jste se naučili.
Můžete začít s jednoduchými úkoly, jako je úprava stylu odstavce nebo návrh navigačního panelu, a pak se můžete zvětšit na vytvoření vícesloupcových rozložení nebo dokonce na celou webovou stránku.
Chcete-li otestovat své znalosti CSS:
- Vytvořte jednoduchou HTML stránku.
- Upravte si styl pomocí souboru CSS propojeného s kódem HTML.
- Experimentujte s různými vlastnostmi CSS, abyste viděli jejich účinky.
Zde je základní cvičení pro úpravu textu odstavce:
<!-- Index.html -->
<!DOCTYPE html>
<html>
<head>
<link href="styles/style.css" rel="stylesheet" />
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
/* styles/style.css */
p {
color: red;
}Dokončením těchto praktických projektů posílíte své učení a postupně si vytvoříte portfolio, abyste mohli ukázat svou rostoucí odbornost v oblasti CSS.
