-Всегда под рукой

 -Метки

 -Поиск по дневнику

Поиск сообщений в Legionary

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 16.05.2009
Записей:
Комментариев:
Написано: 27469


CSS. Border, background. Введение

Пятница, 04 Марта 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. - кто скажет,- какой параметр я не описал в посте, но применил в последнем "коде"? И что "делает" этот параметр?:)
Рубрики:  html для начинающих
Метки:  

Процитировано 140 раз
Понравилось: 45 пользователям

selinata   обратиться по имени Пятница, 04 Марта 2011 г. 16:23 (ссылка)
Спасибо, нужная вещь.
Вот это не поняла: padding:10px ?
А вот это - solid #cccccc - цвет чего?
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 04 Марта 2011 г. 16:25ссылка
selinata, Вот!! это и есть ответ на мой вопрос в конце поста:)
padding:10px - это отступ от границы до содержимого:)
solid #cccccc - что проходили,- обводки:)
Перейти к дневнику

Пятница, 04 Марта 2011 г. 16:26ссылка
Legionary, спасибо, я если честно, прогуляла урок
Перейти к дневнику

Пятница, 04 Марта 2011 г. 16:28ссылка
selinata, после уроков сто раз написать на доске " я больше так не буду" :)
Перейти к дневнику

Пятница, 04 Марта 2011 г. 16:31ссылка
Legionary, а дневник можно не давать?, я его забыла))) Сейчас постараюсь получить пятерку и дневник сразу принесу)))
Перейти к дневнику

Пятница, 04 Марта 2011 г. 16:57ссылка
Legionary, я так и знала, что у меня ничего не получится, я двоешница
Перейти к дневнику
Перейти к дневнику

Суббота, 05 Марта 2011 г. 13:26ссылка
Legionary, а ничего не вышло, выходит только одно слово подчеркнутое, а картинки нет, то ли большую беру, то ли маленькую?! незнаю.
love_amor   обратиться по имени Пятница, 04 Марта 2011 г. 16:24 (ссылка)
вау........ тема неисчерпаемая)))))))) так, глядишь, и освою CSS
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 04 Марта 2011 г. 16:27ссылка
love_amor, с хтмл домучайся;)
Перейти к дневнику

Пятница, 04 Марта 2011 г. 16:34ссылка
Legionary, не дает полетать( дык, давай, продолжим)))))
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:26ссылка
love_amor, я против что ль? хоть сейчас тебе Д/З выдам:)
Перейти к дневнику

Пятница, 04 Марта 2011 г. 23:01ссылка
Legionary, выдай выдай выдай))))))))))
Перейти к дневнику

Пятница, 04 Марта 2011 г. 23:02ссылка
love_amor, ой... зачем крест на свободном времени ставишь? ведь выдам..... :)))
Перейти к дневнику

Суббота, 05 Марта 2011 г. 00:13ссылка
Legionary, его все равно нет и не будет - а учение это свет, не слышал разве?)))))
Аццкий_Аноним   обратиться по имени Пятница, 04 Марта 2011 г. 16:25 (ссылка)
Legionary, padding
А какой приз?
Ответить С цитатой В цитатник
Перейти к дневнику
marmelatka28   обратиться по имени Пятница, 04 Марта 2011 г. 16:29 (ссылка)
Спасибо :)
Ответить С цитатой В цитатник
Перейти к дневнику
бландин   обратиться по имени Пятница, 04 Марта 2011 г. 16:33 (ссылка)
Спасибо за науку.
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:28ссылка
бландин, всегда пожалуйста:)
So-ni   обратиться по имени Пятница, 04 Марта 2011 г. 16:36 (ссылка)
Legionary, очень интересно. Подскажи, pls, чем отличаются обводки solid, groove, ridge, inset и outset. На картинках выглядят одинаково.
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:30ссылка
So-ni, э... браузер IE что ль? там надо шире обводку делать, чтоб видно было:) Вот в лисе так:
 (267x66, 9Kb)
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:48ссылка
Теперь все видно, спасибо. А браузер - Хром. Кстати, мигающего слова в прошлом посте тоже не было видно. А что такое "лисе"? - простите за не грамотность.
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:50ссылка
So-ni, а... может, я только в IE посмотрел, он обычно "выделяется":) Про мигания,- ага... но вообще все говорят, что хром должен... может новые версии немного того.. упустили этот момент... не знаю:(
Лиса - Mozilla Firefox:)
Торнадо2112   обратиться по имени Пятница, 04 Марта 2011 г. 16:38 (ссылка)
Чё-то для меня сложно всё запомнить сразу(((
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:30ссылка
Торнадо2112, а все и не надо:) частями;)
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:32ссылка
ты мои мысли прочитал,или я твои)))
только подумала,...а тут и это сообщение)))
Перейти к дневнику
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:40ссылка
))) а ты мысль о чём прочитал?)))шучу)))
подумала,что надо частями как-то всё и выучить.А это реально?
Очень уж хочется...и хтмл,и css и php///
Ещё фракталы хочется научиться...и фотошоп...и видеонарезки...
пойду верёвку искать(((
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:43ссылка
Торнадо2112, ну говорю ж... частями, частями) а то точно веревка понадобится:)
Идем добивать хтмл... сели, написали простенькую страничку главную сайта какого-нить, не важно даже - появится он в инете или нет:)

