Строки комментариев (//) в CSS

CSS использует тот же синтаксис «блока комментариев», что и языки семейства C — вы начинаете комментарий с / * , и заканчиваете его * /.

Тем не менее, в CSS отсутствует правило синтаксиса «строка комментария», как в этих языках, где весь код от / / и до конца строки считается комментарием.

Многие разработчики просят, чтобы этот синтаксис также был добавлен, но, к сожалению, наши руки связаны — минимизаторы CSS не распознают строки комментариев.

Поэтому, если мы добавим такой символ, и минимизатор удалит все разрывы строк (как он, как правило, и делает), то строка комментариев выведет в комментарии все стили, следующие за ней!

Тем не менее, CSS на самом деле уже позволяет использовать символ / /. Но он используется не для всей строки, а для последующей конструкции.

То есть, когда вы используете / /, последующая конструкции CSS — будь то объявление или блок — будет «выведена в комментарии».

Например:

.foo {
  width: auto;
  //height: 500px;
  background: green;
}

В этом коде объявление height выведено в комментарии.

Аналогично:

//@keyframes foo {
  from, to { width: 500px; }
  50% { width: 400px; }
}
@keyframes bar {
  from, to { height: 500px; }
  50% { height: 400px; }
}

Здесь через / / выведено в комментарии первое объявление @keyframes.

Отмечу, что если вы попытаетесь использовать / / только для того, чтобы разместить в вашей таблице стилей комментарий, вам следует быть осторожными, — простой текст не является CSS конструкцией, так что при обработке таблицы стилей он будет пропущен, а в комментарии удалится первая следующая CSS-конструкция:

// Сделать какую-нибудь вещь.
.foo { animation: bar 1s infinite; }
/* Упс, блок .foo выпал в комментарии! */

Обновление: Упс, нашел ошибку у себя самого. К сожалению, синтаксис этого блока ( {} 😉 был некорректный.

Вы можете избежать этого, заканчивая текстовый комментарий символами {} (если вы не следуете правилам) или символом ; (если это объявление), чтобы дать CSS понять, что это просто шутка.

Данная публикация является переводом статьи «Single Line Comments (//) in CSS» , подготовленная редакцией проекта.

Комментарии · Less. Путеводитель для новичков

Хороший код должен сопровождаться комментариями, хотя и бытует мнение, что прекрасный код вовсе не нуждается в них. Конечно, повсеместно писать комментарии не нужно, а вот ключевые моменты лучше всего сопровождать короткими записками.

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

Если проект, над которым вы работаете используется не только вашим отделом, компанией или внутренним сообществом, то целесообразнее писать комментарии на английском языке. Иначе, если ваш проект применяется только внутри одной компании, в которой официальным языком принят, например, русский язык, то логичнее всего будет использовать именно его.

Базовый синтаксис

Препроцессор Less поддерживает несколько синтаксисов написания комментариев. Самый очевидный — это стандартный для CSS синтаксис. Если отключена минификация (компрессия, сжатие) кода, то такие комментарии, содержащиеся между

Помимо стандартного синтаксиса предлагается и препроцессорный, но только лишь однострочный вариант записи. Комментарии начинающиеся с // не будут сохраняться в CSS-файл после компиляции.

Особые комментарии

Иногда требуется сохранить какие-то комментарии после компиляции и даже минификации кода. Такой подход чаще всего используется для включения в файл информации о лицензии, авторских правах, версии библиотеки и прочих важных сообщений. Как и в CSS для этого используются комментарии, заключённые в

Также допустима запись /*! !*/, но она считается избыточной и применяется крайне редко, если вообще применяется.

Вложенные комментарии

К сожалению, вкладывать комментарии в комментарии, как и CSS, Less не умеет. Однако, допустимо смешивать комментарии, заключённые в /* */ и однострочные комментарии, начинающиеся с //.

Можно попытаться вложить комментарии и наоборот:

После компиляции less-файлов, в первом случае комментарий будет отображаться в скомпилированном CSS-файле, а вот втором случае — нет.

Глава 2 CSS

Как мы уже пояснили в предыдущей главе, элементы HTML позволяют сайтостроителям разметить документ в соответствии с его структурой. В спецификации HTML перечислены рекомендации по отображению браузерами этих элементов. К примеру, можно быть более-менее уверенным, что содержание контейнера strong будет отображено полужирным шрифтом. Вполне можно доверять и тому факту, что большинство браузеров отобразит содержимое контейнера h2 крупным шрифтом… по меньшей мере, крупнее, чем p, и крупнее, чем h3. Однако помимо веры и надежды на это, средств контроля за внешним видом текста у нас просто нет.

CSS все меняет. CSS усаживает дизайнера в кресло водителя. Мы посвятим остаток книги рассказу о том, что можно делать с помощью CSS. А в этой главе начнем с ознакомления вас с основами написания таблиц стилей и основами совместного функционирования CSS и HTML для описания и структуры, и внешнего вида вашего документа.

Правила и таблицы стилей

Для того, чтобы начать пользоваться CSS не нужно даже писать таблицы стилей. Шестнадцатая глава расскажет, как ссылаться на существующие в Сети таблицы.

Существуют два метода создания таблиц CSS. Можно либо воспользоваться обычным текстовым редактором и писать таблицы стилей «от руки», либо воспользоваться специальным инструментом, поддерживающим CSS, к примеру, приложением для веб-дизайна. Специальные инструменты позволяют создавать таблицы стилей без изучения синтаксиса CSS. Однако впоследствии дизайнеры во многих случаях предпочитают ручную отладку таблиц стилей, так что мы рекомендуем вам научиться писать и редактировать CSS от руки. Давайте приступим!

h2 { color: green }

То, что вы видите, это простое правило CSS, содержащее одно объявление. Правило это заявление стилистического параметра одного элемента или нескольких.

Figure 2.1

Теперь давайте тщательно разберем правило.

Анатомия правила

Правило состоит из двух частей:

• Селектора — части перед левой фигурной скобкой
• Объявления — части внутри фигурных скобок

Селектор это звено, связующее HTML-документ и стиль. Оно устанавливает на какие элементы влияет объявление.

Предыдущий селектор основан на типе элемента: он выбирает все элементы типа «h2». Этот вид селектора зовется селектором типа. Любой тип элемента HTML может быть использован в качестве селектора типа. Селекторы типа являются простейшим видом селекторов. Мы обсудим другие виды селекторов в See CSS selectors. , «CSS selectors.»

Анатомия объявления

Объявление имеет две части, разделенные двоеточием:

• Свойство — часть перед двоеточием
• Значение — часть после двоеточия

Свойство это качество либо характеристика, которыми нечто обладает. В предыдущем примере это color. CSS2 (см. separate box) определяет примерно 120 свойств и мы можем присвоить значения им всем.

Значение это точная спецификация свойства. В примере, это «green» «зеленый», но точно также цвет мог бы быть синим (blue), красным (red), желтым (yellow) или каким-нибудь еще.

Диаграмма ниже иллюстрирует все компоненты правила. Фигурные скобки ({ }) и двоеточие ( позволяют браузерам различать селектор, свойство и значение.

Рисунок 2.2 Диаграмма правила.

Группирование селекторов и правил

При создании CSS целью является сжатость. Мы отметили, что если уменьшить размер таблиц стилей, это позволит дизайнерам писать и редактировать их «от руки». К тому же короткие таблицы грузятся быстрее длинных. Поэтому в CSS есть несколько механизмов уменьшить размер таблиц стилей путем группировки селекторов и объявлений.

Для примера, рассмотрите эти три правила:

h2 { font-weight: bold }
h3 { font-weight: bold }
h4 { font-weight: bold }
     

У всех трех правил абсолютно одинаковое объявление они устанавливают шрифт полужирным. (Это делается с помощью свойства font-weight, которое мы обсудимв See Fonts. .) Поскольку все три объявления идентичны, можно сгруппировать селекторы в список, разделенный запятыми, и указать объявление лишь один раз, вот так:

h2, h3, h4 { font-style: bold }

Это правило производит такой же эффект, как и первые три..

Селектор может иметь больше одного объявления. К примеру, можно написать таблицу стилей с этими двумя правилами:

h2 { color: green }
h2 { text-align: center }

В этом случае, мы устанавливаем все элементы h2 зелеными и центрированными на листе. (Это делается с помощью свойства text-align, которое мы обсудим в главе 5.)

Но этого же эффекта можно добиться быстрее, если сгруппировать объявления, которые относятся к одному и тому же селектору, в список, разделенный точками с запятой, вот так:

h2 {
  color: green;
  text-align: center;
}

Все объявления быть внутри фигурных скобок. Точка с запятой разделяет объявления и может, но не должна также появляться в конце последнего объявления. Кроме того, для повышения удобочитаемости вашего кода, предлагаем размещать каждое объявление в отдельной строчке, как мы сделали здесь. (Браузерам все равно, они просто проигнорируют все лишние пробелы и переводы строк.)

Теперь вы знаете основы создания правил CSS и таблиц стилей. Однако, мы еще не закончили. Чтобы таблица произвела какой-то эффект, ее придется «приклеить» к своему документу HTML.

«Приклеивание» таблиц стилей к документу

Чтобы заставить какую-либо таблицу стилей повлиять на документ HTML, ее нужно «приклеить» к нему. То есть, таблица и документ должны быть объединены, чтобы сработать вместе и представить документ. Это можно сделать любым из четырех способов:

1. Применить базовую, внутридокументную таблицу стилей, к документу, исп ользуя тег style .
2. Применить таблицу стилей к отдельному тегу, используя атрибут style.
3. Привязать внешнюю таблицу стилей к документу, используя элемент link.
4. Импортировать таблицу стилей, испольхуя запись CSS @import.

В следующем разделе, мы обсудим первый метод: с использованием тега style. Атрибут style мы обсудим в главе 4 , «Селекторы CSS», а использование элемента link element и записи @import в главе 16 , «Внешние таблицы стилей».

«Склеивание» с использованием тега STYLE

Можно склеить таблицу стилей и HTML документ, поместив таблицу стилей внутрь контейнера style вверху вашего документа. Тег style был введен в HTML в частности для того, чтобы позволить вставлять таблицы стилей внутрь HTML документов. Вот таблица стилей (полужирным шрифтом) прикрепленная к документу-образцу с использованием тега style. Результат показан в рисунке 2.3 .

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    h2, h3 { color: green }
  </STYLE>
  <BODY>
    <h2>Bach's home page</h2>
    <P>Johann Sebastian Bach was a prolific
        composer. Among his works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
    <h3>Historical perspective</h3>
    <P>Bach composed in what has been referred to as
      the Baroque period.
  </BODY>
</HTML>

Рисунок 2.3 Результат добавления к таблице стилей правила изменения цвета тегов h2 на зеленый и последующего прикрепления таблицы к документу с использованием контейнера style. (попробуйте)

Обратите внимание на то, что тег style размещен после тега title и перед тегом body. Заголовок документа «title» не появляется на самой странице, поэтому стили CSS не оказывают на него влияния.

Содержимое тега style это таблица стилей. Однако, в то время, как содержимое таких тегов, как h2, p и ul появляется на странице, содержимое тега style там не появляется. Точнее, на странице появляется эффект от содержимого контейнера style таблицы стилей. Поэтому вы не видите «{ color: green }», показанным на экране; вместо этого вы видите два тега h2 зеленого цвета. Правил, определяющих цвет прочих элементов, добавлено не было, так что все прочие элементы будут отображаться цветом по умолчанию.

Браузеры и CSS

Для обновляемого обзора доступных браузеров, просмотрите страницу обзоров W3C

Для того, чтобы CSS работала как написано в этой книге, необходимо использовать CSS-совместимый браузер, то есть, браузер, поддерживающий CSS. CSS-совместимый браузер узнает тег style как контейнер для таблицы стилей и отображает документ соответственно. Многие браузеры, распространенные сегодня, поддерживают CSS, например, Microsoft Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) и Opera 3.5 (O3.5). По скромным подсчетам более половины пользователей Сети используют CSS-расширенные браузеры, и их число постоянно растет. Велика вероятность того, что люди, с которыми вы общаетесь, имеют CSS-расширенные браузеры. Если нет, дайте им причину обновиться!

Лучший источник информации о том, как различные браузеры поддерживают CSS WebReview’s charts

Увы, не все реализации CSS совершенны. Когда вы начнете экспериментировать с таблицами стилей, вы вскоре заметите, что каждый браузер имеет ряд багов и ограничений. В целом, новые браузеры ведут себя лучше старых. IE4 и O3.5 среди лучших, а следующее предложение Netscape под кодовым именем Gecko также обещает более усовершенствованную поддержку для CSS.

Те, кто не пользуется CSS-расширенными браузерами, все же могут читать страницы, использующие таблицы стилей. CSS заботливо спроектировали так, чтобы всё содержимое оставалось видимым, даже если браузер ничего не знает о CSS. Некоторые браузеры, такие как вторая и третья версии Netscape Navigator, не поддерживают таблицы стилей, но они знают о теге style чтобы полностью его игнорировать. После поддержки таблиц стилей, это и есть правильное поведение.

Однако другие браузеры, которые не поддерживают тега style, такие как Netscape Navigator 1 и Microsoft Internet Explorer 2, проигнорируют теги style, но покажут содержимое контейнера style. Таким образом, пользователь получит таблицу стилей напечатанной вверху страницы. В настоящий момент, лишь небольшой процент пользователей Сети может столкнуться с этой проблемой. Чтобы предупредить это, можно поместить свою таблицу стилей внутрь HTML-комментария, что мы обсудим в главе 1. Поскольку комментарии не отображаются на экране, поместив таблицу стилей внутрь HTML-комментария, вы не дадите старейшим браузерам показать содержимое контейнера style. CSS-расширенные браузеры учитывают этот трюк и расценят содержимое контейнера style как табицу стилей.

Вспомните, что комментарии HTML начинаются с <!-- и заканчиваются на -->. Вот кусочек предыдущего примерного кода, показывающий, как писать таблицу стилей в комментарии HTML. Комментарий окружает только содержимое контейнера style:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    <!--
      h2 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY>
</HTML>

В CSS также есть собственные способы комментирования, которые можно использовать внутри таблицы стилей. Комментарий CSS начинается с «/*» и оканчивается на «*/.» (Те, кто знаком с языком программирования C, узнают его.) Правила CSS помещененные в комментарий CSS никак не повлияют на предсталение документа.

Браузеру необходимо сообщить, что вы работаете с таблицами стилей CSS. В настоящее время CSS единственный язык таблиц стилей, используемый с HTML-документами, и мы не думаем, что это скоро изменится. Для XML ситуация может быть и иной. Но точно так, как существует более одного формата изображений (сразу вспоминаются GIF, JPEG и PNG), может быть и больше одного языка таблиц стилей. Так что это хорошая привычка сообщать браузерам, что они работают с CSS. (К тому же, HTML этого требует.) Это делается с помощью атрибута type тега style. Значение type указывает, какой тип таблиц стилей используется. Для CSS значение будет «text/css». Нижеследующее отрывок из предыдущего документа-образца, показывающий, как лучше писать это (в сочетании с использованием комментариев HTML):

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    <!--
      h2 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY>
</HTML> 

Когда браузер загружает документ, он проверяет, сможет ли он понять язык таблиц стилей. Если сможет, он пытается прочесть таблицу, иначе проигнорирует. Атрибут type (см. в главе 1 обсуждение HTML-атрибутов) в теге style это способ дать браузеру понять, какой язык стилей используется. Атрибут type должен быть включен.

Чтобы облегчить чтение примеров, мы решили не заключать таблицы стилей в HTML-комментарии, но мы обязательно будем использовать атрибут type во всей книге.

Древовидные структуры и наследование

Вспомните из главы 1 обсуждение HTML, представляющего документ в виде древовидной структуры, и того, что элементы HTML имеют дочерние и родительские объекты. Есть много причин для создания древовидных документов. Для таблиц стилей есть одна очень хорошая причина: наследование. Как дети наследуют своих родителей, так и HTML-элементы. Только вместо наследования генов и денег, элементы HTML наследуют стилистические свойства.

Давайте начнем с того, что посмотрим на документ-образец.:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <BODY>
    <h2>Bach's home page</h2>
    <P>Johann Sebastian Bach was a
      <STRONG>prolific</STRONG> composer. Among his
        works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
  </BODY>
</HTML>

Древовидная структура этого документа выглядит так:

Посредством наследования, значения свойств CSS присвоенные одному элементу, передадуться вниз по дереву его потомкам. Например, в наших образцах зеленый цвет до сих пор присваивается тегам h2 и h3. Теперь, скажем, нам нужно присвоить этот цвет всем элементам документа. Можно сделать это, перечислив все типы элементов в селекторе.:

<STYLE TYPE="text/css">
  h2, h3, P, LI { color: green }
</STYLE>

Однако, большинство документов HTML сложнее нашего образца, и таблица стилей вскоре сильно удлинилась бы. Есть способ лучше — и короче. Вместо присвоения стиля каждому типу элемента, мы присваиваем его их общему предку: тегу body:

<STYLE TYPE="text/css">
  BODY { color: green }
</STYLE>

Поскольку прочие элементы наследуют свойства тега body, все они наследуют и зеленый цвет. (Рисунок 2.4 ).

Как вы уже заметили, наследование транспортное средство, которое распространяет стилистические свойства на потомков элемента. Поскольку тег body общий предок всех видимых элементов, body подходящий селектор для присваивания стилистических правил всему документу.

Аннулирование наследования

В предыдущем примере, всем элементам дали одинаковый цвет посредством наследования. Иногда, все же, дети не похожи на родителей. Не удивительно, что это применимо и к CSS. Скажем, вы бы хотели, чтобы содержимое тегов h2 отображалось бы синим цветом, а остальное зеленым. Это легко сделать в CSS:

<STYLE TYPE="text/css">
  BODY { color: green }
  h2 { color: navy }
</STYLE>

Раз тег h2 дочерний элемент тега body (и, следовательно, наследует body), эти два правила в таблице стилей выше несовместимы. Первое присваивает цвет содержимому тега body, а, значит, и цвет элементов h2 посредством наследования; в то время, как второе правило присваивает цвет исключительно тегу h2. Какое из них победит? Давайте узнаем:

Причина, по которой побеждает второе правило, в том, что оно более конкретное чем первое. Первое правило очень общее: оно влияет на все элементы страницы. Второе правило из всего документа влияет только на элементы h2, а, значит, оно более конкретно.

Будь CSS языком програмирования, порядок, в котором определяются правила, определял бы, какое из них выиграет. Но CSS не язык программирования, и в примере выше порядок порядок не имеет значения. Результат был бы точно таким, используй мы эту таблицу стилей:

<STYLE TYPE="text/css">
  h2 { color: navy }
  BODY { color: green }
</STYLE>

CSS разработали так, чтобы разрешать противоречия между таблицами стилей как в примере выше. Конкретность один из аспектов этого. Детали можно найти в главе 15 , «Каскадирование и наследование.»

Свойства, которые не наследуются

В общем случае, свойства в CSS наследуются от родительского элемнта к дочернему, как описано в предыдущих примерах. Некоторые свойства, однако, не наследуются, и в этом всегда есть веская причина. Используем свойство background (описано в главе 11) как пример свойства, которое не наследуется.

Скажем, вам нужно установить фоновое изображение для страницы. Это обычный эффект в Сети. В CSS можно написать:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    BODY {
      background: url(texture.gif) white;
      color: black;
    }
  </STYLE>
  <BODY>
    <h2>Bach's <EM>home</EM> page</h2>
    <P>Johann Sebastian Bach was a prolific
      composer.
  </BODY>
</HTML>

Свойство background «фон» имеет URL («texture.gif»), указывающий фоновое изображение в качестве значения. Когда изображение загружено, страница выглядит так:

В примере выше есть несколько вещей, о которых стоит рассказать подробнее:

• Фоновое изображение перекрывает поверхность наподобие обоев фоны элементов h2 и p также были перекрыты. Это не из-за наследования, причина в том, что если не определено иначе, все фоны прозрачны. Так что, раз мы не определили как-либо фоны для содержимого тегов h2 или p, фон родительского элемента body будет просвечивать.
• Вдобавок к URL изображения, в качестве фона также приваивается цвет (по умолчанию белый). Если изображение не будет найдено, вы увидите вместо него цвет.
• Цвет содержимого body установлен черным. Чтобы гарантировать контраст между текстом и фоном, хорошей привычкой будет всегда устанавливать свойство color когда устанавливаете свойство background.

А почему, собственно, свойство background не наследуется? Визуально, эффект от прозрачности подобен наследованию: выглядит так, будто все элементы имеют один и тот же фон. Есть две причины: во-первых, прозрачные фоны отображаются скорее (нечего отображать!), чем прочие фоны. Во-вторых, поскольку фоновые изображения выравниваются относительно элементов, к которым принадлежат, т.е. в ином случае вы бы не всегда наблюдали гладкие стыковки фона.

Стандартные задачи в CSS

Присвоения цветов и фонов, как описано выше, среди наиболее частых задач, выполняемых CSS. Прочие общие задачи включают присвоение шрифтов и свободного места вокруг элементов. Этот раздел обеспечивает вам экскурсию по наиболее часто используемым свойствам CSS.

Частые задачи: шрифты

Начнем-ка со шрифтов. Если вам случалось пользоваться специальными приложениями для верстки, вы сможете разобраться в этой небольшой таблице стилей:

h2 { font: 36pt serif }

Это правило присваивает определенный шрифт элементам h2. Первая часть значения 36pt устанавливает шрифт размером 36 пунктов. «Пункт» старая типографская единица измерения, которая здравствует и в цифровом веке. В следующей главе мы расскажем, почему стоит использовать единицу «em» вместо «pt» но пока что заострим внимание на пунктах. Вторая часть значения serif сообщает браузеру, что нужно использовать шрифт с серифами (маленькими засечками на концах шрифтов, глава 5 расскажет вам о них подробнее). Более декоративные шрифты с засечками лучше подходят домашней страничке Баха, поскольку современные санс-серифные шрифты (шрифты без засечек) не использовались в его время. Вот результат:

Свойство font это укороченное свойство для установки нескольких других свойств одновременно. Используя его, можно сократить свои таблицы стилей, и присвоить значения всем свойствам, которые оно заменяет. Если же выбрать подробную версию, пришлось бы установить каждое из них, чтобы получилось, как в примере вверху:

h2 {
  font-size: 36pt;
  font-family: serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: normal;
}

Иногда нужно всего лишь установить лишь одно из них. Например, вам нужно наклонить текст в некоторых элементах. Вот пример.:

UL { font-style: italic }

Свойство font-style не изменит размера шрифта либо семейство шрифтов, оно просто наклонит существующий шрифт. Когда оно присвоено элементу ul, содержимое тегов li внутри этого контейнера станет наклоенным, поскольку свойство font-style наследуется. Вот результат применения к тестовой странице, которые вы уже знаете.:

Похожим образом, свойство font-weight используется для изменения плотности толщины букв. Можно еще больше выделить пункты списка, присвоив их предку значение bold:

UL {
  font-style: italic;
  font-weight: bold;
}
     

Что выводит:

Последние свойства font-variant и line-height до сих пор не слишком широко поддерживаются браузерами, а потому не используются широко.

Частые задачи: поля

Установка свободных пробелов вокруг элементов основной инструмент в типографии. Вверху заголовка над этим абзацем есть интервал, немного меньший внизу его. У этого абзаца, напечатанного в книге, есть свободные промежутки слева и (немного меньше) справа. CSS можно использовать, чтобы определить, сколько расстояния должно быть вокруг различных видов элементов.

По умолчанию, ваш браузер знает совсем немного о том, как отображать раличные виды элементов в HTML. Например, он знает, что списки и содержание тегов blockquote печатаются с отступами, чтобы отделить их от основного текста. Как дизайнер, вы можете основываться на этих установках, одновременно определяя свои собственные детали. Давайте попробуем Давайте рассмотрим тег blockquote в качестве примера. Вот тестовый документ:

<HTML>
  <TITLE>Fredrick the Great meets Bach</TITLE>
  <BODY>
    <P>One evening, just as Fredrick the Great was
      getting his flute ready, and his musicians
      were assembled, an officer brought him a
      list of the strangers who had arrived. With
      his flute in his hand he ran over the list,
      but immediately turned to the assembled
      musicians, and said, with a kind of
      agitation:
    <BLOCKQUOTE>"Gentlemen, old Bach is come."
    </BLOCKQUOTE>
    <P>The flute was now laid aside, and old Bach, who
      had alighted at his son's lodgings, was immediately
      summoned to the Palace.
  </BODY>
</HTML>

Скриншот внизу показывает, как типичный HTML-браузер отобразит этот документ:

Как можно видеть, браузер добавил пробелы со всех сторон цитируемого текста. В CSS эти пробелы называются «margins» «поля» и все элементы имеют поля со всех четырех сторон. Свойства называются: margin-top, margin-right, margin-bottom и margin-left. Можно изменить отображение содержимого контейнера blockquote, написав маленькую таблицу стилей:

BLOCKQUOTE {
  margin-top: 1em;
  margin-right: 0em;
  margin-bottom: 1em;
  margin-left: 0em;
  font-style: italic;
}

Единица «em» будет подробно рассмотрена в следующей главе, но уже сейчас можно раскрыть ее секрет: она масштабирует относительно размера шрифта. Таким образом, код в примере выше создаст вертикальные поля такой же высоты, как и шрифт (1em) элемента blockquote, и горизонтальные поля с нулевой шириной. Чтобы убедиться, что цитируемый текст все-таки будет отличаться, сделаем его курсивным. Результат таков:

Точно так же, как font укороченное свойство для установки нескольких шрифтовых свойств сразу, margin это укороченное свойство которое устанавливает все свойства полей. Поэтому пример вверху можно записать и как:

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
}

Первая часть значения — 1em — присваивается верхнему полю (собственное свойство margin-top). Отсюда отсчитывается против часовой стрелки: 0em присваивается к margin-right (правое поле), 1em присваивается margin-bottom (нижнее поле), и 0em присваивается margin-left (левое поле).

Поскольку левое поле равно нулю, цитируемому тексту нужно больше стиля, чтобы отделить его от остального текста. Установка в font-style значения italic помогает, а добавление фонового цвета еще больше усиливает цитату:

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
}

