Ak chcete na svoj web použiť pravidlá štýlu, potom sú selektory uvedeným zdrojom. Existuje niekoľko typov selektorov, z ktorých niektoré sú populárnejšie. Za toto dnes Ukážeme vám, aké sú selektory atribútov v CSS, aby ste z týchto nástrojov vyťažili maximum.
Pomocou CSS môžete využiť niekoľko možností, ktoré vám výrazne pomôžu s prezentáciou vášho webu. Selektory atribútov Slúžia na ohraničenie prvkov a uľahčia prácu s prispôsobením. Hoci táto téma môže byť komplikovaná pre ľudí, ktorí s ňou nie sú spojení, učenie sa o nej vám môže otvoriť mnohé dvere.
Čo znamená CSS?
Ak ste prepojení so svetom webdizajnu, tento výraz ste už často počuli. Kaskádové štýly (CSS) je programovací jazyk, ktorý umožňuje rýchlo a jednoducho vytvárať a upravovať HTML dokument. To znamená, že je to jazyk, pomocou ktorého môžete spravovať dizajn, robiť zmeny, prezentácie, vylepšenia a tiež personalizovať webové stránky. Jeho názov pochádza zo skutočnosti, že umožňuje vypočítať vlastnosti zdedené od iného na niekoľkých hárkoch. Vo webdizajne sa to nazýva vodopád.
Čo sú selektory atribútov v CSS?
Selektor CSS Sú to nástroje, ktoré používate na definovanie štýlu, ktorý chcete dať svojim prvkom CSS. V tomto jazyku existuje mnoho typov selektorov, z ktorých každý má svoju vlastnú syntax a užitočnosť. Používanie správnych pravidiel programovania pomáha prehliadaču aplikovať určité vlastnosti na špecifikované prvky.
Pre jeho časť, Selektory atribútov sú jedným z typov selektorov, ktoré máme v CSS. Sú veľmi užitočné, aj keď niekedy nie také známe ako iné bežnejšie selektory, ako napríklad selektory tried alebo značiek. CSS selektory sú zvyknuté špecifikovať, na ktoré polia chceme použiť štýly.
V CSS slúžia selektory na vymedzenie HTML prvkov našej webovej stránky, na ktoré chceme použiť štýl. CSS má veľa selektorov, ktoré vám umožňujú vybrať prvky s veľkou presnosťou pri aplikácii štýlov. Tieto takzvané selektory atribútov zabezpečujú výber prvkov HTML na základe ich atribútov a/alebo hodnôt.
Aké sú typy selektorov atribútov?
[názov_atribútu] vyberie prvky, ktoré majú nastavený atribút s názvom názov_atribútu bez ohľadu na jeho hodnotu.
[attribute_name=value] vyberie prvky, ktorých atribút s názvom názov_atribútu je nastavený na hodnotu rovnajúcu sa hodnote.
[attribute_name~=value] vyberie prvky, ktoré majú nastavený atribút s názvom názov_atribútu a aspoň jedna z hodnôt atribútu je hodnota.
[attribute_name|=value], vyberie prvky, ktoré majú nastavený atribút s názvom názov_atribútu.
[attribute_name$=value] Vyberte značky, ktorých atribút končí touto hodnotou.
[attribute_name^=value] Vyberie značky, ktorých atribút začína touto hodnotou.
Ako spojiť veľké a malé písmená?
Ak chcete dať do súvisu hodnoty atribútov Nerozlišujú sa malé a veľké písmená, môžete použiť hodnotu „i“ pred koncovou zátvorkou. Tento príznak hovorí prehliadaču, aby zhodoval všetky znaky ASCII bez ohľadu na to, či sú veľké alebo malé. Bez tohto príznaku sú hodnoty zreťazené podľa jazykových pokynov dokumentu, v ktorých sa rozlišujú malé a veľké písmená. HTML rozlišuje malé a veľké písmená.
Čo sú operátory výberu atribútov?
Môžeme použiť niektoré operátory pre selektory atribútov ktoré nie sú také známe a umožňujú nám výrazne spresniť vzhľad určitých hodnôt v konzultovaných atribútoch.
Toto sú operátory dostupné v selektoroch atribútov
*= (obsahuje): Operátor * vám umožňuje vybrať prvky, ktoré majú špecifický reťazec ako hodnotu atribútu aspoň raz.
^= (vyskytuje sa na začiatku hodnoty atribútu): Vyberte prvky, ktoré majú atribút, ktorého hodnota začína konkrétnym reťazcom.
$= (vyskytuje sa na konci hodnoty atribútu): Vyberie prvky, ktoré majú atribút, ktorého hodnota končí konkrétnym reťazcom.
~= (obsahuje presné slovo alebo je oddelené medzerami): Vyberie prvky, ktorých hodnota atribútu má obsah, ktorý sa presne zhoduje so zadaným reťazcom, alebo ktorý obsahuje slovo so zadaným reťazcom oddelené medzerami.
|= (obsahuje presné slovo alebo je oddelené pomlčkami): Podobne ako vyššie, ale slovo môže byť oddelené pomlčkami namiesto medzier.
Ako používať selektory v CSS?
Existujú dva možné spôsoby použitia selektorov v CSS. Ak máte HTML kód a CSS kód v rovnakom dokumente, Všetko, čo musíte urobiť, je pridať selektor CSS do hlavy vášho webu.
Na druhej strane, ak sú vaše HTML a CSS v samostatných dokumentoch, môžete mať dokument s názvom index.html a ďalší dokument s názvom style.css. Súbor index.html musí obsahovať riadok kódu, ktorý volá súbor CSS, aby sa štýly na vašej webovej lokalite zobrazovali správne.
Aké ďalšie typy selektorov nájdeme v CSS?
Existujú rôzne skupiny selektorov. Uvedomte si, aký typ selektora potrebujete vám pomôže použiť ideálny nástroj pre váš projekt. Preto vám niektoré nižšie ukážeme:
Selektor typu, triedy a identifikátora
Táto skupina zahŕňa selektory, ktoré obmedzujú prvok HTML, ako súbor. Obsahuje tiež selektory, ktoré obmedzujú triedu alebo identifikátor.
Pseudotriedy a pseudoprvky
Do tejto skupiny selektorov patria pseudotriedy, ktoré Formátujú špecifické stavy prvku. Napríklad pseudotrieda hover vyberie prvok iba vtedy, keď naň umiestnite kurzor myši. Zahŕňa tiež pseudoprvky, ktoré vyberajú špecifickú časť prvku, a nie samotný prvok
Kombinátory
Prostredníctvom tejto série selektorov ostatné voliče sú kombinované, s cieľom oddeliť rôzne prvky našich dokumentov.
univerzálny volič
Automaticky hviezdička (*), ktorá je symbolom univerzálneho voliča, vyberie všetky prvky určitého dokumentu.
volič ID
Tento typ bol dosiahnutý s cieľom vybrať prvky, ktoré sú založené na atribúte ID.
Ak chcete mať pod kontrolou všetko, čo sa deje na webovej stránke, určite najlepší spôsob, ako ho získať, je prostredníctvom vlastného dizajnu. Pre nich môžete použiť nástroje, ako sú selektory atribútov. Takže Ak by vás zaujímalo, aké sú selektory atribútov v CSS, Dúfame, že v tomto článku sme vám dali odpovede. Ak si myslíte, že sme vynechali niečo dôležité, dajte nám vedieť v komentároch.
