HTML ШАБЛОНЫ САЙТОВ
Современные готовые адаптивные HTML 5 шаблоны.
Откройте для себя мир современных и оригинальных шаблонов сайтов...
АДАПТИВНЫЕ ШАБЛОНЫ шаблоны сайтов
Независимо от устройства, Вам будет удобно пользоваться сайтом.
Изображения будут большими, а текст четким! шаблоны сайтов

Урок 7. Текст

Свойства текста в css помогают изменять внешний вид слов и предложений. Давайте познакомимся с ними поближе:

Text-decoration - отвечает за оформление текста. Может иметь значения:

 

none - у текста нет оформления
underline - текст подчеркивается
overline - текст надчеркивается линией, расположенной над текстом
line-through - текст отображается зачеркнутым
blink - текст становится мигающим (не работает в IE)

 

Сейчас давайте уберем подчеркивание у ссылок, но при наведении курсора подчеркивание будет снова появляться.

 

a{
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}

 

 

Text-align - отвечает за горизонтальное выравнивание текста. Может иметь значения:

 

left - выравнивание по левому краю
center - выравнивание по центру
right - выравнивание по правому краю
justify - выравнивание по ширине

 

Пример: 

 

a{
  text-decoration:none;
  text-align:center;
}
a:hover{
  text-decoration:underline;
}

 

Text-indent - отвечает за отступы в абзацах. Отступы можно задавать в единицах измерения и %, могут быть положительными и отрицательными. Давайте рассмотри пример:

 

<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body>
    <p>Текст в параграфе, где первая строка будет с отступом.</p>
    <p>Текст в параграфе, где первая строка будет с отступом.</p>
    <p>Текст в параграфе, где первая строка будет с отступом.</p>
  </body>
</html>

 

Добавим параграфу свойство text-indent, чтобы задать красную строку:

 

p{
  text-indent:1.2em;
}

Лучше всего использовать единицу em, тогда отступы будут пропорциональны размеру шрифта. Итог:

css отступы в абзацах

 

Text-transform - отвечает за смену регистра. Может иметь значения:

 

capitalize - меняет первую букву каждого слова на заглавную
uppercase - меняет все буквы на заглавные
lowercase - меняет все буквы на строчные
none - изменений не происходит

 

Давайте немного изменим предыдущий пример  и добавим к абзацам id:

 

<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body>
    <p id="c">Текст в параграфе со свойством capitalize.</p>
    <p id="u">Текст в параграфе со свойством uppercase.</p>
    <p id="l">Текст в параграфе со свойством lowercase.</p>
  </body>
</html>

Теперь давайте в таблице стилей зададим для каждого id свойство text-transform

 

#c{
  text-transform:capitalize;
}
#u{
  text-transform:uppercase;
}
#l{
  text-transform:lowercase;
}

 

Результат:

 css смена регистра

 Интервалы

 Давайте познакомимся со свойствами которые регулируют расстояния между словами, буквами в словах и строками.

 

word-spacing - задает интервал между словами
letter-spacing - задает интервал между буквами
line-height - задает интервал между строками

 

Давайте вернемся к предыдущему примеру и еще немного изменим его:

 

#su{
  word-spacing:10px;
}
#sl{
  letter-spacing:5px;
}

 

 

Результат:

css регулировка расстояния между словами и буквами

line-height - увеличивает интервал между строками абзаца:

 

p{
  line-height:200%
}
#su{
  word-spacing:10px;
}
#sl{
  letter-spacing:5px;
}

 

 

Результат:

css интервал между строками абзаца

Напоследок рекомендуем вам создать свою HTML страничку и попрактиковаться со свойствами текста.

 

 

 

 
html ru 240x400
Please enable / Bitte aktiviere JavaScript!
Veuillez activer / Por favor activa el Javascript!

В современном мире порой иметь собственный сайт также важно, как например, наличие номера телефона или адреса электронной почты. К сожалению, не каждый самостоятельно может сделать себе красивый профессиональный сайт, а порой даже и кривой не получается. Заказывать у программистов тоже не идеальный выход, так как не всем это по карману.

Из такой ситуации помогут выйти бесплатные HTML шаблоны сайтов. HTML шаблон сайта – это набор уже готовых статических страниц для сайта определенной тематики. С помощью такого шаблона, создать простой сайт можно буквально за пару часов, при наличии базового знания HTML разметки. В разделе HTML Вы получите эти знания, если потратите еще пару часов на изучения, а если не пожалеете время на раздел CSS, то сможете полностью управлять дизайном HTML шаблонов сайтов и настраивать их полностью под свои нужды.

Еще одним неоспоримым плюсом шаблонов сайтов является, то что их пишут в большинстве случаев профессионалы. Под профессиональным шаблоном сайтом понимается не только красивый и современный дизайн, но и так как написан код. Поисковые системы смотрят, как у Вас написан сайт, SEO оптимизирован код или нет, на основании этого понижают или повышают Ваши позиции в выдаче. Поэтому хороший сайт должен быть не только красивый и современный, что немаловажно, но и грамотно написан в плане кода.

Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.