Авторский знак. 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


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

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

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

• селекторы типов (элементов);

• контекстные селекторы (потомки, дочерние элементы и элементы-братья);

• селекторы классов и селекторы идентификаторов (ID);

• селекторы атрибутов;

• псевдоклассы;

• псевдоэлементы.

Селектор типа (элемента) в CSS.

Наиболее понятный селектор - это селектор типа, который ссылается на элемент по имени, как показано в приведенных примерах:

                    h1 {
                        color: blue;
                       } 
                     
                    h2 {
                        color: blue;
                        } 
                        
                    p {
                        color: blue;
                        }

Селекторы типов можно объединять в списки, разделяя их запятыми, чтобы одно свойство применялось ко всем этим элементам страниц сайта. Следующий код будет давать тот же эффект, что и предыдущий:

        
                    h1, h2, р {
                         color: blue;
                         }

В CSS 2 появился универсальный селектор элементов (*), который соответствует любому элементу (как шаблон). Стилевое правило * {color: gray} делает все элементы документа серыми.

Контекстные селекторы в CSS.

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

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

Селекторы потомков страниц сайта указывают на элементы, которые содержатся внутри (и следовательно, являются потомками) другого элемента страниц сайта. Они образуют список страниц сайта, разделенный символами пробела (который является комбинатором для селекторов потомков), начиная с элемента верхнего уровня. Например, в следующем правиле указывается, что элементы еm должны быть оливкового цвета, но только в том случае, если они являются потомками пункта списка li страниц сайта. Все прочие элементы страниц сайта еm данное правило не затрагивает:

                     li em {
                            color: olive;
                            }

Как и простые селекторы типов, контекстные селекторы могут объединяться в списки и разделяться запятыми. В следующем примере выделенный текст еm становится красным только в том случае, если он находится в заголовке первого, второго или третьего уровня:

                     h1 em, h2 em, h3 em {
                            color: red;
                            }

Селекторы потомков могут также иметь несколько уровней вложения, как показано в следующем примере, где выбирается только выделенный текст еm, находящийся внутри анкеров а, находящихся внутри сортированных списков ol:

                     ol a em {
                            font-weight: bold;
                            }

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


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
... ... ...

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

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