Типове селектори, селектори, свойства на селектора, Css

Има общо седем вида селектори. Това:

• Селектор на етикети
• селектор на клас
• Селектор >

Най-простият - изписва се като името на тага без ъглови скоби. Например div.

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

Ако трябва да зададем някакъв абзац, да кажем, фон. След това можем да използваме селектора на клас. Но преди да напишем правилата, имаме нужда от етикета

на този параграф, напишете атрибут на класа, в чиято стойност можете да напишете всичко, което искате (в допълнение към латинските букви, можете да използвате тире и цифри), но трябва да дадете име на нашия селектор, така че по-късно да стане ясно за какво се отнася. След това в таблицата със стилове или в тага на нашия документ между тях пишем точка и след нея стойността на атрибута на класа, а във фигурни скоби задаваме правилата за този параграф. Ако документът:

, след това в листа със стилове:

Първото нещо, което трябва да се отбележи е, че стойността на атрибута id в HTML е уникална. За разлика от класа, не можем да го присвоим към нито един таг, а само към един! В листа със стилове той се показва като знак за паунд, а в документа трябва да добавите атрибута id към тага с някаква стойност. Ако документът:

Универсалният селектор е изписан със звездичка. Ако зададете правила за този селектор в таблицата, тогава това правило ще се приложи към съдържанието на всички тагове. * … >

Всички тези четири вида селектори работят във всички браузъри днес. Но има селектори, които не работят навсякъде, например в Internet Explorer версии 7.6 и по-ниски.

Те са написани така:

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

Все едно към етикета

ще бъдат приложени правилата, които са записани в селектора [title]. Ако искате правилата да се прилагат към атрибут (например заглавие) с конкретна стойност, тогава трябва да го напишете по следния начин:

Ако искате правилата да се прилагат към съдържанието на конкретен таг с някакъв атрибут (например заглавие), който има конкретна стойност, тогава трябва да го напишете по следния начин:

Ако искаме правилата да се прилагат към съдържанието на тагове с атрибут title (или друг атрибут), чиято стойност съдържа цяла дума, тогава трябва да го напишем така:

Ако искаме правилата да се приложат към съдържанието на таг, който има атрибут title (или друг), в чиято стойност няма цяла дума, а само някакъв текст (например думата Caspian съдържа Caspian). След това трябва да го напишете така:

Ако искаме правилата да се прилагат към съдържанието на таг, който има атрибут заглавие (или друг), чиято стойност започва с някои знаци (букви). След това трябва да го напишете така:

Ако искаме правилата да се прилагат към съдържанието на таг, който има атрибут заглавие (или друг), чиято стойност завършва с някои знаци (букви). След това трябва да го напишете така:

Селекторите на атрибути са много мощен инструмент, който за съжаление сега не се използва широко "благодарение" на Microsoft и неговия IE 6.7 и по-стари версии. Но скоро, когато IE версии 6.7 и по-ниски най-накрая умрат, тези селектори ще навлязат твърдо в CSS и ще бъдат широко използвани.

:link styles недокоснати връзки от потребителя.

С това влизане ниеказваме, че всички недокоснати от потребителя връзки в документа или документите ще бъдат оцветени в синьо.

:visited - форматира връзки, които потребителят вече е посетил.

С този запис казваме, че всички връзки, които потребителят вече е щракнал (минал през), ще бъдат оцветени в червено.

:active задава активния елемент (в момента на щракване с мишката). Може да се приложи към всеки елемент, но в IE 6 работи само за хипервръзки.

С този запис казваме, че всички параграфи в момента на кликване върху тях с мишката ще бъдат оцветени в червено (букви).

:hover - изобразява елемент, когато потребителят задържи курсора на мишката върху него. Може да се приложи и към всеки елемент, но в IE 6 работи само за хипервръзки.

:focus - изобразява форми и хипервръзки, когато натиснете клавиша "Tab". Не работи в IE 6 и 7

Когато натиснете Tab, текстът в елементите ще бъде червен

ще стане червено.

Има само два селектора на псевдоелементи. Това са :first-line и :first-letter :first-line е първият ред (ред) :first-letter е първият знак Ако е написано:

във всички параграфи на документа или документите първите редове ще станат сини.

във всички параграфи първите букви ще станат сини. И двата селектора не работят в IE 6.

---