чилка HTML
 
Каскадные таблицы стилей (CSS)

Стилевые параметры цвета и фона

 

Параметры стиляЗначениеОписание
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:
<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:
<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>

 

 

Иконки PNG 24х24:

                   

                   

Уважаемые посетители сайта!
Вы знакомитесь со стилевыми параметрами
цвета и фона

Внимание!
Вы знакомитесь со стилевыми параметрами
цвета и фона

Уважаемые посетители сайта!
Вы знаите, где находится ...?

Коды состояния 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:
<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>

<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>&hearts;</span> <span id=htex class=hred>Любимая Книга</span> <p></p> <span id=vnim class=vgrin>?</span> <span id=htex class=hgrin>Вопрос</span>

!Внимание!

+Дополнительно

Любимая Книга

?Вопрос

 

 

Пример 4:

 

 

Результат Примера 4:
<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. Книги рецептов

 

По теме:

Генератор цветов >>>

 

 

Copyright © Москва
Училка HTML: сайт  u4ilka.kcbux.ru