РУБРИКАТОР
ВВЕДЕНИЕ 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>
font-weight: 800;
ТОЛЩИНА
font-weight: 600;
ТОЛЩИНА
font-weight: 400;
ТОЛЩИНА
НАЧЕРТАНИЕ
font-style: normal;
НОРМАЛЬНЫЙ
font-style: italic;
КУРСИВНЫЙ
Для написания цитат мы можем использовать <i>получив</i> такой результат.
<i> в переводе означает Italic. К нему мы также можем применять стили.
<i style = " "> ТЕКСТ </i>
font-style: oblique;
НАКЛОННЫЙ
LETTER-SPACING
Межбуквенный интервал также можно настроить с помошью стилей.
letter-spacing: 0px;
ИНТЕРВАЛ
letter-spacing: 5px;
ИНТЕРВАЛ
letter-spacing: 15px;
ИНТЕРВАЛ
LINE-HEIGHT
Межстрочный интервал может помочь вам сделать текст гармоничнее, после выбранного размера текста и межбуквенного интервала.
line-height: 40px;
МЕЖСТРОЧНЫЙ
ИНТЕРВАЛ
line-height: 60px;
МЕЖСТРОЧНЫЙ
ИНТЕРВАЛ
line-height: 80px;
МЕЖСТРОЧНЫЙ
ИНТЕРВАЛ
ВЫКЛЮЧКА
Выключка текста на лонгриде выравнивает текста относительно краев страницы.
text-align: right;
ВЫКЛЮЧКА ТЕКСТА
text-align: center;
ВЫКЛЮЧКА ТЕКСТА
text-align: left;
ВЫКЛЮЧКА ТЕКСТА
ЦВЕТ ТЕКСТА
color: darkgreen;
ЦВЕТ ПО ТЕГУ
color: rgb( 54, 125, 61);
ЦВЕТ ПО ПАЛИТРЕ RGB
color: #367d3d;
ЦВЕТ ПО КОДУ HEX
ОТСТУПЫ
Они позволяют регулировать расстояние между элементами (экранами) текста.
margin-bottom: -100px;
НАПРИМЕР
---------------
margin-top: -100px;
НАПРИМЕР
--
margin-bottom: -50px;
НАПРИМЕР
---------------
margin-top: -50px;
НАПРИМЕР
КОПИРОВАНИЕ
СКЕЛЕТЫ
<p style = "Стили;"> ВАШ ТЕКСТ </p>
ПАРАГРАФ
<i style = "Стили;"> ВАШ ТЕКСТ </i>
КУРСИВ
<b style = "Стили;"> ВАШ ТЕКСТ </b>
БОЛД
<h1 style = "Стили;"> ВАШ ТЕКСТ </h1>
ЗАГОЛОВОК
<br>
СНОСКА СТРОКИ
ШРИФТ / РАЗМЕР
font-family: нижний_регистр_шрифта;
ВЫБОР ШРИФТА
font-size: ЗНАЧЕНИЕpx
РАЗМЕР ТЕКСТА
font-weight: 100/900;
НАСЫЩЕННОСТЬ
НАЧЕРТАНИЕ
font-style: ЗНАЧЕНИЕ;
NORMAL / ITALIC / OBLIQUE
ИНТЕРВАЛЫ
letter-spacing: ЗНАЧЕНИЕpx;
МЕЖБУКВЕННЫЙ
line-height: ЗНАЧЕНИЕpx;
МЕЖСТРОЧНЫЙ
ВЫКЛЮЧКА
text-align: ЗНАЧЕНИЕ;
LEFT / CENTER / RIGHT
ЦВЕТ
color: ЗНАЧЕНИЕ;
НАЗВАНИЕ
color: rgb( ЗНАЧЕНИЕ);
RGB
color: #ЗНАЧЕНИЕ;
HEX
♥
СПАСИБО
♥
