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

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

 

 -Цитатник

Иван Силыч Горюшкин-Сорокопудов 1873-1954 Россия - (2)

Портрет Н.В. Мансыревой На даче Портрет художника Ивана Силыча Горю...

Гарин Евгений - художник-маринист - (2)

Гарин Евгений - художник-маринист Море Черное – большое: Утром серо-голубое...

клипарт-русские красавицы вырезка клипарта Веры Ларионовой - (2)

Единственная-любовь-Шерлока-Холмса Елена-Прекрасная Княгиня-Ольга Леди-Гамильтон Ле...

Чудо штучки из картофеля. Остыть не успеют! - (4)

Ингредиенты  Картофель – 450 гр.  Яйцо – 1 шт.  Мука &ndash...

 -Рубрики

 -Сообщества

Участник сообществ (Всего в списке: 1) Мир_клипарта
Читатель сообществ (Всего в списке: 1) Мир_клипарта

 -Статистика

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


HTML & CSS - серия 2

Среда, 01 Июня 2011 г. 08:14 + в цитатник
HTML & CSS - серия 2
Предыдущая серия - вот:
серия 1
В этих уроках, а также на сайтах htmlbook.ru, postroika.ru, zvirec.com, htmlka.com
и многих других достаточно много информации, причём она толково
изложена. Тем не менее я решила продолжить свои рассказы, чтобы тоже
быть более-менее последовательной.
Кстати, Вы не заметили, что я пишу уже и о CSS (style - это оттуда)? Но об этом - чуть позже.

Форматирование текста: использование тега <span> и атрибута style (2)

Напомню, что про тег <span> и аттрибут style шла речь в прошлый раз.
Было показано, как c их помощью задать цвет, гарнитуру (вид) шрифта, а
также размер шрифта, его вес (насыщенность), стиль (напр. наклонный) и
вариант (капитель). В конце в качестве примера мы получили вот такой
шрифт:

 

наш шрифт<span
style="color:green; font-family:Verdana; font-size:150%;
font-weight:bold; font-style:italic; font-variant:small-caps">наш
шрифт</span>

 

Расстояние между буквами, словами и строчками


Конечно, между буквами можно и пробелы поставить :):) Но красивее (во всех смыслах) воспользоваться свойством letter-spacing, которое можно задать, например, в пикселях:

три пикселя между буквами<span style="letter-spacing:3px">три пикселя между буквами</span>

Аналогично, чтобы задать расстояние между словами, используем word-spacing:

семь пикселей между словами<span style="word-spacing:7px">семь пикселей между словами</span>

Теперь зададим высоту строки, точнее говоря, расстояние между строчками. Для этого воспользуемся свойством line-height:

в
этом абзаце расстояние между строчками - 25px (такие вещи лучше делать с
абзацами, используя вместо <span> тег <p> )

<p style="line-height:25px">в этом абзаце...</p>

Изменяя
расстояние между строчками, можно добиться того, чтобы строки наезжали
друг на друга. Это иногда используется для создания "многослойного"
текста.

Подчёркнутый или зачёркнутый текст

Такой текст получить совсем несложно. Для этого используем свойство text-decoration:
подчёркнутый текст<span style="text-decoration:underline">подчёркнутый текст</span>
зачёркнутый текст<span style="text-decoration:line-through">зачёркнутый текст</span>

Подчёркнутый
и зачёркнутый текст также можно получить, просто используя парные теги
<u>...</u> и <s>...</s>, соответственно. Однако
стили здесь приведены не для того, чтобы Вы печатали побольше букв. В
некоторых случаях нужно задавать именно стили, но об этом будет
отдельный разговор.

синий текст, подчёркнутый красной линией<span style="color:red; text-decoration:underline"><span style="color:blue">синий текст...</span></span>

Обратите внимание, что тег </span> используется дважды.

Советую
также заглянуть на страничку по ссылке - там есть кое-что из того, что я
пропускаю (например, как оформить нижние и верхние индексы).

 

Мерцающий текст

Задаётся опять-таки при помощи свойства text-decoration:

мерцающий текст<span style="text-decoration: blink">мерцающий текст</span>

