Пример комментария CSS - как закомментировать CSS

Комментарии используются в CSS для объяснения блока кода или для внесения временных изменений во время разработки. Закомментированный код не выполняется.

Как однострочные, так и многострочные комментарии в CSS начинаются /*и заканчиваются */, и вы можете добавить столько комментариев в свою таблицу стилей, сколько захотите. Например:

/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */

Вы также можете сделать свои комментарии более читабельными, стилизовав их:

/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */

Организация CSS с комментариями

В более крупных проектах файлы CSS могут быстро увеличиваться в размере, и их становится трудно поддерживать. Может быть полезно организовать ваш CSS в отдельные разделы с оглавлением, чтобы упростить поиск определенных правил в будущем:

/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/

Еще немного о CSS: синтаксис и селекторы CSS

Когда мы говорим о синтаксисе CSS, мы говорим о том, как все устроено. Существуют правила о том, что куда идет, и поэтому вы можете последовательно писать CSS, а программа (например, браузер) может интерпретировать его и правильно применять к странице.

Есть два основных способа написать CSS.

Встроенный CSS

Особенности специфики CSS: хитрости CSS

Встроенный CSS применяет стиль к отдельному элементу и его дочерним элементам до тех пор, пока не встретится другой стиль, перекрывающий первый.

Чтобы применить встроенный CSS, добавьте атрибут «style» к элементу HTML, который вы хотите изменить. Внутри кавычек укажите разделенный точкой с запятой список пар ключ / значение (каждая, в свою очередь, разделенных двоеточием), указывающих стили для установки.

Вот пример встроенного CSS. Слова «Один» и «Два» будут иметь желтый цвет фона и красный цвет текста. Слово «Три» имеет новый стиль, который имеет приоритет над первым, и будет иметь зеленый цвет фона и голубой цвет текста. В этом примере мы применяем стили к тегам, но вы можете применить стиль к любому элементу HTML.

 One Two Three 

Внутренний CSS

Хотя написание встроенного стиля - это быстрый способ изменить отдельный элемент, существует более эффективный способ применить тот же стиль сразу ко многим элементам страницы.

Внутренний CSS имеет стили, указанные в теге, и они встроены в тег.

Вот пример, который имеет эффект, аналогичный приведенному выше «встроенному» примеру, за исключением того, что CSS был извлечен в свою собственную область. Слова «Один» и «Два» будут соответствовать divселектору и будут красным текстом на желтом фоне. Слова «Три» и «Четыре» также будут соответствовать divселектору, но они также соответствуют .nested_divселектору, который применяется к любому элементу HTML, который ссылается на этот класс. Этот более конкретный селектор переопределяет первый, и в конечном итоге они отображаются как голубой текст на зеленом фоне.

 div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four 

Показанные выше селекторы чрезвычайно просты, но могут оказаться довольно сложными. Например, можно применять стили только к вложенным элементам; то есть элемент, являющийся дочерним по отношению к другому элементу.

Вот пример, в котором мы указываем стиль, который следует применять только к divэлементам, которые являются прямым потомком других divэлементов. В результате «Два» и «Три» появятся как красный текст на желтом фоне, но «Один» и «Четыре» останутся неизменными (и, скорее всего, черный текст на белом фоне).

 div > div { color: red; background: yellow; } One Two Three Four 

Внешний CSS

У всех стилей есть собственный документ, который связан в теге. Расширение связанного файла.css