Как оформлять css файл
Обновлено: 04.07.2024
Для того, чтобы CSS легко читался, полезно соблюдать пять правил форматирования.
Каждое свойство – на отдельной строке
Каждый селектор – на отдельной строке
Цель – лучшая читаемость, проще найти селектор.
Свойства, сильнее влияющие на документ, идут первыми
Рекомендуется располагать свойства в следующем порядке:
- Сначала положение элемента относительно других: position , left/right/top/bottom , float , clear , z-index .
- Затем размеры и отступы: width , height , margin , padding …
- Рамка border , она частично относится к размерам.
- Общее оформление содержимого: list-style-type , overflow …
- Цветовое и стилевое оформление: background , color , font …
Общая логика сортировки: «от общего – к локальному и менее важному».
При таком порядке свойства, определяющие структуру документа, будут видны наиболее отчётливо, в начале, а самые незначительно влияющие (например цвет) – в конце.
Свойство без префикса пишется последним.
Это нужно, чтобы стандартная (окончательная) реализация всегда была важнее, чем временные браузерные.
Организация CSS-файлов проекта
Стили можно разделить на две основные группы:
Блоки-компоненты имеют свой CSS. Например, CSS для диалогового окна, CSS для профиля посетителя, CSS для меню.
Такой CSS идёт «в комплекте» с модулем, его удобно выделять в отдельные файлы и подключать через @import .
Конечно, при разработке будет много CSS-файлов, но при выкладке проекта система сборки и сжатия CSS заменит директивы @import на их содержимое, объединяя все CSS в один файл.
Страничный и интегрирующий CSS.
Этот CSS описывает общий вид страницы, расположение компонент и их дополнительную стилизацию, зависящую от места на странице и т.п.
Важные страничные блоки можно выделять особыми комментариями:
CSS-препроцессоры, такие как SASS, LESS, Stylus, Autoprefixer делают написание CSS сильно удобнее.
Выберите один из них и используйте. Единственно, они добавляют дополнительную предобработку CSS, которую нужно учесть, и желательно, на сервере.
После знакомства с HTML разработчики сайтов разделяются на две основные категории. Одна часть считает, что с помощью HTML на сайте можно создавать всё или практически всё, другая же понимает, что в целом средств разметки недостаточно для оформления веб-документов. Действительно, HTML лишь первый этап в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей).
Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1.
Рис. 1.1. Веб-страница, созданная только на HTML
Это обычная веб-страница, оформленная без всяких изысков. Тот же самый документ, но уже с добавлением стилей приобретает совершенно иной вид (рис. 1.2).
Рис. 1.2. Веб-страница, созданная на HTML и CSS
Перемена разительна, поэтому заглянем в код, чтобы понять, в чем же разница (пример 1.1).
Пример 1.1. Исходный код документа
HTML5 CSS 2.1 IE Cr Op Sa Fx
Сам код HTML никаких изменений не претерпел и единственное добавление — это строка <link rel="stylesheet" href="style.css"> . Она ссылается на внешний файл с описанием стилей под именем style.css . Содержимое этого файла показано в примере 1.2.
Пример 1.2. Содержимое стилевого файла style.css
В файле style.css как раз и описаны все параметры оформления таких тегов как <body> , <h1> и <p> . Заметьте, что сами теги в коде HTML пишутся как обычно.
Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объёма повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.
CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета.
Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.
Стиль браузера
Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом <H1> , в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.
Стиль автора
Стиль, который добавляет к документу его разработчик. В примере 1.2 показан один из возможных способов подключения авторского стиля.
Стиль пользователя
Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Кнопка «Оформление» , как показано на рис. 1.3.
Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer
В браузере Opera аналогичное действие происходит через команду Инструменты > Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка «Параметры стиля» (рис. 1.4).
Рис. 1.4. Подключение стиля пользователя в браузере Opera
Указанные типы стилей могут спокойно существовать друг с другом, если они не пытаются изменить вид одного элемента. В случае возникновения противоречия вначале имеет приоритет стиль пользователя, затем стиль автора и последним идёт стиль браузера.
Вопросы для проверки
1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?
С удовольствием ознакомился с этими рекомендациями и теперь предлагаю вам перевод.
Введение
Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.
Это относится к рабочим версиям файлов использующих HTML , CSS и GSS
Разрешается использовать любые инструменты для минификации компиляции или обфускации кода, при условии, что общее качество кода будет сохранено.
Общие правила оформления
Протокол
Не указывайте протокол при включении ресурсов на страницу.
Отсутствие протокола делает ссылку относительной, что предотвращает смешивание ресурсов из разных протоколов и незначительно уменьшает размер файлов.
Не рекомендуется:
Рекомендуется:
Не рекомендуется:
Рекомендуется:
Общее форматирование
Отступы
Всегда используйте для отступа два пробела.
Не используйте табуляцию и не смешивайте табуляцию с пробелами.
Рекомендуется:
Рекомендуется:
Регистр
Всегда пишите в нижнем регистре.
Весь код должен быть написан в нижнем регистре: Это относится к названиям элементов, названиям атрибутов, значениям атрибутов (кроме текста/ CDATA ), селекторам, свойствам и их значениям (кроме текста).
Не рекомендуется:
Рекомендуется:
Пробелы в конце строки
Убирайте пробелы в конце строки.
Пробелы в конце строк не обязательны и усложняют использование diff.
Не рекомендуется:
Рекомендуется:
Общие мета правила
Кодировка
Используйте UTF-8 (без BOM).
Убедитесь, что ваш редактор использует кодировку UTF-8 без метки порядка байтов (BOM).
Указывайте кодировку в HTML шаблонах и документах с помощью <meta charset="utf-8"> . Опускайте кодировку для сss-файлов: для них UTF-8 задана по умолчанию.
(Вы можете узнать больше о кодировках, и о том, как их использовать, по этой ссылке: Наборы символов и кодировки в XHTML, HTML CSS (англ.).)
Комментарии
По возможности поясняйте свой код, где это необходимо.
Используйте комментарии, чтобы пояснить свой код: что он делает, за что отвечает, и почему используется выбранное решение.
(Этот пункт не обязателен, потому что нет смысла ожидать, что код всегда будет хорошо задокументирован. Полезность комментирования зависит от сложности проекта и может различаться для HTML и CSS кода. )
Задачи
Отмечайте задачи для списка дел с помощью TODO .
Отмечайте задачи с помощью ключевого слова TODO . не используйте другие часто встречающиеся форматы, такие как @@ .
Заключайте контакты (имя пользователя или список адресатов) в круглые скобки: TODO(контакт) .
Описывайте задачу после двоеточия, например: TODO: Задача .
Рекомендуется:
Рекомендуется:
Правила оформления HTML
Тип документа
Используйте HTML5.
HTML5 (HTML синтаксис) рекомендуется для всех html-документов: <!DOCTYPE html> .
(Рекомендуется использовать HTML с типом контента text/html . Не используйте XHTML, так как application/xhtml+xml (англ.), хуже поддерживается браузерами и ограничивает возможность оптимизации. )
Валидность HTML
По возможности используйте валидный HTML.
Используйте валидный HTML код, кроме случаев, когда использование не позволяет достичь размера файла, необходимого для нужного уровня производительности.
Используйте такие инструменты как W3C HTML validator (англ.) чтобы проверить валидность кода.
Валидность — это важное и при этом измеряемое качество кода. Написание валидного HTML способствует изучению технических требований и ограничений и обеспечивает правильное использование HTML.
Не рекомендуется:
Рекомендуется:
Семантика
Используйте HTML так, как это было задумано.
Используйте элементы (Иногда неверно называемые “тегами”) по назначению: заголовки для заголовков, p для абзацев, a для ссылок и т.д.
Это облегчает чтение, редактирование и поддержку кода.
Не рекомендуется:
Рекомендуется:
Альтернатива для мультимедиа
Всегда указывайте альтернативное содержимое для мультимедиа.
Постарайтесь указать альтернативное содержимое для мультимедиа: например для картинок, видео или анимаций, заданных с помощью canvas . Для картинок это осмысленный альтернативный текст ( alt ), а для видео и аудио расшифровки текста и подписи если это возможно.
Альтернативное содержимое может помочь людям с с ограниченными возможностями. Например человеку со слабым зрением сложно понять, что на картинке если для нее не задан @alt . Другим людям может быть тяжело понять о чем говорится в видео или аудио записи.
(Если для картинки alt избыточен, или она используется только в декоративных целях в местах, где нельзя использовать CSS, используйте пустой альтернативный текст alt="" )
Не рекомендуется:
Рекомендуется:
Разделение ответственности
Разделяйте структуру, оформление и поведение.
Держите структуру (разметка), оформление (стили) и поведение (скрипты) раздельно и постарайтесь свести взаимодействие между ними к минимуму.
Убедитесь, что документы и шаблоны содержат только HTML, и что HTML служит только для задания структуры документа. Весь код, отвечающий за оформление, перенесите в файлы стилей, а код отвечающий за поведение — в скрипты.
Старайтесь сократить их пересечения к минимуму, включая в шаблоны минимальное количество файлов стилей и скриптов.
Отделение структуры от представления и поведения помогает облегчить поддержку кода. Изменение шаблонов и HTML-документов всегда занимает больше времени чем изменение файлов стилей или скриптов.
Не рекомендуется:
Рекомендуется:
Ссылки-мнемоники
Не используйте ссылки-мнемоники.
Единственное исключение из этого правила — служебные символы HTML (например < и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).
Не рекомендуется:
Рекомендуется:
Необязательные теги
Не используйте необязательные теги. (не обязательно)
Для уменьшения размера файлов и лучшей читаемости кода можно опускать необязательные теги. В спецификации HTML5 (англ.) есть список необязательных тегов.
(Может потребоваться некоторое время для того, чтобы этот подход начал использоваться повсеместно, потому что это сильно отличается от того, чему обычно учат веб-разработчиков. С точки зрения, согласованности, и простоты кода лучше всего опускать все необязательные теги, а не некоторые из них).
Не рекомендуется:
Рекомендуется:
Атрибут 'type'
Не указывайте атрибут type при подключении стилей и скриптов в документ.
Не используйте атрибут type при подключении стилей (кроме вариантов когда используется что-то кроме CSS) и скриптов (кроме вариантов когда это не JavaScript).
Указывать атрибут type в данном случае не обязательно потому что HTML5 использует text/css (англ.) и text/javascript (англ.) по умолчанию. Это будет работать даже в старых браузерах.
Не рекомендуется:
Рекомендуется:
Не рекомендуется:
Рекомендуется:
Правила форматирования HTML
Форматирование
Выделяйте новую строку для каждого блочного, табличного или списочного элемента и ставьте отступы для каждого дочернего элемента.
Независимо от стилей заданных для элемента (CSS позволяет изменить поведение элемента с помощью свойства display ), переносите каждый блочный или табличный элемент на новую строку.
Также ставьте отступы для всех элементов вложенных в блочный или табличный элемент.
(Если у вас возникнут сложности из-за пробельных символов между списочными элементами, допускается поместить все li элементы в одну строку. Линту [утилита для проверки качества кода прим. пер.] рекомендуется в данном случае выдавать предупреждение вместо ошибки.
Рекомендуется:
Рекомендуется:
Рекомендуется:
Правила оформления CSS
Валидность CSS
По возможности используйте валидный CSS-код.
Кроме случаев, где необходим браузеро-зависимый код, или ошибок валидатора, используйте валидный CSS код.
Используйте такие инструменты как W3C CSS Валидатор (англ.) для проверки своего кода.
Валидность — это важное и при этом измеряемое качество кода. Написание валидного CSS помогает избавиться от избыточного кода и обеспечивает правильное использование таблиц стилей…
Идентификаторы и названия классов
Используйте шаблонные или имеющие смысл имена классов и идентификаторы.
Вместо использования шифров, или описания внешнего вида элемента, попробуйте в имени класса или идентификатора выразить смысл его создания, или дайте ему шаблонное имя…
рекомендуется выбирать имена, отражающие сущность класса, потому что их проще понять и, скорее всего, не понадобится менять в будущем.
Шаблонные имена — это просто вариант названия для элементов, у которых нет специального предназначения или которые не отличаются от своих братьев и сестер. Обычно они необходимы в качестве “Помощников.”
Использование функциональных или шаблонных имен уменьшает необходимость ненужных изменений в документа или шаблонах.
Не рекомендуется:
Рекомендуется:
Названия идентификаторов и классов
Для идентификаторов и классов используйте настолько длинные имена, насколько нужно, но настолько короткие, насколько возможно.
Попробуйте сформулировать, что именно должен делать данный элемент, при этом будьте кратки насколько возможно.
Такое использование классов и идентификаторов вносит свой вклад в облегчение понимания и увеличение эффективности кода.
Не рекомендуется:
Рекомендуется:
Селекторы типа
Избегайте использование имен классов или идентификаторов с селекторами типа (тега) элемента.
Кроме случаев когда это не обходимо (например с классами-помощниками), не используйте названия элементов с именами классов или идентификаторами.
Не рекомендуется:
Рекомендуется:
Сокращенные формы записи свойств
Используйте сокращенные формы записи свойств, где возможно.
CSS предлагает множество различных сокращенных (англ.) форм записи (например font ), которые рекомендуется использовать везде где это возможно, даже если задается только одно из значений.
Использование сокращенной записи свойств полезно для большей эффективности и лучшего понимания кода.
Не рекомендуется:
Рекомендуется:
0 и единицы измерения
Не указывайте единицы измерения для нулевых значений
Не указывайте единицы измерения для нулевых значений если на это нет причины.
Рекомендуется:
0 в целой части дроби
Не ставьте “0” в целой части дробных чисел.
Не ставьте 0 в целой части в значениях между -1 и 1.
Рекомендуется:
Кавычки в ссылках
Не используйте кавычки в ссылках
Не используйте кавычки ( "" , '' ) с url() .
Рекомендуется:
Шестнадцатеричные названия цветов
Используйте трехсимвольную шестнадцатеричную запись где это возможно.
Трехсимвольная шестнадцатиричная запись для цветов короче и занимает меньше места.
Не рекомендуется:
Рекомендуется:
Префиксы
Предваряйте селекторы уникальными для текущего приложения префиксами. (не обязательно)
В больших проектах, а так же в коде, который будет использоваться для других проектов или в других сайтах, используйте префиксы (в качестве пространств имен) для идентификаторов и имен классов. Используйте короткие уникальные названия с последующим дефисом.
Использование пространств имен позволяет предотвратить конфликты имен и может облегчить обслуживание сайта. Например при поиске и замене.
Рекомендуется:
Разделители в классах и идентификаторах
Разделяйте слова в идентификаторах и именах классов с помощью дефиса.
Не используйте ничего, кроме дефиса, для соединения слов и сокращений в селекторах, чтобы повысить удобство чтения и легкость понимания кода.
Не рекомендуется:
Рекомендуется:
Избегайте использования информации о версии браузеров, или CSS “хаков”— сперва попробуйте другие способы.
Кажется заманчивым бороться с различиями в работе разных браузеров с помощью CSS-фильтров, хаков или прочих обходных путей. Все эти подходы могут быть рассмотрены лишь в качестве последнего средства, если вы хотите получить эффективную и легко поддерживаемую кодовую базу. Проще говоря, допущение хаков и определения браузера повредит проекту в долгосрочной перспективе, так как это означает, что проект идет по пути наименьшего сопротивления. Что облегчает использование хаков и позволяет использовать их все чаще и чаще, что в результате приведет к слишком частому их использованию.
Правила форматирования CSS
Упорядочивание объявлений
Сортируйте объявления по алфавиту.
Задавайте объявления в алфавитном порядке, чтобы получить согласованный код, с которым легко работать.
При сортировке игнорируйте браузерные префиксы. При этом, если для одного свойства используются несколько браузерных префиксов, они также должны быть отсортированы (например -moz должен быть перед --webkit )
Рекомендуется:
Отступы в блоках.
Всегда ставьте отступы для содержимого блоков.
Всегда ставьте отступы для любого блочного содержимого (англ.), Например для правил внутри правил или объявлений, чтобы отобразить иерархию и облегчить понимание кода.
Рекомендуется:
После объявлений
Ставьте точку с запятой после каждого объявления.
После каждого объявления ставьте точку с запятой для согласованности кода и облегчения добавления новых свойств.
Не рекомендуется:
Рекомендуется:
После названий свойств
Используйте пробелы после двоеточий в объявлениях.
Всегда используйте один пробел после двоеточия (но не до) в объявлениях, для порядка в коде.
Не рекомендуется:
Рекомендуется:
Отделение селектора и объявления
Отделяйте селекторы и объявления переносом строки.
Начинайте каждый селектор или объявление с новой строки.
Не рекомендуется:
Рекомендуется:
Разделение правил
Разделяйте правила переносом строки.
Всегда ставьте перенос строки между правилами.
Рекомендуется:
Мета правила CSS
Группировка правил
Группируйте правила и обозначайте группы комментарием. (не обязательно)
По возможности объединяйте правила в группы. Обозначайте группы комментариями и разделяйте переносом строки.
Рекомендуется:
Заключение
Если вы редактируете код, потратьте несколько минут, чтобы разобраться в том, как он написан. Если математические операторы обособлены пробелами, делайте то же самое. Если комментарии окружены скобочками или черточками, сделайте то же со своими комментариями.
Идея этого руководства в том, чтобы создать общий словарь, который позволил бы разработчикам сконцентрироваться на том что они хотят выразить, а не на том, как.
Мы предлагаем единые правила оформления позволяющие писать код в одном стиле, но стиль кода, уже используемый в проекте, также важен.
Если ваш код будет сильно отличаться от существующего, это может сбить читающего с ритма и затруднить чтение. Постарайтесь этого избежать.
Примечание от переводчика
Хочется еще отметить, что Google ориентируется в первую очередь на большие высоконагруженные проекты, где каждый байт дорог, поэтому стоит учитывать, что если они рекомендуют начинать каждый селектор с новой строки, или использовать пробелы вместо табов, то это в первую очередь подразумевает, что код будет обязательно минифицирован и сжат до использования на сайте.
После пары свойство: значение обязательно ставится точка с запятой. Без этого знака препинания не будет работать правило в этой строке и следующее за ним.
Хорошо: после каждого значения стоит точка с запятой Плохо: после первого свойства пропущена точка с запятой
1.2 Для отступов внутри правил используйте два пробела
Правила, которые перечисляются внутри фигурных скобок, должны отстоять от начала строки. Для этого иcпользуйте 2 пробела. Это позволяет сразу видеть блоки свойств, относящихся к одному селектору.
1.3 Значение цветов не сокращается
1.4 Все пишется строчными буквами
Вce названия тегов и свойства пишутся строчными буквами.
1.5 Нули не пропускаются
Если число дробное и начинается с нуля, то он не опускается (например, .5 вместо 0.5 ).
1.6 Используйте двойные кавычки
В стилях всегда без исключения используются двойные кавычки. Если кавычки не обязательны, то они пишутся все равно.
1.7 Пробел после двоеточия
В правилах после двоеточия ставится один пробел ( top: 10px; ). При этом перед двоеточием пробел не нужен.
1.8 Пробелы после запятой в цветах
После запятых внутри значений rgb() , rgba() , hsl() , hsla() или rect() пробелы ставятся. Это улучшает читаемость.
1.9 Пробел до и после комбинатора
Между селекторами до и после комбинатора (например, p > a ) ставится один пробел.
1.10 Каждое свойство с новой строки
Одно свойство — одна строка. Каждое объявление в правиле пишется на новой строке.
1.11 Пробел перед фигурной скобкой
После селектора и перед открывающейся фигурной скобкой ставится один пробел. После открывшейся скобки запись идёт с новой строки.
1.12 Закрывающая фигурная скобка на новой строке
Закрывающая фигурная скобка после набора свойств пишется на новой строке и без отступа. Она должна быть на одном уровне с селектором. Следующее после этого правило отделяется пустой строкой.
1.13 Опускайте единицы измерения
Единицы измерения не нужно писать там, где без них можно обойтись. Например, border: 0 .
2. Порядок свойств
Порядок логически связанных свойств должен быть сгруппирован следующим образом:
- Позиционирование
- Блочная модель
- Типографика
- Оформление
- Анимация
- Разное
Позиционирование следует первым, поскольку оно влияет на положение блоков в потоке документа. Блочная модель определяет размеры и расположение блоков и идёт следующей.
Все прочие объявления, которые изменяют вид внутренних частей блоков и не влияют на другие блоки, идут в последнюю очередь.
Сгруппированные свойства в правиле отделяются друг от друга пустой строкой.
Порядок объявления подробных правил, таких как font-size , font-family , line-height , должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия.
3. Имена классов
- Имена классов пишутся строчными буквами, между несколькими словами используется дефис (но не знак нижнего подчёркивания или camelCase). Дефисы служат разделителями во взаимосвязанных классах (например, .button и .button-cancel ).
- Имена должны быть такими, чтобы по ним можно было быстро определить, какому элементу на странице задан класс: избегайте сокращений (единственное исключение — .btn для кнопок), но не делайте их слишком длинными (не более трёх слов).
- Для именования классов используются английские слова и термины. Не используйте транслит для названия классов и атрибутов.
4. Правило @import
Правило @import работает медленнее, чем тег <link> . В стилях @import использовать не желательно.
5. Варианты шрифта
Альтернативные варианты шрифта и тип семейства указываются в конце перечисления значений font-family.
В случае использования нестандартных шрифтов обязательно указывать альтернативный веб-безопасный шрифт и тип семейства, чтобы в случае отсутствия нестандартного шрифта в системе изменения внешнего вида страницы были минимальны. Нестандартный и альтернативный шрифты должен быть одного типа.
В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.
| Необходимые знания: | Базовая компьютерная грамотность, Базовое программное обеспечение, базовые знания работа с файлами, и базовые знания HTML (смотрите Введение в HTML.) |
|---|---|
| Задача: | Понять основы связывания CSS-документа с HTML-файлом и уметь выполнять простое форматирование текста с помощью CSS. |
Начнём с HTML
Нашей отправной точкой является HTML-документ. Вы можете скопировать код снизу, если вы хотите работать на своём компьютере. Сохраните приведённый ниже код как index.html в папке на вашем компьютере.
Примечание: Если вы читаете это на устройстве или в среде, где вы не можете легко создавать файлы, не беспокойтесь — ниже представлены редакторы кода, чтобы вы могли написать код прямо здесь, на странице.
Добавление CSS в наш документ
Самое первое, что нам нужно сделать, — это сообщить HTML-документу, что у нас есть некоторые правила CSS, которые мы хотим использовать. Существует три различных способа применения CSS к документу HTML, с которым вы обычно сталкиваетесь, однако сейчас мы рассмотрим наиболее обычный и полезный способ сделать это — связать CSS с заголовком вашего документа.
Создайте файл в той же папке, что и документ HTML, и сохраните его как styles.css . Расширение .css показывает, что это файл CSS.
Чтобы связать styles.css с index.html, добавьте следующую строку где-то внутри <head> HTML документа:
Элемент <link> сообщает браузеру, что у нас есть таблица стилей, используя атрибут rel, и местоположение этой таблицы стилей в качестве значения атрибута href. вы можете проверить, работает ли CSS, добавив правило в styles.css. Используя ваш редактор кода, добавьте следующее в ваш файл CSS:
Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдёт, поздравляю — вы успешно применили CSS к документу HTML. Если этого не произойдёт, внимательно проверьте, правильно ли вы ввели всё.
Вы можете продолжить работу в styles.css локально, или вы можете использовать наш интерактивный редактор ниже, чтобы продолжить этот урок. Интерактивный редактор действует так, как если бы CSS на первой панели был связан с документом HTML, как это было в нашем документе выше.
Стилизация HTML-элементов
Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путём нацеливания на элемент selector — это селектор, который напрямую соответствует имени элемента HTML. Чтобы нацелиться на все абзацы в документе, вы должны использовать селектор p . Чтобы сделать все абзацы зелёными, вы должны использовать:
Вы можете выбрать несколько селекторов одновременно, разделив их запятыми. Если я хочу, чтобы все параграфы и все элементы списка были зелёными, моё правило выглядит так:
Попробуйте это в интерактивном редакторе ниже (отредактируйте поля кода) или в своём локальном документе CSS.
Изменение поведения элементов по умолчанию
Когда мы смотрим на хорошо размеченный HTML-документ, даже такой простой, как наш пример, мы можем увидеть, как браузер делает HTML читаемым, добавив некоторые стили по умолчанию. Заголовки большие и жирные, в нашем списке есть маркеры. Это происходит потому, что в браузерах есть внутренние таблицы стилей, содержащие стили по умолчанию, которые по умолчанию применяются ко всем страницам; без них весь текст работал бы вместе, и мы должны были бы стилизовать всё с нуля. Все современные браузеры по умолчанию отображают HTML-контент практически одинаково.
Однако вам часто захочется что-то другое, кроме выбора, сделанного браузером. Это можно сделать, просто выбрав элемент HTML, который вы хотите изменить, и используя правило CSS, чтобы изменить его внешний вид. Хорошим примером является наш <ul> — неупорядоченный список. Он добавляет маркеры, и если я решу, что я не хочу эти маркеры, я могу удалить их вот так:
Попробуйте добавить это в свой CSS сейчас.
Свойство list-style-type — это хорошее свойство, информацию о котором можно найти на MDN, чтобы увидеть, какие значения поддерживаются. Взгляните на страницу для list-style-type и вы найдёте интерактивный пример в верхней части страницы, чтобы опробовать некоторые другие значения, затем все допустимые значения будут подробно описаны ниже.
Глядя на эту страницу, вы обнаружите, что помимо удаления маркеров списка вы можете изменить их — попробуйте изменить их на квадратные маркеры, используя значение square .
Добавление класса
Пока у нас есть стилизованные элементы, основанные на их именах HTML-элементов. Это работает до тех пор, пока вы хотите, чтобы все элементы этого типа в вашем документе выглядели одинаково. В большинстве случаев это не так, и вам нужно будет найти способ выбрать подмножество элементов, не меняя остальные. Самый распространённый способ сделать это — добавить класс к вашему HTML-элементу и нацелиться на этот класс.
В своём HTML-документе добавьте Атрибут class ко второму пункту списка. Ваш список теперь будет выглядеть так:
В вашем CSS вы можете выбрать класс special к любому элементу на странице, чтобы он выглядел так же, как и этот элемент списка. Добавьте следующее в ваш файл CSS:
Сохраните и обновите, чтобы увидеть результат.
Вы можете захотеть, чтобы <span> в абзаце также был оранжевым и жирным. Попробуйте добавить класс " special" , затем перезагрузите страницу и посмотрите, что получится.
Иногда вы увидите правила с селектором, который перечисляет селектор HTML-элемента вместе с классом:
Этот синтаксис означает «предназначаться для любого элемента li, который имеет класс special». Если бы вы сделали это, вы бы больше не смогли применить класс к <span> или другому элементу, просто добавив к нему класс; вы должны добавить этот элемент в список селекторов:
Как вы можете себе представить, некоторые классы могут быть применены ко многим элементам, и вам не нужно постоянно редактировать свой CSS каждый раз, когда что-то новое должно принять этот стиль. Поэтому иногда лучше обойти элемент и просто обратиться к классу, если только вы не знаете, что хотите создать некоторые специальные правила для одного элемента и, возможно, хотите убедиться, что они не применяются к другим элементам.
Стилизация элементов на основе их расположения в документе
Есть моменты, когда вы хотите, чтобы что-то выглядело иначе, в зависимости от того, где оно находится в документе. Здесь есть несколько селекторов, которые могут вам помочь, но сейчас мы рассмотрим только пару. В нашем документе два элемента <em> — один внутри абзаца, а другой внутри элемента списка. Чтобы выбрать только <em> который вложен в элемент <li> , я могу использовать селектор под названием descendant combinator (комбинатор-потомок), который просто принимает форму пробела между двумя другими селекторами.
Добавьте следующее правило в таблицу стилей.
Этот селектор выберет любой элемент <em> , который находится внутри (потомка) <li> . Итак, в вашем примере документа вы должны найти, что <em> в третьем элементе списка теперь фиолетовый, но тот, который находится внутри абзаца, не изменился.
Ещё можно попробовать стилизовать абзац, когда он идёт сразу после заголовка на том же уровне иерархии в HTML. Для этого поместите + (соседний братский комбинатор) между селекторами.
Попробуйте также добавить это правило в таблицу стилей:
Пример ниже включает в себя два правила выше. Попробуйте добавить правило, чтобы сделать элемент span красный, если он внутри абзаца. Вы узнаете, правильно ли вы это сделали, так как промежуток в первом абзаце будет красным, но цвет в первом элементе списка не изменит цвет.
Примечание: Как вы можете видеть, CSS даёт нам несколько способов нацеливания на элементы, и мы пока только слегка изучили его! Мы будем внимательно смотреть на все эти селекторы и многое другое в нашей статье Селекторы позже в нашем курсе.
Стилизация элементов на основе состояния
Последний тип стилей, который мы рассмотрим в этом уроке, — это возможность стилизовать элементы в зависимости от их состояния. Прямым примером этого является стиль ссылок. Когда мы создаём ссылку, мы должны нацелить элемент <a> (якорь). Он имеет различные состояния в зависимости от того, посещается ли он, посещается, находится над ним, фокусируется с помощью клавиатуры или в процессе нажатия (активации). Вы можете использовать CSS для нацеливания на эти разные состояния — CSS-код ниже отображает невидимые ссылки розового цвета и посещённые ссылки зелёного цвета.
Вы можете изменить внешний вид ссылки, когда пользователь наводит на неё курсор, например, удалив подчёркивание, что достигается с помощью следующего правила:
В приведённом ниже примере вы можете поиграть с разными значениями для разных состояний ссылки. Я добавил к нему правила, приведённые выше, и теперь понимаю, что розовый цвет довольно лёгкий и трудно читаемый — почему бы не изменить его на лучший цвет? Можете ли вы сделать ссылки жирным шрифтом?
Мы удалили подчёркивание на нашей ссылке при наведении курсора. Вы можете удалить подчёркивание из всех состояний ссылки. Однако стоит помнить, что на реальном сайте вы хотите, чтобы посетители знали, что ссылка является ссылкой. Оставив подчёркивание на месте, люди могут понять, что на какой-то текст внутри абзаца можно нажимать — к такому поведению они привыкли. Как и всё в CSS, существует возможность сделать документ менее доступным с вашими изменениями — мы постараемся выделить потенциальные подводные камни в соответствующих местах.
Примечание: вы часто будете видеть упоминание о доступности в этих уроках и по всей MDN. Когда мы говорим о доступности, мы имеем в виду требование, чтобы наши веб-страницы были понятными и доступными для всех.
Ваш посетитель вполне может быть на компьютере с мышью или сенсорной панелью или на телефоне с сенсорным экраном. Либо они могут использовать программу чтения с экрана, которая считывает содержимое документа, либо им может потребоваться использовать текст значительно большего размера, либо перемещаться по сайту только с помощью клавиатуры.
Простой HTML-документ, как правило, доступен каждому — когда вы начинаете оформлять этот документ, важно, чтобы вы не сделали его менее доступным.
Сочетание селекторов и комбинаторов
Стоит отметить, что вы можете комбинировать несколько селекторов и комбинаторов вместе. Вот пример:
Вы также можете комбинировать несколько типов вместе. Попробуйте добавить следующее в ваш код:
Это будет стиль любого элемента с классом special , который находится внутри <p> , который приходит сразу после <h1> , который находится внутри <body> . Уф!
В оригинальном HTML, который мы предоставили, единственный элемент в стиле <span > .
Не беспокойтесь, если это покажется сложным — вы скоро начнёте понимать это, когда будете писать больше на CSS.
Завершение
В этом уроке мы рассмотрели несколько способов стилизации документа с использованием CSS. Мы будем развивать эти знания по мере прохождения остальных уроков. Однако вы уже знаете достаточно, чтобы стилизовать текст, применять CSS на основе различных способов нацеливания на элементы в документе и искать свойства и значения в документации MDN.
Читайте также: