Как редактировать текст в css

Изменение свойств текста

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

font-family

Свойство font-family позволяет установить шрифт, которым будет отображаться текст веб-страницы, например, Times New Roman, Arial или Verdana.

Определяемые шрифты должны быть установлены на компьютере пользователя, поэтому совершенно не разумно использовать редкие и мало известные шрифты. Существуют несколько отборных "безопасных" шрифтов (наиболее часто используются шрифты arial, verdana, times new roman), но вы можете определять более одного шрифта, разделяя их запятыми. Это делается для того, чтобы в том случае, когда у пользователя не установлен первый шрифт из определенных в свойстве, то браузер будет искать следующий по списку шрифт, затем следующий, и так до тех пор, пока не будет найден установленный у пользователя шрифт, либо будет достигнут конец списка. Такая возможность очень полезна, так как иногда на разных компьютерах может устанавливаться разный набор шрифтов. Таким образом, например, декларация "font-family: arial, helvetica" может использоваться для определения соответствующего шрифта на PC (на котором традиционно устанавливается шрифт arial, но нет шрифта helvetica) и на Apple Mac (на котором традиционно нет шрифта arial, и в этом случае будет использован шрифт helvetica).

Внимание: Если имя шрифта состоит из нескольких слов, то его следует заключать в кавычки, например, font-family: "Times New Roman".

font-size

Свойство font-size задает размер шрифта. Будьте с этим свойством осторожны: не стоит использовать в качестве заголовков параграфы, отображаемые шрифтом большого размера; для этого есть специальные теги <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, которые имеют массу достоинств, даже если в действительности шрифт параграфа будет больше шрифта заголовка (что не должны делать разумные люди).

font-weight

Свойство font-weight определяет толщину или жирность шрифта. На практике обычно используют два его состояния: font-weight: bold и font-weight: normal. Хотя в теории оно также может принимать значения bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 и 1000. Однако, посмотрев на то, как большинство браузеров отказываются понимать эти значения, вы поймете, что гораздо безопаснее иметь дело всего лишь со значениями bold и normal.

font-style

Свойство font-style определяет, будет ли текст отображаться курсивом или нет. Оно может быль либо font-style: italic, либо font-style: normal.

text-decoration

Свойство text-decoration определяет подчеркнутость текста. Оно может быть:

  • text-decoration: overline – помещает горизонтальную линию над текстом.
  • text-decoration: line-through – помещает горизонтальную линию через текст, создавая эффект перечеркивания.
  • text-decoration: underline — помещает горизонтальную линию под текст, создавая эффект подчеркивания. Не стоит использовать, так как обычно пользователи предполагают, что подчеркнутый текст – ссылка.

Как правило, данное свойство используется для оформления ссылок, в частности чтобы убрать подчеркивание при помощи значения text-decoration: none.

text-transform

Свойство text-transform позволяет изменить регистр букв текста.

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

Разбивка текста

Свойство letter-spacing и свойство word-spacing определяют расстояние между буквами и словами соответственно. Их значением может быть число в любых единицах измерения, либо ключевое слово normal.

Свойство line-height определяет высоту строки элемента, не влияя на размер шрифта. Значением может быть число (которое будет множителем размера шрифта. Например, "2" означает, что высота строки в два раза больше размера шрифта.), либо проценты, либо слово normal.

Свойство text-align выравнивает текст внутри элемента. Принимает значения left (выравнивание по левому краю), right (выравнивание по правому краю), center (выравнивание по центру) или justify (равномерное выравнивание по ширине).

Свойство text-indent создает отступ на заданную величину первой строки параграфа. Подобное форматирование традиционно для полиграфии и редко в цифровых средствах информации.

Свойства текста в CSS

Наряду с несколькими свойствами font- *, CSS предлагает множество свойств text-*.

text-align

Свойство text-align должно применяться к блочному элементу и определяет, каким образом текст и дочерние строчные элементы выравниваются по горизонтали.

Наиболее используемые значения:

  • left
  • right
  • center
  • justify

Эти значения соответствуют тем же кнопкам выравнивания, что вы найдёте в Microsoft Word или Photoshop:

Не рекомендуется использовать значение justify . Хотя это может выглядеть визуально привлекательно, поскольку формируется прямоугольник текста, но усложняет чтение.

Значение text-align по умолчанию равно start . В принципе, start может быть как left , так и right , в зависимости от направления текста, заданного direction для HTML-документа.

direction — это свойство CSS, которое может быть ltr (слева направо) или rtl (справа налево):

  • если выбран ltr , start равен left ;
  • если выбран rtl , start равен right .

text-decoration

Свойство text-decoration применяется для добавления линии к вашему тексту.

Значение по умолчанию: none .

  • overline
  • underline
  • line-through

По умолчанию, к ссылкам ( <a> ) применяется text-decoration: underline . Одной из первых вещей, которые верстальщики обычно делают — это удаляют данный стиль:

text-indent

Свойство text-indent позволяет добавить пространство перед первой буквой первой строки блочного элемента.

Значение по умолчанию: 0 (ноль).

Обратите внимание, что отступ есть только в первой строке. Если вы хотите сдвинуть весь блок текста, используйте padding .

Как и для свойства font-size , вы можете использовать px, em или даже %.

text-shadow

Если вы когда-либо использовали Photoshop, то, вероятно, применяли инструмент для добавления тени. В CSS вы можете добавить тень к тексту, чтобы сделать его более причудливым или удобным для чтения.

  • х — горизонтальное смещение;
  • у — вертикальное смещение;
  • размытие;
  • цвет.

Обязательны только значения х и у. Размытие тени по умолчанию 0 (ноль), а цвет по умолчанию совпадает с цветом текста.

Это свойство сложное, так что используйте его осторожно и не сходите с ума!

CSS свойства описаниея текста.

Свойство text-indent определяет величину отступа первой строки абзаца.

num — число, на которое нужно сделать отступ.

Свойство text-align определяет стиль шрифта.

left — по левому краю.

right — по правому краю.

center — по центру.

justify — по всей ширине.

Свойство text-decoration определяет оформление текста.

none — без оформления.

underline — подчеркиванутый текст.

overline — черта сверху.

blink — мигающий текст.

Свойство text-shadow служит создания тени для букв.

значения представляют собой величины отступов тени и ее цвет.

Свойство letter-spacing определяет значения межбуквенного интервала.

normal — определяется браузером.

auto — интервал изменяется так, чтобы текст уместился в одну строку.

num — числовое значение.

Свойство line-height определяет межстрочный интервал.

normal — определяется браузером.

num — число с единицами измерения.

Свойство word-spacing служит для задания расстояния между словами.

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

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