title

Comments

A CSS comment is used to add explanatory notes to the code or to prevent the browser from interpreting specific parts of the style sheet. By design, comments have no effect on the layout of a document.

Syntax

Comments can be placed wherever white space is allowed within a style sheet. They can be used on a single line, or traverse multiple lines.

Examples

/* A one-line comment */ /* A comment which stretches over several lines */ /* The comment below is used to disable specific styling */ /* span < color: blue; font-size: 1.5em; >*/ 

Notes

Specifications

See also

• CSS key concepts:
  • CSS syntax
  • At-rules
  • Specificity
  • Inheritance
  • Box model
  • Layout modes
  • Visual formatting models
  • Margin collapsing
  • Values
    • Initial values
    • Computed values
    • Used values
    • Actual values

    Found a content problem with this page?

    This page was last modified on Jul 17, 2023 by MDN contributors.

    Your blueprint for a better internet.

    MDN

    Support

    Our communities

    Developers

    Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
    Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

    Источник

    CSS Comments

    CSS comments are not displayed in the browser, but they can help document your source code.

    CSS Comments

    Comments are used to explain the code, and may help when you edit the source code at a later date.

    Comments are ignored by browsers.

    A CSS comment is placed inside the element, and starts with /* and ends with */ :

    Example

    You can add comments wherever you want in the code:

    Example

    Comments can also span multiple lines:

    Example

    /* This is
    a multi-line
    comment */

    HTML and CSS Comments

    From the HTML tutorial, you learned that you can add comments to your HTML source by using the syntax.

    In the following example, we use a combination of HTML and CSS comments:

    Example

    My Heading

    Hello World!

    This paragraph is styled with CSS.

    CSS comments are not shown in the output.

    

    COLOR PICKER

    

    

    Report Error

    If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

    Thank You For Helping Us!

    Your message has been sent to W3Schools.

    Top Tutorials

    Top References

    Top Examples

    Get Certified

    W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

    Источник

    Блоки комментариев на css без изображений

    Собственно, ничего принципиально нового или фантастического. Просто способ сделать такие вот стильные блоки без использования изображений:

    

    Думаю, это много кому может пригодиться. У меня, например, есть несколько проектов, на которых этот способ было бы целесообразно использовать.

    Код html:

    Летят как-то Петька с Василь Иванычем в самолёте

    Вассиль Иваныч

    Петька. Приборы.

    Петька

    Триста сорок пять.

    Вассиль Иваныч

    Что «триста сорок пять».

    Петька

    А что, б%%%ь, «приборы»!?

    Код css:

    * font: normal 12px arial;
    >
    .name float: left;
    width: 150px;
    display: block;
    text-align: right;
    padding-top: 8px;
    clear: both;
    >
    .comments float: left;
    width: 30%;
    border: 2px solid red;
    padding: 10px 15px;
    >
    .line height: 14px;
    width: 2px;
    float: left;
    position: relative;
    left: 2px;
    background: #fff;
    top: 23px;
    //top: 13px;
    >
    .lt float: left;
    position: relative;
    left: 8px;
    top: 11px;
    //top: 1px;
    font: normal 28px verdana;
    z-index: 5;
    color: red;
    >

    Само собой разумеется, код можно оптимизировать и совершенствовать. Тут показан только сам принцип.

    Преимущества и недостатки метода описывать не буду — истина родится в комментариях 🙂

    Источник

    Как закомментировать CSS (и как писать комментарии)

    Подпишись на наш телеграм-канал TechRocks WEB-разработка?

    

    Комментарии — составляющая часть кода на любом языке программирования. Есть возможность комментирования и в CSS.

    Если вы работаете в команде и занимаетесь большим проектом, вам нужна возможность как-то пояснять свой код товарищам. Тут вам на помощь придут комментарии.

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

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

    Как закомментировать CSS

    Чтобы закомментировать часть CSS-кода, вам понадобится обычный слэш ( / ) и астериск ( * ).

    Для добавления как встроенного, так и многострочного комментария в CSS вы начинаете со слэша и астериска ( /* ). Их же, но в обратном порядке ( */ ) вы ставите в конце комментария.

    Вот как выглядит встроенный (строчный) комментарий в CSS:

    /* This is an inline comment in CSS */

    А так выглядит многострочный комментарий:

    /* This is a multi-line comment in CSS */

    Вы также можете закомментировать те строки CSS, которые не должны выполняться:

    С помощью комментариев обозначают начало и конец стилей отдельных разделов на веб-странице:

    /* Hero section starts */ .hero < display: flex; align-items: center; justify-content: space-between; gap: 1.9rem; max-width: 1100px; margin: 2rem auto -6rem; >/* Hero section ends */

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

    /* Don't override this style if you don't know what you are doing. Otherwise, CSS might give you a kick in the butt */

    Организация CSS при помощи комментариев

    Примечание редакции Techrocks: этот раздел взят из другой статьи — «CSS Comment Example – How To Comment Out CSS».

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

    /* * 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 ***/

    Заключение

    В долгосрочной перспективе комментарии в СSS могут помочь вспомнить, что вы делали, когда писали тот или иной код.

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

    Источник

    Читайте также:  Auto new line css