Цвет текста и цвет фона в CSS

 

Мы уже знаем, как подключить таблицу стилей к страницам сайта. Начнем знакомиться с основными свойствами.

Цвета в CSS указываются точно так же как и в HTML, —либо шестнадцитиричным значением, либо одним из шестнадцати базовых цветов.

Цвет текста

Цвет текста того или иного элемента задает свойство color.

Например, если мы хотим задать цвет для заголовков первого уровня красный, а цвет параграфов (абзацев) синий, то в нашей таблице стилей (файл style.css) мы должны прописать следующее:

h1 {
color: red;
}
p {
color: blue;
}

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

В браузере Вы должны получить примерно следующее:

Заголовок первого уровня

Текст заголовока первого уровня красного цвета. Цвет текста между тегами <p> и </p> синий.

Напомню Вам, что может отличатся гарнитуры шрифта и отступы в Вашем случае и то, что Вы видете здесь, на этом сайте. Ведь текст на этом сайте выводится по тем правилам, которые заданы в таблице стилей для этого сайта.

Цвет фона

Цвет фона того или иного элемента задает свойство background-color.

В отличии от HTML, где цвет фона можно задавать только для страницы целиком или для ячейки таблицы (для элементов, имеющих атрибут bgcolor), в CSS цвет фона можно задать для любого элемента, будь то загаловки, параграфы, ссылки и др.

Чтобы задать цвет фона всей странице, соответствующее правило нужно прописаит для элемента body. Именно этот элемент отвечает за тело документа, т.е. за всю видимую пользователю страницу.

body {
background-color: #FFCCFF;
}
h1 {
color: red;
background-color: silver;
}
p {
color: blue;
}

С цветом фона параграфа поэкспериментируйте самостоятельно для лучшего усвоения. А измененная вышеприведенным образом таблица стилей в браузере даст следующий результат:

Заголовок первого уровня

Текст заголовока первого уровня красного цвета, цвет фона - серебрянный.. Цвет текста между тегами <p> и </p> синий. Цвет фона всей страницы- розовенький.

Фоновое изображение в CSS

Чтобы задать фоновое изображение для какого-либо элемента, применяется свойство background-image. В качестве значения используется путь к графическому файлу, заключенный в скобки.

Точно так же, как с цветом фона, фоновое изображение можно задать для любого элемента. В примере фоновое изображение будет задано для элемента body, т.е. для всей страницы:

body {
background-color:#FFCCFF;
background-image: url(../images/bat.gif);
}
h1 {
color: red;
background-color:silver;
}
p {
color: blue;
}

Как видете, в значении сначала пишется url, а потом сразу, без пробелов, путь к картинке, заключенный в круглые скобки. Если на картинке имеются прозрачные области, то через них будет проглядывать фоновый цвет.

Заголовок первого уровня

Текст заголовока первого уровня красного цвета, цвет фона - серебрянный.. Цвет текста между тегами <p> и </p> синий. Цвет фона всей страницы- розовенький.

На этом с цветом текста и фона закончим, и перейдем к изучению шрифтов в CSS >>

Дорогой посетитель. Сохрани для себя эту статью
и поделись ссылкой с друзьями