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

Креирање на веб-страница и полнејќи ја со некои елементи на веб-страница, секој ќе се соочи со мандат како CSS копче. Таа служи да попрецизно се утврдат сите елементи на HTML-датотека на нивниот дизајн и локација на оваа страница. Да го направите ова, се создаде CSS-документ со кој се искажува одредени селектори и нивните опции за форматирање: боја, големина, локација и други. Секој веб дизајнер треба да знае и да биде во можност правилно да го внесете саканото селекции. Тие се поделени по вид, главниот на кој ќе разговараат подолу.

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

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

• таг селектор;
• селектор класа;
• id копче;
• атрибут менувачот.

таг селектор

Исто така е наречен "селектор тип" или "елемент", тоа е најстариот едноставен и заеднички. Како неговиот CSS-документ се имињата на елементите на HTML-датотека, кои ги опишуваат. На пример, ако ние треба да го поставите стил на пасусот, ние наведете својства и нивните вредности за p елементот {background: x; боја: y; големина: z}. Во овој случај, сите ставови на веб-страница ќе имаат ист формат (боја на позадината, големината на текстот, и така натаму. Д.).

селектор класа

И што ако ви треба да прашате секој вашиот став е различен од другите стилови? За да го направите ова, постои селектор класа.

CSS-документот во овој случај ќе содржи запис на следнава форма: p.first {боја: x; font-size: y}. Така, ние се дефинираат карактеристиките на "боја" и "големина" само за прва класа став.

Во HTML-документот во овој случај влезе класа атрибут на име на стилот во прв план. Часовите може да биде колку што е стил сакате да се пријавите за веб-страница елементи.

селектор на проект

Често постои потреба да се дефинира стилот попрецизно, на пример за некој елемент на страница, или да ги тестираат. Во оваа ситуација, на помош доаѓа проект копче. датотека на HTML додели посакуваното име на елемент, кој го идентификува меѓу другите. На пример, елементите што сакаме да го поставите различни од другите стил ќе биде насловот на статијата.

Потоа, во HTML-документот доделување идентификатор Н1 насловот, како articlename. И во CSS датотека, наведете стил, додавање на решетка името ID: #articlename {боја: сина; текст-align: Центар}. Сега нашата наслов кој има сина боја и центрирана.

Секој од горенаведените видови може да се опише како "едноставен CSS копче". Тие ги дефинираат форматирање за одреден параметар на HTML-документот: заедно слични елементи (на пример, сите ставови на статијата), една класа (на пример, само во првиот став) или одредена точка (на пример, насловот на статија).

атрибут селектори

Во прилог на погоре, таму е CSS селектори атрибути - покомплицирано метод на стилови апликација. Таа им овозможува на HTML елементи формат на избраниот атрибут или вредност. Постојат неколку варијанти на овој селектор:

• од страна на присуство на атрибутот;
• на неговата точна вредност;
• со делумно вредноста на атрибутот;
• на својата специфична вредност.

Ајде да ја разгледаме секоја од овие видови:

1. Првиот случај. Форматирање се применува, доколку се присутни во одредена особина HTML-код (тоа може да биде p, div, насловот, итн.) Ако тоа не е, тоа го користи генерички за сите елементи на стил. На пример, за елементи кои носат насловот на (алатка врвот).
2. Вториот случај. Стилот важи само за HTML-елементи кои имаат точно одговараат на вредностите на атрибут. На пример, за внесување на елементи, каде што вредноста на атрибутот тип еднаква поднесе.
3. Третиот случај. Под формат ќе вклучуваат само ставки во листата на вредности кои ги има одреден збор. На пример, лента атрибутот "класа" за елементите div.
4. Четвртиот случај. Стил е дефиниран само за оние елементи на HTML-документот, чиј посебен атрибут има одредена вредност, и почнува со него. На пример, употребата на одреден боја на сите елементи кои јазик атрибут на англиски јазик (кој може да биде en, en-rus, en-о и т. Д).

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