- •5. Каскадные таблицы стилей
- •1.Понятие таблицы стилей. Помещение таблицы стилей на страницу. Внутренние и внешние таблицы стилей.
- •2.Приоритет стилей. Атрибут style. Директивы @import и!important.
- •3.Единицы измерения в css.
- •4 Управление размером элементов с помощью css. Использование процентного размера.
- •5.Правила записи стилевых правил.
- •7. Форматирование шрифта с помощью css.
- •1.Форматирование абзацев с помощью css.
- •2.Управление цветом с помощью css.
- •3.Форматирование объектов с помощью css: отступы и границы.
- •4.Внешние и внутренние отступы в css.
- •5.Позиционирование с помощью css.
- •6.Управление видимостью объекта в css.
- •7.Графика с помощью css.
- •8.Оформление таблиц с помощью css.
- •9.Оформление списков с помощью css.
- •10.Плавающие элементы в css.
- •11.Построение навигационных меню с помощью css. Вертикальное меню.
- •12.Создание горизонтального навигационного меню с помощью css.
- •13.Разметка страницы с помощью css.
- •14.Сравнение табличной и блочной верстки.
- •15.Блочная фиксированная разметка с помощью css.
- •16.Блочная гибкая разметка с помощью css.
- •17.Применение абсолютного позиционирования на странице. Правило z-index.
- •18.Применение относительного позиционирования. Создание эффектов объема и тени.
- •19.Правило display. Его назначение и применение.
- •20.Управление стилями элементов htmLпо их атрибутам.
19.Правило display. Его назначение и применение.
Позволить параграфу генерировать контейнер линейного типа:
p.inline
{ display:inline; }
Свойство display указывает тип контейнера, который должен генерировать элемент.
Свойство display поддерживается всеми основными браузерами.
Замечание:
Значения "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" и "inherit" неподдерживаютсяв IE7 иболеераннихверсиях. IE8 требует объявления !DOCTYPE. IE9 поддерживает эти значения.
Значения Свойства:
None: Элемент вообще не будет генерировать какой-либо контейнер
Block: Элемент будет генерировать контейнер блочного типа (с пропуском строки перед и после элемента)
Inline: Элемент будет генерировать контейнер линейного типа (нет пропуска строки до и после элемента). Используется по умолчанию
inline-block: Элемент будет генерировать контейнер блочного типа, изображаемый как контейнер линейного типа
inline-table: Элемент будет генерировать контейнер линейного типа (наподобие <table>, без пропуска строки до и после)
list-item: Элемент будет генерировать контейнер блочного типа и контейнер линейного типа для маркера списка
run-in: Элемент будет генерировать контейнер блочного или линейного типа в зависимости от контекста
table: Элемент будет вести себя как таблица (наподобие <table>, с пропуском строки до и после)
table-caption: Элемент будет вести себя как заголовок таблицы (наподобие <caption>)
table-cell: Элемент будет вести себя как ячейка таблицы
table-column: Элемент будет вести себя как колонка таблицы
table-column-group: Элемент будет вести себя как группа колонок (наподобие <colgroup>)
table-footer-group: Элемент будет вести себя как группа строк нижней части (подвала) таблицы
table-header-group: Элемент будет вести себя как группа строк заголовка таблицы
table-row: Элемент будет вести себя как строка таблицы
table-row-group: Элемент будет вести себя как группа строк таблицы
inherit: Указывает, что значение свойства display должно наследоваться от родительского элемента
20.Управление стилями элементов htmLпо их атрибутам.
Когда браузер читает таблицу стилей, он форматирует документ в соответствии с ней.
Существует три способа вставки таблицы стилей:
-Внешняя таблица стилей
-Внутренняя таблица стилей
-Встроенный стиль
Внешняя Таблица Стилей
Внешняя таблица стилей идеально подходит, когда стили должны применяться ко многим страницам. С помощью внешней таблицы стилей , вы можете изменить вид целого Веб сайта путем редактирования одного файла. Каждая страница должна ссылаться на таблицу стилей, используя тег <link>. Тег<link>находитсяв head-секции:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать какие-либо html теги. Вашу таблицу стилей следует сохранить в файле с расширением .css. Пример файла таблицы стилей приведен ниже:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Не оставляйте пробелов между значением свойства и его единицами измерения! "margin-left:20 px" (вместо "margin-left:20px") будет работаеть в IE (браузере Internet Explorer), но не в браузерах Firefox или Opera.
Внутренняя Таблица Стилей
Внутренняя таблица стилей используется когда отдельный документ имеет уникальный стиль. Вы определяете внутренние стили в head-секции страницы HTML, используя тег <style>, например:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Встроенные Стили
Встроенный стиль теряет много преимуществ таблиц стилей, смешивая содержание с оформлением. Используйте этот метод в исключительных случаях!
Чтобы добавить встроенные стили, вы используете атрибут style в соответствующем теге. Атрибут style может содержать любое свойство CSS. Пример показывает как изменить цвет и левый отступ параграфа:
<p style="color:sienna;margin-left:20px">Этопараграф.</p>
Несколько Таблиц Стилей
Если некоторые свойства были установлены для одного и того же селектора в различных таблицах стилей, значения будут браться из более специфической таблицы стилей.
Например, внешняя таблица стилей имеет три свойства для селектора h3:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
И внутренняя таблица стилей имеет такие свойства для селектора h3:
h3
{
text-align:right;
font-size:20pt;
}
Если страница с внутренней таблицей стилей ссылается также и на внешнюю таблицу стилей, то свойства для h3 будут:
color:red;
text-align:right;
font-size:20pt;
Цвет берется из внешней таблицы стилей, а выравнивание текста и размер шрифта заменяются значениями из внутренней таблицы стилей.
Как Несколько Стилей Соединяются в Один
Стили могут быть указаны:
внутри HTML элемента
внутри head-секции страницы HTML
во внешнем CSS файле
Порядок соединения
Какой стиль будет использоваться, когда указано более одного стиля для HTML элемента?
Вообще говоря, можно сказать, что все стили "сольются" в новую "фактическую" таблицу стилей по следующим правилам, четвертое из которых имеет наивысший приоритет:
Стиль браузера по умолчанию
Внешняя таблица стилей
Внутренняя таблица стилей (в head-секции)
Встроенный стиль (внутри HTML элемента)
Такми образом, встроенный стиль (внутри HTML элемента) имеет наивысший приоритет, что означает, что этот стиль перепишет стиль указанный в теге <head>, или во внешней таблице стилей, или в браузере (значение по умолчанию).
Замечание: Если ссылка на внешнюю таблицу стилей помещается после внутренней таблицы стилей в секции <head>, внешний стиль перепишет внутрннюю таблицу стилей!