• Авторизация


CSS. Border, background. Введение 04-03-2011 16:10 к комментариям - к полной версии - понравилось!


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

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



Привет

Или:Привет

Или:Привет



Или:Привет




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

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

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

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

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

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

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

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

soliddasheddotteddouble
grooveridgeinsetoutset


Цвет обводки :
Тут вспоминаем наши "числовые" обозначения цвета и используем их. Для примера:
#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. - кто скажет,- какой параметр я не описал в посте, но применил в последнем "коде"? И что "делает" этот параметр?:)
вверх^ к полной версии понравилось! в evernote
Комментарии (116): вперёд» последняя»
selinata 04-03-2011-16:23 удалить
Спасибо, нужная вещь.
Вот это не поняла: padding:10px ?
А вот это - solid #cccccc - цвет чего?
love_amor 04-03-2011-16:24 удалить
вау........ тема неисчерпаемая)))))))) так, глядишь, и освою CSS
Legionary 04-03-2011-16:25 удалить
Ответ на комментарий selinata # selinata, Вот!! это и есть ответ на мой вопрос в конце поста:)
padding:10px - это отступ от границы до содержимого:)
solid #cccccc - что проходили,- обводки:)
Legionary 04-03-2011-16:26 удалить
Ответ на комментарий Аццкий_Аноним # Аццкий_Аноним, опоздал:)
selinata 04-03-2011-16:26 удалить
Ответ на комментарий Legionary # Legionary, спасибо, я если честно, прогуляла урок
Legionary 04-03-2011-16:27 удалить
Ответ на комментарий love_amor # love_amor, с хтмл домучайся;)
Legionary 04-03-2011-16:28 удалить
Ответ на комментарий selinata # selinata, после уроков сто раз написать на доске " я больше так не буду" :)
selinata 04-03-2011-16:31 удалить
Ответ на комментарий Legionary # Legionary, а дневник можно не давать?, я его забыла))) Сейчас постараюсь получить пятерку и дневник сразу принесу)))
love_amor 04-03-2011-16:34 удалить
Ответ на комментарий Legionary # Legionary, не дает полетать( дык, давай, продолжим)))))
So-ni 04-03-2011-16:36 удалить
Legionary, очень интересно. Подскажи, pls, чем отличаются обводки solid, groove, ridge, inset и outset. На картинках выглядят одинаково.
Чё-то для меня сложно всё запомнить сразу(((
Исходное сообщение Legionary:
Аццкий_Аноним , опоздал:)


Legionary, а на вопрос ответить?
selinata 04-03-2011-16:57 удалить
Ответ на комментарий selinata # Legionary, я так и знала, что у меня ничего не получится, я двоешница
TATYSIY 04-03-2011-17:39 удалить
Благодарю!Буду разбираться!
NeTakaya_6til 04-03-2011-17:44 удалить
Ммм...рамочки барби сайз...
Kapitoshka_N 04-03-2011-18:32 удалить
Legionary, спасибо, Лёш :) Может пригодится когда-нибудь :) Возьму (на всякий случай) твой урок :)
kauniete 04-03-2011-18:59 удалить
Spasibo za vash urok !:give_rose
Ох,ё-моё!!!
Вот кажется,что оно мне НАДО!!!!!!
Заберу.
Венера01 04-03-2011-20:21 удалить
Спасибо за информацию!
Legionary 04-03-2011-20:26 удалить
Ответ на комментарий selinata # selinata, что не вышло?:)
Legionary 04-03-2011-20:26 удалить
Ответ на комментарий love_amor # love_amor, я против что ль? хоть сейчас тебе Д/З выдам:)
Legionary 04-03-2011-20:27 удалить
Ответ на комментарий marmelatka28 # marmelatka28, пожалуйста:)
Legionary 04-03-2011-20:28 удалить
Ответ на комментарий бландин # бландин, всегда пожалуйста:)
Legionary 04-03-2011-20:30 удалить
Ответ на комментарий So-ni # So-ni, э... браузер IE что ль? там надо шире обводку делать, чтоб видно было:) Вот в лисе так:
[267x66]
Legionary 04-03-2011-20:30 удалить
Ответ на комментарий Торнадо2112 # Торнадо2112, а все и не надо:) частями;)


Комментарии (116): вперёд» последняя» вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник CSS. Border, background. Введение | Legionary - Legionblog | Лента друзей Legionary / Полная версия Добавить в друзья Страницы: раньше»