Само за сложно или научете CSS3. Част 2. Видове CSS селектори

Здравейте, скъпи читатели на сайта remontcompa.ru! Казвам се Роман Нахват и ви представям втората част от поредица статии на езика на CSS стила. В първата част разгледахме три начина за добавяне на стилове към уеб страница, а именно разгледахме вътрешни стилове, които са разширения за един маркер на HTML документ, глобални стилове, когато използваме кои свойства на стил са написани между тагове и, както и свързани стилове, които са дефинирани в отделен .css файл от HTML документа. Много важна концепция в CSS е селекторът. Селекторът определя към кой елемент (или елементи) в HTML документа стилът ще бъде приложен. В CSS има няколко типа селектори, които ще разгледаме в тази статия..

Само за сложно или научете CSS3. Част 2. Видове CSS селектори


Създайте следната структура на HTML документа, към който вече е свързана таблицата за стилове selector_type.css ()

Запишете този документ като selecror.html на флаш устройство в папката CSS

По същия начин създайте и запишете файла selector_type.css на флаш устройството в папката CSS

Добавете към уеб страницата selecror.html заглавието „CSS Selectors“ и абзаца „Selector is…“.

Ние също добавяме таблица към уеб страницата на selecror.html, за това ще напишем маркерите и

Ние ще подравним създадената таблица в центъра на уеб страницата (атрибутът на подравняване с ценностния център), а също така ще зададем дебелината на рамката на таблицата на 1 пиксел (border = "1")

Между маркерите и посочете името на таблицата (Видове CSS селектори)

Между таговете и
пишете маркери и , това ще създаде един ред от таблицата

Между таговете и напишете маркери два пъти ... , това действие ще създаде две колони в таблицата. Ще посочим имената на колоните като "Селектор" и "Пример за използване"

По същия начин добавете още седем реда в таблицата (тагове и ) и във всеки ред ще създадем две колони (маркери) и )

В резултат уеб страницата selector.html ще приеме следната форма

От създадената таблица може да се види, че съществуват следните видове CSS селектори: Селектор на тип Идентификатор селектор Клас селектор Универсален селектор Потомствен селектор Преобразуващ селектор Селектор на родови свързани елементи Нека да разгледаме всеки тип селектор, използвайки уеб страницата selector.html като пример Селекторът на тип отговаря на име на всеки елемент в HTML документ. Например уеб страницата selector.html има заглавие „CSS Selectors“, което е маркирано

...

. Подравнете текста на заглавието в центъра на уеб страницата и го задайте на червено

Във файла със стилове selector_type.css определяме заглавния маркер като селектор за тип

, по-нататък в скобите посочваме свойството стил и неговата стойност, която искаме да приложим към заглавката с текста „Селектори в CSS“

Както можете да видите, текстът на заглавието се намира в центъра на уеб страницата и е червен

Селекторът на братовчеден елемент съответства на елемент на братята по отношение на друг елемент. Например, маркер

(параграфът "Селекторът е ....") е сестрински към тага

(заглавие „Селектори в CSS“).

Променете цвета на текста в параграфа ("Селекторът е ...") след заглавието ("Селектори в CSS") на синвиолет, използвайки селектора на братята. Във файла със стилове selector_type.css добавете реда h1 + p color: blueviolet

Както можете да видите, цветът на текста на абзаца се е променил в синьовиолет

Добавете още два еднакви абзаца към уеб страницата след заглавието „CSS Selectors“

Получаваме следното: текстът на първия параграф е синвиолет, а цветът на текста на останалите два абзаца остава по подразбиране.

Променете цвета на текста и на трите абзаца, следвайки заглавието „CSS Selectors“, на синьовиолет, като използвате селектора на общи елементи. Селекторът на обобщени свързани елементи съответства на елемент, който е сестра на друг елемент. Например, няколко маркера

(трите параграфа "Селекторът е ....") са сестра на маркера

(заглавие „Селектори в CSS“). Във файла selector_type.css напишете следния ред h1 ~ p color: blueviolet

В резултат на използването на селектора на обобщени свързани елементи, цветът на текста и на трите абзаца след заглавието „Селектори в CSS“ се промени в синвиолет

Помислете за друг тип CSS селектор, като например селектор на идентификатори. Селекторът на идентификатор съответства на елемента, чийто атрибут id има стойността, която съответства на тази, посочена със символа # Увеличете размера на шрифта и променете цвета на текста в името на таблицата (тагове ...), използвайки селектора на идентификатора. Вътре в маркера напишете идентификатор с името "capt", както е показано по-долу ()

Във файла selector_type.css добавете следния ред #capt color: червен; font-size: 20px, където след символа № е посочен идентификаторът "capt"

Както можете да видите, размерът на шрифта и цвета на текста в името на таблицата са променени в съответствие със свойството стил, предписано във файла selector_type.css

Можете да създадете много идентификатори в HTML документ, но само при условие, че имената им никога не се повтарят. Нека напишем друг идентификатор с името "tr1" вътре в маркера , както е показано по-долу ()

Използвайки идентификатора "tr1", ще подравним текста в имената на колоните на таблиците в центъра, ще ги зададем на зелено, а също така ще направим шрифта в имената на колоните удебелен. Във файла selector_type.css напишете # tr1 text-align: center; шрифт: удебелен шрифт; цвят: зелен

Получаваме следното

Следващият тип селектор, който разглеждаме, е селекторът на класа. Селекторът на клас съответства на елемент, чийто атрибут на клас има стойност, която съвпада с тази, посочена след точката. Променете цвета на рамката на таблицата на уеб страницата selector.html на син, използвайки селектора на класа. За това вътре в маркера напишете името на класа, както следва: таблица, където class1 е името на класа

Във файла със стилове selector_type.css добавете следния ред .class1 border-color: blue

Както можете да видите, цветът на рамката на таблицата се е променил в син

Променете цвета на текста в таблицата на зелен. Във файла selector_type.css напишете реда .class1 color: green

Виждаме, че цветът на текста в таблицата се е променил в зелен

Добавете малко фоново изображение към уеб страницата с помощта на универсалния селектор. На флаш устройството в папката CSS имаме файл с изображение с изображението на името и разширението .jpg

Във файла със стилове selector_type.css добавете реда * background-image: url (image.jpg)

В резултат на това уеб страницата ще приеме следната форма

Помислете за последния вид селектор, като селектор за потомци. Детският селектор съвпада с елемент, който е потомък на друг елемент. Например, и в трите параграфа (тагове

и

) приложете фразата „HTML документ“ и „CSS правило“ между маркерите ... , както е показано по-долу. В този случай тагът ще бъде потомък на маркера

. свободен край променете шрифта на фразите "HTML документ" и "CSS правило" на курсив

Комбинации от „HTML документ“ и „CSS правила“ с курсив

Променете цвета на текста на фразите "HTML документ" и "CSS правило" на червен с помощта на селектора за потомство. За да направите това, във файла със стилове selector_type.css добавете реда p I color: red

В резултат на това уеб страницата ще приеме следната форма

Продължение в статията: Само за сложно или научете CSS3. Част 3. Начини за задаване на цветове в CSS. Задайте прозрачност на елемент в HTML документ

Категория