Самоучитель по HTML

Справочник HTML

Оглавление:

  1. С чего начать?
  2. тег <BODY>
  3. Комментарии
  4. Просмотр результата
  5. Создание абзацев
  6. Создание заголовков
  7. Выравнивание текста
  8. Тег <PRE>
  9. Форматирование текста
  10. Атрибуты шрифта
  11. Специальные символы и таблица UNICODE
  12. Тег <HR>
  13. Гиперссылки
  14. Ссылки на объект в текущем документе
  15. Вставка графических изображений
  16. Бегущая строка
  17. Создание списков
  18. Создание таблиц
  19. Фреймы
  20. Встроенный фрейм
  21. Создание форм

CSS

  1. Каскадные таблицы стилей
  2. Способы определения стилей
  3. Определение стилей через классы
  4. Определение стилей через индентификаторы
  5. Позиционирование элементов Web-страницы
  6. Шрифты
  7. Свойства текста
  8. Свойства блоков текста
  9. Цветовое оформление
  10. Создание полей в документе
  11. Абзацный отступ

  1. Корректное отображение Web-страницы
  2. Атрибуты тега <META>

Свойства текста

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

         <HTML>
            <HEAD>
               <TITLE>Свойства текста</TITLE>
            </HEAD>
            <BODY>
               <center><h1>Параметр <b>line-height</b></h1></center>
               <P style="line-height:100px">Первая строка</P>
               <P>Вторая строка</P>
            </BODY>
         </HTML>
         

CSS, line-height

Другой параметр text-decoration со значением underline подчёркивает текст, со значением overline рисует линию над текстом, значение line-through перечёркивает текст, а blink создаёт эффект мерцания. Правда этот эффект у меня сработал только в Opere (версии 9.24). А вот Internet Explorer (седьмой версии) отказался производить данный эффект... Итак, рассмотрим пример:

         <HTML>
            <HEAD>
               <TITLE>Свойства текста</TITLE>
            </HEAD>
            <BODY>
               <center><h1>Параметр text-decoration</h1></center>
               <P style="text-decoration: underline">Первая строка</P>
               <P style="text-decoration: overline">Вторая строка</P>
               <P style="text-decoration: line-through">Третья строка</P>
               <P style="text-decoration: none">Четвёртая строка</P>
            </BODY>
         </HTML>
         

text-decoration, underline, blink

Следующий параметр text-transform предназначен для преобразования символов текста. Его значения: capitalize - первая буква каждого слова будет прописаной, а все остальные строчные; uppercase - делает буквы прописными; lowercase - буквы преобразуются в строчные; none - отсутствие преобразований. Например:

      <HTML>
         <HEAD>
            <TITLE>Свойства текста</TITLE>
         </HEAD>
         <BODY>
            <center><h1>Параметр text-transform</h1></center>
            <P style="text-transform: capitalize">Первая буква каждого
                                слова становится прописной.</P>
            <P style="text-transform: uppercase">Все буквы
                                        становятся прописными.</P>
            <P style="text-transform: lowercase">Буквы Cтановятся СТРОЧНЫМИ</P>
            <P style="text-transform: none">Отсутствие преобразований</P>
         </BODY>
      </HTML>
      

text-transform, capitalize, uppercase

Ещё один параметр свойства текста, это text-align. Он выравнивает текст. Со значением left выравнивает текст по левому краю, со значением right по правому краю, со значением center по центру, со значением justify по ширине (то есть края текста будут ровными).

      <HTML>
         <HEAD>
            <TITLE>Свойства текста</TITLE>
         </HEAD>
         <BODY>
            <center><h1>Параметр text-align</h1></center>
            <P style="text-align: left">Выравнивает текст по левому краю</P>
            <P style="text-align: right">Этот текст выравнен по правому краю</P>
            <P style="text-align: center">Данный текст будет центрирован</P>
            <P style="text-align: justify">А этот текст будет выравнен по ширине.
            То есть края текста будут ровные, что позволит улучшить внешний вид
            Web-страницы и тем самым оставить хорошее впечатление у посетителей
            вашего сайта. Данный тег лучше использовать почаще ;)</P>
         </BODY>
      </HTML>
         

text-align, left, right, justify

Ну и последний параметр в этой главе, это text-indent. Отвечает за отступ первой строки абзаца от левого края. Значения можно задавать как просто в единицах изменения (в пикселях), так и в процентах.


Предыдущая страница         Следующая страница


Вы можете свободно использовать фрагменты сайта, с условием размещения ссылки на наш сайт:
<a href="http://tri222.narod.ru"><b>Самоучитель по созданию Web-страниц.</b></a>

Copyright © 2008 "tri222.narod.ru"
Вопросы и свои предложения вы можете отправлять на tri222@yandex.ru

Хостинг от uCoz