-Метки

cent codepen codepen плейлист codopen corel psp sothink swf quicker Маски анимация анимашки браузеры бродилки видео видео плеер вопросы и ответы все под рукой выпечка вязание генераторы декор жж клипарты кнопки-плееры коллажи коллажи по урокам коллажи с уроками компьютерная грамотность куколки кулинария медицина мое видео мои вырезки музыка музыкальная открытка нейросеть оформление панорамы плагины фильтры плеер плейлист подсказки от друзей поеер поздравление поздравлениея моих близких поздравления поздравления моих близких программы программы уроки работы друзей разные рамочки родители слайдер ссылки по созданию коллажей ссылки формулы текст уроки уроки в программе adobe flash уроки корел уроки по рамочкам уроки фш фильтры флеш материал флеш открытки флеш разные уроки и анимация флеш уроки фоны фотошоп фракталы фракталы с уроком часики это интересно

 -Рубрики

 -Приложения

  • Перейти к приложению Стена СтенаСтена: мини-гостевая книга, позволяет посетителям Вашего дневника оставлять Вам сообщения. Для того, чтобы сообщения появились у Вас в профиле необходимо зайти на свою стену и нажать кнопку "Обновить
  • Перейти к приложению Дешевые авиабилеты Дешевые авиабилетыВыгодные цены, удобный поиск, без комиссии, 24 часа. Бронируй сейчас – плати потом!
  • ТоррНАДО - торрент-трекер для блоговТоррНАДО - торрент-трекер для блогов
  • Музыкальный плеер
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо

 -Фотоальбом

Посмотреть все фотографии серии Апшеронск
Апшеронск
18:22 22.07.2015
Фотографий: 8
Посмотреть все фотографии серии Дети нашего двора
Дети нашего двора
18:06 12.07.2015
Фотографий: 2
Посмотреть все фотографии серии цветы с дачи
цветы с дачи
10:02 12.07.2015
Фотографий: 2

 -Стена

маргарита_шубина маргарита_шубина написал 21.12.2012 20:50:16:

 -

Быстрый переход по страницам блога маргарита_шубина:

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

Поиск сообщений в Татьяна_Волкова_Литвинова

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

 

 -Статистика

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


HTML & CSS - серия 1

Пятница, 28 Марта 2014 г. 09:22 + в цитатник
Цитата сообщения Arnusha HTML & CSS - серия 1

Пост писался для Яндекса в основном,всего их 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

Серия сообщений "ссылки, формулы":
Часть 1 - Все под рукой !
Часть 2 - плеер
...
Часть 9 - Универсальный код разрезных рамочек для Ли.ру и Блогов Мэ-(из блога La_Perla (Маргарита))
Часть 10 - Ваша картинка с надписью и в рамке.Урок.
Часть 11 - HTML & CSS - серия 1
Часть 12 - HTML & CSS - серия 2
Часть 13 - HTML & CSS - серия 3
...
Часть 26 - Здесь я узнал, как сделать сайт!!!
Часть 27 - Перевод терминов Corel PaintShop Pro
Часть 28 - Красивый текст для блога

Рубрики:  все под рукой
Метки:  

 

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

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

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

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