Смогли? отлично... идем в шоп, рисуем банеры и пр к этому сайту:) польза+практика:) и т.д....медленно но верно:)
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:45ссылка
вот...значит нужен план- минимум и план-максимум,и просто план действий)))
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:47ссылка
Торнадо2112, не-не... нужно начало... чтоб всегда "висел" незаконченный проект:) как время и желание появилось,- идем допиливать:)
Перейти к дневнику

Пятница, 04 Марта 2011 г. 21:02ссылка
самое сложное начать или начать)))
Перейти к дневнику

Пятница, 04 Марта 2011 г. 21:07ссылка
Торнадо2112, нее:)) создается "новая папка", переименовывается... все - начало есть:)
Перейти к дневнику

Пятница, 04 Марта 2011 г. 21:17ссылка
хех)))тег ударный не прошёл в комментах)))
всё,Лёш!Решено.8Марта буду во вновь созданную и правильно названную папку всё нужное собирать!
ps.странно,почему тег не сработал..
Перейти к дневнику

Пятница, 04 Марта 2011 г. 21:30ссылка
Торнадо2112, эээ... :))это что за кавычки?:))))
Перейти к дневнику

Пятница, 04 Марта 2011 г. 21:31ссылка
дубль 2
&*769;вместо *-#
Перейти к дневнику

Пятница, 04 Марта 2011 г. 21:34ссылка
Торнадо2112, тьфу:))) " a " с галкой?:)) тоже не прошел:))
Перейти к дневнику

Пятница, 04 Марта 2011 г. 21:39ссылка
чё-то не догоняю я...........
поставь какое -нибудь слово с ударением на букве.
У меня с тегом не получилось здесь,а у себя в комментах получалось...
это не флуд,мне интересно почему?не получилось?
Перейти к дневнику

Пятница, 04 Марта 2011 г. 21:40ссылка
Торнадо2112, а у меня флуд и не запрещен:))
пробую - букв́рь :)
Перейти к дневнику

Пятница, 04 Марта 2011 г. 21:52ссылка
хехе))вот и я такая же)))
Перейти к дневнику

Пятница, 04 Марта 2011 г. 21:52ссылка
ну, хоть ударение получилось!
Перейти к дневнику

Пятница, 04 Марта 2011 г. 23:01ссылка
Торнадо2112, надо страничку переводчик символов в вот енти значки написать... авось пригодится
Перейти к дневнику

Пятница, 04 Марта 2011 г. 23:15ссылка
у меня есть в блокноте (частично)
Но уже целая энциклопедия требуется!Столько вопросов возникает по ходу!
Перейти к дневнику

Пятница, 04 Марта 2011 г. 23:16ссылка
Торнадо2112, php знает все, даже обозначения простых букв
Перейти к дневнику

Пятница, 04 Марта 2011 г. 23:20ссылка
Значит,ай лав пи-эйч-пи-php!!!
php -рулит!!!!!!!!!!!!!!!
Хочу его.хочууу!
Аццкий_Аноним   обратиться по имени Пятница, 04 Марта 2011 г. 16:38 (ссылка)
Исходное сообщение Legionary:
Аццкий_Аноним , опоздал:)


Legionary, а на вопрос ответить?
Лорелея
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:31ссылка
Аццкий_Аноним, приз - моральное удовлетворение :)
татьяна_татуревич   обратиться по имени Пятница, 04 Марта 2011 г. 17:30 (ссылка)
спасибо
Ответить С цитатой В цитатник
Перейти к дневнику
TATYSIY   обратиться по имени Пятница, 04 Марта 2011 г. 17:39 (ссылка)
Благодарю!Буду разбираться!
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:31ссылка
TATYSIY, успехов:) все просто:)
NeTakaya_6til   обратиться по имени Пятница, 04 Марта 2011 г. 17:44 (ссылка)
Ммм...рамочки барби сайз...
Ответить С цитатой В цитатник
Перейти к дневнику
ludamilla   обратиться по имени Пятница, 04 Марта 2011 г. 18:01 (ссылка)
Спасибо
Ответить С цитатой В цитатник
Перейти к дневнику
Kapitoshka_N   обратиться по имени Пятница, 04 Марта 2011 г. 18:32 (ссылка)
Legionary, спасибо, Лёш :) Может пригодится когда-нибудь :) Возьму (на всякий случай) твой урок :)
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:32ссылка
Kapitoshka_N, пожалуйста:) когда-нибудь... эхех:)
kauniete   обратиться по имени Пятница, 04 Марта 2011 г. 18:59 (ссылка)
Spasibo za vash urok !:give_rose
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:33ссылка
kauniete, всегда пожалуйста:) практикуйтесь:)
Наталья_Ивановна_НИК   обратиться по имени Пятница, 04 Марта 2011 г. 20:11 (ссылка)
Ох,ё-моё!!!
Вот кажется,что оно мне НАДО!!!!!!
Заберу.
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:35ссылка
Наталья_Ив_Ник, надо! точно говорю!:derisive:
Перейти к дневнику

