Читайте также:
|
СТИЛИ
CSS (от англ. Cascading Style Sheets – каскадные таблицы стилей) – технология задания свойств объектов гипертекстового документа.
Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам web-страницы.
Таблицы стилей – это списки свойств, определяющие, как будут выглядеть объекты при просмотре web-страниц.
При использовании таблицы стиля можно управлять внешним видом таблиц, заголовков, маркеров списков и стилем нумерованных списков, а также определять отступы страниц, лишь указывая наименование стиля.
Существует несколько способов добавления CSS к Web-странице:
1. Определение стиля в элементе разметки (линейный).
2. Размещение описания стиля в заголовке документа в элементе Style (вложенный).
3. Размещение ссылки на внешнее описание через элемент Link (ссылка на файл.CSS),
1. Линейные стили
Линейные, или локальные, стили добавляются непосредственно к тегу с помощью XHTML-атрибута style:
<p>Первый абзац</p>
<p style="font-size: 25pt; color:red;">Второй абзац</p>
<p>Третий абзац</p>
| <html> <head> <title>Пример1</title> </head> < body><p>Первый абзац</p> <p style="font-size:25pt; color:red;">Второй абзац</p> <p>Третий абзац</p> </body> </html> | 
|
Первый и третий абзацы отображаются со стилем абзаца браузера по умолчанию. Во втором абзаце мы добавили линейный стиль и изменили его внешний вид.
Особенности локальных стилей
· очень узкая область действия - они влияют только на тег, для которого указаны;
· применение локальных стилей - это всего лишь еще один способ добавить презентационный код, что, по сути, ничем не отличается от устаревшего HTML с его вложенными таблицами и переизбытком презентационного кода;
· локальные стили являются незаменимыми в тех редких ситуациях, когда требуется изменить стиль лишь одного элемента, однако, практически всегда можно этого избежать, создав уникальный идентификатор и присвоив ему нужный стиль в таблице стилей;
· локальный стиль можно проверить на практике прежде, чем добавлять в таблицу стилей, только не забудьте удалить атрибут style при копировании локального стиля из кода страницы в файл CSS; в противном случае вы потратите массу времени, пытаясь обнаружить ошибку в вашей таблице стилей, а виной всему окажется именно style, оказавшийся по ошибке в файле CSS;
· локальные стили имеют приоритет перед вложенными (описанными ниже), которые, в свою очередь, имеют приоритет перед глобальными.
2. Вложенные стили
Группу стилей CSS можно поместить непосредственно в документ XHTML, между тегами head, - это будут вложенные стили (или стили страницы). Код при этом в общем виде выглядит так:
| селектор {свойство:значение; *** свойство:значение;} | - Селектор предназначен для связи стилевого определения с элементами html. - Тело определения заключено в фигурных скобках и состоит из набора стилевых правил, отделяемых друг от друга точкой с запятой. - Стилевое правило указывает допустимое значение для стилевого свойства. |
Такое определение будет работать для всех элементов с данным именем в текущем файле.
| <html> <head> <title>Пример2</title> <style type="text/css" > p {color:red; font-size:large;} </style> </head> <body> <h1>Свойства абзаца прописаны для всей страницы в головной части</h1> <p>Первый абзац</p> <p>Второй абзац</p> <p>Третий абзац</p> </body> </html> | 
|
Тег style указывает браузеру, что после него следует код CSS, а не XHTML. Если вы хотите добавить JavaScript, укажите для тега style атрибут "text/ javascript”.
Дата добавления: 2015-07-10; просмотров: 87 | Нарушение авторских прав