РУБРИКАТОР
ВВЕДЕНИЕ 4-5 экраны.
ЗНАКОМСТВО 6-9 экраны.
ШРИФТЫ 10-14 экраны.
ЗАГОЛОВКИ 15-23 экраны.
РАЗМЕР 24-28 экраны.
НАССЫЩЕНОСТЬ 29-33 экраны.
НАЧЕРТАНИЕ 34-38 экраны.
ИНТЕРВАЛЫ 39-48 экраны.
ВЫКЛЮЧКА 49-53 экраны.
ЦВЕТ 54-57 экраны.
ОТСТУПЫ 58-66 экраны.
ДЛЯ КОПИРОВАНИЯ 67-88 экраны.
ВВЕДЕНИЕ
Лонгрид создан как ознакомительное пространство для работы с текстом на новом портфолио, с возможностью копирования параметров стиля для кастомизации лонгридов.
Основная цель данного материала — показать, как при помощи CSS можно изменять внешний вид текста, управлять его расположением для более выразительного оформления проектов.
Лонгрид позволяет не только изучить базовые принципы стилизации, но и посмотреть, как работает каждая функция. Такой формат помогает быстрее понять основы веб-оформления и научиться использовать их в собственных проектах.
ЗНАКОМСТВО
CSS это язык стилей, который используется для визуального оформления HTML-элементов на странице.
Для начала нужно понять из чего состоит сам код и как его активировать.
<p style = "Параметры стиля: свойство;"> ВАШ ТЕКСТ </p(Завершение)>
<> элемент с помощью которого код функционирует.
<p> это сокращение от английского слова paragraph (абзац). Этот тег сообщает браузеру: Внимание, отсюда начинается новый абзац текста.
</p> указывает на завершение элемента. Этот тег говорит браузеру: Здесь абзац закончился. И параметры которые вы вводите тоже завершаются.
style = " " параметр, с помощью которого к тексту применяются CSS стили, где кавычки служат пространством, куда записываются функции для оформления текста.
: знак разделяющий название свойства и его значение. "цвет-текста: зеленый"
; знак с помощью которого перечисляются значения в параметрах стиля. "первый параметр; второй параметр"
ШРИФТЫ
В CSS существует уже несколько видов подгруженных шрифтов.
Выбор шрифта производится с помощью следующего кода:
<p style = "font-family: ВЫБРАННЫЙ ШРИФТ;"> ВАШ ТЕКСТ </p>
Важный нюанс выбранный вами шрифт должен вводиться нижним регистром!
SANS-SERIF
SERIF
MONOSPACE
CURSIVE
FANTASY
VERDANA
HELVETICA
TIMES NEW ROMAN
COURIER NEW
TREBUCHET MS
GEORGIA
ROBOTO
ЗАГОЛОВКИ
HTML заголовки создаются с помощью тегов от <h1> до <h6>. Буква «h» означает Heading (заголовок).
<h1> ЗАГОЛОВОК </h1>
<h2> ЗАГОЛОВОК </h2>
<h3> ЗАГОЛОВОК </h3>
<h4> ЗАГОЛОВОК </h4>
<h5> ЗАГОЛОВОК </h5>
<h6> ЗАГОЛОВОК </h6>
Важно понимать что к заголовкам тоже можно применять стили. <h1 style = " "> ЗАГОЛОВОК </h1>
РАЗМЕР
Помимо того что мы можем изменять размер текста заголовками, мы так же можем изменять его размер с помощью стилей.
font-size: 80px;
ЗАГОЛОВОК
font-size: 50px;
ЗАГОЛОВОК
font-size: 30px;
ЗАГОЛОВОК
НАСЫЩЕННОСТЬ
Для выделения некоторых слов прямо по середине текста мы можем прописать <b>получив</b> такой результат.
<b> в переводе означает Bold. К нему мы также можем применять стили. <b style = " "> ТЕКСТ </b>