Данная "фича" работает только в Opera и Firefox :(:(.

 

Текст с тенью

Задаётся при помощи свойства text-shadow:

текст с тенью<span style="font-size:x-large; font-weight:bold; text-shadow: silver 0.1em 0.05em">текст с тенью</span>

Здесь
указывается смещение вправо и вниз. Если надо задать смещение влево и
вверх, используются отрицательные значения. В качестве единиц измерения
здесь лучше брать относительные (em), хотя абсолютные (px) тоже
работают. О единицах измерения (размерах) говорилось в прошлой серии. Напомню, что em - размер по отношению к ширине буквы "m" в исходном шрифте.

 

Источник Проксима

Спасибо авторам уроков!


Arnusha

Рубрики:  Полезности
Уроки
Метки:  

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



Мама_Дина   обратиться по имени Среда, 01 Июня 2011 г. 08:22 (ссылка)
Буду учиться, спасибо!
Ответить С цитатой В цитатник
bond52   обратиться по имени Среда, 01 Июня 2011 г. 08:47 (ссылка)
Ответить С цитатой В цитатник
TATYSIY   обратиться по имени Среда, 01 Июня 2011 г. 09:21 (ссылка)
Спасибо Ниночка!
Ответить С цитатой В цитатник
Перейти к дневнику
Olga_2008   обратиться по имени Среда, 01 Июня 2011 г. 09:48 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
Перейти к дневнику
Феврония52   обратиться по имени Среда, 01 Июня 2011 г. 10:34 (ссылка)
.НИНОЧКА, СПАСИБО!
ДГНЬ ЗАЩИТЫ ДЕТЕЙ 1 (449x450, 30Kb)
Ответить С цитатой В цитатник
Перейти к дневнику
Mausinka   обратиться по имени Среда, 01 Июня 2011 г. 12:00 (ссылка)
спасибо за полезную информацию
Ответить С цитатой В цитатник
Перейти к дневнику

Среда, 01 Июня 2011 г. 22:00ссылка
Mausinka, Здравствуйте!!!Где пропадали?
NikaLive   обратиться по имени Среда, 01 Июня 2011 г. 12:50 (ссылка)
Спасибо, Ниночка !!!
Ответить С цитатой В цитатник
Перейти к дневнику
lusina03   обратиться по имени Среда, 01 Июня 2011 г. 15:08 (ссылка)
Arnusha, Спасибо Нинуля за уроки бум бум учится забираю
Ответить С цитатой В цитатник
Перейти к дневнику
VALJ   обратиться по имени Среда, 01 Июня 2011 г. 15:18 (ссылка)
СПАСИБО ЗА УРОК, НИНОЧКА!
Ответить С цитатой В цитатник
Перейти к дневнику
татьяна_татуревич   обратиться по имени Среда, 01 Июня 2011 г. 16:38 (ссылка)
спасибо
Ответить С цитатой В цитатник
Перейти к дневнику
ВИ-ТЮ-ША   обратиться по имени Среда, 01 Июня 2011 г. 18:48 (ссылка)
Надо осознать!
Ответить С цитатой В цитатник
Перейти к дневнику
Перейти к дневнику

Среда, 01 Июня 2011 г. 22:53ссылка
Какая летом охота?))))
fatima62   обратиться по имени Среда, 01 Июня 2011 г. 19:00 (ссылка)
Ответить С цитатой В цитатник
Перейти к дневнику
Roxar   обратиться по имени Среда, 01 Июня 2011 г. 20:50 (ссылка)
.
233427154 (300x400, 20Kb)
Ответить С цитатой В цитатник
Перейти к дневнику
принцеска_1   обратиться по имени Четверг, 02 Июня 2011 г. 00:15 (ссылка)
Ответить С цитатой В цитатник
Перейти к дневнику
Бахыт_АБМ   обратиться по имени Четверг, 02 Июня 2011 г. 12:59 (ссылка)
Спасибо за пост!
Ответить С цитатой В цитатник
Перейти к дневнику
Галина_Кукушкина   обратиться по имени Четверг, 02 Июня 2011 г. 14:14 (ссылка)
Спасибо за уроки!
Ответить С цитатой В цитатник
Перейти к дневнику
ОГОЛЬ   обратиться по имени Четверг, 02 Июня 2011 г. 14:57 (ссылка)
Спасибо за урок!!!А я все экспериментировала методом разборки...Очень благодарна!!!Буду изучать и пробовать!!!
Ответить С цитатой В цитатник
Перейти к дневнику
tatjana_946   обратиться по имени Четверг, 02 Июня 2011 г. 15:18 (ссылка)
Ответить С цитатой В цитатник
Перейти к дневнику
Галина_Викторова   обратиться по имени Четверг, 02 Июня 2011 г. 17:32 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
Перейти к дневнику
Монтале   обратиться по имени Четверг, 02 Июня 2011 г. 19:08 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
Перейти к дневнику
lu-e   обратиться по имени Четверг, 02 Июня 2011 г. 22:58 (ссылка)
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 03 Июня 2011 г. 22:37ссылка
lu-e, Спасибо огромное!!!
МОННА   обратиться по имени Пятница, 01 Июля 2011 г. 22:40 (ссылка)
Спасибо, Ниночка!!!
Ответить С цитатой В цитатник
duvsh20   обратиться по имени Среда, 16 Ноября 2011 г. 04:08 (ссылка)
Уже многие убедились, что ваш ресурс становится объектом для поиска нужной информации в том числе и для меня. Если честно, мало таких сайтов, где все подробно описано, за исключением этого ресурса и url http://saito-stroi.ru/saito-stroi.ruurl где не менее подробно описано, как самостоятельно создать сайт. Еще раз благодарю за полезную информацию, она мне очень помогла!
Ответить С цитатой В цитатник
хаверочка   обратиться по имени Понедельник, 25 Февраля 2013 г. 11:06 (ссылка)
Ответить С цитатой В цитатник
zoua45   обратиться по имени Пятница, 07 Августа 2015 г. 06:45 (ссылка)
Благодарю за урок!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] [Новые]
 

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

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

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

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