Блог 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

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

CSS, глава 2, написание

↑ +4 ↓

Материалы этой категории:

Не найдено.

Просмотров: 4164, комментариев: 3

Добавить комментарий ↓

#1: Shutich

Quote

<a href='#'><b>Цвет жирной ссылки</b></a>

А может <b><a href='#'>Цвет жирной ссылки</a></b> ?

Quote

. Background-image. Указать фон можно картинкой, сделать это так: background: url(ссылка к картинке). Например: background: url(/img/image.gif);

background-image: url(/img/image.gif)

Опять думаю стоит добавить, что в Background можно всё эти свойства совместить. Для краткости css.

28.01.2010, 20:44

#2: Alisan

Мебель и предметы интерьера в нашем магазине http://shome4u.ru , а так же шкафы-купе, жалюзи, шторы, карнизы, плиссе и еще много разных принадлежностей.
тел: 8(495) 778-64-76, 8(495) 125-87-49, 8(926) 405-75-50 - круглосуточно.

29.11.2011, 03:00

#3: rinnaigas

Компания ЗАО «Вега-Тепло» - является официальным дистрибьютор в РФ газовых котлов Rinnai (Япония), газовых генераторов Green Power (Китай), газовых генераторов Panda Mashinery (Китай), гибких стальных
гофрированных труб Dong-A и A-Flex для газа и водопроводов (Ю.Корея). Компания ЗАО «Вега-Тепло» в соответствие с сертификатами от производителей имеет право создавать собственную дилерскую сеть
на территории РФ, сервисные центры по техническому обслуживанию газового оборудования и техническому обучению дилеров. Подробная информация на нашем сайте http://rinnaigas.ru и по телефону +7(495)432-50-00

03.12.2011, 10:45