Блог UnderShot`а → Посты→ Верстка→ Правильности написания CSS. Глава 2

Правильности написания CSS. Глава 2

Привет. Продолжаю свою серию постов о «правильности написания css».

Начнем.

В прошлой статье я описал самые важные свойства CSS, сегодня мы поговорим подробней о color и background.

Color.
Это свойство, способное указать любому элементу свой цвет текста. Указывать цвет можно:
1. По его названию. Браузеры поддерживают цвета по их названию.
2. По шестнадцатеричному значению. Для задания цвета, можно использовать шестнадцатеричный код.
В него входят буквы и цифры: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Перед каждым кодом надо ставить знак решетки '#'. Например: color:#ffffff
3. По RGB значению. Использую 3 цвета: красный, зеленый и синий, можно дать значение. Каждому из трех цветов можно придать значение от 0 до 255. Например: color:rgb(255,255,255) — получим белый цвет.
Пример использования всех трех способов:

Code

<html>
<head>
<title>Цвет</title>
<style>
#wrapp{
color:#000;/* цвет для дива */
}
#wrap p{
color:rgb(255,0,0);/* цвет для параграфа */
}
#wrap p a{
color:red;/* цвет для ссылки */
}
#wrap p b{
color:blue;/* цвет для тега bold */
}
</style>
</head>
<body>
<div id='wrap'>
Цвет дива
Цвет параграфа
<a href='#'><b>Цвет жирной ссылки</b></a></p>
</div>
</body>
</html>

Background.
Свойство, позволяющее указать фон для элемента двумя способами:
1. Background-color. Как и с color, ы качестве фона можно указать и цвет. Так-же, 3-мя способами - #fff, имя цвета, RGB.
2. Background-image. Указать фон можно картинкой, сделать это так: background: url(ссылка к картинке). Например: background: url(/img/image.gif);

Так-же к background относятся свойства:
1. Background-repeat - указывает на повторение фона. Присущие значения: repeat(повторение по всему объекту), no-repeat(запрещение повторения), repeat-x(повторение по оси x), repeat-y(повторение по оси y). Пример: background:url(image) repeat-x;
2. Background-position - указывает на позицию изображения. Значение можно присвоить как названиями, так и цифрами: top, right, bottom, left(можно комбинировать).
3. Background-scroll - указывает на прокрутку фона. Значения: fixed(фиксированный фон, не прокручивается), scroll(прокрутка фона).

Пример использования background:

Code

<html>
<head>
<title>Цвет</title>
<style>
#wrapp{
color:#000;/* цвет для дива */
background:url(image) top left repeat-x;/* фон */
}
#wrap p{
color:rgb(255,0,0);/* цвет для параграфа */
background:#f00;/* фон */
height:50px;/* высота */
}
#wrap p a{
color:red;/* цвет для ссылки */
background:yellow;/* фон */
}
#wrap p b{
color:blue;/* цвет для тега bold */
}
</style>
</head>
<body>
<div id='wrap'> <a href='#'><b>Цвет жирной ссылки</b></a></p>
</div>
</body>
</html>

И пока на этом вторая глава «эпопеи» заканчивается. Ждем новых выпусков!

Рассказать в …

Подписаться по RSS

Дата: 06.09.2010 • Теги: