В тази статия ще говорим за избор на стил. В една от статиите вече засегна темата за селектори, в частност селектори тагове и класове стил. А сега да разгледаме някои повече видове селектори, които не са изрично обвързани правило стил с елемент за уеб страница. Този така наречен специални селектори. Те се предлагат в няколко форми.
Интриганти CSS (съседни и деца контекстуални селектори)
Научете как да създадете професионални уеб сайтове, използвайки HTML5 и CSS3
Комбинатори - един вид CSS селектори, за да зададете правила за елемент стил на уеб-страници, на базата на местоположението му спрямо други елементи.
първи комбинатор Символът плюс (+) или съседен избор. Плюс монтиран между две селектори:
<селектор 1> + <селектор 2> <<стиль>>
Стил в този случай се прилага за селектора 2, но само ако е в непосредствена близост до селектора 1 и отива веднага след него. Разгледаме следния пример:
силна + и цвят: червено; / * Червеният цвят на текста * /
>
.
Това е обикновен текст. Това е удебелен текст, обикновен текст, червен текст прилагане към него обикновено съседни селектори.
Това е обикновен текст. Това е удебелен текст, обикновен текст, и това е обикновен текст.
Стил, описан в пример ще се прилага само за първото текста в тага . защото следва веднага след маркера .
) Се прилага и към съседни селектори, но този път може да е други елементи между тях. В този случай, както на превключвателя трябва да бъдат вградени в една и съща майка таг:
Стил ще бъде приложена към селектора 2, която е да следи за избор 1. разгледаме следния пример:
Аз цвят: червен; / * Червеният цвят на текста * /
>
.
Това е обикновен текст. Това е удебелен текст, обикновен текст, червен текст прилагане към него обикновено съседни селектори.
Това е обикновен текст. Това е удебелен текст, обикновен текст, и този червен текст.
Както можете да видите, този път, стилът обикновено работи както за текст, сключено през таг . въпреки факта, че в последния случай между тага и струва си етикет .
Schemer> се отнася за деца селектори. Тя ви позволява да прикачите CSS стил към уеб страница, директно вградени в друг елемент:
<селектор 1>> <селектор 2> <<стиль>>
Стил ще бъде свързан към селектор 2, който е вграден директно в селектора 1.
Разделение> силен шрифта стил: курсив / * курсив * /
>
.
Това е обикновен текст. И това е обичайната удебелен текст.
Както можете да видите, правилото за стил е работил само на първата маркер . която е директно вградени в тага . така че правилото не се отнася за него. На следващо място, помислете за избор на връзка <пробел>. Тя ви позволява да прикачите CSS стил към елемент, вграден в друг елемент, който може да бъде произволен брой нива: <селектор 1> <селектор 2> <<стиль>> Стил ще бъде приложена към селектора 2. ако тя е някак си, вграден в селектора 1. Помислете предишния пример, само когато описанието на правилата CSS прилага контекстуална селектор: Разделение силен шрифта стил: курсив / * курсив * / Това е обикновен текст. И това също е наклонен удебелен шрифт. Обикновен текст и само удебелен шрифт Както можете да видите, този път обикновено работи по двата тагове . дори един, който е поставен в контейнер . на маркера . които просто инвестирани в параграф CSS правило няма ефект. Научете как да създадете професионални уеб сайтове, използвайки HTML5 и CSS3 Селектори атрибути - специфичен режим на селектори, които се свързват с елемент за стил на базата на настоящето дали има конкретен атрибут, или ако това е конкретна стойност. Има няколко приложения на селектори. <селектор>[<имя атрибута тега>] <<стиль>> И се свързва със стила на тези елементи, в която е добавена зададения атрибут. Например: силна [заглавие] цвят: червено; кола механичен мотор и превоз пътно превозно средство с най-малко 4 колела. Фигурата може да се види, че по принцип CSS (червен цвят на текста) се прилага към силен елемент. към която се добавя заглавието на атрибут. Синтаксисът на този селектор е както следва: <селектор>[<имя атрибута тега>=<значение>] <<стиль>> Той се свързва с елементи от стила на маркери с атрибута с посоченото име и стойност. например: Някои стойности на атрибути, могат да се прехвърлят през пролуката, като имената на класовете. За да определите правило за стил в присъствието на желаната стойност в списъка на стойностите на атрибутите използва следната селектора: [<имя атрибута тега> =<значение>] <<стиль>> Стилът се използва в случай, че атрибут има необходимата стойност, или то е включено в списъка на ценности, разделени с интервали. Например: Получени са следните резултати: Правилото се прилага към елемент, който е сред стойностите на атрибутите клас има стойност тел. Стойностите на документи за самоличност и класове имат право да използват тире. За да се свързват с елементи на стил, чиито стойности на атрибутите могат да съдържат тирета могат да използват следната конструкция: Стилът се прилага към елементите, които имат стойността на атрибут започва с определена стойност, след което има тире. Например: [Клас | = "меню"] Цвят: червен; В примера на правилото за стил се прилага само за елементите на списъка, чието име започва с клас стойността «меню-". Това селектор определя стила на елемента, на стойност атрибут ако етикетът започва с определена стойност. Възможно е да има две възможности: [<имя атрибута тега>^ =<подстрока>] <<стиль>> В първия случай, стилът се прилага за всички елементи, етикети, които имат атрибут с даденото име и стойност, като се започне с низ. Във втория случай едно и също нещо, само някои елементи, включени в основната избор. например: Той се свързва с стилови елементи, чиято стойност на атрибут завършва с посочения текст. Той има следния синтаксис: [<имя атрибута тега>$ =<подстрока>] <<стиль>> В първия случай, стилът се прилага за всички елементи, които имат определено име на атрибут и стойност, каза приключва подниз. Във втория случай едни и същи, само с определения за избор. По този начин, например, може да има различни дисплеи различни графични формати. Например: IMG [SRC $ = GIF] граница: 5px твърд червен; GIF формат на изображението Png формат на изображението В примера, всички изображения с Gif разширение ще бъдат показани с червена рамка пет пиксела дебел. Това селектор стил се свързва с таг, атрибут от които съдържат конкретен текст. синтаксис: [<имя атрибута тега>* =<подстрока>] <<стиль>> Стил, прикрепена към елементите, които имат атрибут с посоченото име, и стойността му съдържа зададения низ. Например: IMG [SRC * = галерия /] граница: 5px твърд червен; Галерия със снимки от папка Снимка от други папки В примера на стила се прилага за изображения, които са изтеглени от «Галерия» папка. На тази за селекторите всички атрибути. Това може да се комбинира с всеки друг всички от горните методи: Също така ви напомня на специален селектори CSS: Това е всичко, докато се срещнем отново.
>
.
Селектори приписват таг
1. Обикновено селектор на атрибут
>
.
2. за избор атрибут със стойност
3. Един от няколко стойности на атрибутите
<основной селектор>[<имя атрибута тега>
4. тире в стойността на атрибут
шрифта: 150%;
>
.
5. Стойността на атрибута започва с конкретен текст
<основной селектор>[<имя атрибута тега>^ =<подстрока>] <<стиль>>
6. Стойността на атрибута завършва определен текст
<основной селектор>[<имя атрибута тега>$ =<подстрока>] <<стиль>>
>
.
7. стойността на атрибута се състои от споменатата поредица
<основной селектор>[<имя атрибута тега>* =<подстрока>] <<стиль>>
>
.
"Създадена съседни селектори;
Свързани статии