CSS - Selektory: Вáš puť k stilnym webovým stránkám

Zdravím vás, budúci superhvězda webdizajnu! Jsem nadšený, že vám budu vedoucím na tomto vzrušujícím putování prostredníctvom sveta CSS selektorov. ako niekto, kto učí počítačové vedy viac ako desať rokov, môžem vám povedať, že ovládnutie selektorov je ako odomknutie pokladnice plnej možností dizajnu webových stránok. Takže, pustime sa do toho a urobme vaše webové stránky zářivými!

Typy selektorov

Než začneme naše dobrodružstvo, pozrime sa rýchlo na rôzne typy selektorov, ktoré budeme skúmať:

Typ selektora	Príklad	Popis
Univerzálne	*	Vyberá všetky prvky
Element	p	Vyberá všetky prvky
Trieda	.classname	Vyberá prvky s class="classname"
ID	#idname	Vyberá prvok s id="idname"
Atribút	[attribute]	Vyberá prvky s určeným atribútom
Skupina	selector1, selector2	Vyberá všetky prvky, ktoré zodpovedajú buď selector1 alebo selector2
Pseudo-triesa	:hover	Vyberá prvky v špecifickom stave
Pseudo-prvok	::first-line	Vyberá časť prvku
Potomok	div p	Vyberá všetky prvky vnútri prvkov
Dieťa	div > p	Vyberá všetky prvky, kde rodič je
Susediaci súrodenecký	div + p	Vyberie prvý prvok, ktorý okamžite nasleduje za
Všeobecny súrodenecký	div ~ p	Vyberá všetky prvky, ktoré sú súrodenci prvkov

Teraz si detalívne prezrieme každý z nich!

CSS univerzálne selektor

Univerzálne selektor je ako švicarský arménsky nožík CSS - vyberá všetko! Je reprezentovaný hviezdou (*).

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

Tento kód resetuje okraje a vnútorné okraje všetkých prvkov a nastavuje vlastnosť box-sizing. Často sa používa na začiatku šablón aby vytvoril čistý štart.

CSS element selektor

Element selektory cieľujú na špecifické HTML prvky. sú jednoduché, ale môžu byť veľmi silné.

p {
font-size: 16px;
line-height: 1.5;
}

h1 {
color: #333;
font-family: 'Arial', sans-serif;
}

Tu meníme všetky

prvky aby mali veľkosť písma 16 pixelov a riadkový priestor 1.5. tiež nastavujeme všetkým

prvkom tmavú šedú farbu a písmo Arial.

CSS trieda selektor

Trieda selektory sú neobyčajne univerzálne. umožňujú vám aplikovať štýly na viacero prvkov, ktoré majú rovnakú triedu.

.highlight {
background-color: yellow;
font-weight: bold;
}

.error-message {
color: red;
border: 1px solid red;
padding: 10px;
}

V tomto príklade, akýkoľvek prvok s class="highlight" bude mať žltú pozadovú farbu a tučné písmo. prvky s class="error-message" budú zobrazené v červenej farbe s červeným okrajom a niektorým okrajom.

CSS ID selektor

ID selektory sa používajú na štýlovanie jedinečného prvku. sú predchádzané hash (#) symbolom.

#header {
background-color: #f0f0f0;
padding: 20px;
}

#main-content {
max-width: 800px;
margin: 0 auto;
}

Tento kód štýluje prvok s id="header" a prvok s id="main-content". pamätajte, že ID by mali byť unikátne v rámci jednej stránky!

CSS atribút selektor

Atribút selektory cieľujú na prvky na základe ich atribútov alebo hodnôt atribútov.

[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}

[href^="https"] {
color: green;
}

[class*="btn"] {
cursor: pointer;
}

Tu štýlujeme všetky prvky s type="text", odkazy, ktoré začínajú na "https", a prvky, ktorých trieda obsahuje "btn".

CSS skupina selektor

Skupina selektorov umožňuje aplikovať rovnaké štýly na viacero selektorov. sú oddelené čiarkami.

h1, h2, h3 {
font-family: 'Georgia', serif;
color: #333;
}

.error, .warning {
font-weight: bold;
}

