CSS — Урок 3. Правила и селекторы CSS
CSS, как и любой язык, имеет свой синтаксис. В нем нет ни элементов, ни параметров, ни тегов. В нем есть правила. Правило состоит из селектора и блока объявления стилей, заключенного в фигурные скобки:
Сам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой:
Давайте попробуем на практике. Откройте html-страницу и css-страницу, созданные в прошлом уроке. Давайте зададим нашей странице голубой фон. Как вы помните, за это отвечает тег , значит идем на страницу style.css и пишем следующий код:
Откройте вашу html-страницу в браузере и убедитесь, что ее фон стал синим. Теперь, давайте сделаем текст на странице белым цветом:
Обновите html-страницу в браузере (Ctrl+F5) и убедитесь, что теперь весь текст белого цвета. Теперь сделаем цвета заголовков красным (для h1) и желтым (для h2):
body < background: blue; color: white; >h1 < color:red; >h2 < color:yellow; >
Снова обновите страницу в браузере и убедитесь, что все так, как и задумывалось.
Думаю, принцип уже понятен: мы указываем селектор, т.е. элемент, к которому применяется стиль, а в фигурных скобках — его свойства и их значения. Свойствам и значениям будут посвящены отдельные уроки, пока же мы рассматриваем общий принцип составления таблицы стилей.
Селекторы CSS
Селекторы по идентификатору
В нашем примере в качестве селекторов использовались элементы страницы: body, h1, h2. Но что делать, если в нашей html-странице есть несколько одинаковых элементов (например, параграфов), и мы хотим, чтобы текст всех параграфов был черным, а одного из них — розовым цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль.
В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя. Например:
Текст параграфа с идентификатором (id).
Имена можно давать любые, кроме зарезервированных слов (к ним относятся имена тегов и параметров элементов HTML и CSS), например, нельзя идентификатору дать имя body. Давайте добавим в нашу html-страницу пару параграфов и одному из них присвоим идентификатор:
Это заголовок первого уровня
Здесь просто текст
Это заголовок второго уровня
Здесь просто текст
Абзац с идентификатором (id)
CSS: Запись стилей в теге style
Основная проблема использования атрибутов для определения стилей — их перегруженность. Часто разметка HTML содержит очень много элементов, а с добавлением стилей кода становится намного больше, что плохо сказывается на чтении разметки.
Вторая проблема — исправление стилей. Для этого необходимо сначала найти нужный элемент в коде, а потом отредактировать его стили. Таких элементов на странице может быть 10, 20, 100. А для одноимённых тегов придётся записывать стили отдельно для каждого элемента.
Возникает естественное желание иметь все стили в одном месте, где можно было бы их быстро редактировать. Таким решением является использование тега , внутри которого могут располагаться все необходимые стили.
Возьмём пример из прошлого урока:
Этот текст будет с размером шрифта 20 пикселей Вложенный параграф также будет иметь размер шрифта 20 пикселей
Чтобы избавиться от атрибутов, добавим тег style и укажем, что для тега используется шрифт размером в 20 пикселей.
div Этот текст будет с размером шрифта 20 пикселей Вложенный параграф также будет иметь размер шрифта 20 пикселей
Таким же образом можно указать, что у параграфа будет размер шрифта 10 пикселей.
div < font-size: 20px; >p Этот текст будет с размером шрифта 20 пикселей Вложенный параграф будет иметь размер шрифта 10 пикселей
Внутри тега использовалась конструкция вида:
имя_тега
Всё, что было записано до открывающей скобки < называется селектор. Селекторы — правила, по которым браузер определяет к какому элементу нужно добавить стили. С некоторыми из селекторов мы познакомимся чуть позже. В примерах выше используются селекторы по тегу, то есть стили будут применяться ко всем элементам с тегом, указанном в качестве селектора
/* Для всех элементов div будет установлен размер шрифта 20px */ div
Задание
Добавьте в редактор параграф и, используя тег style , установите размер шрифта в 10 пикселей.
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Классы в CSS
Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальную часть.
Что ж, конспект мы снова раскрасили, но какой ценой. Давайте признаем, что добавлять внутрь абзацев дополнительные теги и раскрашивать текст с их помощью, не самое лучшее решение. Ну, а какое решение хорошее?
Такое решение есть и оно называется «классы»!
Вспомните шаг, когда мы пытались стилизовать абзацы с помощью внешних стилей, но все они получились одинакового цвета.
Нужно было сделать следующее: добавить абзацам разные классы, а в CSS использовать селекторы не по тегу, а по классам.
Класс — это всего лишь один из атрибутов HTML-тегов, например:
В CSS можно задавать стили только для элементов с определённым классом. Для этого используется селектор по классу, который пишется так .имя-класса , например:
.important < color: red; >— выберет все теги с классом "important" .help < color: green; >— выберет все теги с классом "help"Классы гибкие, их можно создавать много и называть понятными именами. Например, можно создать класс, который отмечает раздел курса, который сейчас изучается.
Имя класса может содержать в себе латинские символы, цифры, символ дефиса — и подчёркивания _ и начинаться оно должно с латинского символа.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
Конспект курса
Парные теги.
Одиночные теги.
Атрибуты тегов.
Инлайновые (встроенные) стили.
Внешние стили.
Стилизация по классам.
body < font-family: "Tahoma", serif; >h1 < color: #999999; >strong < color: green; >em < color: red; >.learned-ok < color: green; >.learning-in-progress < color: orange; >.not-learned < color: red; >
Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ
Спасибо! Мы скоро всё исправим)
Автозапуск
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
Увеличить 100% Уменьшить
Задачи Выполнено
Переделываем всё c нормальными классами:
- Для начала удалите из HTML-кода все strong и em , чтобы внутри p остался только текст .
- Первым четырём абзацам добавьте класс learned-ok .
- Пятому абзацу добавьте класс learning-in-progress .
- Шестому абзацу добавьте класс not-learned .
Если у вас возникли сложности во время прохождения задания, то вы можете обратиться за помощью на наш форум или задать вопрос в Телеграм-чате.
- Наша группа в VK
- Наш канал на YouTube
- Наша страница в Twitter
- Наш канал в Telegram
CSS: Классы
Основное решение для стилизации конкретного участка страницы — использование классов. Они помогают задать нужный нам стиль не разом для всех элементов на странице, а только для тех элементов, у которых указан необходимый класс.
Чтобы задать стиль для класса в CSS используется селектор .название-класса . Обратите внимание на точку — именно так браузер понимает, что данный стиль указывается для класса.
.paragraph < color: #333333; /* Правило color устанавливает цвет текста. В данном случае — это серый цвет со значением #333333 */ >Так как классов с одинаковым именем на странице может быть много, то это правило сработает для всех элементов, у которых атрибут класс равен paragraph .
Задание
В редакторе добавьте параграф с классом news и укажите для него цвет текста #553333 . Стили подключите с помощью тега .
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.