Основи на работа с CSS селектори за начинаещи, Дмитрий Трепачев

HTML CSS урок

курс за напреднали

напреднали неща

В този урок ще научим по-усъвършенствана работа с CSS селектори.

В предишните уроци използвахме само един вид селектори - името на етикета, чрез който достъпвахме всички подобни тагове.

Но по-често се нуждаем от по-точни начини за препратка: например искаме да изберем не всички параграфи, а само някои от тях.

Ще научим как да направим това в този урок.

Въпреки това, като начало ще анализираме два маркера, които ще ни бъдат полезни в бъдеще.

Блокирайте . div етикет

Тагътdivслужи като контейнер за други тагове. Той не прави нищо сам, но можете да поставите много различни тагове в него, като параграфи и заглавия, и след това да приложите различни CSS свойства към всички тяхедновременно. Например, нека оцветим съдържанието на тагаdivв червено (използвайки атрибутаstyle):

Ето как ще изглежда кодът в браузъра:

Lorem ipsum dolor sit amet.

В момента тагътdivе един от основните градивни елементи на сайта. Ще го срещнете още много пъти в бъдеще.

Блокирайте . span таг

Тагътspanе контейнер за част от текста. Вече знаете, че за да направите текст удебелен например, трябва да използвате тагаb. Но какво ще стане, ако искам да оцветячаст от текств червено? Няма етикет катоbза този случай.

Ето за какво служи тагътspan- сам по себе си той не прави абсолютно нищо, но можете да приложитеCSS стиловекъм него,което ще ни позволи да добавим желания ефект към част от текста.

Нека оцветим малко текст в червено:

Ето как ще изглежда кодът в браузъра:

Lorem ipsum dolor sit amet.

Изучихме двата маркера, от които се нуждаем, и сега започваме да изучаваме по-сложна работа със селектори.

Блокирайте . Селектори за групиране

Понякога може да възникне следната ситуация: трябва да направите едно и също нещо с различни етикети, например да оцветите всички заглавияh2,h3ипараграфив червено. В този случай ще трябва да напишете нещо подобно:

Има обаче начин да го направите малко по-кратък: селекторите на етикети могат да се комбинират сзапетаяи CSS кодът ще бъде приложен към всички тяхедновременно. Горният код може да бъде пренаписан по по-кратък начин, както следва:

Ето как ще изглежда кодът в браузъра:

заглавие h2

заглавие h3

параграф с текст.

Можете да групирате произволен брой селектори на етикети, разделени със запетаи, интервалът след запетаята няма значение, можете и без него, но кодът е по-красив с него.

Блокирайте . Влагане на тагове един в друг

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

Това се прави с помощта на така нареченияселектор на контекст, който ви позволява да препращате към тагове чрез тяхното влагане в други тагове.

За да се покаже влагането,интервалтрябва да се постави между селекторите (този интервал е знакът на контекстуалния селектор).

Например, така че -p i- ще се позоваваме на всички таговеiразположени вътре в p,p b- така на всички таговеbвътре вpи така -div p b- към всички таговеb, които са вътре в p параграфи, които на свой ред са вътре в тага div.

В следващия пример ще имаме достъп до всички параграфи в div и ще ги оцветим в червено. Параграфите извън div и другите елементи вътре в div (h2в нашия случай) няма да станат червени:

Ето как ще изглежда кодът в браузъра:

Заглавие h2 вътре в таг div.

Абзац в div таг.

Абзац извън div таг.

Блокирайте . Избор на елемент по уникален идентификатор

Може да се нуждаете от следния метод в такава ситуация: трябва да поставите червено за всички параграфи испециалноза този параграф - зелено. В този случай, както вече знаете, можете да използвате атрибутаstyle, но този метод не е най-добрият (затрупва HTML кода с CSS код).

Вторият начин е, че на необходимия елемент се даваid на атрибута, който съдържауникалното имена нашия таг (не трябва да има друг id със същото име на страницата - ще има конфликт). Ако му дадем например имеtest, тогава в CSS можем да го наричаме така:#test- тоест символът"hash"се изписва първо, а след товаname, което написахме в атрибутаid.

Нека сега зададем всички параграфи на червено, а параграф c на зелено:

Ето как ще изглежда кодът в браузъра:

Абзац с атрибут id, зададен на "test".

Редовен параграф с текст.

И сега даваме атрибутаidнаконкретен divи оцветяваме съдържанието на този div в червено, като се позоваваме на него чрез неговияid:

Ето как ще изглежда кодът в браузъра:

заглавие h2вътре #тест.

Заглавието h2 вътре в #test.

Параграфът вътре в #test.

Сега нека комбинирамеконтекстния селектор(който е интервал за указване на влагане) иidи да направимсамо параграфи(но не и заглавияh2в този случай) на#testда станат червени:

Ето как ще изглежда кодът в браузъра:

Заглавието h2 вътре в #test.

Параграфът вътре в #test.

Блокирайте . Класове елементи

Позоваването на елемент чрез неговияidима известен недостатък - можем да се позоваваме само на един елемент на страницата. Но какво ще стане, ако например имаме нужда от два вида абзаци - червени и зелени, и те могат да се редуват в произволен ред? В този случай ще бъде много по-удобно да използватекласове.

Класоветесе дефинират с помощта наатрибут клас, в който записваме името на класа. Предимството им е, чемногоелементи на страницата могат да имат един и същ клас. Тоест, ако елементите трябва да се държат еднакво - ние им даваме един и същ клас.

Как да препращаме към елементи с определен клас вCSS: нека зададем класа, от който се нуждаем, към елементите с имеtest, след което вCSSможем да препращаме към всички елементи с този клас по следния начин -.test- първо знака"точка"и след товаиме на класот атрибутаclass.

В примера по-долу и параграфите, и заглавията имат един и същ класtest, който оцветява тези елементи в червено:

Ето как ще изглежда кодът в браузъра:

Заглавието h2 с тестовия клас.

Параграф с класния тест.

Абзац без клас.

Блокирайте . Специфичен таг с даден клас

Има ситуации, когато различни тагове имат един и същ клас. Например и параграфите, и заглавията h2 имат класtest. Може да искате да изберетесамо параграфис класtest, без да засягате заглавияh2със същия клас.

В този случай вместо селектора.testтрябва да напиша следното:p.test- по този начин ще селектирам всички параграфи с класаtestбез да засягам заглавията. Ако напишаh2.test, тогава ще избера всички h2 заглавия с класаtest, без да засягам параграфите.

В следния пример само параграфи с класtestще станат червени, заглавия със същия клас няма:

Ето как ще изглежда кодът в браузъра:

Заглавието h2 с тестовия клас.

Параграф с класния тест.

Абзац без клас.

И така, отново:p.test- този селектор избирапараграфи с клас тест. Но ако направя това:p .test(поставете интервал), тогава ще избера всички елементи с класtest, които савътре вабзаци. Почувствайте тази разлика.

Нека сега изберемсамо h2с класtest:

Ето как ще изглежда кодът в браузъра:

Заглавието h2 с тестовия клас.

Параграф с класния тест.

Абзац без клас.

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

Ето как ще изглежда кодът в браузъра:

Заглавието h2 с тестовия клас.

Параграф с класния тест.

Абзац без клас.

Блокирайте . Видео

Какво правите след това:

Започнете да решавате задачи на следния линк: задачи към урока.

Когато всичко е решено - преминете към изучаването на нова тема.