ZorNet.Ru — сайт для вебмастера » HTML и CSS » Работа с текстом при помощи CSS и HTML

Работа с текстом при помощи CSS и HTML

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

Но и немного про шрифты, как дополнение, ведь в прошлом по ним все были ограничены, так как в ходу было небольшие число шрифтов, которые отлично бы вписывались в стилистику на веб-сайте. Эти шрифты были наиболее часто устанавливаемыми шрифтами на компьютерах, поэтому они с большей вероятностью отображали изображение на экране. Если шрифт не был установлен на компьютере, он не будет отображаться на веб-сайте.

И так подходим к селекторам текста и их свойства, где также затронем красивый вывод текста на интернет портале или блоге.

Font-family

Это свойство будет задавать основной шрифт для текстового контента, а также можно задействовать на отдельном блоке описание.

Свойство font-family в действии выглядит следующим образом:

Код
body {
  font-family: Tahoma, Geneva, sans-serif;
}

Что основном задается для всего сайта, где добавляют размер шрифта и также оттенок цвета знаков.

Пример кода:

Код
.h1{
font-family: fantasy
}

Переходим к следующим аспектам.

Text-decoration

Это свойство будет определяет подчёркнутость текста, где чаще всего его задействуют для оформление ссылок, чтоб выглядели красиво. Но и безусловно для текста тоже может пригодиться например как:

text-decoration:overline — прямая линия над текстом;
text-decoration:underline — прямая линия под текстом;
text-decoration:line-through — прямая линия перечёркивающая текст.

Также можно убрать линию под ссылкой с помощью text-decoration:none

Text-transform

Text-transform - идет для полного изменения регистра знаков или буквы, где также может содержать значение capitalize, uppercase, lowercase или none. Ведь это значение изначально выставляет на перевод самые первые знаки или буквы для каждого следующего слова в верхний регистр.

Одно из важных аспектов, как базовых отступы, это говорится про отступы от края, также идет центровка текста и прочее, что выставляем по своему при задействование свойств:

1. letter-spacing и word-spacing — расстояние от буквы до буквы и от слова до слова.
2. line-height — определяет высоту строки элемента
3. text-align — здесь идет выравнивание текста слева, справа, по центру.
4. text-indent — создаем отступ, который идет от первой строки параграфа.

Код
p {
letter-spacing: 1em;
word-spacing: 2em;
line-height: 1;
text-align: left;
}

В этой заметке рассмотрели некоторые из основных принципов, которые способны к изменению веб-страницах с использованием HTML и CSS.
19 Декабря 2019 Просмотров: 1337 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar