Добавление стилей на web-страницу

Дата добавления: 2015-07-09; просмотров: 525; Нарушение авторских прав

В основном CSS используются для определения стиля всего документа. Для этого нужно включить правила стиля в заголовок документа, который находится внутри содержания стиля.

Если добавить стиль таким способом, то результат будет идентичен результату добавления стилей непосредственно в тег (рис.2). Однако этот метод позволяет легко поменять стили всего документа из одного места.

Например, если вы будете использовать тег заголовка первого уровня в нескольких местах на web-странице, вы сможете определить стиль тегов h1 в заголовке документа. Этот стиль будет применен ко всем тегам <h1> в данном документе.

На рис.3 представлен общий синтаксис стиля CSS, расположенного в теге <head> HTML-документа:

Рис.3. Синтаксис стиля CSS в теге <head>

1. Напишите открывающийся тег <style> в теге <head> документа, задайте тип как "text/css". Это означает, что все последующие стили будут CSS-стилями:

2. Для определения правила введите селектор нужного тега и открывающую фигурную скобку за ним:

body {

3. Напишите определения, которые нужно присвоить этому правилу и разделите различные определения в списке точкой с запятой:

background: #319791 url(2.jpg) no-repeat;

4. Закройте правило фигурной скобкой }.

5. Повторите шаги 2-4 для всех селекторов, которые требуется определить.

6. Закройте тег стиля, напечатав</style>.

Пример 1:Добавление стилей на web-страницу

<html>

<head>

body {background: #319791 url(2.jpg) no-repeat;}

h1 { font: small-caps bold 18pt 'Arial', serif; color: red;}

h2 { font: bold 18pt 'Georgia', serif; color: red;}

</style>

</head>

<body>

<br>

<h1 align=right> Использование WWW для доступа <br> к существующим БД </h1> <br>

<h2 align=right> Сценарии </h2><br>

<br><br><br><br><p> текст ……………………… </p>

</body>

</html>

Рис.4. Пример 1

Если требуется, чтобы несколько селекторов имели одинаковое определение, надо записать их через запятую (рис.5):

Рис.5. Общий синтаксис для списка селекторов с одним и тем же определением

<== предыдущая лекция	\|	следующая лекция ==>
Установка стилей для отдельного HTML-тега	\|	Добавление стилей на web-сайт