Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы CSS » Оформление текста в CSS. Основы CSS для начинающих. Урок №5

31.01.2017


15:49


3646


2


Оформление текста в CSS. Основы CSS для начинающих. Урок №5

Оформление текста в CSS. Основы CSS для начинающих. Урок №5

Всем привет!
В этом уроке я расскажу, как в CSS коде оформить текст.
Итак, вы научитесь через файл CSS выравнивать текст по правому и левому краю, по ширине и по центру, делать подчеркивание текста, надчеркивание и перечеркивание, а также сможете изменить размер между буквами и словами.
В статье не весь список возможностей в CSS для оформления текста, но этого вполне достаточно, чтобы оформить текст.
Итак, приступим к уроку №5 и научимся сегодня форматировать текст :coffe:.

Для начала подготовим текстовые файлы.
Создайте файл «HTML» и «CSS».Свяжите их вместе, как на примере ниже или прочитайте статью о том, «как подключить CSS» (в статье есть три способа подключения).

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключения таблицы CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Заголовок h1</h1>
<h2>Заголовок h2</h2>
<h3>Заголовок h3</h3>
<p>На сайте StepkinBlog.ru вы найдете уроки по основам HTML, Bootstrap3, CSS, PHP, WordPress, JavaScript и т.д. Жду вас на своем блоге! Подписывайтесь на обновления, чтобы не пропустить ничего новенького. Этот текст был подготовлен для статьи по основам CSS</p>
</body>
</html>

Выравнивание текста в CSS

Свойство «TEXT-ALIGN»
Все вы, наверное, помните с уроков HTML атрибут «align». Этим атрибутом мы выравнивали текст по правому и левому краю, по ширине и по центру. Так вот, в CSS есть что-то подобное, это свойство называется «text-align».

Значение:

  • left - выравнивание по левому краю (значение по умолчанию);
  • right - выравнивание по правому краю;
  • center - выравнивание по центру;
  • justify - выравнивание по ширине (по правому и левому краям одновременно).

Пример:

h1{ text-align:center; /* выравнивание текста по центру */}
h2 {text-align:left; /* выравнивание текста по левому краю */}
h3 {text-align:right; /* выравнивание текста по правому краю */}
p {text-align:justify; /* выравнивание по ширине */}

Результат:

Выравнивание текста в CSS

Подчеркивание, надчеркивание и перечеркивание текста

Свойство «TEXT- DECORATION»
Подчеркивание и надчеркивание можно использовать в различных ситуациях, но я часто использую это правило для ссылок.
Перечеркивание текста можно использовать для интернет-магазина. Вы, наверное, замечали такой маркетинговый ход, кода старая цена перечеркивается и ставиться новая. Так вот, это делается с помощью CSS правила «text- decoration».

Значение:

  • none - без оформления (значение по умолчанию);
  • underline - текст подчеркивается снизу;
  • overline - текст надчеркнут сверху;
  • line-through - текст перечеркивается;

Пример:

h1 {
text-decoration:underline; /* текст подчеркивается снизу */
}
h2 {
text-decoration:overline; /* текст надчеркивание сверху */
}
h3 {
text-decoration:line-through; /* текст перечеркивается */
}
p {
text-decoration:none; /* без оформления */
}

Результат:

Подчеркивание, надчеркивание и перечеркивание текста

Абзац (красная строка) в CSS

Свойство «TEXT-INDENT»
Правило «text-indent» пригодится вам, если вы решили на веб-страницах сделать отступы первой строки, то есть, сделать абзац или красную строку.

Значение задается в «px» или  «%».

Пример:

p {text-indent:20px; /* отступ первой строки в 20 px  */}

или вот так:

p {text-indent:10%; /* отступ первой строки в 10%  */}

В HTML еще один длинный текст с тегом <p>Текст</p>.

Результат:

Абзац (красная строка) в CSS

Текстовый регистр

Свойство «TEXT-TRANSFORM»
Если вам захотелось, чтобы буквы заголовка были заглавными или, наоборот, маленькими (строчными), или чтобы все первые буквы в словах начинались с большой буквы, то CSS правило «text-transform» со всеми этими задачами справится быстро.

