Len o zložitých alebo naučiť CSS3. Časť 2. Typy selektorov CSS

Dobrý deň, milí čitatelia webu remontcompa.ru! Volám sa Roman Nahvat a predstavujem vám druhú časť série článkov o jazyku štýlu CSS. V prvej časti sme skúmali tri spôsoby, ako pridať štýly na webovú stránku, konkrétne sme preskúmali interné štýly, ktoré sú rozšíreniami pre jednu značku dokumentu HTML, globálne štýly, keď sa používajú vlastnosti štýlov, ktoré sa zapisujú medzi značky a tiež súvisiace štýly, ktoré sú definované v samostatnom súbore .css od HTML dokumentu. Veľmi dôležitým konceptom v CSS je selektor. Selektor určuje, na ktorý prvok (alebo prvky) v dokumente HTML sa štýl použije. V CSS je niekoľko typov selektorov, ktorých sa budeme venovať v tomto článku..

Len o zložitých alebo naučiť CSS3. Časť 2. Typy selektorov CSS


Vytvorte nasledujúcu štruktúru dokumentu HTML, ku ktorému je už pripojená šablóna so štýlmi selector_type.css ()

Tento dokument uložte ako selecror.html na jednotku Flash v priečinku CSS

Rovnakým spôsobom vytvorte a uložte súbor selector_type.css na jednotku Flash do priečinka CSS

Pridajte na webovú stránku selecror.html nadpis „Výber CSS“ a odsek „Selektor je ....“.

Pridáme tiež tabuľku na webovú stránku selecror.html, pre ktorú napíšeme značky a

Vytvorenú tabuľku zarovnáme v strede webovej stránky (atribút zarovnania s hodnotovým stredom) a nastavíme tiež hrúbku okraja tabuľky na 1 pixel (border = "1")

Medzi značkami a uveďte názov tabuľky (Typy selektorov CSS)

Medzi značkami a
písať značky a , vytvorí sa jeden riadok tabuľky

Medzi značkami a písať značky dvakrát ... , táto akcia vytvorí dva stĺpce v tabuľke. Názvy stĺpcov označíme ako „Selektor“ a „Príklad použitia“

Podobne do tabuľky pridajte ďalších sedem riadkov (značky a ) a v každom riadku vytvoríme dva stĺpce (značky a )

Výsledkom bude, že webová stránka selector.html bude mať nasledujúci tvar

Z vytvorenej tabuľky je zrejmé, že existujú nasledujúce typy selektorov CSS: Selektor typu Selektor identifikátora Selektor triedy Selektor univerzálneho selektora Potomok selektor Sibírsky selektor Selektor všeobecných prvkov Prvky výberu pozrieme na webovej stránke selector.html Výber selektora zodpovedá nejakému názvu prvku v HTML dokument. Napríklad webová stránka selector.html obsahuje nadpis „Selektory CSS“, ktorý je označený

...

. Zarovnajte text názvu v strede webovej stránky a nastavte ho na červenú

V súbore štýlov selector_type.css určíme značku hlavičky ako selektor typu

, ďalej v zátvorkách označíme vlastnosť štýlu a jeho hodnotu, ktorú chceme použiť v hlavičke s textom „Selektory v CSS“

Ako vidíte, text názvu sa nachádza v strede webovej stránky a je červený

Prepínač súrodeneckého prvku zodpovedá súrodeneckému prvku vo vzťahu k inému prvku. Napríklad značka

(odsek „Selektor je ....“) je sestersky k značke

(nadpis „Selektory v CSS“).

Zmeňte farbu textu v odseku („Selektor je ...“) za nadpisom („Selektory v CSS“) na blueviolet pomocou selektora súrodencov. V súbore so štýlmi selector_type.css pridajte riadok h1 + p color: blueviolet

Ako vidíte, farba textu odseku sa zmenila na blueviolet

Za nadpis „Výber CSS“ pridajte na webovú stránku ďalšie dva rovnaké odseky

Dostaneme nasledujúce: text prvého odseku je modrý a farba textu zostávajúcich dvoch odsekov zostane v predvolenom nastavení..

