Текст - это неотъемлемый элемент сайта, который занимает большую часть сайта и несет некоторое количество информации. Не оформив весь текст на вашем сайте, весь сайт будет смотреться не совсем привлекательно, т.к. смотреть на текст, который не форматирован, не очень приятно для глаза. Поэтому в этой статье я научу вас вставлять текст , создавать абзацы, изменять размер и шрифт текста и научу как использовать не только кастомные шрифты (их на самом деле очень много в конце текста).
Текст в HTML
1. Как вставить текст? Размер текста. Курсив. Жирный текст.
Начнем с малого. Чтобы вставить текст на ваш сайт нужно, в файле HTML написать вот такой тег:
<h1>Здесь пишите любой текст, какой захотите</h1>
h1 - это заголовочный текст, то есть самый большой. Поэтому его можно поменять на h2, h3, h4, h5, h6. А вот их размеры:
- h1 – 32 px.
- h2 – 24 px.
- h3 – 19 px.
- h4 – 16 px.
- h5 – 13 px.
- h6 – 11 px.
Чтобы сделать текст жирный на сайте, нужно просто тот текст, который хотите изменить, окутать в вот такой тег <strong><strong>. Так же делается и с мелким текстом, то окутываете вот в такой тег <small></small>. Курсив - <i></i> или <em></em>. Эти теги можно комбинировать между собой, например:
<em><strong><h1>Будет большой жирный курсив</h1></strong></em>
2. Как начать с нового Абзаца или с новой строки?
Чтобы начать с новой строки нужно сначала разделить текст на строки, и под конец каждой строки нужно добавить тег <br>. Пример:
<h1>Съешь ещё этих мягких французских булок, <br>
да выпей же чаю.<br> </h1>
Чтобы начать новый абзац, нужно, как и со строками, разделить на абзацы и написать вот такой тег <p></p>. Да, этот тег нужно поставить в начала абзаца и в конец абзаца. Пример:
<h3><em><p>Текст — зафиксированная на каком-либо материальном носителе человеческая мысль;</p>
в общем плане связная и полная последовательность символов.</em></h3>
Я предпочитаю изменять размер текста и шрифт в CSS, т.к. я уже привык и я там быстрее выполняю данную процедуру. Так что переходим в CSS.
Текст в CSS
1. Как подключить CSS?
Для начала нужно создать и привязать CSS-файл к HTML-файлу. Делается это через одну строчку. В <head></head> пишем вот этот код:
<link rel="stylesheet" type="text/css" href="main.css">
То, что я указал жирный текстом, нужно поменять на ваше имя CSS-файла. Внимание, если все ваши файлы и CSS, и HTML находятся в одной папке, то вы просто указываете имя CSS -файла. Если же они не находится в одной папке, то просто перетащите их в одну папку или укажите вместо названия CSS-файла полный путь к этому к нему.
Чтобы начать работать в CSS нужно задать вашему тексту уникальное имя (идентификатор) Пример:
<h1 class=''>Здесь пишите что угодно</h1>
class='' В кавычках пишите любое название. Например: class='text_title'.
После переходите в CSS и пишете .text_title{ }. И весь код пишется в фигурный скобках. Обязательно используйте перед названием .text_title точку.
В тексте можно поменять очень многое. Так много, что эту статью придется изучать около получаса. Поэтому я решил, что покажу только самое необходимое и только то, чем пользуюсь лично.
2. Цвет фона текста и цвет самого текста
background-color: ; - цвет фона текста. Указывается в кодах цвета. Пример: background-color: # ff000; Какой вам нужен код можно узнать в интернете, на сайте Color Codes HTML
color: ; - цвет текста. Указывается в кодах цвета. Пример: color: # ff000; Какой вам нужен код можно узнать в интернете, на сайте Color Codes HTML
3. Размер и шрифт текста
font-size: ; - размер текста. Указывается в px. Пример: font-size: 25px;
font-family: ; - шрифт. В CSS встроенно только 9 шрифтов.
- Arial;
- Arial Black;
- Comic Sans MS;
- Courier New;
- Georgia;
- Impact;
- Times New Roman;
- Trebuchet MS;
- Verdana.
Но как подключить другие шрифты, я покажу чуть-чуть по позже.
Прозрачность текста
opacity: ; - прозрачность текста. Указывается в дробных значениях от 0.0 до 1.0. Пример: opacity: 0.4;
Расстояние между символами
letter-spacing: ; - расстояние между символами. Указывается в px. Пример: letter-spacing: 15px;
Выравнивание текста и оформление
text-align: ; - Выравнивание текста. Можно выровнять вот по таким тегам:
- text-align: center; Выравнивание текста по центру.
- text-align: justify; Выравнивание по левому и правому краю.
- text-align: left; Выравнивание текста по левому краю.
- text-align: right; Выравнивание текста по правому краю.
- text-align: inherit; Не изменяет положение элемента.
- text-align: start; Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
- text-align: end; Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.
text-transform: ; - Управляет преобразованием текста элемента в заглавные или прописные символы. Можно вставить вот такие теги:
- text-transform: capitalize; Первый символ каждого слова будет заглавным.
- text-transform: lowercase; Все символы будут с нижним регистром
- text-transform: uppercase; Все символы будут с верхним регистром
- text-transform: none; Регистр не меняется
text-decoration: ; - Это оформление текста. Можно вставить вот такое теги:
- text-decoration: line-through; Создает перечеркнутый текст (
пример). - text-decoration: overline; Линия проходит над текстом.
- text-decoration: underline; Устанавливает подчеркнутый текст.
- text-decoration: none; Все оформление исчезает.
Как импортировать другие шрифты?
Чтобы использовать не кастомные шрифты, нужно перейти на сайт "Google Fonts". Там выбираете любой шрифт, который вас интересует и после справа появляется окно. Выбираете кнопку "@import", копируете импорт (без <style></style>).
@import url('https://fonts.googleapis.com/css2?family=Comforter&display=swap');
И вставляете в самые первые строчки CSS-файла, чтобы потом не мешался. После копируете "font-family: ;"
font-family: 'Comforter', cursive;
И наслаждайтесь красивым текстом. Внимание! Ни все шрифты, которые подходят для латинских символов, подходят к кириллице и на оборот. Поэтому в фильтре выбираете язык.
