Webové stránky by bez CSS vypadaly nudně, protože tento stylingový jazyk je zodpovědný za styl textu, velikost, barvu a umístění na webové stránce.
Table of Contents
Co je CSS?
Cascading Style Sheets, zkráceně CSS, je jazyk, který popisuje, jak by se prvky HTML měly zobrazovat na obrazovce nebo na papíře. CSS bylo vytvořeno World Wide Web Consortium (W3C) v roce 1996.
Prvky HTML nebyly navrženy tak, aby měly značky, které by mohly pomoci formátovat webovou stránku, a od vývojářů se vyžadovalo pouze napsat označení pro stránku. Zavedení značek jako při uvedení HTML 3.2 přineslo vývojářům nové problémy.
Protože webové stránky mají barevná pozadí, různá písma a různé styly, přepisování kódu se stalo drahým a bolestivým. Školy W3C zavedly CSS k vyřešení těchto výzev a v průběhu let se dále vyvíjely.
Proč CSS?
#1. CSS je efektivní
CSS nás ušetří od bolesti při přidávání značek, jako je font, zarovnání prvků, ohraničení, barva, styl pozadí a velikost na každou webovou stránku.
#2. Ušetřit čas
Vzhled celého webu můžete snadno změnit změnou externího souboru CSS.
#3. Kompatibilita více zařízení
Moderní uživatelé webu přistupují k webům na miniaplikacích s různou velikostí obrazovky, jako jsou počítače, tablety a chytré telefony. CSS usnadňuje vytváření webových stránek, které reagují na velikost obrazovky.
#4. Snadná údržba aplikací
Moderní webové aplikace se neustále vyvíjejí. CSS usnadňuje změnu jednotlivých komponent nebo dokonce celého webu bez změny kódové základny.
Jak se CSS používá s HTML k vytváření webových stránek?
HTML je standardní značkovací jazyk používaný pro tvorbu webových stránek. Na druhou stranu CSS popisuje, jak se zobrazují webové stránky (vytvořené pomocí HTML). Webová stránka vytvořená pomocí HTML a CSS bude mít v ideálním případě soubor HTML s textem, odkazy na obrázky a HTML tagy.
Tento soubor HTML může mít buď samostatný soubor CSS propojený pomocí značky odkazu, nebo může používat interní nebo vložené styly CSS. Soubor HTML může mít nadpis jako
a odstavec označený
. Pomocí CSS můžete dát prohlížeči pokyn, aby zobrazil veškerý obsah odstavce tučně, nebo dokonce nastavte obsah záhlaví na 50 pixelů v zelené barvě.
V další části si ukážeme, jak HTML a CSS fungují.
Typy CSS
#1. Externí CSS
Aby bylo CSS klasifikováno jako externí, měl by existovat soubor HTML a samostatný soubor CSS s příponou .css. Například style.css. Soubor CSS je propojen se souborem/dokumentem HTML pomocí značky odkazu.
Příklad externího souboru CSS:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
Soubor CSS lze propojit s následujícím dokumentem HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/> </head> <body> <div class = "main"> <div class ="GF">Geek Flare!!!! </div> <div id ="TP"> Your favourite tech portal </div> </div> </body> </html>
Tag link spojuje externí šablonu stylů s dokumentem HTML, zatímco atribut href určuje umístění externí šablony stylů.
Výsledná webová stránka se zobrazí následovně:
Externí CSS je nejvíce doporučovaný přístup, protože usnadňuje vytváření opakovaně použitelných komponent a provádění univerzálních změn v kódové základně.
#2. Interní CSS
Interní CSS je ideální, když máte jeden HTML dokument, který chcete jedinečně upravit. Sada pravidel stylu je napsána v dokumentu HTML v sekci head.
Toto je příklad interního CSS:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
Vykreslená webová stránka se zobrazí následovně:
Interní CSS není ve většině případů ideální, protože kód v HTML dokumentu je tak velký, což ovlivňuje rychlost načítání.
#3. Inline CSS
Inline CSS obsahuje styl CSS v těle. Například můžete stylovat odstavec, nadpis nebo dokonce div pomocí inline CSS.
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:red; font-size:50px; font-style:bold; text-align:center;"> Inline CSS Demonstration </p> </body> </html>
Vykreslený dokument se zobrazí následovně:
Inline CSS není ideální, pokud chcete škálovat svou webovou aplikaci, protože přidání vlastnosti CSS do každé značky HTML vyžaduje čas.
Prozkoumejte některé z nejlepších online kurzů a knih, abyste zvládli CSS.
Vytvářejte responzivní webové stránky pomocí HTML a CSS
Tento kurz vytváření responzivních webů v reálném světě učí, jak vytvářet responzivní weby pomocí HTML5 a CSS3. K tomu, abyste se naučili tento kurz, který zkoumá pojmy jako model krabice, řešení konfliktů selektoru, schémata umístění a dědičnost, nepotřebujete žádné předchozí znalosti vývoje webu.
Je to také ideální kurz, pokud se chcete naučit brainstorming, plánovat, skicovat, kódovat, testovat a optimalizovat profesionální web.
Pokročilé CSS a Sass
Pokročilý kurz CSS a Sass vás seznámí s tím, jak CSS funguje v zákulisí, a prozkoumá témata jako kaskáda, specifičnost a dědičnost.
Kurz má mnoho moderních technik CSS pro vytváření výkonných, responzivních webových stránek. Kurz představí Saas a jak jej používat v projektech při architektuře CSS, globálních proměnných a správě mediálních dotazů.
Je to také ideální kurz, pokud se chcete naučit animaci CSS, protože se dotýká @keyframes, animace a přechodu.
Naučte se CSS
Naučte se CSS od Codecademy učí, jak používat CSS k vizuální transformaci HTML na poutavé webové stránky. Kurz je rozdělen do 8 lekcí a obsahuje 6 projektů, které prověří vaše porozumění.
Hlavní věci, které se v tomto kurzu naučíte, jsou, jak přidat styl do prvků HTML, propojit soubory HTML a CSS a vytvořit jedinečná rozvržení webových stránek.
Vytvořte si svou první webovou stránku pomocí HTML a CSS
Kurz Vytvoření první webové stránky vás naučí, jak používat HTML5 a CSS3 k vytváření responzivních webů. Tento bezplatný kurz je prezentován ve 4 modulech a jeho dokončení vyžaduje přibližně 10 hodin. K nastudování tohoto kurzu nepotřebujete žádné předchozí znalosti programování.
Základy CSS
Základy CSS vytvořilo W3Cx. Některé z věcí, které se v tomto kurzu naučíte, jsou; osvědčené postupy ve webovém designu, základní selektory CSS a jak vybrat vlastnosti CSS. Kurz je rozdělen do 5 modulů; potřebujete asi 5 týdnů na jeho dokončení při studiu 5-7 hodin týdně.
Úvod do CSS3
Tento kurz CSS3 představuje kaskádové styly. Kurz je připraven University of Michigan a učí, jak psát pravidla CSS, vytvořit dobré programovací návyky a testovat kód. K absolvování tohoto kurzu potřebujete přibližně 12 hodin, po jehož dokončení je dodáván certifikát, který lze sdílet.
Úvod do HTML a CSS
Tento úvodní kurz o HTML a CSS učí, jak vytvářet stylové a dobře strukturované webové stránky pomocí HTML a CSS. Kurz učí studenty, jak vytvářet webové stránky pomocí stromové struktury a poté je stylovat pomocí CSS.
Tento bezplatný kurz je vhodný pro začátečníky a využívá model učení s vlastním tempem. Na dokončení tohoto kurzu, který vyučují odborníci z oboru, potřebujete asi 3 týdny.
CSS tutoriál
CSS Tutorial je bezplatný kurz na W3schools. Kurz je rozdělen do kapitol pro snadné pochopení. Každá kapitola obsahuje příklady a cvičení. Platforma má online, kde můžete experimentovat s různými koncepty pomocí tlačítka „Vyzkoušejte si to sami“.
CSS: Definitivní průvodce
Kniha CSS: The Definitive Guide je užitečná, pokud se chcete naučit základy CSS, od selektorů a specifičnosti až po kaskádu. Kniha také podrobně popisuje flexbox, polohování a triky s plovákem.
Je to také kniha na objednávku, pokud se chcete naučit používat CSS k vytváření 2D a 3D transformací, přechodů a animací. Definitive Guide je k dispozici ve verzi Kindle i paperback.
Responzivní web design s HTML5 a CSS
Tato kniha o responzivním webdesignu s HTML5 a CSS učí, jak vytvářet responzivní weby odolné vůči budoucnosti pomocí HTML5 a CSS.
Poté, co se naučíte triky z této knihy, poběží vámi vytvořené webové stránky bezchybně na počítačích, tabletech a mobilních telefonech. Kniha je napsána ve snadno pochopitelném formátu a je k dispozici v brožované vazbě a formátu Kindle.
HTML a CSS: Navrhujte a sestavujte webové stránky
Tato kniha o HTML a CSS je ideální pro všechny, ať už jste nadšenci, studenti nebo profesionálové.
Spisovatel dodává obsah této knihy prostřednictvím informační grafiky a lifestylových fotografií, aby bylo snadné pochopit různé koncepty. Zdroj je prezentován v jedinečné struktuře, takže je snadné procházet všemi kapitolami.
Moderní CSS
Tato kniha o Modern CSS: Master the Key Concepts of CSS for Modern Web Development učí CSS prostřednictvím příkladů kódu, diagramů a snímků obrazovky.
Kniha v prvních kapitolách představuje barvy, selektory, modely krabic, kombinátory a specifičnost. Kniha poté představuje styly textu, umístění, přechody, ohraničení, Z-index a překrývání. Naučíte se také pokročilá témata, jako jsou přechody, animace, transformace, flexbox a mřížky CSS.
Závěrečná slova
Roli CSS v moderních webových stránkách nelze dostatečně zdůraznit. Kromě toho, že jsou webové stránky vizuálně přitažlivé, CSS usnadňuje procházení různých webových stránek.
Naučit se CSS může být snadné, pokud použijete výše uvedené zdroje. Některé z těchto kurzů jsou zdarma, jiné jsou placené.
Dále se můžete podívat na cheaty CSS pro vývojáře a designéry.