Эта статья нуждается в редакционном обзоре. Как вы можете помочь.
Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
Перейти к предыдущему разделу:
SelectorsЭто 6-я статья руководства CSS для начинающих; здесь обсуждается стиль и грамматика самого языка CSS. Вы можете изменить пусть к вашему файлу CSS на более удобный для чтения.
Информация: Чистый код CSS
Вы можете добавлять пустое пространство и комментарии к вашим стилям, чтобы сделать их более читабельными. Также вы можете группировать селекторы вместе, в случае если те же самые правила стиля применяются к разным элементам.
Пустое пространство
Пустое пространство означает фактические пробелы, табуляцию, а также новые строки. Вы можете использовать их, чтобы сделать ваш код более читабельным.
В макете страницы, данное пространство — это та часть, которая остается без опознавательных знаков: отступы от других элементов (margin) и пространство между колонками и строками.
Ваш пример файла CSS в настоящее время имеет правила в одной строке, и почти минимум пробелов. В комплексе стилей эта схема будет усложнять читаемость, а значит в нее будет трудно вносить изменения.
Стиль написания который вы выбираете, как правило, зависит от личных предпочтений, но если ваши css являются частью общих проектов, могут возникнуть трудности с понимаем вашего написания кода.
Некоторые люди пытаются написать код максимально компактно и пишут код в одну строку, даже если он достаточно долгий:
.carrot {color: orange; text-decoration: underline; font-style: italic;}
Некоторые люди предпочитают писать каждое свойство-значение в отдельной строке:
.carrot { color: orange; text-decoration: underline; font-style: italic; }
Некоторые используют отступы — 2 или 4 пробела или табы:
.carrot { color: orange; text-decoration: underline; font-style: italic; }
Некоторые люди все выстраивают вертикально (но такое расположение не лучший вариант для поддержки):
.carrot { color : orange; text-decoration : underline; font-style : italic; }
Некоторые люди используют смешанный пробелы для повышения читаемости.
.vegetable { color: green; min-height: 5px; min-width: 5px } .vegetable.carrot { color: orange; height: 90px; width: 10px } .vegetable.spinach { color: darkgreen; height: 30px; width: 30px }
Некоторые используют вкладки для компоновки элементов, а другие только пробелы.
Комментарии
Комментарии в CSS имеют следующий вид: /*
комментарий */
.
Вы можете использовать комментарии, чтобы сделать фактические комментарии в css, а также чтобы закомментировать временно часть кода с целью тестирования.
Часть стилей, которая будет закомментирована, не будет отображатся браузером. Будьте осторожны при комментировании кода, поскольку важно сохранить правильный синтаксис остального кода.
/* стиль для начальной буквой C в первом пункте*/ .carrot { color: orange; text-decoration: underline; font-style: italic; }
Группировка селекторов
Когда многие элементы имеют один и тот же стиль, вы можете указывать группу селекторов, разделяя их запятыми. Декларация применится для всех выбранных элементов.
В другом месте в таблице стилей можно указать те же селекторы уже индивидуально, чтобы применить индивидуальные правила стилей для них.
Это правило делает элементы <h1>
, <h2>
, и <h3>
одного цвета.
Удобно определить цвет только в одном месте, в случае, если возможны изменения.
/* цвет для заголовков */ h1, h2, h3 {color: navy;}
Действуем: добавление комментариев и улучшения формата
- Редактируя ваш CSS-файл убедитесь, что он применяет эти правила (в любом порядке):
strong {color: red;} .carrot {color: orange;} .spinach {color: green;} #first {font-style: italic;} p {color: blue;}
- Сделайте его более читабельным, перестраивая его таким образом, какой будете считать более логичным и применяя пробелы и комментарии на свое усмотрение.
- Сохраните файл и обновите экран браузера, чтобы убедиться, что ваши изменения не повлияли на роботу стилей:
Cascading Style Sheets Cascading Style Sheets
Закомментируйте часть стиля не меняя остальное, чтобы сделать первую букву вашего документа красной:
Cascading Style Sheets |
Cascading Style Sheets |
(Существует более чем один способ сделать это).
.carrot
:
/*.carrot { color: orange; }*/Hide solution
Что дальше?
Перейти к следующему разделу:
Text stylesВаш образец таблицы стилей использовал курсивный текст и подчеркнутый текст. На следующей странице описаны несколько способов, чтобы указать внешний вид текста в вашем документе.