Tento kód aplikuje rovnaké písmo a farbu na h1, h2 a h3 prvky, a robí .error a .warning triedy tučné.

CSS pseudo-triesa selektor

Pseudo-triesa selektory cieľujú na prvky v špecifických stavoch.

a:hover {
text-decoration: underline;
}

input:focus {
outline: 2px solid blue;
}

li:nth-child(odd) {
background-color: #f0f0f0;
}

Tieto štýly podčiarkňujú odkazy v stave hover, pridávajú modrý okraj k zameraným vstupom a dávajú každému nepárnom list itemu svetlošedú pozadovú farbu.

CSS pseudo-prvok selektor

Pseudo-prvok selektory umožňujú štýlovať špecifické časti prvku.

p::first-letter {
font-size: 2em;
font-weight: bold;
}

h1::before {
content: "? ";
}

div::selection {
background-color: yellow;
}

Tento kód zväčšuje a ztužuje prvý list paragraphu, pridáva ukazovací prst emoji pred h1 prvky a robí vybratý text v div prvkoch žltý.

CSS potomok selektor

Potomok selektory cieľujú na prvky, ktoré sú potomkami iného prvku.

article p {
line-height: 1.6;
}

.container .box {
border: 1px solid #ccc;
}

Tu štýlujeme paragraphy vnútri article prvkov a prvky s triedou "box" vnútri prvkov s triedou "container".

CSS dieťa selektor

Dieťa selektory cieľujú na priame deti prvku.

ul > li {
list-style-type: square;
}

div > p {
margin-bottom: 10px;
}

Tento kód dává štvorcek ako odrážky k list itemom, ktoré sú priamy deti unordered listov, a pridáva spodný okraj k paragraphom, ktoré sú priamy deti divov.

CSS susediaci súrodenecký selektor

Susediaci súrodenecký selektor cieľuje na prvky, ktoré nasledujú okamžite za iným prvkom.

h1 + p {
font-size: 1.2em;
font-weight: bold;
}

.button + .button {
margin-left: 10px;
}

Tu robíme prvý paragraph za h1 väčším a tučným, a pridávame ľavý okraj k tlačidlám, ktoré nasledujú okamžite za inými tlačidlami.

CSS všeobecny súrodenecký selektor

Všeobecny súrodenecký selektor cieľuje na prvky, ktoré sú súrodenci iného prvku, aj keď nie sú okamžite vedľa seba.

h1 ~ p {
color: #666;
}

.highlight ~ li {
font-style: italic;
}

Tento kód mení farbu všetkých paragraphov, ktoré sú súrodenci h1 prvkov, na tmavú šedú a skloni list items, ktoré nasledujú za prvkom s triedou "highlight".

Vnorené selektory v CSS

Vnorené selektory vám umožňujú písať viacprehľadné a čitateľné CSS tým, že vnorenia selektory medzi seba.

.container {
max-width: 1200px;
margin: 0 auto;

.header {
background-color: #f0f0f0;
padding: 20px;

h1 {
color: #333;
}
}

.content {
padding: 20px;

p {
line-height: 1.6;
}
}
}

Táto vnorená štruktúra jasne ukazuje vzťahy medzi prvokmi a robí CSS viac organizovaným.

Charakteristiky vnorených selektorov v CSS

1. Zlepšená čitateľnosť: Vnorenie odráža štruktúru vašho HTML.
2. Redukcia opakovania: Nie je potrebné opakovať rodičovské selektory.
3. Ľahká údržba: Zmeny v rodičovských selektoroch automaticky aplikujú na vnorené selektory.
4. Obmedzenie oblasti: Štýly sú prirodzene obmedzené na ich rodičovský kontext.

Pamätajte, že aj keď môže byť vnorenie silné, nevnoreňujte príliš hlboko, pretože to môže spraviť váš CSS harder to understand and maintain.

A to je vsetko, môj nadšený učeň webdizajnu! Už som vás viedol na okružnú jazdu prostredníctvom CSS selektorov. S týmito nástrojmi môžete vytvárať nádherné štýlované webové stránky. Nezabudnite, že cvičenie robí mestra, takže nebojte sa experimentovať s rôznymi selektorami a kombináciami. Šťastné kódovanie!

Credits: Image by storyset