Добрый день!
Меня зовут Николай и это канал HTML/CSS-курсы.
На предыдущих лекциях мы с вами разобрали базовое строение и основные теги HTML и познакомились с теоретической информацией о CSS. Сегодня мы с вами немного ближе познакомимся с CSS-документом и разберём некоторые свойства для редактирования текста.
Для начала сделаем файл для стилей в той же папке, где у нас находится HTML- документ. Назовём этот документ main.css (.css - расширение документа).
После создания нам нужно его подключить к нашему HTML-документу, чтобы тот знал, из какого документа он должен брать информацию о стилях изображаемых объектов. Для этого подключения в теге <head> прописываем тег link с определёнными атрибутами. Выглядеть эта строка будет следующим образом:
<link rel="stylesheet" href="main.css">, где в атрибуте rel указывается тип подключаемого документа, а в атрибуте href путь к нему. Поскольку он находится в одной папке с нашим HTML-документом, то просто прописывается название.
Теперь мы можем перейти в документ CSS и начать работать со стилями нашего сайта. В первую очередь зададим несколько значений для свойств тега <body>. Тег <body> - главный тег, в котором у нас будет находиться вся страница, поэтому общие свойства мы можем прописать сразу в нём.
Давайте, для начала, укажем цвет шрифта для нашего документа. Для этого используется свойство color. Теперь в файле CSS мы с вами прописываем:
body {
color: #000000;
}
Цвет мы с вами можем прописывать по ключевым словам (например, black, white, yellow и т. д.) или номером цвета (например, #ffffff - белый, #000000 - чёрный и т. д.).
Теперь давайте изменим размер шрифта. По умолчанию в браузере присваивается 16 размер, если он не указан. Сделаем его чуть меньше, например, 14. Для этого необходимо прописать:
font-size: 14px;
И изменим сам шрифт текста нашей страницы на Arial. Стандартные шрифты есть почти в любом браузере, поэтому мы можем смело их использовать:
font-family: Arial;
Все эти свойства прописываются в одном селекторе. В итоге он будет выглядеть так:
Теперь перейдём к оформлению нашего заголовка. Поскольку заголовков на странице у нас может быть несколько, предлагаю присвоить ему атрибут class и назвать, к примеру, "golova". В таком случае, выглядеть тег у нас будет следующим образом:
<h1 class="golova">Привет, мир!</h1>
Давайте, раз это заголовок, разместим его по центру. В CSS пропишем:
.golova {
text-align: center;
}
Таким образом текст расположится по центру. Можно расположить его по правой стороне, если "center" заменить на "right".
И предлагаю изменить цвет фона для заголовка. Для этого используется свойство background-color. Сделаем серый цвет:
.golova {
text-align: center;
background-color: gray;
}
Вот мы и оформили заголовок. Теперь можно перейти к нашему абзацу. Давайте присвоим нашему тегу <p> класс, к примеру, "abzac1". Да , если на странице много текста, то, чтобы не запутаться, можно просто присваивать классы с одним и тем же названием, просто меняя цифру в конце.
Как мы видим, текст располагается с самого края окна браузера. Это выглядит не очень красиво, поэтому сделаем отступ. Для этого есть свойства: margin-left (отступ слева), margin-right (отступ справа), margin-top (отступ сверху), и margin-bottom (отступ снизу).
Предлагаю сделать небольшие отступы от краёв окна по 15 пикселей.
.abzac1 {
margin-left: 15px;
margin-right: 15px;
}
И видим результат:
Немного увеличим междустрочный интервал. Для этого пишем свойство:
line-height: 18px;
Через CSS мы также можем сделать шрифт жирным. Для этого необходимо прописать свойство font-weight, а значения bold, которое и будет говорить о том, что шрифт должен быть жирным. Для того, чтобы сделать курсив: font-style: italic;
Также мы можем изменить размер интервала между буквами. Давайте сделаем в нашем заголовке чуть больше воздуха. Для этого в селекторе класса golova добавим строку:
letter-spacing: 2px;
И конечно помним, что любой абзац должен начинаться с красной строки. Т. е. у первой строки каждого абзаца на нашей странице должен быть увеличен отступ слева. Для этого мы к тегу <p> пропишем свойство text-indent и дадим ему значение 20px.
В конечном счёте, оформление страницы у нас будет выглядеть следующим образом:
Вот мы с вами и познакомились с некоторыми свойствами для редактирования текста через CSS. на сегодня на этом закончим. Не забывайте подписываться на канал, чтобы не пропустить новые выпуски.