<- Немного о стилях. WEB-программирование. Урок 2
В прошлом уроке мы начали со стилями, так давай чуть углубимся в них.
1. Толщина текста
В прошлом уроке мы создали мини-страницу с текстом. Как по мне, заголовок выглядит слишком жирно. Давайте это исправим, добавив свойство font-weight к тексту. Пишем его рядом с font-family (можно над ним, можно под): font-weight: 300;. Посмотрим на результат:
Заголовок стал менее жирным. Вот, как выглядят различные font-weight (толщина начертания шрифта) для этого шрифта:
С толщиной разобрались. Как изменить размер?
2. Размер текста
Все просто. Есть свойство font-size. Размер шрифта указывается либо в пикселях, либо в относительных единицах (не рекомендую). Есть и другие абсолютные единицы измерения, но о них позже. Пока что нам хватит и пикселей. Для этого к стилям элемента p новую строчку: font-size: 22px;
С размером текста, думаю, понятно. Перейдем к кое-чему по-сложнее.
3. Классы
Допустим, у нас есть два параграфа текста. Мы хотим один сделать размером 22 пикселя, а второй 32. Как это сделать? Присвоим им классы. Чтобы упростить задачу, можем использовать следующую конструкцию: тэг.класс, например: p.my_class1, или h1.my_class_777. И нажимаем Tab.
Теперь к этому элементу можно обращаться по этому "имени". Например:
Чем классы отличаются от ID? Класс - это словно имя. Мы можем сделать сколько угодно элементов с одним и тем же классом, и к ним применятся одни и те же свойства. ID - это как имя, фамилия, отчество и номер паспорта. Он не может повторяться. Не может быть двух элементов с одинаковым ID. Рассмотрим их подробнее.
4. ID
ID обозначаются символом решетки. Чтобы создать элемент с ID test, нужно написать element*решетка*test, и нажать Tab.
5. Форматирование текста
Существуют так же теги, которые форматируют текст. Например, чтобы сделать текст зачеркнутым, напиши <s>зачеркнутый текст</s>. Вот пример:
Кстати говоря, тег <br> - перенос строки. Он незакрывающийся!
Только что ты еще больше стилизовал свой сайт, сделал его более красивым, узнал про теги s, u, b, i, small, big, br, атрибуты font-weight, font-size, узнал про классы, ID. Надеюсь, тебе понравилось. Чтобы не пропускать уроки - подпишись на блог, и канал в телеграм. Если остались вопросы, задавай их в комментариях, или в лс в телеграм (ссылка в канале). Спасибо за прочтение :)
