Приложение B. Cведения о CSS
Где устанавливать стили
Внешняя таблица стилей
Вы можете установить правила стиля для ваших страниц, используя файл (.css) внешней таблицы стилей. Свяжите таблицу с вашим HTML, поместив тэг <LINK> в раздел <HEAD>.
| Пример | |
|---|---|
<link rel=stylesheet href="stylesht.css"type="text/css"> |
Правила стиля, содержащиеся в файле stylesht.css, применяются к этой странице |
Таблица стилей внутри файла
Вы можете установить правила стиля для одной страницы, используя блок <STYLE> в файле HTML вашей страницы.
| Пример | |
|---|---|
<style>
<!--
body {background-color:gray;}
-->
</style> |
Устанавливает правила стилей для этой страницы |
Применение стиля к одному тэгу HTML
Чтобы установить стиль для одного тэга HTML, используют атрибут стиля.
| Пример | |
|---|---|
<table style= "background-color:blue;color:white;"> |
Текст белый на синем фоне только в этой таблице |
Создание выборочного класса стилей или ID
Вы можете создать выборочные классы в вашей таблице стилей и затем применять их на странице. Например, вы можете создать класс quote для квотирования. Перед классамми ставьте точку, а перед ID – значок номера (#).
| Пример | |
|---|---|
quote {
margin-left:20px;
margin-right:20px;} |
Создает класс quote для использования в атрибуте class вашего HTML |
#bigred {
text-transform:uppercase;
color:red;} |
Создает стиль ID с именем bigred для использования в атрибуте id вашего HTML |
Применение выборочных классов или ID к тэгу
Чтобы применить класс к тэгу, используйте атрибут class ; для ID используйте атрибут id.
| Пример | |
|---|---|
<p class=quote>I hate quotations; tell me what you know.</p> |
Применяет класс стилей quote к абзацу (и элементам внутри него) |
<h1 id=bigred>Warning</h1> |
Применяет ID bigred к заголовку |
Цвет и фон
Номера цветов
Цвета указываются так же, как в HTML, используя RGB-номера: #000000 (черный), #ffffff (белый), #006600 (темно-зеленый).
Имена цветов
Если вы не любите пользоваться номерами, выберите название цвета из ста с лишним названий цветов, таких как darksalmon, seagreen и papayawhip. Но 4-ая и более ранние версии броузеров распознают очень небольшое количество имен. (Полный список имен цветов см. на msdn.microsoft.com/workshop/author/dhtml/reference/colors/colors.asp.).
color
Указывает цвет текста и других элементов
background-color
Указывает цвет фона для любого элемента
| Пример | |
|---|---|
table {
color:white;
background-color:maroon;} |
Таблица отображает белый текст на темно-красном фоне |
background-image
Указывает фоновый рисунок для страницы или другого блока (например, таблицы или ячейки). Использует формат url(imagefile), чтобы указать адрес или имя файла.
background-repeat
Определяет возможность повторения фонового рисунка, если он слишком мал, чтобы занять все пространство. Установите repeat, repeat-x, repeat-y или no-repeat.
background-scroll
Определяет, должен ли фон прокручиваться вместе со страницей. Установите scroll или fixed.
background-position
Устанавливает расположение рисунка относительно краев окна и других объектов. Укажите left, center или right, а затем top, middle или bottom.
| Пример | |
|---|---|
table {
background-image:url(war.gif);
background-repeat:no-repeat;
background-position:center top;} |
Таблица отображает рисунок, выровненный сверху страницы |
background
Устанавливает все пять предыдущих свойств. Установите свойства в следующем порядке.