Академия: Курс Сodecademy - Learn HTML & CSS - Основы CSS
Что такое CSS?
Тег <style>
Для того, чтобы применить CSS в нашем документе, мы, как вариант, можем использовать тег <style>.
Тег <style> применяется для определения стилей элементов веб-страницы прямо в структуре HTML-файла. Его необходимо использовать внутри контейнера <head>.
<head>
<style>
...
</style>
</head>
Структура или стиль
Хотя тег <style> нам и позволяет писать код CSS прямо в HTML-файле, но при добавлении значительного количества пользовательских стилей CSS у нас могут возникнуть следующие трудности:
- Создается большой HTML-файл, код в котором трудно читать и редактировать (как нам, так и другим разработчикам). В целом это может привести к неэффективному документообороту.
- Пропадает четкое различие между структурой веб-страницы (HTML) и стилем веб-страницы (CSS).
Файл .css
В CSS-файл мы можем записать весь CSS-код, необходимый для стилизации страницы, не жертвуя читабельностью и размерами нашего HTML-файла.
Привязывание CSS-файла
Если мы хотим применить стили CSS, прописанные в отдельном CSS-файле, к нашей веб-странице, то нам необходимо связать файл HTML и файл CSS друг с другом.
Для того, чтобы установить связь с внешним документом вроде файла со стилями применяется тег <link>.
Данный тег всегда размещается внутри контейнера <head>, является самозакрывающимся и имеет следующие атрибуты:
- href - атрибут привязки, значением которого должен быть URL-адрес или путь к связываемому файлу CSS.
- type - атрибут описывающий тип документа к которому мы привязываемся. В нашем случае значение этого атрибута должно быть установлено в text/css.
- rel - атрибут определяющий взаимосвязь между текущим документом и файлом на который делается ссылка. Поскольку мы привязываемся к таблице стилей, значение должно быть установлено в stylesheet.
В результате привязки файла CSS к HTML-файлу тег <link> будет выглядеть следующим образом:
<link href="URL-адрес" type="text/css" rel="stylesheet">
Путь к CSS-файлу может быть задан как с помощью URL-адреса (абсолютно), так и относительно локального пути нашего привязываемого документа. Например, если файл CSS хранится в том же каталоге, что и наш HTML-файл, тогда тег <link> будет выглядеть следующим образом:
<link href="/style.css" type="text/css" rel="stylesheet">
Использование относительного пути является наиболее распространенным способом привязки CSS-файлов.
Подводим итоги
Давайте посмотрим чему мы научились и что нового мы для себя узнали:
Чтобы код был читабельным, а также сохранялась структура отдельно от стиля, - HTML и CSS необходимо хранить в отдельных файлах.
Элемент
<style>позволяет писать весь код CSS в HTML-файле.Для того, чтобы установить связь с файлом со стилями применяется тег
<link>.
Селекторы тегов
Чтобы создать стиль HTML-элемента с помощью CSS, нам необходимо сначала прописать этот элемент в CSS-файле. Например, чтобы стилизовать тег абзаца <p>, нам необходимо применить следующий синтаксис CSS:
p {
...
}
Следует обратить внимание на то, что селектор CSS - p, по существу соответствует HTML-тегу для этого элемента -
<p>, но без угловых скобок.
Анатомия CSS
- Свойство, которое нам нужно использовать для настройки стиля данного элемента. Например, размер, цвет и другое.
- Значение свойства. Например, 18px - для установления размера шрифта, blue - для указания цвета шрифта.
В приведенном ниже примере выбран элемент <h1>, внутри тела селектора которого значение цвета заголовка установлено на - Blue. Теперь заголовок в браузере отобразится голубым цветом.
h1 {
color: Blue;
}
Следует обратить внимание на то, что после указания свойства селектора обязательно ставиться
:, а после указания значения свойства селектора всегда идет -;.
Множественные селекторы
Для этого в CSS применяются множественные селекторы, позволяющие сразу выбрать несколько элементов и задать им какое-то общее свойство.
h1, h2, p {
color: Green;
}
В приведенном выше примере заголовок <h1>, заголовок <h2> и абзац <p> имеют общий стиль, определяющий цвет текста - Green.
Универсальный селектор
Универсальный селектор * применяется, если нам необходимо все элементы веб-страницы привести к какому-то одному единому стилю.
* {
font-family: Arial;
}
В приведенном выше примере универсальный селектор * используется для выбора каждого элемента веб-страницы и установки в нем шрифта в значение - Arial.
Отступы и интервалы
- После указания селектора и открывающей фигурной скобки { - должен использоваться перевод строки.
- Между открывающимися и закрывающимися фигурными скобками { и } - не должно быть никаких дополнительных пробелов.
- При применении свойств CSS необходимо использовать два пробела.
- Правила CSS следует разделять между собой пустой строкой.
h1 {
color: blue;
}
p {
color: red;
}
Комментарии
Комментарии в CSS начинаются с / * и заканчиваются на * /, например:
/* Это комментарий в CSS! */
Включение комментариев в наш код полезно по нескольким причинам:
- Они помогают нам понять наш код, если вдруг мы решили вернуться к нему через большой промежуток времени.
- Они позволяют нам экспериментировать с новым кодом без необходимости удаления старого.
Подводим итоги
Давайте посмотрим чему мы научились и что нового мы для себя узнали:
- Селектор CSS направлен на элемент HTML.
- Чтобы создать стили в файле CSS, нам необходимо указать внутри тела селектора его свойство и значение для данного свойства.
- После указания свойства селектора обязательно ставиться
:, а после указания значения свойства селектора всегда идет -;. - Правило CSS состоит из селектора и всех объявлений внутри селектора.
- В CSS применяются множественные селекторы, позволяющие сразу выбрать несколько элементов и задать им какое-то общее свойство.
- Комментарии позволяют легко читать и экспериментировать с новым кодом, не удаляя старый.
- CSS следует определенным рекомендациям для интервалов и отступов.
Свое мнение и личные впечатления
Пройдя три занятия данного курса у новичка уже должны складываться общие впечатления о том как и по каким правилам создаются веб-страницы.
Предыдущие части курса Сodecademy - "Learn HTML & CSS"
Конспект подготовлен для Академии Голоса @academy.