Стили текста CSS

css стиль текста
В прошлом уроке вы знакомились с основами css. Сегодня будем оформлять текст с помощью css.
Чтобы изменить  шрифт на всем сайте можно записать следующее правило:
шрифт css
Через запятую мы перечисляем шрифты, причем отображается первый шрифт. Если первого шрифта нет на компьютере пользователя, то отображается второй. и так далее. Далее указывается семейство шрифтов.

Всего существует 5 категорий шрифтов:

  • serif – шрифт с засечками,
  • sans-serif – без засечек,
  • monospace – все буквы таких шрифтов имеют одинаковую ширину.
  • fantasy – декоративные,
  • cursive – курсивные, рукописные.

Изменить размер текста css:
размер шрифта css

Основные единицы измерения размеров текста:

  • % – проценты,
  • em – единица размера шрифта,
  • px – пиксели,
  • pt – пункты,
  • small, medium, large и другие ключевые слова.

Жирность текста css:
жирность текста css

Жирность текста css может принимать числовые значения (100-900) и с определяться помощью ключевых слов:

  • normal – нормальный (числовое значение 400),
  • bold – жирный (700)
  • bolder – жирнее, (900)
  • lighter – тоньше (100)

Стиль текста css
стиль текста css

Стили текста могут принимать различные начертания:

  • normal,
  • italic – курсив,
  • oblique – наклонный.

Изменяем цвет текста css:
цвет текста css
Выравниваем текст:
Untitled (10)

Виды выравнивания текста css:

  • left – слева
  • right – справа,
  • center – по центру,
  • justify – по ширине

выравнивание текста css
Оформление текста css:
Untitled (11)

Виды оформления:

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

Межстрочный интервал css:
/*
расстояние между строками css

Межстрочный интервал в css может выражаться в числах, процентах и пикселях.

Выбираем регистр букв. Например, пропишем все заголовки h2 большими буквами:
регистр букв css

Возможные значения text-trnsform;

  • uppercase – заглавные буквы,
  • capitalize – первый символ слова в предложении – заглавная буква.
  • lowercase – строчные буквы,
  • none – без изменений.

Отступы текста, например установим отступы абзацев, т.н. красную строку:
красная строка css

text-indent может выражаться в пикселях, процентах, а также принимать отрицательные значения.

Рубрика: CSSМетки:

12 ответов к «Стили текста CSS»

  1. Привет не могли бы вы заявив , который блог-платформа вы работе с ?
    Я планирование для начала свой ​​собственный блог в ближайшем будущем
    но у меня возникают жестким
    время решающим между BlogEngine / WordPress/B2evolution и
    Drupal . Я потому спрашиваю, потому что
    ваш дизайн и стиль выглядит иначе потом большинство блогов и я ищу что-то совершенно уникальным .
    PS К сожалению для быть не по теме , но
    я должен был спросить !

    My web-site: sluhovyeapparatykiev

    1. Я смотрю, что вы уже определились с платформой. Я вас разочарую — мой блог на площадке Blogger (ее еще называют blogspot). Конечно, на этой площадке много недостатков, и я не буду советовать вам ее в качестве "места жительства". Все же с шаблонами проблем нет.
      Из предложенных вами площадок, я бы выбрала wordpress, потому что это самый популярный движок, и в связи с этим, по нему должно быть больше плагинов, шаблонов, туториалов и пр.
      При выборе шаблона лучше искать в зарубежном интернете.

    1. Это шаблон с лицензией Creative Commons Attribution 3.0, т.е. распространяется свободно с указанием автора.
      Скачать шаблон можно здесь http://www.templateism.com/2013/12/brand-mag-ux-responsive-blogger-template.html

    2. я там пробовал, из шапки, в названии блога, постоянно "умное слово" висит, и его никак не смог удалить. с указанием автора, в том числе :). ладно, будем искать :). я то просто вижу, что у вас ссылочка ноуфоллов стала и всего одна осталась и ишо всякие исправления то же вижу. :))

    3. Павел, помню я это умное слово ))
      Не помню как, но я от него смогла избавится. Напиши в личку, поковыряем шаблон. Могу свою исправленную версию выслать. Кроме того, у меня есть промежуточная версия шаблона. Можешь посмотреть на тестовом блоге http://wergweg.blogspot.ru/

  2. Сколько уже сверстал, а некоторые вещи только узнал ) Спасибо!
    К стати, как вставить такой блок комментариев на свой сайт? В нете искал, но так и не понял.

    1. Владимир, я же говорю — это стандартные комментарии на моей площадки, я их никак не устанавливала. И к форуму их нельзя прикрутить или мне этот способ неизвестен)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *