Продолжаем изучать курс Learn HTML & CSS в рамках проекта Академия
В предыдущих частях курса мы изучили основы HTML, научились создавать базовую структуру веб-страницы, а также изучили основные HTML элементы, используемые для добавления контента.
Однако, весь добавляемый с помощью HTML-тегов текстовый контент однотипен: одного цвета, шрифта и размера. Давайте сделаем нашу веб-страницу более привлекательной добавив стили отображения и в этом нам поможет CSS!
Схема третьей части курса:
Что такое CSS?
CSS (каскадные таблицы стилей) – язык, используемый для стилизации содержимого Html контента веб-страницы. С его помощью можно настраивать цвет, размер и тип шрифта для текста, позиционирование элементов и многое другое. CSS – универсальный инструмент веб-разработки, используемый для настройки стилей, веб-разработчиками по всему миру!
Пример CSS кода:
Прежде всего давайте научимся добавлять CSS-код на HTML страницу.
Несмотря на то, что CSS – это другой язык, его код можно писать непосредственно в hmtl – файле. Это возможно благодаря элементу <style>. Он позволяет писать код CSS между открывающим и закрывающим тегами. Чтобы использовать элемент <style> поместите его внутри элемента <head>
<head>
<style></style>
</head>
После этого уже можно начинать писать код CSS:
<head>
<style>
H2 {
Font-famile:Arial;
}
</style>
</head>
О том, что делает вышеприведённый код мы поговорим в дальнейшем.
CSS файлы
Однако, писать CSS код непосредственно в HTML файле – далеко не лучший вариант. Веб-разработчики обычно добавляют большой объём css-кода, определяющего пользовательские стили. И если весь этот код поместить в один HTML-файл - код станет не легко читать и поддерживать в дальнейшем. В веб-разработке приветствуется поддержание четкого различия между структурой веб-страницы (HTML) и её стилем (CSS).
А для того чтобы этого добиться используются файлы стилей. Аналогично тому, что html-файл содержит только html-код, CSS-файл содержит только код CSS. Создайте файл с расширением .css и вы сможете написать весь код, необходимый для стилизации страницы, в нём.
Подключение .css файла
После того как .css файл создан нам осталось только подключить его, т.е. обозначить в HTML коде какой именно CSS-файл будет использоваться для стилизации контента. Для этой цели используется элемент <link>, помещаемый в заголовок страницы (<head>). <link> - самозакрывающийся тег, требующий для корректной работы наличие 3х аттрибутов:
- Href – элемент привязки. Его значение – интернет адрес или локальный путь к файлу CSS.
- Type – этот атрибут определяет тип документа, к которому вы хотите привязаться. В нашем случае значение этого атрибута должно быть:
text/css - Rel – этот атрибут описывает взаимосвязь между HTML и CSS файлами. Поскольку мы привязываемся к таблице стилей, значение должно равняться "stylesheet"
Пример подобной привязки:
<Link href = "https://www.codecademy.com/stylesheets/style.css" type = "text/css" rel = "stylesheet">
Указание пути к css файлу с помощью URL-адреса – один из способов привязки таблицы стилей. Однако, если файл .css хранится в том же каталоге, что и ваш html-файл – можно указать относительный путь, вместо URL –адреса.
<Link href = "/style.css" type = "text /css" rel = "stylesheet">
Использование относительного пути – самый распространённый способ привязывания таблицы стилей
Основная структура таблицы стилей.
Итак, мы узнали каким образом создаются css-файлы и как осуществляется их привязка к html странице. Теперь пришло время рассмотреть основную структуру таблицы стилей.
Селекторы элементов.
Чтобы создать стиль для какого-либо элемента html необходимо прежде всего прописать этот элемент в css файле. Например, чтобы создать стиль для элемента абзаца <p>, в css будет использоваться следующий синтаксис:
p {
}
В приведённом выше примере все элементы абзаца, находящиеся в html файле выбираются с помощью селектора CSS. В данном случае селектором является буква p. Селектор по сути представляет собой тег html, только без угловых скобок.
Селекторы бывают:
Структура объявления CSS
Для создания стилей недостаточно просто выбрать html элемент в файле css. Необходимо также прописать два обязательных элемента внутри тела селектора:
- Свойство, которое вы хотите использовать для настройки стиля данного элемента. Например, размер, цвет, отступ, шрифт и т.д.
- Конкретное значение свойства. К примеру, 18px (для установления размера шрифта), blue (для задания цвета шрифта) и т.д.
H1 {
Color: blue;
}
В приведенном выше примере выбран элемент заголовка. Внутри тела селектора задано значения для цвета заголовка – голубой. Теперь все заголовки на привязанной веб-странице будут отображаться голубым цветом.
Как мы видим, объявление css состоит из свойства и значения, разделённых двоеточием. Также не забывайте, что точка с запятой (;) завершает все объявления.
Весь фрагмент кода в примере, приведенном выше, называется правилом CSS. Правило состоит из селектора и всех объявлений внутри него.
Правило CSS наглядно отображает приведённая ниже схема:
Множественные селекторы элементов.
Определение стилей с помощью CSS было бы недостаточно эффективным, если бы приходилось вручную прописывать одно и тоже свойство для многих элементов. Например, вы хотите изменить цвет текста на зелёный, одновременно и в заголовках и в тексте абзаца. Нет необходимости прописывать стиль для каждого элемента в отдельности. К счастью, можно выбрать сразу несколько элементов и прописать для них общее свойство.
H1, h2, p {
Color: green;
}
В приведенном выше примере 2 типа заголовка и абзац имеют общий стиль, определяющий цвет текста – зелёный. Селектор нескольких элементов позволяет сэкономить время на написание css кода.
Универсальный селектор.
Что делать если все элементы, расположенные на веб-странице, требуют одинакового стиля? В таких случаях используется универсальный селектор.
* {
Font-family: Arial;
}
В этом примере, универсальный селектор (*) устанавливает шрифт Arial для всех элементов веб-страницы. Такой приём в некоторых случаях бывает очень эффективен.
Отступы и интервалы.
Для CSS, как и для HTML, разработаны определенные рекомендации по использованию отступов и интервалов.
- Между селектором и открывающей фигурной скобкой ({) должен использоваться перевод строки.
- Не должно быть никаких дополнительных пробелов между открытием и закрытием фигурных скобок и объявлением CSS
- В начале строки с объявлением CSS должно быть два пробела.
- Правила CSS следует разделять между собой при помощи пустой строки.
H1 {
Color: blue;
}
p {
color: red;
}
В приведенном выше примере используется одна пустая строка между правилом css для заголовка и правилом css для абзаца, а также используются необходимые отступы.
Использование правильных отступов и интервалов делают код css удобным для чтения вами и другими разработчиками.
Коментарии
В css файлах, также как и в html, можно оставлять комментарии. Комментарий в css начинается с символов /* и заканчивается символами */
Пример:
/*Это комментарий в css */
Напомним, что комментарии помогают оставлять напоминания и заметки, которые помогут вам и другим понять ваш код, если через какое-то время вы забудете какие-то важные детали. А также комментарии, позволяют экспериментировать с новым кодом, без необходимости удаления старого – достаточно просто его закомментировать.
Например, это комментарий, а не исполняемый код:
/ *
H1 {
Color: red;
}
* /
Подведём итог:
В этой части курса мы изучили основы структуры и синтаксиса css, научились привязывать css-файл в html коде. Мы узнали каким образом используются селекторы и как прописывать свойства и значения для создания пользовательских стилей. Мы научились писать комментарии и делать свой код понятным и удобным для чтения с помощью интервалов и отступов.
Что для меня было наиболее интересным и впечатляющим в данной неделе курса?
Язык css кажется мне удобным и универсальным для создания стилей веб-страниц. Зная как его использовать, мы получаем огромное количество возможностей различной настройки отображения контента. И пусть в данной части мы изучили только основы, уже понятно, что css может быть полезен во многом.
Доброго времени суток. Я из #нашастая. Подписался на вас и добавил в боте в фавориты. Прошу взаимно подписаться, для укрепления стаи, и взаимоотношений внутри нашего импровизированного коллектива... @bronelobuk
Добавил в фаворите в боте
Ваш пост поддержали следующие Инвесторы Сообщества "Добрый кит":
litrbooh, shuler, vasilisapor2, chika25, voltash, cepera, rubin, exan, stranniksenya, galerina, oksana0407, vika-teplo, aiparnyuk, voronchihin, dmitrijv, talia, manavendra, dimas102, dim447, now, tati, jebosheer, aikifunt, shenanigan, all91, naiger, byurotegov
Поэтому я тоже проголосовал за него!
Если Вы проголосуете за этот комментарий, то поможете сделать "Доброго Кита" сильнее!