2014-02-13
400
Импорт описания стилей
Ссылка на внешнее описание
Ссылка на описание стиля, расположенного за пределами документа, осуществляется при помощи элемента LINK, который размещают в элементе HEAD. Внешнее описание может представлять собой файл, содержащий описание стилей. Описание стилей в этом файле будет по синтаксису в точности совпадать с содержанием элемента STYLE.
Ниже приведен пример ссылки на внешнее описание стилей:
<LINK TYPE="text/css" REL="stylesheet" HREF="https://intuit.ru/my_css.css">Здесь важны значения атрибутов REL и TYPE. Атрибут REL должен иметь значение stylesheet. Type может принимать значения text/css или text/javascript. Второй тип описания стилей введен Netscape. Его мы в данном учебном курсе не обсуждаем.
Атрибут HREF задает универсальный локатор ресурса (URL) для внешнего файла описания стилей. Это может быть ссылка на файл с любым именем, а не только на файл с расширением *.css.
Импорт описателей стилей в некотором смысле составляет конкуренцию представленному выше указанию на внешний описатель стиля.
|
|
|
Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей:
<STYLE>@import:url(https://intuit.ru/style.css)A { color:cyan;text-decoration:underline; }</STYLE>Импортируемый стиль можно переопределить либо через описатель элемента в STYLE, либо через атрибут элемента STYLE.
| Свойства CSS | ПРИМЕЧАНИЯ | Internet Explorer | Opera7.5 | Mozilla Firefox |
| Свойства шрифта элементов сайта | ||||
| Цвет шрифта [color] | + | + | + | |
| Размер шрифта [font-size] | + | + | + | |
| Толщина символов [font-weight] | ||||
| Начертание [font-family] | Если указать URL(file), то шрифт автоматически установится на компьютер пользователя | + | + | + |
| Наклон [font-style] | + | + | + | |
| Подчеркивание [text-decoration] | Значение "blink" работает по- разному в различных браузерах | + | + | + |
| Расстояние между буквами [letter-spacing] | Доступны отрицательные значения | + | + | + |
| Межстрочный интервал | + | + | + | |
| Заглавные буквы [font-variant] | По-разному отображаются в различных браузерах | + | + | + |
| Преобразование шрифта | + | + | + | |
| Свойства фона и цвет элементов сайта | ||||
| Цвет фона [background-color] | + | + | + | |
| Фоновое изображение [background-image] | + | + | + | |
| Прокручивание фона [background-attachment] | Значение "fixed;" работает только с тегом <body> | + | + | + |
| Положение фонового изображения [background-position] | + | + | + | |
| Повторение фонового изображения [background-repeat] | + | + | + | |
| Положение фонового изображение по X | + | - | - | |
| Положение фонового изображение по Y | + | - | - | |
| Границы элементов сайта | ||||
| Общее обрамление [border] | (Задает ширину, стиль и цвет всех четырех границ элемента одновременно) | + | + | - |
| Толщина обрамления [border-width] | + | + | + | |
| Цвет обрамления [border-color] | + | + | + | |
| Стиль обрамления [border-style] | + | + | + | |
| Верхняя граница [border-top] | + | + | - | |
| Нижняя граница [border-bottom] | + | + | - | |
| Правая граница [border-right] | + | + | - | |
| Левая граница [border-left]: | + | + | - | |
| Позиционирование блоков (элементов) сайта | ||||
| Внешние отступы [margin] | Доступны отрицательные значения | + | + | + |
| Тип контейнера [display] | + | + | + | |
| Общая ширина [width] | + | + | + | |
| Общая высота [height] | + | + | + | |
| Метод позиционирования [position] | + | + | + | |
| Выравнивание [float] | + | + | + | |
| Смещения | Доступны отрицательные значения | + | + | + |
| Расположение [clear] | + | + | + | |
| Координаты прямоугольника, в котором выводится содержимое элемента | Обычно применяется в области програм-мирования на Java Scripts | + | + | + |
| Поведение | + | + | + | |
| Порядок вывода (наложения) элементов друг на друга [z-index] | Чем больше значение z-index, тем ближе к наблюдателю находится слой. | + | - | + |
| Расположение текста внутри элементов (блоков) сайта | ||||
| Внутренний отступ [padding] | Значение работает в различных браузерах - по разному | + | + | + |
| Горизонтальное выравнивание текста [text-align] | + | + | + | |
| Вертикальное выравнивание текста [vertical-align] | Обычно используется для вертикального выравнивания текста внутри столбцов и ячеек таблиц, также работает для вертикального расположения маркеров (list-item) внутри блока | |||
| Смещение текста | + | + | + | |
| Другие настройки элементов сайта | ||||
| Маркер списка [list-style-type] | + | + | + | |
| Маркер списка (изображение) [list-style-image] | + | + | + | |
| Расположение маркеров | + | + | + | |
| Обработка пробелов в элементах сайта | + | + | + | |
| Вид курсора | Если указать URL(file), то возможно использовать любой Ваш курсор | + | + | - |
| Фильтры | Чтобы работало, бывает необходимо указать ширину и высоту объекта | + | - | - |
| Полосы прокрутки элементов сайта | ||||
| Полосы прокрутки | Для того чтобы придать цвета основному скролу, установите соответствующие значения для тега <body> | + | - | - |
|
|
|
