Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31


Чувашия-это моя Россия

Селекторы в CSS.

(продолжение)

Селектор дочерних элементов в CSS.

Селектор дочерних элементов сходен с селектором потомков страниц сайта, но он ссылается только на непосредственных потомков данного элемента. Элемент должен быть прямо внутри элемента верхнего уровня, без элементов других уровней между ними. Селекторы дочерних элементов разделяются символами «больше» (>). Правило, приведенное в следующем примере, делает серым цвет фона выделенного текста еm, но только если этот текст является дочерним элементом абзаца (р):

                     р > em {
                              background-color: gray;
                              }

В следующем примере разметки только первый экземпляр элемента еm получает серый цвет фона, так как второй экземпляр является потомком внедренного элемента strong, то выделенный шриф не является непосредственным дочерним элементом( тегом) абзаца p.

< p>Я бы хотел < em>узнать< /em> как лучше оформить.< strong>Я буду знать< em>и в этом я уверен.< /em>< /strong>< /p>

Селектор элементов-братьев.

Селектор элементов-братьев используется для ссылки на элемент, идущий сразу после другого элемента, имеющего того же родителя. Как мы уже говорили, комбинатором для таких селекторов служит знак «плюс» (+). Например, если Вы хотите сделать специальное оформление для абзаца, идущего после заголовка второго уровня, правило должно быть таким:

                     h2 + р {
                              padding-left: 50px;
                              }

Селекторы классов и идентификаторов.

Селекторы классов class и селекторы идентификаторов id дают возможность указывать элементы, имя которым присвоили сами, независимо от элементов документа сайта. Имена элементам присваиваются с помощью атрибутов class и id. Эти атрибуты могут использоваться во всех XHTML-элементах, за исключением base, head, html, meta, script, style и title. Кроме того, атрибут class не может применяться в элементах basefont и param.

Селектор классов.

Используйте атрибут class для того, чтобы объединить несколько элементов в логическую группу. Элементы страниц Вашего сайта такого класса затем можно будет изменять при помощи одного стилевого правила. Например, Вы можете классифицировать некоторые элементы как class="special". Допустим, есть такой блок < div class="special">< /p>, то редактировать данный блок легко и просто указав следующим образом:

                  div.special {
                               padding-left: 50px;
                               margin: 25px 35px 25px 35px;
                               color: #03C;
	                           font-size: 24px;
	                           font-family: Georgia, "Times New Roman", Times, serif;
	                           }
                               

Как видите, чтобы указать стиль, используемый для элементов конкретного класса, добавляется название класса к селектору типов, отделив его точкой (.) для других элементов:

                     h2.special {
                               color: red;
                               } 
                     p.special {
                               color: red;
                               } 
                               
                  Чтобы применить свойство ко всем элементам страниц сайта
                  одного класса, опустите имя тега в селекторе (обязательно 
                  оставьте точку, она обозначает класс): 
                  
                       .special {
                               color: red;
                               }

Отметьте, что имя в атрибуте class не может содержать пробелов. При необходимости используйте вместо них тире или символ подчеркивания. Выбирая название для класса, делайте его осмысленным. Например, такое имя, как redtext (красный текст), просто заново введет в документ сайта стилевую информацию и никак не опишет данные, содержащиеся в элементе. Также при изменении дизайна в будущем может возникнуть путаница, если цвет таких элементов будет изменен на синий.

Надо запомнить, что нельзя применять при создании и оформлении стандартные слова любого языка программирования и табличные названия слов на английском, чтобы у Вас не возникли непонятные ошибки в ходе тестирования.

Не следует слишком увлекаться созданием классов. Во многих случаях вместо них можно использовать селекторы с более высокой специфичностью, такие, как контекстные селекторы или селекторы атрибутов.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно    назад    дальше     продолжение темы

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: