CSS-селектор, и неговата роля за форматиране на HTML-документ

click fraud protection

създаването на сайта и го изпълва с някои елементи на дадена уеб страница, всеки ще се сблъска с термин като CSS-селектор.Той служи за определяне на най-точно всички елементи на HTML-файл на тяхното проектиране и разположение на страницата.За да направите това, създайте CSS-документ, който конкретизира някои селектори и техните опции за форматиране: цвят, размер, местоположение, и други.Всеки уеб дизайнер да знаете, и да може правилно да въведете датите на селектори.Те са разделени по тип, основните от които обсъждаме по-долу.

Видове селектори в CSS

В зависимост от това, което HTML-елемент се прилага форматиране, CSS-селектор могат да се отнасят към една от следните групи:

  • селектор тагове;
  • избора клас;
  • ID-селектор;
  • избора атрибути.

избора таг

Тя се нарича още "тип селектор" и "върху елемента", това е най-простите и често срещаните.Както си CSS-документ са имената на елементите на HTML-файл, който ще опишем.Например, ако имаме нужда, за да зададете стила точка, ние зададени свойства и техните стойности за елемент P {фон: X;Цвят: Y;Размер: Z}.В този случай, всички параграфи уеб страница ще има същия формат (цвят на фона, размера на шрифта и други подобни. Г.).

избора клас

Но какво, ако трябва да попитате всеки си точка се различава от другите стилове?За тази цел има селектор клас.

CSS-документ в този случай, ще съдържа запис, подобен на следния: p.first {цвят: X;размер на шрифта: Y}.По този начин, ние определяме качествата на "цвят" и "размер" само за една точка от клас на първо място.

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

избора ID

Често е налице необходимост да се определи стила по-точно, например на всеки един от елементите на една страница или в тяхната проба.В тази ситуация, помощта идва ID селектора.HTML файл The зададете желаното име позиция, която тя определя сред останалите.Например, елемент, който ние искаме да зададете стил различен от останалите, ще бъде водещ в статията.

Тогава присвоите HTML-документ идентификатор глава h1, като articlename.И в CSS-файла, за да зададете стил, добавяйки към идентификатор име решетка: #articlename {цвят: син;текст-приравни: център}.Сега нашата заглавие ще бъде синия цвят и центрира.

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

избора атрибути

допълнение към горното, има CSS-в Умение селектори - по-сложен начин да използват стилове.Тя позволява на HTML елементи за форматиране на избрания атрибут или стойност.Има няколко разновидности на този селектор:

  • от присъствието на атрибут;
  • на точното му стойност;
  • на частична стойност на атрибут;
  • на особената му стойност.

Нека разгледаме всеки един от тези сортове:

  1. първия случай.Форматирането се прилага, ако е налице специфична характеристика в HTML-кодът (тя може да бъде р, Разделение, глава и т.н.).Ако не е, тя използва общ за всички елементи на стила.Например, елементи с титлата (подсказка).
  2. втория случай.Стилът се прилага само за HTML-елементи, които са точните стойности мач атрибутите.Така например, за тези елементи на входа, при което стойността на вида приписват равно да представят.
  3. третия случай.Под формата ще включва само елементи от списъка на ценностите, които има определена дума.Например, Sidebar атрибут "клас" в DIV елементи.
  4. четвъртия случай.Style се определя само за тези елементи на HTML-документ, в който определен атрибут има определена стойност, и започва с него.Например, използването на определен цвят за всички елементи, атрибути, които на английски език (тя може да бъде ен, ен-Rus, ен-о и т. D.).

Така, с помощта на един или друг CSS-селектор най-добре може да бъде поставен в цяла уеб страница, и да се опишат някои от нейните елементи.