Tento článok prináša zaujímavú a dôležitú tému známu ako Selektorov a nadväzuje na to pomocou praktickej ukážky. V tomto článku sa budeme zaoberať nasledujúcimi ukazovateľmi,
- Styling prvkov HTML
- Selektory CSS
- Výber ID CSS
- Výber triedy CSS
- Univerzálny selektor CSS
- Selektory skupín CSS
Poďme teda do toho,
Styling prvkov HTML
Skôr ako sa dostaneme k selektorom CSS, pozrime sa, čo to je. Ak sa má HTML považovať za kostru, potom je CSS (Cascading Style Sheets) ako svaly a pokožka. Mozog je JavaScript. Pre webovú stránku sú teda štýly CSS v podstate rozložením a dizajnom. CSS priamo od umiestnenia obrázkov a textu po veľkosť písma a farbu pozadia určuje, ako vyzerajú prvky HTML v prehliadači.
CSS môžete lepšie porozumieť, ak máte dobrý prehľad o tom, čo sú selektory CSS. Tieto selektory vám umožňujú zacieliť na konkrétne prvky HTML, aby ste na ne mohli použiť správny štýl.
Poďme pochopiť, ako môžeme vyberať prvky HTML,
Ako vybrať prvky?
Povedzme, že chcete, aby bola určitá hlavička štylizovaná inak ako zvyšok obsahu webovej stránky. Teraz pomocou selektorov CSS môžete zacieliť tento element HTML, aby ste ho inak upravili. Selektory CSS pomáhajú pri definovaní prvkov, pre ktoré platí určitá sada pravidiel CSS. Existuje niekoľko typov selektorov CSS, ktoré vám umožňujú presný výber prvkov, ktoré chcete upravovať. Môžete dať celej webovej stránke všeobecný štýl a potom sa dopracovať k štýlu ďalších prvkov stránky.
fibonacci v c ++
Selektory sú súčasťou pravidla CSS a tieto selektory prichádzajú tesne pred vyhlásením blokov CSS. Pre lepšie pochopenie môžete odkazovať na obrázok nižšie.
Pokračujeme článkom CSS Selectors
Selektory CSS
Tento selektor umožňuje výber prvku HTML podľa jeho názvu.
Zvážte kód uvedený nižšie:
p {text-align: center color: magenta}Tento štýl sa použije pri každom odseku.
Odsek 1
Odsek 2
Tento kód vám poskytne nasledujúci výstup:
Tento štýl sa použije pri každom odseku
Odsek 1
Odsek 2
Vo vyššie uvedenom kóde boli prvky HTML zarovnané na stred a majú farbu „purpurová“.
Pokračujeme článkom CSS Selectors
Výber ID CSS
Výberom atribútu id prvku HTML môžete zvoliť tento konkrétny prvok. Pretože ID je pre stránku jedinečné, môžete vybrať ten správny prvok pomocou atribútu id.
Element HTML môžete vybrať pomocou znaku „#“ a ID tohto prvku. Napríklad „#firstname“ vyberá prvok, ktorého ID je „firstname“.
Zvážte nasledujúci kód:
# para1 {text-align: center color: orange}Ahoj svet
Tento odsek nebude ovplyvnený.
Výstup pre vyššie uvedený kód je:
Ahoj svet
Tento odsek nebude ovplyvnený.
Ako vidíte na výstupe vyššie, zahrnutím id = ”para1 ″ sme dokázali zmeniť farbu tohto prvku na oranžovú. Ďalší prvok, ktorý to nemá, zostáva nedotknutý.
Pokračujeme článkom CSS Selectors
Výber triedy CSS
Pomocou selektora triedy môžete vybrať prvky HTML, ktoré majú konkrétny atribút triedy. Selektor môžete definovať pomocou bodky (symbol bodky), za ktorou nasleduje názov triedy. Napríklad .intro vyberie prvky, kde je trieda „úvodná“. Pamätajte na to, že názov triedy nikdy nemôžete začať číslom.
Zvážte nasledujúci kód:
.center {text-align: center color: pink}Tento nadpis je ružový a zarovnaný na stred.
Tento odsek je ružový a zarovnaný na stred.
Výstup z vyššie uvedeného kódu je:
Tento nadpis je ružový a zarovnaný na stred.
Tento odsek je ružový a zarovnaný na stred.
triediace polia c ++
Pre konkrétny prvok môžete použiť selektory tried CSS. Ak chcete štylizovať iba jeden konkrétny prvok, môžete spolu s selektorom triedy použiť názov prvku.
Zvážte napríklad nasledujúci kód:
p.center {text-align: center color: pink}Táto položka nie je ovplyvnená
Tento odsek je ružový a zarovnaný na stred.
Výstup z vyššie uvedeného kódu je:
Táto položka nie je ovplyvnená
Tento odsek je ružový a zarovnaný na stred.
Ako vidíte na výstupe, nadpis h2 nie je ovplyvnený štýlom. Pretože sme zadali „p.center“, štýl bude ovplyvnený iba odsek.
Pokračujeme týmto článkom o výbere CSS,
Univerzálny selektor CSS
Tento typ selektora možno považovať za zástupný znak, ktorý vyberá všetky prvky na stránke. Vyberie všetky prvky na stránke a je špecifikovaný znakom „*“.
Zvážte napríklad nasledujúci kód:
* {color: darkgreen font-size: 30px}Toto je test (menšie písmo)
Toto je odsek.
Výstup pre vyššie uvedený kód je:
Ahoj svet
Toto je test (menšie písmo)
Toto je odsek.
Ako vidíte na výstupe, všetky prvky, ktoré sú definované pomocou selektora skupiny, majú rovnakú definíciu štýlu - sú zarovnané na stred a farba písma je azúrová.
rozdiel medzi bábkou a kuchárom
Týmto sa dostávame na koniec tohto článku.
Vyskúšajte naše ktorá prináša živé školenie vedené inštruktorom a skúsenosti s projektmi v reálnom živote. Toto školenie vám pomôže získať zručnosti v oblasti práce s webovými technológiami typu back-end a front-end. Zahŕňa školenie zamerané na vývoj webových aplikácií, jQuery, Angular, NodeJS, ExpressJS a MongoDB.
Máte na nás otázku? Uveďte to prosím v sekcii komentárov článku a my sa vám ozveme.