Добрый день!
Меня зовут Николай и это канал HTML/CSS-курсы.
На предыдущих лекциях мы с вами разобрали, что такое HTML, из чего он состоит, как выглядит "скелет" HTML-документа, главные теги и основные теги для работы с текстом в HTML.
Сегодня немного вернёмся к теории и познакомимся с CSS.
Итак, первое, что мы должны знать это то, документ CSS служит для оформления HTML-документа. Это документ, который будет содержать в себе все стили нашей страницы. Цвет фона, шрифты, оформление блоков, кнопок, отступы и многое другое оформляется с помощью CSS. Сам документ имеет расширение .css. И, также как и HTML, он читается сверху вниз.
Одновременно с этим мы с вами разберём пару атрибутов. Первый атрибут - это class. Он и используется для стилизации элементов.
На прошлых занятиях мы с вами уже создавали документ, в котором у нас был заголовок <h1> и текст. Давайте вернёмся сейчас к этому документу и добавим этому заголовку атрибут class. Выглядеть это будет следующим образом:
<h1 class="title">Привет, мир!</h1>.
Теперь, когда мы перейдём в документ CSS, к которому будет идти обращение, мы сможем обратиться к этому тегу через атрибут class. Для этого нужно будет прописать селектор следующего вида:
.title {
свойство: значение;
свойство: значение;
}
В этом селекторе мы с вами и будем указывать интересующие нас свойства заголовка и придавать им нужные значения.
Помимо атрибута class стилизовать элементы можно ещё через атрибут id. Разница между этими атрибутами заключается в том, что, если атрибут class с одним и тем же значением можно использовать для любого количества элементов на странице, то id - это уникальный идентификатор и использовать с одним значением его можно только для одного элемента. В HTML-документе он будет прописываться похожим образом:
<h1 id="title">Привет, мир!</h1>
А селектор в CSS будет выглядеть так:
(октото́рп)title {
свойство: значение;
свойство: значение;
}
(Здесь нет возможности использовать значок решётки, т. к. Яндекс.Дзен считает его хэштегом и автоматически превращает в странную ссылку).
Атрибут id не так удобен, поэтому использовать в процессе обучения мы его не будем. Но знать его тоже необходимо.
Также мы можем стилизовать в CSS сами теги. На примере этого же самого заголовка селектор будет выглядеть следующим образом:
h1 {
свойство: значение;
свойство: значение;
}
Но всё же в большинстве случаев лучше использовать атрибут class.
Также мы можем с вами стилизовать несколько элементов сразу, не прописывая каждый раз новый селектор, если указываемые свойства одинаковы у всех этих элементов. Для этого в CSS необходимо будет указать все элементы, которые вы стилизуете перед фигурной скобкой через запятую:
h1, h2, h3 {
свойство: значение;
}
Помимо самого тега, которому мы присваиваем атрибут class, можно отдельно стилизовать элементы, которые находятся внутри него. Т. е. если у нас есть какой-то блок с атрибутом class="block", в котором есть абзац с текстом p, то мы можем обратиться напрямую к абзацу p, не затрагивая весь блок:
.block p {
свойство: значение;
}
И теперь мы с вами проверим стилизацию на примере:
На этом мы с вами заканчиваем теоретическую часть знакомства с CSS. На следующем занятии мы с вами будем практиковаться, а сейчас подписывайтесь на канал, чтобы не пропустить новые выпуски.