2014-02-07

Стили текста 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 может выражаться в пикселях, процентах, а также принимать отрицательные значения.

12 комментариев :

Анонимный комментирует...

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

My web-site: sluhovyeapparatykiev

Павел комментирует...

Наталья, вы покупали это шаблон (Brand Mag UX)? Или? Не подскажите, где работоспособную free версию скачать?

Mycrib комментирует...

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

Mycrib комментирует...

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

Павел комментирует...

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

Иванова Наталья комментирует...

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

Владимир Кулаксизов комментирует...

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

Иванова Наталья комментирует...

Мой блог на площадке blogger.com. Это стандартные комментарии, несколько лишь изменены стили.

Владимир Кулаксизов комментирует...

А подробнее нельзя? Как поставить такие комментариии на свой форум?

Иванова Наталья комментирует...

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

Игорь Сир комментирует...

Спасибо! Редко где пишут понятным, доступным языком!

Иванова Наталья комментирует...

Игорь, стараюсь...

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

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