- •Учреждение образования «Гомельский государственный технический университет имени п.О. Сухого»
- •Проектирование и разработка web – сайтов
- •Html. Язык разметки гипертекста
- •1. Глобальные компьютерные сети
- •1.1 Интернет. Основные понятия, принципы функционирования
- •1.2 Адресация в Интернете
- •1.3 Архитектура web-приложений
- •1.4 Современные web - технологии
- •2. Язык гипертекстовой разметки страниц html
- •2.1 Язык гипертекстовой разметки страниц html
- •2.2 Структура html-документа
- •2.2 Задание типа html-документа
- •2.3 Основные элементы заголовка html-документа
- •2.4 Теги форматирования html-документа
- •2.5 Графические объекты html-документа
- •2.6 Задание ссылок
- •2.7 Структурированные данные. Списки
- •2.8 Структурированные данные. Таблицы
- •3. Язык гипертекстовой разметки страниц html. Фреймы
- •4. Язык гипертекстовой разметки страниц html. Формы
- •4.1 Задание формы
- •4.2 Элементы пользовательского интерфейса
- •4.3 Задание кнопок. Тег button
- •4.4 Раскрывающийся список. Тег select
- •4.5 Текстовая область. Тег textarea
- •Css. Каскадные таблицы стилей
- •5. Назначение стилевых таблиц
- •5.1 Встраивание таблиц стилей в html-документ
- •5.2 Типы селекторов
- •5.2.1 Универсальный селектор
- •5.2.2 Селектор типа
- •5.2.3 Селектор класса
- •5.2.4 Селектор идентификатора
- •5.2.5 Селектор атрибутов
- •5.2.6 Селектор псевдоклассов
- •5.2.7 Селекторы псевдоэлементов
- •5.2.8 Составные селекторы. Комбинаторы
- •5.2.9 Селектор потомка
- •5.2.10 Селектор дочерних элементов
- •5.2.11 Селекторcестринского элемента
- •5.2.12 Селектор обобщенных родственных элементов
- •5.3 Иерархия стилей
- •5.4 Единицы измерения
- •5.5 Описание шрифтов
- •5.6 Оформление списков
- •5.7 Задание цвета и фона
- •5.8 Блочная модель документа. Размеры, поля, отступы, границы
- •5.9 Блочная модель документа. Позиционирование, обтекание, управление видимостью
- •1. Вариант
- •2. Вариант
- •3. Вариант
- •6.1 Описание языкаHtml5
- •6.2 Структурные элементыHtml5
- •6.3Html5 и старые браузеры
- •6.4 Пример сайта наHtml5
- •7. Этапу разработки сайта
- •7.1 Этапы верстки веб-страниц
- •7.2 Особенности верстки веб-страниц
- •7.3 Макет сайта. Табличная верстка
- •7.4 Применение таблиц для верстки сайта. Макет из двух колонок
- •Vertical-align: top; /* Вертикальное выравнивание в ячейках */
- •Vertical-align: top; /* Вертикальное выравнивание в ячейках */
- •Vertical-align: top; /* Вертикальное выравнивание в ячейках */
- •7.5 Применение таблиц для верстки сайта. Макет из трех колонок
- •Vertical-align: top; /* Вертикальное выравнивание в ячейках */
- •Vertical-align: top; /* Выравнивание по верхнему краю ячейки */
- •Vertical-align: top; /* Выравнивание по верхнему краю ячейки */
- •7.6 Применение таблиц для создания рамок
- •7.7 Применение таблиц для склейки изображений
- •Литература
- •Содержание
5.2.8 Составные селекторы. Комбинаторы
Составные селекторы очень удобны, так как они позволяют выбирать элементы на основании их размещения в дереве документа. То есть при выборе можно, например, манипулировать такими понятиями как «является потомком», «следует за», «лежит непосредственно внутри». Если учесть, что вид и количество простых селекторов, связываемых комбинаторами, никто не ограничивает, то становится понятно, какой мощный инструмент вложили в наши руки разработчики CSS. Используя составные селекторы можно, допустим, задать стили для ссылки, на которую навели мышкой, внутри абзаца, который расположен сразу за заголовком h1. Для комбинации селекторов используются символы представленные в таблице 5.1.
Таблица 5.1 – Табличка комбинаторов
Обозначение |
Название соответствующего селектора |
Версия CSS |
пробел |
селектор потомка
|
2 |
> |
селектор дочерних элементов
|
2 |
+ |
селектор сестринского элемента
|
2 |
~ |
селектор обобщенных родственных элементов
|
3 |
5.2.9 Селектор потомка
Предназначены для выбора заданных потомков определенных элементов. Общий вид:
Селектор1 Селектор2 { описание }
Пример. Зададим цвет текста для тех элементов span, которые находятся внутри элементов p.
p span { color: #333; }
Селектор выбирает всех потомков не зависимо от их уровня вложенности. Например, применим вышестоящий CSS к такому коду:
<p>Черный текст <span>серый текст</span> черный текст </p>
<span>Черный текст</span>
<p>Черный текст <a href="#">Черный текст <span>серый текст</span> </a>черный текст</p>
На span, который находится внутри ссылки тоже будут распространятся заданные стили.
Цепочка селекторов потомка не ограничена двумя селекторами. Например, зададим цвет всем элементам span, среди предков которых есть элемент a, который в свою очередь вложен в элемент div:
div a span { color: #333; }
Из всех составных селекторов селектор потомков употребляется чаще всего. С помощью него можно разграничить область влияния стилей.
Например: Задать стили который применяется только для всех li внутри контейнера с классом mainMenu.
.mainMenu li { float: left; }
Не нужно злоупотреблять вложенностью селекторов. Чем проще селекторы, тем быстрее их обработка браузером.
5.2.10 Селектор дочерних элементов
Предназначены для выбора дочерних элементов. Cелектор дочернего элемента выбирает потомков только первого уровня – то есть непосредственно вложенные элементы. Общий вид:
Селектор1 > Селектор2 { описание }
Пример. Зададим отступ слева для списка, непосредственно вложенного в элемент с классом content (на списки второго уровня вложенности эти правила не подействуют):
.content > ul {margin-left: 20px;}
Применяется, как правило, для уменьшения объема CSS, там, где нужно разделить стили непосредственно вложенных элементов и элементов второго (и более) уровня вложенности. Например, при оформлении вложенных списков (допустим, выпадающих меню). Еще одно применение – специфическое оформление элементов с известными заранее родителями/
5.2.11 Селекторcестринского элемента
Предназначены для выбора элемента, расположенного непосредственно за другим заданным элементом и имеющего с ним общего родителя. Общий вид:
Селектор1 + Селектор2 { описание }
Пример. Выделить жирным текстом элемент span, следующий сразу после заголовка h1 (при условии, что у них есть общий родитель):
h1 + span { font-weight: bold;}
Этот span будет жирным.
<h1>Очень полезная статья</h1>
<span>Тут указан, например, автор. Жирный текст</span>
<p>Далее идет текст статьи</p>
Этот span не будет выделен жирным – между ним и h1 имеется дополнительный элемент.
<h1>Очень полезная статья</h1>
Далее идет текст статьи.
<span>Мы с h1 сестринские?</span>