FAQ по CSS - Работаем с текстом | Блог Алексея Фомичева

Работаем с текстом — FAQ по CSS

При подготовке данного материала я некоторое время раздумывал, как предоставить вам информацию по всем свойствам css, с помощью которых можно изменить текст на сайте до неузнаваемости.

Поэтому давайте сразу я введу вас в курс дела, чтобы вы поняли, как будет мною предоставляться информация.

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

Свойство шрифта

И первое свойство — это font-family. Данное свойство устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого.

font-style — определяет начертание шрифта: обычное, курсивное или наклонное. Соответственно оно принимает значение normal, italic, oblique.

font-weight — устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100.

  • normal — нормальная жирность;
  • lighter — светлое начертание;
  • bold – полужирный;
  • bolder – жирный;
  • 100-900 – от светлого шрифта до самого жирного.

font-size – устанавливает размер шрифта: нормальный, в пунктах, пикселях, процентах. Соответственно принимает значение normal, pt, px, %

Давайте все выше перечисленное применим на практике, например опишем тег параграфа подключив таблицу глобальных стилей.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML .01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equin="Content-Type" content="text/html; charset=utf-8">
<title>Свойство шрифта</title>
<style type="text/css">
p {
font-family: Verdana;
font-size: 14px;
font-weight: normal;
}
</head>
 
<body>
<p>Пример использования текста выполненного с помощью
гарнитуры Verdana, с размером в 14px и нормальным начертанием шрифта</p>
</body> 
</html>

Так же к тексту можно применить свойство, которое влияет на весь текст целиком:

text-decoration – оформляет текст в виде его подчеркивания, перечеркивания, линии над текстом и мигания. То есть none, underline, overline, line-through, blink.

  • text-transform — преобразует текста элемента в заглавные или прописные символы.
  • none — убрать все эффекты;
  • capitalize — начинать с прописных;
  • uppercase – все прописные;
  • lowercase — все строчные.

text-align — устанавливает горизонтальное выравнивание текста. Принимает значение left, right, center, justify, соответственно по левому краю, по правому, по центру, по ширине.

text-indent – устанавливает правую строку для элемента. Обычно устанавливается в процентах, пикселях (пунктах).

line-height – определяет межстрочный интервал текста от базового линии шрифта. Принимает несколько значений normal, множитель, px (pt), %.

Попробуем применить данные свойства на предыдущем примере.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML .01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equin="Content-Type" content="text/html; charset=utf-8">
<title>Свойство шрифта</title>
<style type="text/css">
p {
font-family: Verdana;
font-size: 14px;
font-weight: normal;
text-indent: 20px; line-height: 25px; text-alignjustify;
}
</head>
 
<body>
<p>Пример использования текста выполненного с помощью
гарнитуры Verdana, с размером в 14px и нормальным начертанием шрифта.
Так же устанавливаем красную полосу с размером в 20px, 
межстрочный интервал относительно базовой линии шрифта в 25px,
выравнивание текста по ширине.</p>
</body> 
</html>

В следующей записи вы узнаете, как работать с цветом на веб-странице.

С уважением, Алексей Фомичёв

Про Штирлица:
Штирлиц проснулся в тюремной камере.
Он совершенно не помнил, как сюда попал, какое сегодня число и какая в городе власть.
После долгих размышлений он наконец решил, что если войдет гестаповец, надо будет сказать: «Хайль Гитлер, я — штандартенфюрер СС фон Штирлиц», а если войдет советский солдат — представиться: «Я — полковник Исаев». В этот момент входит милиционер и говорит:
«Ну и нажрались Вы вчера, товарищ Тихонов».



Поделись с друзьями в социальных сетях!




05.12.2013 / Создание блога / Теги: , / Комментарии: 5
Похожие записи
Комментарии: 5
  1. 05.12.2013 в 14:08 – Ответить

    Здравствуйте, Алексей! Не подскажите как сделать на блоге закрытый раздел (только для подписчиков, как у вас) или это плагин творит чудеса? У вас есть статья по этому поводу?

    • Алексей Фомичев
      05.12.2013 в 14:46 – Ответить

      Этот скрипт мне любезно предоставил Евгений Попов. Называется он «Магнит для Подписчиков» (ссылка ведет на страницу с описание). Пока я статью не писал про этот скрипт, но на данный момент он принес мне чуть больше 200 подписчиков к моей базе за 2 неполных месяца

      • 05.12.2013 в 18:15 – Ответить

        Любезно — это подарил? Дороговато стоит, но думаю он окупает свою цену... Как сделать вот такой виджет у сайдбаре с переключениями: рубрики, страницы и т.д?

        • Алексей Фомичев
          05.12.2013 в 19:35 – Ответить

          Сайдбар, а именно Рубрики, Страницы, На замке и чуть ниже Комментарии и Популярные вшиты в шаблон и создаются с помощью шорткода. Данный шаблон платный, не я его создавал. Максиму что я сделал — это перевел его в стиль инфо-минимализма и настроил под себя.

          • 05.12.2013 в 19:41 –

            Ясно, спасибо за информацию!

Оставить комментарий