Вы находитесь на странице: 1из 38

Компьютерные языки разметки

ОИТ
ЭКЗАМЕН
HTML, CSS, JS, XML, HTML-5

Доц. каф. ИСиТ Жиляк Надежда Александровна


311-1
Вложенность и
наследование в CSS.
Вложенность.
В хорошо структурированной каскадной таблицей стилей нет
необходимости применять множество классов или id
селекторов. Это возможно благодаря подробному изложению
свойств селекторов внутри других селекторов.

При создании веб-страницы часто приходится вкладывать одни


теги внутрь других. Чтобы стили для этих тегов использовались
корректно, помогут вложенные селекторы. Например, задать
стиль для тега <b> только когда он располагается внутри
контейнера <p>. Таким образом можно одновременно
установить стиль для отдельного тега, а также для тега, который
находится внутри другого.
Синтаксис:

Здесь E это родительский тег, а F — дочерний


тег, расположенный в контейнере <E>.
В этом случае стиль будет применяться к тегу
<F>, когда соблюдается следующий код
<E><F></F></E>.
Не обязательно должно быть два тега,
допускается произвольный уровень
вложения. При этом конструкция может
записываться так: div div ul li {...}.
Пример:
В примере ниже, один стиль указан для всех элементов p,
другой стиль указан для всех элементов с class="marked",
и третий стиль указан только для элементов p с
class="marked":
Наследование.

Наследованием называется перенос


правил форматирования для элементов,
находящихся внутри других.
Такие элементы являются дочерними, и
они наследуют некоторые стилевые
свойства своих родителей, внутри
которых располагаются.
Например, все элементы, расположенные внутри элемента
<body>, являются его дочерними элементами и потомками.
Если в стиле для <body> задать с помощью CSS свойства
color красный цвет текста, то цвет текста всех его дочерних
элементов и потомков тоже станет красным:
Наиболее удачным примером, на котором можно
наглядно исследовать нюансы наследования CSS,
является, на мой скромный взгляд, таблица html, которая
создается с помощью тегов table, tr и td.
Допустим, заданы свойства оформления для тега table:
Теперь составим простенькую таблицу из 4 ячеек:

На вебстранице она будет выглядеть следующим образом:


Для данной таблицы установлен зеленый цвет текста,
поэтому в ячейках слова приняли этот оттенок. Это
следствие того, что дочерний элемент тег td наследует
свойства своего родителя тега table. Но нужно понимать,
что не все стилевые свойства подвержены наследованию.

Например, border определяет рамку вокруг таблицы, но не


вокруг ячеек, поэтому эти ячейки не выделены рамкой
внутри таблицы. Также не наследуется свойство background.
Однако, в этом случае возникает вопрос: почему же цвет
фона ячеек приобрел песочный цвет, который указан в
качестве значения родительского тега table, если он не
наследуется?
Здесь все дело в том, что у свойства background в качестве
значения по умолчанию для тега td выступает transparent,
то есть прозрачность. Таким образом, цвет фона
родительского элемента “просматривается” сквозь фон
дочернего элемента, который является прозрачным.
Отмечу, что во многих случаях для большинства свойств CSS
предусмотрены значения по умолчанию. Поэтому, если для
какого-то свойства явно не заданы параметры, до вступает в
силу предусмотренное значение по умолчанию.

Наследование позволяет определять значения один раз,


задавая их для родительского элемента верхнего уровня.
Соседние селекторы

• Соседними называются элементы веб-


страницы, когда они следуют
непосредственно друг за другом в коде
документа.

E + F { Описание правил стиля }


• Для управления стилем соседних элементов
используется символ плюса (+), который
устанавливается между двумя селекторами E
и F.

• Пробелы вокруг плюса не обязательны.

• Стиль при такой записи применяется к


элементу F, но только в том случае, если он
является соседним для элемента E и следует
сразу после него.
Примеры:

<p>Lorem ipsum <b>dolor</b> sit amet.</p>

Тег <b> является дочерним по
отношению к тегу <p>, поскольку он
находится внутри этого контейнера.
Соответственно <p> выступает в
качестве родителя <b>.
<p>Lorem ipsum
<b>dolor</b>
<var>sit</var> amet.
</p>

• Теги <var> и <b> никак не перекрываются и
представляют собой соседние элементы.
То, что они расположены внутри
контейнера <p>, не влияет на их
отношение.
<p>Lorem
<b>ipsum </b>
dolor sit amet,
<i>consectetuer</i>
adipiscing
<tt>elit</tt>
</p>
• Соседними здесь являются теги <b> и <i>, а
также <i> и <tt>. При этом <b> и <tt> к
соседним элементам не относятся из-за того,
что между ними расположен контейнер <i>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Соседние селекторы</title>
<style>
b+i
{ color: red; /* Красный цвет текста */ }
</style>
</head>
<body>
<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
</body>
</html>
Родственные селекторы
E ~ F { Описание правил стиля }
 Стиль при такой записи применяется к элементу F в том случае, если он имеет
того же родителя, что и элемент E и следует сразу после него.

• Родственные селекторы по своему


поведению похожи на соседние селекторы
(запись вида E + F), но в отличие от них
стилевые правила применяются ко всем
близлежащим элементам.
Родственные селекторы
h1~p{ Описание правил стиля }

• Стиль будет применяться ко всем


