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

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

 

 -Цитатник

Полиночка, спасибо огромное за поздравление с 12-летием дневничка! - (9)

Поздравляю Ниночку (Arnusha) с 12-летием ее Дневничка! Друзья, сегодня Дневничку Ниночки (Arnusha...

Спасибо Огромное Зоя за поздравление! - (0)

С ДНЕМ РОЖДЕНИЯ, НИНОЧКА! (Arnusha) ...

Алиночка, душа моя, спасибо! - (1)

С ДНЕМ РОЖДЕНИЯ НИНОЧКА (Arnusha) ДОРОГАЯ НИНОЧКА СДНЕМ РОЖДЕНИЯ!!! Хочу поздравить с днем р...

Гелечка, огромное спасибо за подарок! - (3)

Поздравляю дорогая!(Arnusha) С днем рождения! Пусть каждый твой день будет маленьким праздн...

Спасибо Ларочка за подарок! - (2)

С Днём рождения, Ниночка! (Arnusha) Дорогая Ниночка,хоть и с запозданием, искренне поздравляю ...

 -Рубрики

 -Статистика

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


HTML & CSS - серия 1

Понедельник, 30 Мая 2011 г. 09:35 + в цитатник
Пост писался для Яндекса в основном,всего их 5 серий.
Но там много полезного и для Ли.ру,и потому решила выбрать
у автора,что здесь будет полезно и показать вам!Все 5 серий
полезны как для начинающих,так и для опытных пользователей.
Сегодня 1 серия о самых простых тегах.Еще раз спасибо Проксима.

Заголовки
Для
оформления заголовков используются теги <h1>...<h6>
С этим думаю всем понятно,это не сложно.Далее
Гарнитура (вид) и цвет шрифта

Здесь есть два способа. Второй будет описан позднее. Первый - используется тег

<font>

с атрибутами face и color, соответственно:

шрифт Verdana

<font face="Verdana">шрифт Verdana</font>


красный шрифт

<font color="red">красный шрифт</font>


шрифт цвета MidnightBlue

<font color="MidnightBlue">шрифт цвета MidnightBlue</font>


шрифт цвета MidnightBlue

<font color="#191970">шрифт цвета MidnightBlue</font>


Цвет имеет название и цифровое значение, как видно в этом примере
(MidnightBlue=#191970). О цветах можно написать очень много, но я
остановлюсь на одной ссылке:

Подбор цвета. Для использования подходят web-safe и web-smart цвета.


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

Тег <span> относится к выделяемому (форматируемому) фрагменту текста:
<span...>текст</span>. Сразу замечу, что аттрибуты
(свойства), работающие с тегом <span>, могут применяться также с
тегами <p> и <div>. Однако тег <p> применяется к
абзацу, что не всегда нам подходит (хотя при форматировании абзаца
рационально использовать именно его). Тег <div> можно применять
так же, как и <span> - это скорее дело вкуса. Он имеет более
широкую область применения и обладает рядом дополнительных возможностей.
Но это уже не относится к форматированию текста. Поэтому для
определённости остановимся на <span>.

Запись
<span>текст</span> лишена какого-либо смысла сама по себе.
Тег <span> предназначен для того, чтобы приписать тексту
какое-либо свойство. Вот их-то я сейчас попытаюсь перечислить в
более-менее логическом порядке.

Цвет шрифта

Цвет шрифта можно задать с помощью тега <font>, о чём говорилось выше. Теперь воспользуемся тегом <span> и атрибутом style:

красный шрифт - <span style="color:red">красный шрифт</span>

Точно так же можно задавать и цифровые значения цветов (подробнее о них см. выше.

Гарнитура (вид) шрифта

О способе задать гарнитуру (вид) шрифта с помощью тега <font> также шла речь прошлый раз.

Сейчас рассмотрим второй способ - с  использованием конструкции

<span style="font-family:***">шрифт</span>

На место ***
необходимо подставить гарнитуру (вид) шрифта. Как правило, подставляют
название не определённого шрифта, а целого семейства шрифтов, например, Verdana, Times и др. Получаем:

шрифт Verdanaшрифт Times

Размер шрифта

Для указания размера шрифта используется конструкция

<span style="font-size:***">шрифт</span>

Размер
шрифта может задаваться различными способами. Пожалуй, самый наглядный и
простой - подставить вместо *** одно из следующих семи значений:

xx-large, x-large, large, medium, small, x-small, xx-small.

Результат:

очень-очень крупный шрифт
очень крупный шрифт
крупный шрифт
средний шрифт
мелкий шрифт
очень мелкий шрифт
очень-очень мелкий шрифт

Можно указывать размер шрифта способом, хорошо знакомым из Word - в пунктах (pt). 1 пункт равен 1⁄72 дюйма. Примеры:

12pt

36pt

Значения 12pt, 36pt в этих примерах подставляются на место *** в общей формуле <span style="font-size:***">шрифт</span>. Также можно использовать и пиксели:

шрифт 12px
шрифт 36px

Приведённые выше размеры являются абсолютными. Но размер шрифта можно задать и относительным образом - в процентах:
шрифт размера 150% от исходного

<spant style="font-size:150%">шрифт размера 150% от исходного</span>


или по отношению к ширине буквы "m" в исходном шрифте (соответствующая единица измерения называется em):
шрифт размера 1,5em от исходного

<span style="font-size:1,5em">шрифт размера 1,5em от исходного</span>


Вес (насыщенность) шрифта

Это - то, что можно задать с использованием простого тега <strong>
жирный текст

<strong>жирный текст</strong>

С помощью <font> это делается так:жирный шрифт

<span style="font-weight:bold">жирный шрифт</span>


Преимущество такого способа в том, что наряду со значением веса шрифта bold можно использовать также значения bolder и lighter, получая шрифт "разной жирности" (в данном случае речь идёт об относительных значениях). А по умолчанию используется значение normal - обычный шрифт.

Стиль шрифта

Kурсив можно получить как с использованием тега <em>, так и следующим способом:
курсив

<span style="font-style:italic">курсив</span>


Вместо font-style:italic можно написать font-style:oblique, и тогда должен получиться не курсив, а наклонный ("угловатый") шрифт. Но это не всегда работает.

Капитель

Напоследок воспользуемся font-variant, чтобы сделать все буквы в нашем фрагменте текста прописными (такой вариант шрифта называется капителью):
капитель

<span style="font-variant:small-caps">капитель</span>


А вот - пример использования нескольких свойств сразу:

наш шрифт

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



Спасибо Проксима

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

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

yaqut   обратиться по имени Благодарю милая! Понедельник, 30 Мая 2011 г. 09:50 (ссылка)
Ответить С цитатой В цитатник
Olga_2008   обратиться по имени Понедельник, 30 Мая 2011 г. 09:56 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
VALJ   обратиться по имени Понедельник, 30 Мая 2011 г. 10:56 (ссылка)
Спасибо за полезность,Ниночка!
Ответить С цитатой В цитатник
kobra1201   обратиться по имени Понедельник, 30 Мая 2011 г. 12:28 (ссылка)
Ответить С цитатой В цитатник
принцеска_1   обратиться по имени Понедельник, 30 Мая 2011 г. 17:26 (ссылка)
Ответить С цитатой В цитатник
Бахыт_АБМ   обратиться по имени Понедельник, 30 Мая 2011 г. 21:07 (ссылка)
Ответить С цитатой В цитатник
хаверочка   обратиться по имени Понедельник, 30 Мая 2011 г. 23:19 (ссылка)
СПАСИБО БОЛЬШОЕ ДОРОГАЯ!!!
Ответить С цитатой В цитатник
Nella__solneshko   обратиться по имени Вторник, 31 Мая 2011 г. 00:35 (ссылка)
Спасибо.
Ответить С цитатой В цитатник
TATYSIY   обратиться по имени Вторник, 31 Мая 2011 г. 07:28 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
tatjana_946   обратиться по имени Вторник, 31 Мая 2011 г. 15:00 (ссылка)
Ответить С цитатой В цитатник
Галина_Кукушкина   обратиться по имени Вторник, 31 Мая 2011 г. 17:04 (ссылка)
Спасибо за урок!
Ответить С цитатой В цитатник
Галина_Викторова   обратиться по имени Вторник, 31 Мая 2011 г. 19:06 (ссылка)
.
0_1ccd8_c97f3d34_L (500x351, 197Kb)
Ответить С цитатой В цитатник
NikaLive   обратиться по имени Вторник, 31 Мая 2011 г. 19:14 (ссылка)
Спасибо !!!
Ответить С цитатой В цитатник
IRISHA2011   обратиться по имени Среда, 01 Июня 2011 г. 13:27 (ссылка)
Спасибо огромное! Очень полезная информация.
Ответить С цитатой В цитатник
Монтале   обратиться по имени Четверг, 02 Июня 2011 г. 19:03 (ссылка)
Спасибо! Будем учиться.
Ответить С цитатой В цитатник
Linelchen   обратиться по имени Среда, 08 Июня 2011 г. 22:32 (ссылка)
Ответить С цитатой В цитатник
МОННА   обратиться по имени Пятница, 01 Июля 2011 г. 22:36 (ссылка)
Ответить С цитатой В цитатник
хаверочка   обратиться по имени Понедельник, 25 Февраля 2013 г. 11:05 (ссылка)
Ответить С цитатой В цитатник
zoua45   обратиться по имени Пятница, 07 Августа 2015 г. 06:43 (ссылка)
Благодарю за урок!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] [Новые]
 

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

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

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

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