Цитата сообщения Legionary CSS. Border, background. Введение

Как вы помните, в посте про мигающий текст мы начали немного говорить про CSS. Так вот хочу продолжить, но не "планово" по шагам, а так... урывками:) Для начала:)

Сегодня будем делать обводку и фон. Чего именно? Да чего хотите:)
Кто сказал что тег <b> (жирное написание текста) не может быть с фоном и обводкой?
Пожалуйста:



Привет

Или:Привет

Или:Привет



Или:Привет




Вроде забавно:) А главное просто, сейчас сами убедитесь:
Берем наш тег <b> и добавляем к нему стиль с указанием обводки, или фона, или того и другого.
Как добавлять стиль уже проходили, но рассмотрим этот момент конкретнее (стиль, он же css можно добавить разными способами, мы рассматриваем именно такой, потому что на лиру можно использовать только его)
Итак, было:
<b>Привет</b>

Добавили стиль (пустой):
<b style="здесь будет описание стиля какое-нибудь и когда-нибудь">Привет</b>

Понятно?:)
Теперь вот про то самое описание, которое должно быть в кавычках, а точнее про его синтаксис (т.е. как оформлять).
Пишется так:
Параметр1 двоеточие значения параметра1 через пробел точка с запятой параметр2.... и т.д.:)

Точнее:
Обводка:толщина тип цвет;Фон:цвет картинка и пр.

Запомнили, закрепили, переходим к практике.

Обводка - border
Может содержать три параметра:
Толщина, тип (стиль), цвет

Толщина обводки:
Пишется так: 4px
4 - то самое число, отвечающее за толщину,
px - единица измерения, пиксель. Будем указывать все в пикселях, пока. Обратите внимание,- между "4" и "px" нет пробела (браузер IE при наличии пробела начинает тупить )

Тип обводки (стиль):
Тут просто покажу в картинках (обозначение стиля в рамке):)

solid	dashed	dotted	double
groove	ridge	inset	outset

Цвет обводки :
Тут вспоминаем наши "числовые" обозначения цвета и используем их. Для примера:
#000000 - черный,
#cccccc - серый,
#ffffff - белый.

Теперь компануем все это, получаем примерно следующее (к примеру):
<b style="border:3px dashed #333333">Привет</b>

Небольшое дополнение:
Когда вы указываете просто border - вы настраиваете всю обводку (со всех сторон), но можно указать обводку по сторонам отдельно:
border-top - верхняя,
border-bottom - нижняя,
border-left - левая,
border-right - правая.

Параметры применяйте точно также как и у border. Пример:
<b style="border-top:3px dashed #cccccc;border-right:1px solid #333333">Привет</b>
Результат:

Привет

Фон - background
Может содержать 5 параметров, но рассмотрим только два:
Цвет, фоновая картинка

Цвет фона :
Опять вспоминаем наши "числовые" обозначения цвета и используем их.

Фоновая картинка :
Если указан и цвет фона и фоновая картинка,- цвет будет не виден под картинкой. Надеюсь понимаете:)
Пишется так: url('ссылка на изображение')

Смотрим код:
<b style="background:url('ссылка на изображение')">Привет</b>

---

Теперь вот все, что узнали, замешаем и используем:)

<b style="background:url('http://av.li.ru/775/3236775_13047083.gif');border-top:4px ridge #666666;border-bottom:2px solid #cccccc;padding:10px">Привет</b>


Получим Результат

А ведь это всего лишь был тег жирности текста;) Напомню, стиль можно применить и к другим тегам, делается все точно так же:)

P.S. - кто скажет,- какой параметр я не описал в посте, но применил в последнем "коде"? И что "делает" этот параметр?:)