| Параметры стиля | Значение | Описание |
color
(устанавливает цвет текста элемента) |
название цвета или его номер |
Значение по умолчанию зависит от браузера.
Цвет может быть задан названием (например, green) или номером в соответствии со шкалой RGB.
Пример:
1) "#FFFFFF" - шестнадцатеричная система;
2) "80%,20%,0%" - в прцентах;
3) "245,0,20" - десятичная система.
|
background
(определяет параметры фона документа) |
transparent | Значение по умолчанию. Означает отсутствие фона. |
| цвет | |
| изображение с заданным URL-адресом | Адрес может быть абсолютным или относительным, но его обязательно следует заключить в скобки и расположить непосредственно за словом url.
Пример:
BODY { background:
url(http://mmm.com/image/picture.gif)} |
| и цвет фона, и изображение | В этом случае рисунок будет расположен поверх цветного фона. Цвет м.б.либо чистым, либо смешанным из двух.
Изображение имеет три настройки:
1. repeat => repeat-x
=> repeat-y
=> no-repeat Значение по умолчанию - repeat
2. прокрутка определяет, будет ли изображение оставаться на месте при прокручивании страницы или прокручиваться вместе с ней.
Значения - fixed, scroll.
3. положение определяет расположение изображения на странице.
Значения могут быть:
- процентными (горизонтальное, вертикальное),
- абсолютным расстоянием (горизонтальное, вертикальное)
- определенными с помощью ключевых слов: top, middle, bottom, left, center, right. |
Свойство background позволяет установить одновременно несколько характеристик фона, которые указываются через пробел в любом порядке.
Пример:
DIV {background: url(images/riss.png) repeat-y #ff0000;}
|
| Свойства фона по отдельности |
| background-attachment |
fixed | Определяет, будет ли прокручиваться фоновое изображение при пролистывании страницы или нет. |
| scroll (по умолчанию) |
| background-color |
transparent (по умолчанию) | Определяет цвет фона.
Пример: для двух смешанных цветов:
BODY { background-color: red/blue } |
| цвет |
| background-image |
none (по умолчанию) | URL-адрес фонового изображения |
| URL-адрес |
| background-position |
top, left (по умолчанию) | Указывает начальное положение фонового изображения с помощью двух значений, определяющих занимаемую часть страницы (по горизонтали, по вертикали) и абсолютное расстояние (в соответствующих единицах измерения, сначала по горизонтали, потом по вертикали), или используя два ключевых слова из возможных. |
| положение |
| background-repeat |
repeat (по умолчанию) | Определяет, повторяется ли фоновое изображение для заполнения страницы или элемента. Если используются repeat-x, repeat-y, то изображение повторяется лишь вдоль одного направления. По умолчанию устанавливается повторение по обоим направлениям. |
repeat-x,
repeat-y
no-repeat |
|
Пример 1:
|
Результат Примера 1:
|
|
<![CDATA[
<style>
.td_2
{
color: green;
background:url(image/picture.gif);
background-repeat:no-repeat;
background-position:bottom right;
}
</style>
<table border="0">
<tr><td class=td_2>
Наш текст ...
</td></tr>
</table>
]]>
|
Так выглядит ячейка таблиы.
Фоновая картинка в правом нижнем углу.
|
Пример 2:
|
Результат Примера 2:
|
|
<![CDATA[
<style>
.info
{
background:url(info24.png) no-repeat;
background-position:10px;
background-color: #ddf;
border:1px dashed #8080ff;
padding-left:54px;
}
</style>
<div class="info">
Ваш оформленный текст
</div>
]]>
|
Уважаемые посетители сайта!
Вы знакомитесь со стилевыми параметрами
цвета и фона
Внимание!
Вы знакомитесь со стилевыми параметрами
цвета и фона
Уважаемые посетители сайта!
Вы знаите, где находится ...?
Коды состояния HTTP
- Код ответа 4xx: Client Error (ошибка клиента):
- Ошибка 400
Bad Request («плохой, неверный запрос»)
- Ошибка 401
Unauthorized («неавторизован»)
- Ошибка 404
Not Found («не найдено»)
- Ошибка 410
Gone («удалён»)
- Код ответа 5xx: Server Error (ошибка сервера):
- Ошибка 500
Internal Server Error («внутренняя ошибка сервера»)
- Ошибка 503
Service Unavailable («сервис недоступен»)
|
|
Пример 3:
|
Результат Примера 3:
|
|
<![CDATA[
<style>
#vnim{color:#ffffff;
border-radius:50%;
display:inline-block;
width:24px;height:24px;
line-height:26px;
font-size:17px;
margin-left:10px;
font-weight:bold;
text-align:center;
font: 300 17px/25px Helvetica,
Arial, sans-serif;
}
#vnim.vred{background:#f20000;}
#vnim.vgrin{background:#00a27f;}
#vnim.vblu{background:#0058b0;}
#htex {letter-spacing: 2.5px;
padding-left:12px;
font-size:16px;
}
#htex.hred{color:#f20000;}
#htex.hgrin{color:#00a27f;}
#htex.hblu{color:#0058b0;}
</style>
]]>
|
<![CDATA[
<span id=vnim class=vred>!</span>
<span id=htex class=hred>Внимание!</span>
<p></p>
<span id=vnim class=vblu>+</span>
<span id=htex class=hblu>Дополнительно</span>
<p></p>
<span id=vnim class=vred>♥</span>
<span id=htex class=hred>Любимая Книга</span>
<p></p>
<span id=vnim class=vgrin>?</span>
<span id=htex class=hgrin>Вопрос</span>
]]>
!Внимание!
+Дополнительно
♥Любимая Книга
?Вопрос
|
Пример 4:
|
Результат Примера 4:
|
|
<![CDATA[
<style>
.notic {
background: #41cb5a
url("http://u4ilka.kcbux.ru/Css/
image_ico/galka24-02.png")
20px 50% no-repeat;
border: 2px solid #467813;
border-radius: 5px;
color: #fff;
font-family: Arial, sans-serif;
padding: 15px 20px 15px 50px;
}
</style>
<div class=notic>
1. Книги рецептов</div>
<span class=notic>
2. Книги рецептов</span>
]]>
|
1. Книги рецептов
2. Книги рецептов
|