Pomocou selektora všeobecných prvkov zmeňte farbu textu všetkých troch odsekov nasledujúcich po nadpise „Selektory CSS“ na modrozelený. Selektor zovšeobecnených príbuzných prvkov zodpovedá prvku, ktorý je sestersky iný. Napríklad niekoľko značiek

(tri odseky „Selektor je ....“) sú priradené k značke

(nadpis „Selektory v CSS“). Do súboru selector_type.css napíšte nasledujúci riadok h1 ~ p color: blueviolet

V dôsledku použitia selektora zovšeobecnených súvisiacich prvkov sa farba textu všetkých troch odsekov za nadpisom „Selektory v CSS“ zmenila na modrú farbu

Zvážte iný typ selektora CSS, napríklad selektor identifikátora. Selektor identifikátora zodpovedá prvku, ktorého atribút id má hodnotu, ktorá sa zhoduje s prvkom označeným symbolom #. Zväčšite veľkosť písma a zmeňte farbu textu v názve tabuľky (značky ...) pomocou selektora identifikátora. Do značky napíšte identifikátor s názvom „capt“, ako je to znázornené nižšie ()

Do súboru selector_type.css pridajte nasledujúci riadok #capt color: red; font-size: 20px, kde je za symbolom # uvedený identifikátor „capt“

Ako vidíte, veľkosť písma a farba textu v názve tabuľky sa zmenila v súlade s vlastnosťou štýlu predpísanou v súbore selector_type.css.

V dokumente HTML môžete vytvoriť veľa identifikátorov, ale iba pod podmienkou, že sa ich názvy nikdy neopakujú. Napíšeme do značky iný identifikátor s menom „tr1“ , ako je uvedené nižšie ()

Pomocou identifikátora "tr1" zarovnáme text v názvoch stĺpcov tabuliek v strede, nastavíme ich na zelenú a písmo v názvoch stĺpcov označíme tučným písmom. Do súboru selector_type.css napíšte # tr1 text-align: center; font-weight: bold; farba: zelená

Dostávame nasledujúce

Ďalším typom selektora, ktorý zvažujeme, je selektor triedy. Selektor triedy zodpovedá prvku, ktorého atribút triedy má hodnotu, ktorá sa zhoduje s prvkom zadaným za bodkou. Pomocou selektora tried zmeňte farbu orámovania tabuľky na webovej stránke selector.html na modrú. Za to vnútri značky napíšte názov triedy nasledovne: tabuľka, kde class1 je názov triedy

Do súboru štýlov selector_type.css pridajte nasledujúci riadok .class1 border-color: blue

Ako vidíte, farba rámu tabuľky sa zmenila na modrú

Zmeňte farbu textu v tabuľke na zelenú. Do súboru selector_type.css napíšte riadok .class1 color: green

Vidíme, že farba textu v tabuľke sa zmenila na zelenú

Pridať univerzálny obrázok na webovú stránku pomocou univerzálneho selektora. Na flash disku v priečinku CSS máme obrazový súbor s názvom image a príponou .jpg

Do súboru so štýlmi selector_type.css pridajte riadok * background-image: url (image.jpg)

Výsledkom bude, že webová stránka bude mať nasledujúcu formu

Zoberme si druhý druh selektora, napríklad selekčný potomok. Výber dieťaťa zodpovedá prvku, ktorý je potomkom iného prvku. Napríklad vo všetkých troch odsekoch (značky

a

) medzi značky vložte frázu „dokument HTML“ a „pravidlo CSS“ ... , ako je uvedené nižšie. V tomto prípade značka bude potomkom značky

. štítok zmeniť písmo fráz „Dokument HTML“ a „Pravidlo CSS“ na kurzívu

Kombinácie „dokumentu HTML“ a „pravidiel CSS“ kurzívou

Pomocou nasledujúceho selektora zmeňte farbu textu fráz „Dokument HTML“ a „Pravidlo CSS“ na červenú. Ak to chcete urobiť, do súboru so štýlmi selector_type.css pridajte riadok p I color: red

Výsledkom bude, že webová stránka bude mať nasledujúcu formu

Pokračovanie v článku: Skoro komplikované alebo sa učte CSS3. Časť 3. Spôsoby nastavenia farieb v CSS. Nastavte priehľadnosť na prvok v dokumente HTML

Kategórie