Добавление стиля в HTML-документ
Добавление стиля в HTML-документ
<link rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css" >
<link rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
<link rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
<link rel="stylesheet" href="common.css" type="text/css">
<style type="text/css">
p.special {
color: rgb(230, 100, 180);
}
</style>
- Какие таблицы стилей присутствуют?
- Если пользователь выбирает таблицу «compact», какие стили должен использовать браузер?
Селекторы
- Селектор типа
- Универсальный селектор
- Селектор атрибутов
- Селектор класса
- Селектор ID
Селекторы
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
p.Bordered { border: solid 1px black; }
.Bordered.dashed {border-style: dashed; }
#grayBorder { border-color: gray; }
</style> ... </head>
<body>
<p class="Bordered">
Это абзац класса Bordered</p>
<p class="Bordered dashed">
Это абзац классов Bordered и dashed</p>
<p id="grayBorder" class="Bordered dashed">
Это абзац классов Bordered и dashed, имеющий также id</p>
</body> </html>
Комбинаторы
- Потомки
- Соседи
ПРИМЕР
Специфичность и порядок применения правил
Задание
ДАН КОД
Пользуясь комбинаторами, назначить следующие стилевые свойства:
- непрямым потомкам секции со сплошной рамкой – зеленый цвет;
- прямым потомкам секции со сплошной рамкой – красный цвет;
- заголовку 2-го уровня, идущему сразу за заголовком 1 –го уровня – меньший отступ;
- заголовку в секции с точечной рамкой – размер шрифта 24 pt;
- элементам вложенного списка – курсивное начертание.
Необходимо ответить на вопрос и задать свой по материалу лекции. Вот первый вопрос.
Какая директива определяет размеры, ориентацию и поля печатной страницы?
Page
Как обозначается универсальный селектор, и для чего он нужен?
Описание
Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы.
Синтаксис
* { Описание правил стиля }
Для обозначения универсального селектора применяется символ звездочки (*). В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.
Селектор ID
Атрибут ID задает HTML элементу уникальный в пределах документа идентификатор, который может быть использован в различных целях, в частности, для задания стиля этому элементу. Значение атрибута ID отделяется от имени HTML-элемента символом #.
Позиционирование управление размещением блоков на странице. Типы.
left — при абсолютном позиционировании задает расстояние от левого края экрана.
top — при абсолютном позиционировании задает расстояние от верхнего края экрана.
width — ширина
height — высота
visibility — видимость слоя. «visible» — видимый, «hidden» — не видим. По умолчанию все слои видимы.
z-index — положение слоя относительно плоскости листа. Слой с индексом «3» будет помещен над слоем с индексом «2». Можно задать и отрицательный индекс, тогда слой будет помещен под таблицы с текстом. При отрицательном значении слой располагается под плоскостью страницы, но над фоном. Очень интересное свойство, особенно если его использовать вместе с движением обьекта. Получается эффект подвижного или изменяющегося фона. При задании различных положительных значений для разных слоев, мы можем помещать слои друг над другом — как в Фотошопе.
background-color — фоновый цвет слоя. Заливка, как у таблиц.
background-image — фоновый рисунок, как в таблице.
Селектор атрибутов.
Выполняемая задача — выбор всех элементов по наличию или значению заданного атрибута.
Обозначение — запись, определяющая тип селектора в квадратных скобках.
Селектор класса?
Селекторы класса
Обычные классы
Селекторы класса позволяют задавать различные стилевые описания для одного и того же HTML-элемента. Название класса указывается после названия элемента и отделяется точкой.
div.red { color: #FF0000; }
div.blue { color: #0000FF; }
div.fantasy { color: rosybrown; font-size: 24px; }
Универсальный селектор класса
При определении с помощью универсального селектора класс не связывается с конкретным элементом. Такой класс можно применять с любыми элементами, для которых объявленные стилевые свойства имеют смысл. Формально, в таком описании вместо имени элемента следует ставить символ * , например,
*.spring { color: mediumspringgreen; },
однако на практике допустима следующая запись без * :
.spring { color: mediumspringgreen; }
Селектор типа?
имя_эл-та {……} h1{color:red;}
Правила css ?
правило import- присоединяет другую таблицу стилей
правило media- применит содержимое к определенному типу медиа, например, к печати
правило charset- просто устанавливает кодировку внешней таблицы стилей
правило font-face- используется для детального описания шрифта и может использоваться для внедрения внешнего шрифта в ваш CSS
правило page регулирует постраничные медиа и является продвинутым способом применять стили к печатным медиа
Когда применяется принцип каскадирования?
Принцип каскадирования применяется в случае, когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты, вводятся правила приоритета.