элементам <p>, располагающихся после
заголовка <h1>.
• При этом <h1> и <p> должны иметь общего
родителя, так что если <p> вставить
внутрь <div>, то стили применяться уже не
будут.
Здесь красный цвет текста будет
установлен для всех абзацев.

h1 ~ p { color: red; }
<h1>Заголовок</h1>
<p>Абзац 1</p>
<p>Абзац 2</p>
Здесь красный цвет текста будет установлен для
первого и третьего абзацев. Ко второму абзацу стиль не
применяется, поскольку <h1> и <p> не имеют общего
родителя.

h1 ~ p { color: red; }
<h1>Заголовок</h1>
<p>Абзац 1</p>
<div>
<p>Абзац 2</p>
</div>
<p>Абзац 3</p>
<!DOCTYPE htm> /*все изображения изначально скрыты,
но отображаются если поставить в
<html> поле формы галочку.*/
<head>
<meta charset="utf-8">
<title>Селекторы</title>
<style>
img { display: none; }
#switch: checked ~ img { display: block; }
</style>
</head>
<body>
<form>
<input type="checkbox" id="switch"> <label for="switch">Показать
картинки</label> <img src="images/thumb1.jpg" alt="">
<img src="images/thumb2.jpg" alt=""> <img src="images/thumb3.jpg" alt="">
</form>
</body>
</html>
Универсальный селектор

• Иногда требуется установить одновременно один стиль для всех


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

* { Описание правил стиля }


Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Универсальный селектор</title>
<style>
* { margin: 0; padding: 0; /* Убираем отступы и поля для всех элементов */ }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.</p>
</body>
</html>
Мультиклассы

<E class="class1 class2 ...">


• Здесь E — обозначает любой тег.
• В стилях допустимо использовать запись
следующего вида.
• .class1.class2 { Описание правил стиля }
• В таком случае стиль применяется только для
элементов, у которых одновременно заданы
классы class1 и class2, т. е. в коде HTML
используется конструкция <E class="class1
class2>.
@-правила
@charset
@charset "кодировка";

• применяется для задания кодировки внешнего


CSS-файла.
• Это имеет значение в том случае, если в CSS-
файле используются символы национального
алфавита
Для внешней таблицы стилей браузер последовательно просматривает
следующие пункты для определения кодировки таблицы стилей:
1.кодировка, которую отдает сервер;
2.правило @charset;
3.атрибут charset тега <link>;
4.кодировка, установленная в документе через метатег
(<meta charset="utf-8">).
Приведенный список имеет четко выраженную иерархию — чем выше
находится пункт, тем выше его приоритет. Если ни один из пунктов не
найден, будет установлена кодировка UTF-8.
@font-face
@font-face { свойства шрифта }

• Внутри конструкции @font-face может
находиться набор свойств для изменения
параметров шрифта (font-family, font-
size, font-style и др.), а также ссылка на
шрифтовой файл.
• Ссылка записывается в виде src: url(URI), где
URI — относительный или абсолютный путь
к файлу.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@font-face</title>
<style>
@font-face { font-family: Pompadur; /* Имя шрифта */
src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ }
P { font-family: Pompadur; }
</style>
</head>
<body>
<p>Протяженность варьирует дорийский микрохроматический
интервал, но если бы песен было раз в пять меньше, было бы лучше для
всех.
</p>
</body>
</html>
@import
@import url("имя файла") [типы носителей];
@import "имя файла" [типы носителей];

• Правило @import позволяет импортировать
содержимое CSS-файла в текущую стилевую
таблицу. 
• @import не разрешается вставлять после
любых объявлений кроме @charset или
другого @import.
Типы носителя
Тип Описание
all Все типы. Это значение используется по умолчанию.

Речевые синтезаторы, а также программы для


aural воспроизведения текста вслух. Сюда, например, можно
отнести речевые браузеры.
Устройства, основанные на системе Брайля, которые
braille предназначены для слепых людей.
handheld Наладонные компьютеры и аналогичные им аппараты.
print Печатающие устройства вроде принтера.
projection Проектор.
screen Экран монитора.
tv Телевизор.
@media

• Правило @media позволяет указать тип


носителя, для которого будет применяться
указанный стиль.
• В качестве типов выступают различные
устройства, например, принтер, КПК,
монитор и др.
 Типы носителей и их описание
Тип Описание
all Все типы. Это значение используется по умолчанию.
Речевые синтезаторы, а также программы для
aural воспроизведения текста вслух. Сюда, например, можно
отнести речевые браузеры.
braille
Устройства, основанные на системе Брайля, которые
предназначены для слепых людей.
handheld Наладонные компьютеры и аналогичные им аппараты.
print Печатающие устройства вроде принтера.
projection Проектор.
screen Экран монитора.
tv Телевизор.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@media</title>
<link media="print,
handheld" rel="stylesheet" href="print.css">
<link media="screen" rel="stylesheet" href="main.css">
</head>
<body>
<p>...</p>
</body>
</html>
@page
@page [ { :left | :right | :first } ]
{ Значения отступов }

• Правило @page позволяет задать значение


полей при печати документа или для страниц,
у которых тип носителя задан как print.

Для установки полей на странице используется универсальное


свойство margin или его производные — margin-top, margin-right, margin-
bottom и margin-left, задающие соответственно отступ сверху, справа, снизу
и слева.
Отрицательное значение допускается, но часть страницы может оказаться
«отрезанной».
Свойства border и padding не применимы.
Спасибо за внимание!

Оценить