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


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
Legionary 04-03-2011-20:31 удалить
Ответ на комментарий Аццкий_Аноним # Аццкий_Аноним, приз - моральное удовлетворение :)
Legionary 04-03-2011-20:31 удалить
Ответ на комментарий татьяна_татуревич # татьяна_татуревич, пожалуйста:)))
Legionary 04-03-2011-20:31 удалить
Ответ на комментарий TATYSIY # TATYSIY, успехов:) все просто:)
Legionary 04-03-2011-20:31 удалить
Ответ на комментарий NeTakaya_6til # NeTakaya_6til, не опошляй css! :)
Legionary 04-03-2011-20:32 удалить
Ответ на комментарий ludamilla # ludamilla, пожалуйста:)
Ответ на комментарий Legionary # ты мои мысли прочитал,или я твои)))
только подумала,...а тут и это сообщение)))
Legionary 04-03-2011-20:32 удалить
Ответ на комментарий Kapitoshka_N # Kapitoshka_N, пожалуйста:) когда-нибудь... эхех:)
Legionary 04-03-2011-20:33 удалить
Ответ на комментарий kauniete # kauniete, всегда пожалуйста:) практикуйтесь:)
Kapitoshka_N 04-03-2011-20:33 удалить
Ответ на комментарий Legionary # Legionary, аХа.. как всегда...)))
Legionary 04-03-2011-20:34 удалить
Ответ на комментарий Торнадо2112 # Торнадо2112, ммм... о чем?... :)
Legionary 04-03-2011-20:35 удалить
Ответ на комментарий Наталья_Ивановна_НИК # Наталья_Ив_Ник, надо! точно говорю!:derisive:
Legionary 04-03-2011-20:35 удалить
Ответ на комментарий Венера01 # Венера01, пожалуйста:))
NeTakaya_6til 04-03-2011-20:35 удалить
Ответ на комментарий Legionary # Яяя?)))) да ни разу)))
Legionary 04-03-2011-20:36 удалить
Ответ на комментарий Kapitoshka_N # Kapitoshka_N, лааадно уж:)) не ворчу:)
Legionary 04-03-2011-20:37 удалить
Ответ на комментарий NeTakaya_6til # NeTakaya_6til, смори мне!:acute:
Ответ на комментарий Legionary # Слухаюсь и повинуюсь....Буду осваивать...
Ответ на комментарий Legionary # ))) а ты мысль о чём прочитал?)))шучу)))
подумала,что надо частями как-то всё и выучить.А это реально?
Очень уж хочется...и хтмл,и css и php///
Ещё фракталы хочется научиться...и фотошоп...и видеонарезки...
пойду верёвку искать(((
Kapitoshka_N 04-03-2011-20:40 удалить
Ответ на комментарий Legionary # Legionary, Спасибо за понимание :)
Legionary 04-03-2011-20:43 удалить
Ответ на комментарий Торнадо2112 # Торнадо2112, ну говорю ж... частями, частями) а то точно веревка понадобится:)
Идем добивать хтмл... сели, написали простенькую страничку главную сайта какого-нить, не важно даже - появится он в инете или нет:)

Смогли? отлично... идем в шоп, рисуем банеры и пр к этому сайту:) польза+практика:) и т.д....медленно но верно:)
Legionary 04-03-2011-20:44 удалить
Ответ на комментарий Kapitoshka_N # Kapitoshka_N,
Legionary 04-03-2011-20:44 удалить
Ответ на комментарий Наталья_Ивановна_НИК # Наталья_Ив_Ник, слежу:)
Ответ на комментарий Legionary # вот...значит нужен план- минимум и план-максимум,и просто план действий)))
NeTakaya_6til 04-03-2011-20:46 удалить
Ответ на комментарий Legionary # куда?))) на что?)))
Legionary 04-03-2011-20:46 удалить
Ответ на комментарий NeTakaya_6til # NeTakaya_6til, в оба:)
Legionary 04-03-2011-20:47 удалить
Ответ на комментарий Торнадо2112 # Торнадо2112, не-не... нужно начало... чтоб всегда "висел" незаконченный проект:) как время и желание появилось,- идем допиливать:)
So-ni 04-03-2011-20:48 удалить
Ответ на комментарий Legionary # Теперь все видно, спасибо. А браузер - Хром. Кстати, мигающего слова в прошлом посте тоже не было видно. А что такое "лисе"? - простите за не грамотность.
Legionary 04-03-2011-20:50 удалить
Ответ на комментарий So-ni # So-ni, а... может, я только в IE посмотрел, он обычно "выделяется":) Про мигания,- ага... но вообще все говорят, что хром должен... может новые версии немного того.. упустили этот момент... не знаю:(
Лиса - Mozilla Firefox:)
Ответ на комментарий Legionary # самое сложное начать или начать)))
NeTakaya_6til 04-03-2011-21:07 удалить
Ответ на комментарий Legionary # Нууу...блииин....
Legionary 04-03-2011-21:07 удалить
Ответ на комментарий Legionary # Торнадо2112, нее:)) создается "новая папка", переименовывается... все - начало есть:)


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

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