Использование в веб-страницах
Существует три способа применения таблицы стилей к документу HTML: Встраивание (Inline). Этот метод позволяет применить стиль к заданному тегу HTML. Внедрение (Embedded). Внедрение позволяет управлять стилями страницы целиком. Связывание (Linked или External). Связанная таблица стилей позволяет вынести описание стилей во внешний файл, ссылаясь на который можно контролировать отображение всех страниц сайта.
Встроенные стили
Встраивание стилей предоставляет максимальный контроль над всеми элементами веб-страницы. Встроенный стиль применяется к любому тегу HTML с помощью атрибута style следующим образом:
<p style="font: 12pt Courier">Это текст с кеглем 12 точек и гарнитурой Courier</P>
Пример:
<div style="font-family: Garamond; font-size: 18 pt;>"
Весь текст в этом разделе имеет размер 18 точек и шрифт Garamond. <span style="color:#ff3300;">
А этот фрагмент еще и выделен красным цветом.</span>
</div>
Встроенные стили полезны, когда необходима тонкая настройка отображения некоторого элемента страницы или небольшой веб-страницы.
Внедренные стили
Внедренные стили используют тег <style>, который обычно размещают в заголовке HTML-документа (<head>...</head>):
<html><head>
... <style>
правила CSS
</style> ...
</head><body> ...
Связанные таблицы стилей
Связанные (linked), или внешние (external) таблицы стилей — наиболее удобное решение, когда речь идет об оформлении целого сайта. Описание правил помещается в отдельный файл (обычно, но не обязательно, с расширением .css). С помощью тега <link> выполняется связывание этой таблицы стилей с каждой страницей, где ее необходимо применить, например так:
|
|
|
<link rel=stylesheet href="sample.css" type="text/css"> Любая страница, содержащая такую связь, будет оформлена в соответствии со стилями, указанными в файле sample.css. Следует отметить, что файл со стилями физически может находиться на другом веб-сервере, тогда в href нужно указать абсолютный путь к нему. Проблемы с браузерами Обязательно просматривайте страницы с таблицами стилей в различных браузерах. Это связано с тем, что разные браузеры могут по разному интерпретировать одно и то же правило, а некоторые свойства и/или значения и вовсе не поддерживать. Следует также тестировать страницы с отключенными стилями (например, в текстовых браузерах), чтобы убедиться, что страница читабельна. И снова каскадирование
Если вам нужна сотня-другая-третья страниц HTML — используйте внешнюю, глобальную, таблицу стилей. Если некоторые из этих страниц требуют корректировки общего оформления — используйте внедренный стиль. А если на странице нужно явно изменить оформление одного-двух элементов, то применяйте встроенные стили. Именно в таком порядке происходит перекрытие стилей при каскадировании, схематично это можно представить так: связанные стили -> внедренные стили -> встроенные стили.
|
|
|
Аппаратно-зависимые стили
Таблицы стилей могут применяться для управления отображением содержимого в зависимости от используемого устройства вывода (монитор, проектор, устройство печати, звуковой синтезатор и т.п.). Для этого в описание стилей включить тип устройства, например так:
@media print {/* печатающее устройство */ BODY { font-size: 10pt; } } @media screen { /* монитор */ BODY { font-size: 12pt; } }
@media screen, print { BODY { line-height: 1.2; } } @media all { BODY { margin: 1pt; } }
Как видно из примера, вся таблица разбивается на секции, каждая из которых начинается со слова @media, за которым следует название класса устройств и далее, в фигурных скобках, непосредственно описание стилей. Можно разделить таблицы стилей иначе, указав тип устройства в теге <link>:
<link rel=stylesheet href="sample.css" type="text/css" media=”screen”>
Позиционирование элементов
Рассмотрим пример, приведенный в Листинге 4 из ЛР №4. В этом примере фрагменты содержимого размещены в блочных элементах <div>, для которых переопределены стили свойств, определяющих положение на странице. Если отключить эти стили, то вид страницы сильно изменится (рисунок 2).
|
|
|
Рисунок 2. Вид страницы с отключенными стилями
Такое влияние на внешний вид оказывает свойство position. Это свойство в сочетании со свойствами left, top, right, bottom, display, clear и ряда других позволяет управлять положением элементов на странице и порядком их вывода. Свойство position может принимать такие значения: static — нормальное положение Данный блок является обычным блоком, он отображается согласно общим правилам. Свойства 'left' и 'top' не применяются. relative — относительное позиционирование Положение блока рассчитывается в соответствии с нормальным потоком вывода. Затем блок смещается относительно своего нормального (static) положения. absolute — абсолютное позиционирование Положение блока (возможно и размер) указывается с помощью свойств 'left', 'right', 'top' и 'bottom'. Они указывают величину смещения относительно контейнера блока. Абсолютно позиционируемые блоки изымаются из нормального потока. Это значит, что они не влияют на размещение последующих элементов того же уровня. fixed — фиксированное положение Положение блока рассчитывается в соответствии с моделью абсолютного позиционирования, а затем он фиксируется относительно области просмотра или страницы. Два объявления могут быть отделены друг от друга с помощью правила @media, как это показано в примере:
|
|
|
@media screen { H1#first { position: fixed; } } @media print { H1#first { position: static; } }
Управляя позиционированием, можно различным образом размещать блоки информации на странице, вплоть до создания эффектов наложения, перетекания, градиента и т.п.
Контрольные вопросы
1. Что такое CSS?
2. Общий синтаксис таблиц стилей
3. Правила CSS
4. Классы
5. Идентификаторы
6. Группировка свойств
7. Использование в веб-страницах
8. Встроенные стили
9. Внедренные стили
10. Связанные таблицы стилей
11. Аппаратно-зависимые стили
12. Свойства CSS
13. Позиционирование элементов
Справочный материал
Свойства CSS
В таблицеперечислены некоторые часто используемые свойства CSS и их назначение.
Таблица 1. Свойства элементов CSS
| Имя | Значения | Описание |
| Background | [background-color || background-image || background-repeat || background-attachment || background-position] | inherit | Управление фоном элемента |
| background-color | <color> | transparent | inherit | Цветфона |
| background-image | <uri> | none | inherit | Фоновоеизображение |
| background-position | [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit | Положениефоновойкартинки |
| background-repeat | repeat | repeat-x | repeat-y | no-repeat | inherit | Повторениефоновойкартинки |
| border | [ border-width || border-style || <color> ] | inherit Границыэлемента border-collapse collapse | separate | inherit | Объединение/разделениесмежныхграниц |
| border-color | <color>{1,4} | transparent | inherit | Цвет границы |
| border-style | <border-style>{1,4} | inherit | Стиль линии границы |
| border-top border-right border-bottom border-left | [ border-top-width || border-style || <color> ] | inherit | Управление стилем заданной границы |
| border-width | <border-width>{1,4} | inherit | Толщина линии границы |
| bottom | <length> | <percentage> | auto | inherit | Низ элемента |
| clear | none | left | right | both | inherit | Запрет заполнения свободного пространства рядом с элементом |
| clip | <shape> | auto | inherit | Обрезка содержимого элемента |
| color | <color> | inherit | Цвет содержимого |
| cursor | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit | Форма курсора |
| display | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table- footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit | Способ отображения элемента |
| empty-cells | show | hide | inherit | Отображение пустых ячеек таблицы |
| float | left | right | none | inherit | Свободное размещение элемента |
| font | [ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit | Управлениешрифтом |
| font-family | [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit | Гарнитура |
| font-size | <absolute-size> | <relative-size> | <length> | <percentage> | inherit | Кегль |
| font-style | normal | italic | oblique | inherit | Стильшрифта |
| font-variant | normal | small-caps | inherit | Вариантыотображенияшрифта |
| font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | Толщинашрифта |
| height <length> | <percentage> | auto | inherit | Ширинаэлемента | |
| left | <length> | <percentage> | auto | inherit | Положениелевойграницыэлемента |
| line-height | normal | <number> | <length> | <percentage> | inherit | Высотастроки |
| list-style | [ list-style-type || list-style-position || list-style-image ] | inherit | Стильсписка |
| margin | <margin-width>{1,4} | inherit | Внешнийотступ |
| margin-top margin-right margin-bottom margin-left | <margin-width> | inherit | Внешний отступ по заданной стороне |
| padding | <padding-width>{1,4} | inherit | Внутреннийотступ |
| padding-top padding-right padding-bottom padding-left | <padding-width> | inherit | Внутренний отступ по заданной стороне |
| position | static | relative | absolute | fixed | inherit | Позиционирование элемента |
| right | <length> | <percentage> | auto | inherit | Положение правой границы |
| text-align | left | right | center | justify | <string> | inherit | Выравнивание текстового блока |
| text-decoration | none | [ underline || overline || line-through || blink ] | inherit | Текстовые эффекты |
| text-indent | <length> | <percentage> | inherit | Абзацный отступ |
| text-transform | capitalize | uppercase | lowercase | none | inherit | Начертание текста |
| top | <length> | <percentage> | auto | inherit | Положение верхней границы элемента |
| vertical-align | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit | Вертикальное выравнивание в пределах блока |
| visibility | visible | hidden | collapse | inherit | Управление видимостью элемента |
| white-space | normal | pre | nowrap | inherit | Управление пробелами между словами |
| width | <length> | <percentage> | auto | inherit | Ширина элемента |
| z-index | auto | <integer> | inherit | Порядок перехода по клавише Tab |
Дата добавления: 2018-04-04; просмотров: 538; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!