Пятница, 04 Марта 2011 г. 20:39ссылка
Слухаюсь и повинуюсь....Буду осваивать...
Венера01   обратиться по имени Пятница, 04 Марта 2011 г. 20:21 (ссылка)
Спасибо за информацию!
Ответить С цитатой В цитатник
Перейти к дневнику
Епонский_Бог   обратиться по имени Пятница, 04 Марта 2011 г. 21:20 (ссылка)
padding:10px - отвечает за отступ. Да?
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 04 Марта 2011 г. 21:22ссылка
Епонский_Бог, догадка или в комменты подглядел?;) шучу:)
Все так:) фишка как с бордером (левый,правый,верхний,нижний)- тоже работает:)
Перейти к дневнику

Пятница, 04 Марта 2011 г. 22:52ссылка
Да я этим пользовался в теге < img cellpadding=...
овно4ка   обратиться по имени Пятница, 04 Марта 2011 г. 22:23 (ссылка)
спасибо, ответ уже написан!
Ответить С цитатой В цитатник
Перейти к дневнику
Люргис   обратиться по имени Пятница, 04 Марта 2011 г. 22:38 (ссылка)
Спасибо!Попробую ночером сложить всё в кучу))
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 04 Марта 2011 г. 22:58ссылка
Люргис, успехов, все получится:))
lenio   обратиться по имени Суббота, 05 Марта 2011 г. 02:52 (ссылка)
Разудалый, русский праздник
С детства каждому знаком
Словно озорной проказник
Масленница, входит в дом
В парках города большого,
В переулочки деревни и села
Приход весны встречают снова
Блины пекут нам все мастера
Весну блинами так встречают
Провожают в путь зиму
Угощеньем вкусным умасляют
Весну девицу ,строптивицу, красну
Да под русскую ,веселую гармошку
Идут ноги сами быстро в пляс
Блины с мясом, сыром и картошкой
Да стопарик водки в самый раз!
Славный праздник и веселье
Ликует и смеется весь народ
Веселое у всех настроенье
Много шуток ,водят хоровод
Испокон веков бытует на Русси
Праздник этот славный, вкусный
Веселитесь!Блины ешьте от души
С праздником! И чтоб вам было вкусно
71330933_471 (670x503, 1775 Kb)
Ответить С цитатой В цитатник
Перейти к дневнику

Суббота, 05 Марта 2011 г. 21:13ссылка
lenio, спасибо, взаимно :)
Ириночка61   обратиться по имени Суббота, 05 Марта 2011 г. 09:03 (ссылка)
Привет.Я здесь была ,урок читала.Спасибо.
Ответить С цитатой В цитатник
Перейти к дневнику
НАТАЛИЯ_КОНОВАЛЕНКО   обратиться по имени Суббота, 05 Марта 2011 г. 11:26 (ссылка)
СПАСИБО.
Ответить С цитатой В цитатник
Перейти к дневнику
Legionary   обратиться по имени Суббота, 05 Марта 2011 г. 21:12 (ссылка)
Наталья_Ив_Ник,
Бррр... выкидываем панику!:)
Теперь все по порядку пожалуйста:
1. Письма с лиру?
2. про посты друзей, комменты и пр.?
3. почему это сообщение можете не получить?:)

Для остальных - не обращайте внимания, это мы о своем:))
Ответить С цитатой В цитатник
Гриола   обратиться по имени Воскресенье, 06 Марта 2011 г. 23:14 (ссылка)
Legionary, спасибо.
Ответить С цитатой В цитатник
Валентина_Валюша   обратиться по имени Понедельник, 07 Марта 2011 г. 09:21 (ссылка)
Ой, блин, видно, сверхтупая... Ничё не понимаю...
наверное, надо с самого-самого начала и по порядочку: где-то что-то пропустила и теперь просто зависаю. Тупо зависаю...
Ответить С цитатой В цитатник
Свет-Коляда   обратиться по имени Четверг, 10 Марта 2011 г. 09:25 (ссылка)
Спасибо. Забрала себе. Буду учиться.
Ответить С цитатой В цитатник
КристинаТН   обратиться по имени Понедельник, 14 Марта 2011 г. 19:04 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
нили   обратиться по имени Суббота, 19 Марта 2011 г. 01:08 (ссылка)
Спасибо.Хороших выходных!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] 2 [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку