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

 -ћетки

css eurovision 2008 eurovision 2009 flash html li-web.ru liveinternet mozilla firefox mp3 photoshop windows александр рыбак альбом баллы бегуща€ бесплатно билан видео блог блоги браузеры видео видео рыбак вопросы вставить выделение генератор дизайн дима билан дл€ дневник дневники евровидение игры инструкци€ интервью интернет как как пользоватьс€ картинки кнопка кнопки коды комментарии конкурс лиру логические москва мп3 музыка народ настройки начинающих новички обучение онлайн ответы оформление песн€ плеер плейлист поиск посты почта приложени€ программа программы путеводитель радио рамки рамочки расширенный редактор реклама росси€ рыбак видео рыбак видео сайт сакис видео сделать скачать слова песни смайлики смешное смешное видео смотреть ссылки строка танцы текст текст песни уроки установка файлы финал флеш цвет часы эхо москвы юмор €ндекс

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

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

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

 

 -—татистика

—татистика LiveInternet.ru: показано количество хитов и посетителей
—оздан: 16.05.2009
«аписей:
 омментариев:
Ќаписано: 27436

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 дл€ начинающих
ћетки:  

ѕроцитировано 138 раз
ѕонравилось: 43 пользовател€м



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 в ссылку
 ѕодписатьс€ на комментарии
 ѕодписать картинку