Вот результат:

Как и ожидалось, фоновый цвет позади цитаты изменился. В отличие от предыдущих примеров, цвет определялся в частях красного-зеленого-синего (RGB от англ. red/green/blue) цветов. Цвета RGB детально описываются в главе 11 .

Стилистической проблемой в верхнем примере является то, что фоновый цвет едва покрывает цитируемый текст. Пространство вокруг цитаты область границ не запоняется цветом элемента. В CSS есть другой вид разделителей, называемый «padding» «заполнение пустотой», который и использует цвет элемента. В других Во всех других отношениях, свойства заполнения подобны свойствам границ: они добавляют промежутки вокруг элемента. Давайте добавим заполнение к цитате:

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
  padding: 0.5em;
}

Результат установки заполнения выразился в пробеле между текстом и треугольником, его окружающим:

Обратите внимание, что свойству padding дано лишь одно значение (0.5em). Как и свойство margin, padding может принимать 4 значения, которые могут быть приписаны к верхнему, правому, нижнему и левому заполнению соответственно. Однако, когда одно и то же значение приваивается всем сторонам, единичное его упоминание сработает. Это справедливо и для padding и для margin (также как и для некоторых других свойств границ, которы описаны См. Промежутки вокруг блоков. ).

Частые задачи: ссылки

Чтобы облегчить пользователям проглядывание гипертекстовых документов, ссылки должны иметь стиль, отличный от нормального текста. Браузеры HTML часто подчеркивают текст гиперссылок. Также применяются различные цветовые схемы, указывающие, переходил ли уже пользователь по этой ссылке или нет. Поскольку гиперссылки являются довольно значимой частью Сети, в CSS есть специальная поддержка для их стилизации. Вот простой пример:

A:link { text-decoration: underline }

Примерный код вверху указывает, что непосещенные ссылки должны быть подчеркнуты:

Ссылки подчеркнуты, как мы и указали, но они вдобавок синие, чего мы не указывали. Когда авторы не указывают все возможные стили, браузеры используют стили по умолчанию, чтобы заполнить пробелы. Взаимодействие между авторскими стилями, стилями по умолчанию и пользовательскими стилями (собственными предпочтениями пользователя) еще один пример противоречия между решающими правилами CSS. Это называется «каскадом»(«C» в «CSS»). Мы обсудим каскад ниже.

Селектор (A:link) заслуживает особого замечания. Вы, возможно, узнаете «A» как тег HTML, но последняя часть нова. «:link» это один из так называемых псевдо-классов CSS. Псевдо-классы используют, чтобы наделить стилем элементы, основанные на информации извне самого документа. К примеру, автор документа не может знать, перешли ли по определенной ссылке или нет. Детально псевдо-классы описываются в главе 4, а здесь мы лишь дадим еще несколько примеров:

A:visited { text-decoration: none }

Это правило присваивает стиль посещенным ссылкам, точно так, как A:link присваивает стиль непосещенным ссылкам. Вот пример посложнее:

A:link, A:visited { text-decoration: none }
A:hover { background: cyan }

Последнее правило знакомит нас с новым псевдо-классом :hover. При условии, что пользователь перемещает указующее устройство (вроде мыши), определенный стиль будет приложен к элементу, когда пользователь двигает курсор над («зависает» над) ссылкой. Вот как это выглядит:

У псевдо-класса :hover интересная история. Он появился в CSS2 после того, как соответствующий эффект стал популярен среди программистов JavaScript. Решение в JavaScript требует сложного кода по сравнению с псевдо-классами CSS, и это пример того, как CSS собирает эффекты, ставшие популярными среди Веб-дизайнеров.

Слово о каскадах

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

В последнем наборе примеров вы увидели, что цвет текста ссылок стал синим без конкретизации таблице стилей. Кроме того, браузерам известно, как форматировать содержимое тегов blockquote и h2 без явного указания. Все, что браузер знает о форматировании, хранится в его таблице стилей по умолчанию и совмещается с авторскими и пользовательскими таблицами стилей, когда документ отображается.

Мы годами знали, что дизайнеры хотят проектировать собственные таблицы стилей. Однако, мы обнаружили, что пользователи тоже хотят иметь возможность влиять на представление документов. С CSS они могут сделать это заполняя личную таблицу стилей, которая совместится с браузерной и дизайнерской таблицами. Все противоречия между различными таблицами стилей решаются браузером. Обычно, дизайнерская таблица стилей имеет высший приоритет в документе, затем пользовательская, потом браузерная по умолчанию. Однако пользователь может отметить, что правило очень важно, и тогда оно аннулирует любые авторские или браузерные стили.

Мы углубимся в детали каскадирования в главе 15, «Каскадирование и наследование». Перед этим, следует узнать многое о шрифтах, промежутках и цветах.

Комментарии | LESS (Примеры)

Хороший код должен сопровождаться комментариями, хотя и бытует мнение, что прекрасный код вовсе не нуждается в них. Конечно, повсеместно писать комментарии не нужно, а вот ключевые моменты лучше всего сопровождать короткими записками.

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

Если проект, над которым вы работаете используется не только вашим отделом, компанией или внутренним сообществом, то целесообразнее писать комментарии на английском языке. Иначе, если ваш проект применяется только внутри одной компании, в которой официальным языком принят, например, русский язык, то логичнее всего будет использовать именно его.

Базовый синтаксис

Препроцессор Less поддерживает несколько синтаксисов написания комментариев. Самый очевидный — это стандартный для CSS синтаксис. Если отключена минификация (компрессия, сжатие) кода, то такие комментарии, содержащиеся между /* */, будут сохраняться в CSS-файле после компиляции. Поэтому используйте такой вид комментариев с умом.

/* Это стандартный однострочный комментарий для CSS */

/*
 А это стандартный блочный комментарий для CSS.
 При необходимости можно использовать и его.
*/

Помимо стандартного синтаксиса предлагается и препроцессорный, но только лишь однострочный вариант записи. Комментарии начинающиеся с // не будут сохраняться в CSS-файл после компиляции.

// Это препроцессорный однострочный комментарий

Особые комментарии

Иногда требуется сохранить какие-то комментарии после компиляции и даже минификации кода. Такой подход чаще всего используется для включения в файл информации о лицензии, авторских правах, версии библиотеки и прочих важных сообщений. Как и в CSS для этого используются комментарии, заключённые в /*! */.

/*! Комментарий, который будет всегда сохраняться */

Также допустима запись /*! !*/, но она считается избыточной и применяется крайне редко, если вообще применяется.

/*! Комментарий, который будет всегда сохраняться !*/

Вложенные комментарии

К сожалению, вкладывать комментарии в комментарии, как и CSS, Less не умеет. Однако, допустимо смешивать комментарии, заключённые в /* */ и однострочные комментарии, начинающиеся с //.

/*
  // Смешивание комментариев
*/

Можно попытаться вложить комментарии и наоборот:

// /* Этот комментарий вложен в другой комментарий */

После компиляции less-файлов, в первом случае комментарий будет отображаться в скомпилированном CSS-файле, а вот втором случае — нет.

Как оформлять комментарии в html, css, php коде|Всё гениальное просто

Для чего нужны комментарии в исходном коде программ

Как оформлять комментарии на разных в HTML, CSS и PHP коде

Как писать комментарии в HTML-коде

Комментарии в CSS-коде

Как сделать комментарии в PHP-коде

Комментарии в HTML-, CSS-, JS- и PHP-коде

Эту статью я начну с того, для чего нужны комментарии. Предположим, что вы разрабатываете модуль со сложной структурой. Или делаете верстку с множеством вложений элементов. В таких случаях некоторые участки кода лучше всего как-то помечать – для этого и существуют комментарии.

Сейчас я подробно покажу четыре типа комментариев, точнее, все их виды для четырех разных кодов.

Комментарии в HTML-разметке

Для того чтобы добавить комментарий в HTML-разметку, используем:

<!-- Текст, код или прочее -->

Все, что стоит в этих тегах, не видно на экране, но доступно для просмотра в исходном коде.

Комментарии в CSS-стилях

Для того чтобы добавить комментарий в CSS-стили, используем:

/* Текст, код или прочее */ 

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

Комментарии в JavaScript-коде

Для добавления комментариев в JavaScript существуют два их типа.

Первый тип:

// Текст, код или прочее

Второй тип:

/* Текст, код или прочее */ 

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

Комментарии в PHP-коде

Этот язык программирования, в отличие от предыдущих, имеет 3 типа комментариев.

Первый тип:

// Текст, код или прочее 

Второй тип:

/* Текст, код или прочее */

И третий тип:

# Текст, код или прочее

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

Обратите внимание!

1. Не рекомендуется делать двойное вложение комментариев. Например,

/* /* Мой код */ */ 

выведет вам ошибку.

2. Комментарии, которые пишутся через /* */ и <!— —>, могут писаться в несколько строк:

/* 
Это 
Мой 
Код 
*/ 

В остальных же случаях для каждой строки нужно писать специальный символ комментария, например:

// Это 
// Мой 
// Код 

В противном случае вы также обнаружите ошибку.

Как добавлять и использовать CSS комментарии

1. Snippets
2. ›
3. CSS
4. ›
5. Как добавлять и использовать CSS комментарии

Каждая веб-страница состоит из структурных, функциональных и стилевых элементов. Каскадные таблицы стилей (CSS) используются для внешнего вида веб-страницы («вид и функции»). Такие стили рассматриваются отдельно от HTML структуры, и таким образом, веб-стандарты могут легко обновляться и применяться.

Проблема таблиц стилей состоит в том, что такие таблицы могут стать довольно длинными и сложными в вопросе размеров, и также возможны трудности, связанные с различными веб-страницами. Это особенно актуально теперь, когда мультимедийные запросы составляют важную часть дизайна для стилей адаптивных веб-страниц, обеспечивая, что веб-страница выглядит так, как она была бы независимо от устройства.

Мультимедийные запросы предлагают значительное количество новых стилей для CSS документа, усложняя работу с ними. Именно здесь CSS комментарии могут быть очень полезными для дизайнеров и разработчиков веб-страниц.

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

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

Комментарии могут быть добавлены в таблице стилей в местах, где допустимы пробелы. Они могут быть находиться на одной строке или же занять несколько строк.

Начните комментарий с добавления /* и завершите добавлением */.

Имеет следующий синтаксис:

Синтаксис используется для однострочных и многострочных комментариев. А теперь рассмотрим пример, где использованы комментарии:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>          
      p {
      line-height: 2em; 
      }         
    </style>
  </head>
  <body>
    <p>Какой-нибудь параграф.</p>
    <p>Высока строки этого параграфа равна 2em.</p>
  </body>
</html>

Хорошо оформленные комментарии могут описать важные аспекты таблиц стилей для тех, кто раньше не был знаком с кодом. Эти комментарии также полезны для тех, кто работал над веб-страницей только в какой-то определенный момент; веб-дизайнеры обычно работают над разными страницами, а запоминание всех методов разработки довольно сложно.

Многие дизайнеры координируют таблицы стилей и разделяют группы на маленькие, более понятные части. Вы часто увидите комментарии перед или после последовательности знаков пунктуации, создавая огромные пустые разрывы на странице, чтобы их легко было увидеть.

Пример¶

/***************************
****************************
Стиль для фона.
****************************
***************************/

Или может иметь следующий вид:

Пример¶

----------------------   ------------------------

Несмотря на то, что добавление слишком много комментариев может повлиять на скорость загрузки и на фактическую работу веб-страницы, все же примените их.

Как мы можем улучшить это?

Спасибо за ваш отзыв!

Спасибо за ваш отзыв!

Считаете ли это полезным? Да Нет

Похожие статьи

— это плохая практика комментировать отдельные строки CSS с помощью //?

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

# 1 Не стандарт

Стандартизован, по крайней мере, с CSS 2.1, комментарии должны быть заключены ТОЛЬКО в / * и * / . Хотя некоторые браузеры допускают // , они не должны этого делать, и находятся всего в одном дюйме от того, кто говорит: «О да, это нестандартно» или «Эй! Это нестандартно, исправьте!»; а затем угадайте, что ваш код CSS, который БЫЛ работал, теперь не подходит для тысяч людей (и, возможно, уже не работал для сотен других). Я добавлю, что и -> разрешены, но только (и я имею в виду ТОЛЬКО), когда они появляются в документе HTML, а не в файле.css исходный файл. Если ваш браузер настолько старый, что не может пропустить более тегов

Какой-то абзац.

Этот абзац написан с высотой строки 2em.

  

  
    
    <стиль>
      a {
        дисплей: блок;
        ширина: 190 пикселей;
        высота: 45 пикселей;
        
        фон: url ('/ build / images / w3docs-logo-black.png ') центр без повтора
      }
    
  
  
     
 Пример комментария 
 
     
  
  

  

  
    
    <стиль>
      a {
        дисплей: блок;
        ширина: 190 пикселей;
        высота: 45 пикселей;
       
        фон: url ('/ build / images / w3docs-logo-black.png') центральный центр без повтора
      }
    
  
  
     
 Комментарий