Как в html изменить расположение текста

Как в html изменить расположение текста

Оформление текста в 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» мы рассмотрим  в другой статье, в которой я расскажу, как заменить цвет фона, теста, ссылки, рамки и т.д.  Дам таблицу кодов цветов.
Так что подписывайтесь на обновления моего блога, чтобы не пропустить новых уроков, так как следующая статья будет о том, как поменять размер шрифта, стиль и многое другое ;-).



Источник: stepkinblog.ru


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