Значение:

  • none - значение по умолчанию
  • capitalize - Все Первые Буквы Слов Заглавные
  • uppercase - ВСЕ БУКВЫ ЗАГЛАВНЫЕ
  • lowercase - все буквы строчные

Пример:

h1 {
text-transform: none; /* значение по умолчанию */
}
h2 {
text-transform: uppercase; /* все буквы заглавные */
}
h3 {
text-transform: lowercase; /* все буквы строчные */
}
p {
text-transform: capitalize; /* все первые буквы слов заглавные */
}

Результат:

Текстовый регистр

Расстояние между буквами в CSS

Свойство «LETTER-SPACING»
Правило «letter-spacing» поможет изменить расстояние между буквами.

Значение задается в «px».

Пример:

p {
letter-spacing :10px; /* расстояние между буквами */
}

Результат:

Расстояние между буквами в CSS

Расстояние между словами в CSS

Свойство «WORD-SPACING»
Правило «word-spacing» поможет изменить расстояние между словами.

Значение задается в «px».

Пример:

p {
word-spacing :50px; /* расстояние между словами */
}

Результат:

Расстояние между словами в CSS

Тень текста с помощью CSS

Свойство «TEXT-SHADOW»
Чтобы добавить тень для текста, существует правило «text-shadow».

Синтаксис:

text-shadow: «X» «Y» «Амплитуда» «Цвет»;

Значение:

  1. X – это горизонтальное смещение тени (положительное значение – смещение тени вправо, отрицательное – смещение тени влево);
  2. Y – вертикальное смещение тени (положительное значение – смещение тени вниз, отрицательно значение – смещение тени вверх);
  3. Амплитуда – чем выше ее значение, тем больше степень размытия;
  4. Цвет – цвет тени

Пример:

h1
{
text-shadow: 4px 1px 3px #999; /* тень заголовка*/
}

Результат:

Тень текста с помощью CSS

Цвет текста в CSS

Свойство «COLOR»
Если вам нужно заменить цвет заголовков или текста, воспользуйтесь правилом «color». Цвет можно задавать по названию (англ. слова), по шестнадцатеричному значению и RGB.

Пример:

По названию

p
{
color: yellow; /* Цвет текста по названию */
}

По шестнадцатеричному значению

p
{
color: #FFFF00; /* по шестнадцатеричному значению*/
}

С помощью RGB

p
{
color: RGB(249, 231, 16); /* Цвет текста в RGB */
}

Результат:

Цвет текста в CSS

Подробней о свойстве «color» мы рассмотрим  в другой статье, в которой я расскажу, как заменить цвет фона, теста, ссылки, рамки и т.д.  Дам таблицу кодов цветов.
Так что подписывайтесь на обновления моего блога, чтобы не пропустить новых уроков, так как следующая статья будет о том, как поменять размер шрифта, стиль и многое другое ;-).



Случайные записи:

  1. Позиционирование блоков CSS. Основы CSS для начинающих. Урок №14
  2. Оператор условия if else Основы PHP с нуля Урок №9
  3. Как создать слайдер (карусель). Основы bootstrap 3 для начинающих. Урок №18
  4. Комментировать код в HTML. Что это и зачем нужно…
  5. Тег div в HTML. Основы HTML для начинающих. Урок №17

Последние записи рубрики:

  1. Бесплатный курс по основам CSS
  2. Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
  3. Тесты CSS онлайн. Основы CSS для начинающих
  4. Слои в CSS. Основы CSS для начинающих. Урок №16
  5. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15

2 ответа(ов) на статью: “Оформление текста в CSS. Основы CSS для начинающих. Урок №5”

  1. Владимир says:

    В статье не весь список возможностей в CSS для оформления текста>>>

    А где весь?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Владимир, Вы название рубрики видели? Рубрика называется "Основы CSS". Для основ этого достаточно!
    Отвечу на Ваш вопрос "А где весь?", в Яндексе и в Гугле 100% есть.

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245