Типы селекторов и категории свойств CSS Рассматриваемые

Применение классов Удобно для единообразного оформления однотипных элементов, но не всех таких тегов Для различных типов ссылок (кнопок, меню и т. п. ) Для «врезок» на страницу ( «новый товар» , «breaking news» и т. п. ) одного тега может быть несколько классов одновременно, их имена указываются в значении атрибута через пробел: У <Тег class=“класс1 класс2 …”>. . .

Селекторы идентификаторов Описание совместно с тегом: Тег#идент { свойство 1: значение; . . . } В CSS: В HTML: <Тег id=“идент”>. . . Данный класс можно применять только с указанным тегом Описание без тега #идент { свойство 1: значение; . . . } В CSS: В HTML: <Любой. Тег id=“идент”> … Можно применять с любыми тегами Один идентификатор можно использовать на странице только один раз

Примеры идентификаторов Ul#menu { width: 200 px; height: 100 px; border: 1 px; } #right. Col { float: right; } …

Главная Новости

Применение идентификаторов Используются для настройки стиля одного уникального элемента страницы Часто используются для блочной вёрстки Используется для выделения «особенных» элементов страницы (например, ссылка «Сделать заказ» и т. п. ) У одного тега может быть и класс, и идентификатор одновременно

Селекторы атрибутов Применяются для стилевого оформления тегов с определёнными атрибутами и даже определёнными значениями 4 варианта применения: Для тега с указанным атрибутом (значение не рассматривается) Для тега с указанным атрибутом и указанным значением Для тега с указанным атрибутом и указанным фрагментом значения В начале значения В конце значения В любом месте значения

Селекторы атрибутов В CSS: Тег[атрибут] { свойство 1: значение; . . . } Тег[атрибут=“значение”] { … } /* точное совпадение */ Тег[атрибут^=“значение”] { … } /* совпадение с началом */ Тег[атрибут$=“значение”] { … } /* совпадение с концом */ Тег[атрибут*=“значение”] { … } /*совпадение в любом месте*/ В HTML: <Тег атрибут=“значение”> Можно указывать как с тегом, так и без тега. Применение аналогично классам и идентификаторам

Применение Типовые случаи: Оформление HTML-форм (полей для ввода информации), т. к. для разных элементов форм используется один и тот же тег, но с разными атрибутами - текстовое поле - флажок И т. п. Оформление ссылок с разными адресами (внешних и внутренних, на разные домены и т. п. ) См. примеры в справочнике, раздел «Селекторы атрибутов»

Иерархия элементов HTML Отношения между элементами: родительские-дочерние предки-потомки соседние (сестринские) Дочерний элемент вложен непосредственно в родительский

Новая версия языка

Новая 5 -я версия языка

Иерархия элементов HTML Дочерние элементы являются одновременно и потомками своих родителей Соседние элементы - теги, кот. находятся непосредственно друг за другом

Новая 5 -я версия языка

Иерархия элементов HTML

Отношение между селекторами Контекстные (для отношения предок- потомок) Дочерние (для дочерних элементов) Соседние

Контекстные селекторы Синтаксис: Тег 1 Тег 2 {. . . } Стиль будет описан для Тега 2 и будет применён только в том случае, если он нахся внутри Тега 1 Правила применения: <Тег 1> <Тег 2>. . . Допускается и б. Ольшая вложенность тегов Возможно использование других селекторов (селекторы классов и идентификаторов)

Применение При вёрстке реальных макетов со сложной структурой Ограничивают «область видимости» стилей Облегчает описание стилей конкретных элементов, позволяет избавиться от лишних классов и идентификаторов

Дочерние селекторы Расположен, в дереве элементов, непосредственно сразу после родительского тега (вложенность 1 -го уровня) Синтаксис: Селектор 1 > Селектор 2 { Описание правил стиля } Стиль описывается для Селектора 2 Все дочерние селекторы также являются контекстными Дочерние селекторы не поддерживаются браузером Internet Explorer <= 6 версии .

Соседние селекторы Отношение соседства: <Тег 1>. . . <Тег 2>. . . Синтаксис: Селектор 1 + Селектор 2 { Описание правил стиля } Стиль описывается для селектора 2 Не поддерживаются IE <= 6 Удобны для использования при регулировании отступов

Применение Можно задать вертикальные отступы (расстояние) между соседними элементами на странице

Правила стиля, описанное для составных селекторов, применяется всегда для самого последнего (правого) селектора

Псевдоклассы

Псевдоэлементы

Категории свойств Стили текста и шрифта (размер, гарнитура, межстрочный интервал, выравнивание, начертание и т. п. ) Изменение размеров, типа элементов (блочный, строчный), расположения, позиции относительно других элементов Отступы и поля Границы и рамки, тени, скругление углов Цвета текста и фона, картинки фона, градиенты

Параметры шрифта Font-family – гарнитура (семейство) шрифта Font-size – размер шрифта (в пикселях, пунктах и т. п. ) Font-style – можно задать курсив Font-weight – жирность Универсальное свойство font позволяет задать сразу все указанные параметры шрифта

Параметры текста text-align – выравнивание текста text-decoration – надчёркивание, зачёркивание, подчёркивание текста text-indent – отступ красной строки text-transform – перевод символов в верхний или нижний регистр и т. п. Text-shadow – тень под текстом letter-spacing – промежуток между символами в тексте line-height – межстрочный интервал

Цвет текста и фона Color – цвет текста Background-color – цвет фона

Настройка фона Background-color – цвет background-image – фоновая картинка background-position – смещение фонового изображения по х и у background-repeat – повторение фоновой картинки background-attachment – привязка фона (можно сделать фон, кот. не прокручивается с текстом)

Границы и рамки Border-width – толщина рамки Border-color – цвет рамки Border-style – стиль рамки (сплошная, пунктирная, точечная и т. п. ) Задать можно как параметры границ со всех 4 х сторон или с каждой стороны отдельно (например, border-right-width) Можно использовать универсальные свойства border – для всех параметров всех сторон рамки, border-left и т. п. – для настроек всех параметров рамки с одной стороны Border-left-width и т. п. – для настройки 1 -го конкретного параметра рамки с 1 -й стороны

Структура блока в CSS

Поля элемента (padding) Задаёт расстояние между рамкой и содержимым (внутреннее поле) Задаётся в пикселях (px), % или др. единицах CSS свойства: Padding (универсальное) – поля со всех сторон Padding-left, padding-bottom и др. – поля с одной стороны

Отступы (margin) Задаёт размер внешнего отступа от рамки одного элемента до границы другого Задаётся в пикселях (px), % или др. единицах Может быть отрицательным – для эффекта наложения блоков CSS: Margin-left, margin-top и т. п.