Jen o složitých nebo se učit CSS3. Část 2. Typy selektorů CSS

Dobrý den, drazí čtenáři webu remontcompa.ru! Jmenuji se Roman Nahvat a představuji vám druhou část série článků o jazyce CSS. V první části jsme se podívali na tři způsoby, jak přidat styly na webovou stránku, konkrétně jsme prozkoumali interní styly, což jsou rozšíření pro jednu značku dokumentu HTML, globální styly, když se používají vlastnosti stylů, které se zapisují mezi značky a související styly, které jsou definovány v samostatném souboru .css od HTML dokumentu. Velmi důležitým konceptem v CSS je selektor. Selektor určuje, na který prvek (nebo prvky) v dokumentu HTML bude styl použit. V CSS je několik typů selektorů, kterými se budeme zabývat v tomto článku..

Jen o složitých nebo se učit CSS3. Část 2. Typy selektorů CSS


Vytvořte následující strukturu dokumentu HTML, ke kterému je již připojen stylový list selector_type.css ()

Uložte tento dokument jako selecror.html na flash disk ve složce CSS

Stejným způsobem vytvořte a uložte soubor selector_type.css na jednotku Flash ve složce CSS

Přidejte na webovou stránku selecror.html nadpis „Selektory CSS“ a odstavec „Selektor je ....“

Přidáme také tabulku na webovou stránku selecror.html, pro kterou napíšeme značky a

Vytvořenou tabulku zarovnáme uprostřed webové stránky (atribut zarovnání s hodnotovým středem) a také nastavíme tloušťku okraje tabulky na 1 pixel (border = "1")

Mezi značkami a uveďte název tabulky (Typy výběrů CSS)

Mezi značkami a
psát značky a , Tím se vytvoří jeden řádek tabulky

Mezi značkami a psát značky dvakrát ... , tato akce vytvoří dva sloupce v tabulce. Názvy sloupců označíme jako „Selektor“ a „Příklad použití“

Podobně do tabulky přidejte dalších sedm řádků (značky a ) a v každém řádku vytvoříme dva sloupce (značky a )

Výsledkem bude, že webová stránka selector.html bude mít následující podobu

Z vytvořené tabulky je patrné, že existují následující typy selektorů CSS: Selektor typu Selektor identifikátoru Selektor třídy Selektor univerzálního selektoru Selektor potomka Selektor selhání obecných souvisejících prvků Pojďme se podívat na každý typ selektoru pomocí webové stránky selector.html jako příklad Selektor typu odpovídá nějakému názvu prvku v HTML dokument. Například web selector.html má nadpis „Selektory CSS“, který je označen

...

. Zarovnejte text nadpisu uprostřed webové stránky a nastavte jej na červenou

V souboru stylů selector_type.css určíme značku záhlaví jako selektor typu

, dále v závorkách označíme vlastnost style a její hodnotu, kterou chceme použít na hlavičku s textem „Selectors in CSS“

Jak vidíte, text nadpisu je umístěn ve středu webové stránky a je červený

Selektor sourozeneckých prvků odpovídá sourozeneckým prvkům ve vztahu k jinému prvku. Například značka

(odstavec „Selektor je ....“) je sestersky ke značce

(nadpis „Selektory v CSS“).

Změňte barvu textu v odstavci („Selektor je ...“) za nadpisem („Selektory v CSS“) na blueviolet pomocí selektoru sourozenců. V souboru stylů selector_type.css přidejte řádek h1 + p color: blueviolet

Jak vidíte, barva textu odstavce se změnila na blueviolet

Za nadpis „Výběr CSS“ přidejte na webovou stránku další dva stejné odstavce

Dostaneme následující: text prvního odstavce je blueviolet a barva textu zbývajících dvou odstavců zůstává ve výchozím nastavení.

Změňte barvu textu všech tří odstavců za nadpisem „Selektory CSS“ na blueviolet pomocí selektoru obecných souvisejících prvků. Selektor zobecněných souvisejících prvků odpovídá prvku, který je sestersky jiný prvek. Například několik značek

(tři odstavce „Selektor je ....“) jsou sestrou ke značce

(nadpis „Selektory v CSS“). Do souboru selector_type.css napište následující řádek h1 ~ p color: blueviolet

V důsledku použití selektoru zobecněných souvisejících prvků se barva textu všech tří odstavců za nadpisem „Selektory v CSS“ změnila na blueviolet

Zvažte jiný typ selektoru CSS, například selektor identifikátoru. Selektor identifikátoru odpovídá prvku, jehož atribut id má hodnotu, která odpovídá symbolu označenému symbolem # Zvětšete velikost písma a změňte barvu textu v názvu tabulky (značky ...) pomocí selektoru identifikátoru. Uvnitř značky napište identifikátor s názvem „capt“, jak je uvedeno níže ()

Do souboru selector_type.css přidejte následující řádek #capt color: red; font-size: 20px, kde je za symbolem uveden identifikátor "capt"

Jak vidíte, velikost písma a barva textu v názvu tabulky se změnila v souladu s vlastností stylu předepsanou v souboru selector_type.css

V dokumentu HTML můžete vytvořit mnoho identifikátorů, ale pouze za podmínky, že se jejich jména nikdy neopakují. Napíšeme do značky jiný identifikátor s názvem "tr1" , jak je uvedeno níže ()

Pomocí identifikátoru "tr1" zarovnáme text v názvech sloupců tabulek ve středu, nastavíme je na zelenou a také písmo v názvech sloupců označíme tučně. Do souboru selector_type.css napište # tr1 text-align: center; font-weight: bold; barva: zelená

Dostáváme následující

Dalším typem selektoru, který zvažujeme, je selektor třídy. Selektor třídy odpovídá prvku, jehož atribut třídy má hodnotu, která odpovídá hodnotě zadané za tečkou. Pomocí výběru třídy změňte barvu okraje tabulky na webové stránce selector.html na modrou. Za tímto účelem uvnitř značky napište název třídy takto: tabulka, kde class1 je název třídy

V souboru stylů selector_type.css přidejte následující řádek .class1 border-color: blue

Jak vidíte, barva rámu tabulky se změnila na modrou

Změňte barvu textu v tabulce na zelenou. Do souboru selector_type.css napište řádek .class1 color: green

Vidíme, že se barva textu v tabulce změnila na zelenou

Přidat univerzální obrázek na webovou stránku pomocí univerzálního selektoru. Na flash disku ve složce CSS máme obrazový soubor s názvem image a příponou .jpg

V souboru stylů selector_type.css přidejte řádek * background-image: url (image.jpg)

Výsledkem bude, že webová stránka bude mít následující podobu

Vezměme si druhý druh selektoru, například selekčního potomka. Výběr dítěte odpovídá prvku, který je potomkem jiného prvku. Například ve všech třech odstavcích (značky

a

) mezi značky vložte frázi „dokument HTML“ a „pravidlo CSS“ ... , jak je ukázáno níže. V tomto případě značka bude potomkem značky

. Značka změnit písmo frází „dokument HTML“ a „pravidlo CSS“ na kurzívu

Kombinace „dokumentu HTML“ a „pravidel CSS“ kurzívou

Změňte barvu textu frází „dokument HTML“ a „pravidlo CSS“ na červenou pomocí selektoru potomků. Chcete-li to provést, přidejte do souboru stylů selector_type.css řádek p I color: red

Výsledkem bude, že webová stránka bude mít následující podobu

Pokračování v článku: Téměř komplikované nebo se učte CSS3. Část 3. Způsoby nastavení barev v CSS. Nastavit průhlednost prvku v dokumentu HTML

Kategorie