Как правильно писать комментарии в css файле

Синтаксис CSS — правила, селекторы, свойства, их значения (параметры) и комментарии в языке каскадных таблиц стилей

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

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

Синтаксис в CSS - понятия свойства, селекторов, правил и комментариев

В частности, разберем, что представляет из себя в общем виде отдельно взятое стилевое правило, которое включает в себя селектор, а также свойства и их значения.

Синтаксис и варианты записи правил CSS

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

Учитывая эту наглядную ассоциацию, можно вывести логическую последовательность, которая касается структуры CSS (она является максимально оптимальной, на мой скромный взгляд):

  • значения (или параметры), которые выражается в числах, коде цвета, названии шрифта и т.п., в соответствии с нашей аналогий можно считать буквами;
  • структурной единицей CSS является свойство, определяющее свою часть внешнего вида элемента на странице (его цвет, шрифт текста, размеры, отступы, позицию и т.д.), которому соответствуют конкретные значения (одно или несколько). Здесь совокупность названия свойства и его параметра можно сравнить со словом (которое также может состоять из одной или более букв) в стандартном текстовом фрагменте;
  • правило CSS —селектор (наименование стиля) вместе с набором свойств CSS для каждого элемента полностью определяет его оформление и местоположения на странице. Структурно ассоциируется с предложением (совокупностью отдельно взятых слов в обычном тексте);
  • полное собрание всех правил CSS для конкретного документа (веб-страницы) обеспечивает его корректное отображение в браузере. Сравним это с завершенным отрывком текста.

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

Итак, каждому свойству присваивается конкретное значение (параметр), причем, их может быть несколько. Соответствующий набор свойств (правило) применяется к определенному селектору. Схематически правило CSS можно отобразить так:

Базовый синтаксис CSS - селектор и относящаяся к нему совокупность свойств

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

Обратите внимание на то, что свойство background имеет сразу несколько значений: цвет фона (#00ff00), путь до фонового изображения ("west.png") и разрешение на его повторение по горизонтали (repeat-x). Наверное, вы заметили, что подобный вариант записи несколько отличается от схемы, представленной чуть выше.

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

Скажем, расширенная запись правила, образец которой только что был представлен, наиболее удобна для восприятия, а потому применяется обычно для изучения стилей, ну или в "сыром" файле style.css, который создан для нового сайта, а потому еще не доведен до ума. Есть и другая разновидность этого же самого варианта записи CSS правила:

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

Расширенный вариант записи можно представить и без переносов:

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

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

Селекторы, свойства и применение стилей

Я уже отмечал, что с течением времени происходит все более тесное сближение HTML и CSS. Если на заре зарождения интернета в его сегодняшнем виде внешний вид элементов на веб-странице описывался с помощью атрибутов тегов гипертекстовой разметки, то в наши дни слишком частое использование такого метода считается моветоном, поскольку перегруженный ХТМЛ-код часто не способствует должной оптимизации страниц сайта, что в том числе вредит его SEO продвижению.

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

Кстати, в том числе и по этой причине из всех способов привязки стилей к HTML коду документа наиболее востребованным является вынесение всех стилевых свойств в отдельный файл style.css.

При этом браузер должен понимать, к какому элементу прописано то или иное правило CSS. Вот здесь и становится понятна роль селекторов, среди которых различают несколько видов.

1. Базовые (селекторы тегов) — самый простой для понимания, название которого совпадает с именем соответствующего тега в ХТМЛ коде документа.

Возьмем в качестве примера горизонтальную линию как элемент дизайна страницы сайта. Мы уже знаем, что эта линия создается с помощью тега hr, который прописывается в HTML-коде. Если вы перейдете по только что данной ссылке, то сможете отследить, как меняется внешний вид этого элемента при применении атрибутов тега hr, которые задаются в ХТМЛ-документе вместе с ним.

Однако, как я уже говорил, современные тенденции направлены на разгрузку HTML кода за счет использования оформления с помощью стилей CSS, представленных в отдельном файле. Поэтому приведенные в той статье атрибуты тега hr (width, size, color, noshade) заменяем на свойства стилей, прописанные в style.css:

Которые позволяют получить точно такой же результат:

2. Классы (class) и идентификаторы (id) — имеют некоторую общность, поскольку являются атрибутами тегов, к которым они добавляются в HTML-коде, и одновременно селекторами, кои и указываются в файле CSS, каждый со своим набором свойств.

Cвязь элементов, описываемых тегами с классами и идентификаторами, осуществляется тем, что параметрами id и class являются названия селекторов. Примеры ниже.

Тег с классом «text-x» в HTML-коде:

Стили для этого класса в CSS (впереди обязательно нужно поставить точку):

То же самое для идентификаторов (пример с контейнером див). HTML:

CSS (перед идентификатором ставится значок решетки):

Последующие ниже варианты могут содержать как селекторы тегов, так и классы с идентификаторами.

3. Дочерние селекторы — как известно, в HTML различают родительские элементы (теги) и дочерние (их потомки), которые в них вложены. Весьма логично, что в CSS точно такое же разделение существует между соответствующими этим элементам селекторами.

Правило дочернего селектора указывает, что свойства стилей будут применены к конкретному элементу (в ниже следующем примере это тег гиперссылки a) только в том случае, если он является непосредственным потомком (1-й уровень вложенности) определенного родителя (li):

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

5. Соседние селекторы — данное CSS правило справедливо для элементов, описанных тегами, которые идут друг за другом в HTML-документе, причем, не имеют родственных отношений, иными словами, не вложены друг в друга. Соответствующие им селекторы отделяются друг от друга знаком «+», причем, свойства будут применены ко второму элементу лишь в том случае, если он располагается непосредственно рядом с первым:

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

7. Селекторы атрибутов — позволяет присваивать одни и те же стили всем элементам на веб-странице, имеющим одинаковые атрибуты:

Либо определенным элементам:

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

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

Здесь заданы последовательно два цветовых оттенка для горизонтальной линии blue (синий) и green (зеленый). Поскольку значение green находится ниже, горизонтальная линия в браузере будет окрашена в зеленый цвет. В идеале, конечно, до такой ситуации лучше не доводить, так как это приводит к засорению кода, но, в принципе это не смертельно и легко исправляется. Главное, вы теперь знаете, что такая ситуация возможна.

Виды значений (параметров) свойств

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

Числа

Роль значения того или иного свойства может играть целое число, в котором содержаться цифры от 0 до 9, либо десятичная дробь, где целая и дробная часть разделяются точкой:

Здесь для абзаца, определяемого тегом p, заданы свойства со значениями, которые задают жирный шрифт и интервал между строками. Если целая часть десятичной дроби равно 0, то ее можно не писать, а просто впереди ставить точку. То есть записи: 0.6 и .6 абсолютно идентичны.

Размеры в абсолютных и относительных единицах

Для указания размера того или иного элемента в CSS применяются абсолютные и относительные единицы измерения. Абсолютные отображают размер вне зависимости от устройства, в котором просматривается документ (скажем, монитор компьютера), а относительные единицы определяют размер элемента относительно какого-то иного размера.

Некоторые абсолютные единицы известны из реальной жизни (те же сантиметры, миллиметры и дюймы), о пикселях вы, наверное, уже имеете некое представление.

1. Абсолютные единицы измерения
Единица Краткое описание
px Пиксель
in Дюйм (1 in = 2,54 cm)
cm Сантиметр
mm Миллиметр
pt Пункт (1 pt = 1/72 дюйма)
pc Пика (1 pc = 12 pt)

К слову, cm, mm, pt, pc практически не используются в практической деятельности вебмастеров и разработчиков, а потому нет смысла их подробно разбирать. А вот на остальные мы обратим внимание в той или иной степени.

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

Важно отметить, что реальные единицы часто сопоставляются с теми же пикселями при указании разрешения, которое измеряется в dpi (dots per inch), являющемся специальным показателем, который отражает количество пикселей на дюйм.

Можно сказать, что чем выше этот показатель, тем более качественное и детальное изображение мы получим. Кроме этого, дисплей любого современного электронного устройства имеет подобную характеристику (пример: монитор компьютера с разрешением 1280 × 1024 px).

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

2. Основные относительные единицы
Единица Краткое описание
em Размер шрифта текущего элемента (изначально получен из ширины заглавной литеры «M» определенного шрифта)
ex Размер, основанный на высоте буквы «x» в нижнем регистре
ch Для текущего элемента (основан на ширине символа «0»)
rem Размер шрифта для корневого элемента

Сначала подробнее остановимся на основных относительных параметрах. Единица em позволяет задать, например, величину шрифта (когда она явно не установлена) по отношению к размеру, указанному в браузере по умолчанию, или относительно размера родительского элемента.

Размер шрифта в em, который может быть задан изначально при верстке сайта, устанавливается через свойство стилей font-size. То есть, 1 em равен дефолтному размеру шрифта либо размеру шрифта родителя. Запись в процентах тождественна em в том плане, что 1 em = 100%.

Для ex действуют точно такие же правила, что и в отношении em. Иными словами, существует привязка ex к размеру, установленному в веб-браузере по умолчанию, либо к величине размера шрифта родителя. Аналогично работает и «ch».

Стоит сделать акцент на различии между em и rem. Оно заключается в том, что em находится в полной зависимости от размера шрифта родителя и изменяется одновременно с ним, а вот rem строго привязан к корневому элементу, определяемому тегом html.

Далее еще несколько вспомогательных относительных единиц, которые находятся в связке с высотой и шириной окна браузера (областью просмотра).

3. Относительные единицы, привязанные к области просмотра браузера
Единица Краткое описание
vw 1% от ширины области просмотра
vh 1% от высоты области просмотра
vmin 1% от меньшего значения области просмотра по ширине и высоте
vmax 1% от большего значения области просмотра по ширине и высоте

Для чего нужны такие варианты задания размеров? Дело в том, что далеко не всегда наилучшим решением является использование стандартных относительных величин, включая проценты. Порой выгоднее связать величину шрифта с высотой и шириной окна браузера. Скажем, ежели область просмотра по высоте равна 800px, то 1vh = 8px, а при ширине 1500px — 1vw = 15px.

Единицы vmin и vmax определяются соответственно минимальными и максимальными размерами области по высоте и ширине. Образец: высота окна браузера 700px, а ширина — 1300px. В этом случае vmin = 7px, а vmax = 13px.

При установке размеров нужно обязательно указывать единицы (например, height: 55px), иначе браузер некорректно будет отображать соответствующие элементы. Значения, равные нулю, к данному правилу не относятся, их можно обозначать двумя способами (padding: 0 или padding: 0px), по понятным причинам с подавляющим преимуществом лидирует первый вариант.

Проценты

Этот вид единиц я решил упомянуть отдельно. Выше я уже сказал о преимуществе использования относительных значений при задании свойств. Это в полной мере относится и к процентам.

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

Ключевые слова

Разберем некоторые слова, которые играют роль параметров свойств и определяют то или иное положение либо внешний вид элемента. Вот несколько наглядных примеров.

1. Значения свойства text-align, которые способствуют выравниванию текста по горизонтали: center | justify | left | right | start | end. Вот пример c параметром justify:

И для обоих прописаны стили:

Если в отношении элемента не указан цвет текста (свойство «color»), то по умолчанию текстовый фрагмент будет окрашен в черный (в большинстве популярных браузеров). В нашем примере для внешнего контейнера («bl-1») color как раз отсутствует. Вследствие этого при указании значения «currentColor» фон этого контейнера примет черный окрас:

3. Inherit — это ключевое слово в роли параметра устанавливает наследование соответствующих значений родительских элементов. Образец:

И CSS правила для него:

4. Initial — применяется в тех случаях, когда требуется установить исходные параметры свойств. Скажем, помогает восстановить значения, установленные браузером по умолчанию, либо определить начальные параметры, которые были изменены в результате наследования. Пример:

И стили для него:

С помощью класса «init» внешний вид фрагмента абзаца p, заключенного в тег span, и нижнего заголовка H2, изменен в соответствии с настройками их стилей по умолчанию.

5. Unset — это параметр, являющийся по сути "гибридом" inherit и initial. Определяет параметр свойства как inherit, ежели свойство наследуется от родителя, в противном случае — как initial.

Пример 1 (действует как inherit):

В соответствии с правилами CSS свойство color наследуется, поэтому «unset» в нашем примере возвращает зеленый цвет текста для контейнера «xxx», который является потомком «zzz»:

Пример 2 (работает как initial):

Так как по правилам таблиц стилей свойство border не наследуется, то «border-color: unset» возвращает цвет рамки к значению по умолчанию, то есть она приобретает черный оттенок.

URL, или адрес

Этот параметр содержит в себе унифицированный указатель ресурса и применяется, когда нужно, например, указать относительный или абсолютный путь к файлу с изображением (читайте вот эту статью о вставке картинок на страницу с помощью HTML тега img). При этом используется ключевое слово url (), где между скобками и указывается путь до графического файла:

Время

Используется, например, при реализации анимационных эффектов (да-да, на чистом CSS можно создавать теперь и такие вещи), где параметры указываются в секундах (s) или миллисекундах (ms). Значения могут быть как в виде целых, так и дробных чисел. При этом надо помнить, что нельзя допускать пробела между числом и единицей измерения (2s, 50ms)./p>

И, соответственно, стили для него:

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

Строки

Этот вид параметра позволяет добавлять фрагменты текста. Строки нужно обязательно заключать в кавычки (одинарные или двойные). Причем, если внутри строки требуется взять в кавычки слово или фразу, то эти виды кавычек можно комбинировать.

Скажем, ежели всю строку вы берете в одинарные кавычки, то внутренний текстовый фрагмент — в двойные, и наоборот. Разрешается также применять один и тот же вид, только в этом случае необходимо экранировать внутренние кавычки, добавляя перед ними обратный слеш «\»:

  • свойство: "строка ‘контента’"
  • свойство: ‘строка "контента"’
  • свойство: "строка \"контента\""
  • свойство: ‘строка \’контента\»

Далее рассмотрим конкретный пример, чтобы было понятнее.

Для начала ХТМЛ-код:

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

1. Название. Правда, задавать таким способом можно не все, а только часть оттенков («red» — красный, «green» — зеленый, «black» — черный, «orange» — оранжевый, «yellow» — желтый, «olive» — оливковый и некоторые другие). Их также можно отнести к ключевым словам.

2. Hex (шестнадцатеричный код). Основой шестнадцатеричной системы, в отличии от известной всем десятеричной, являются 16 символов: 10 цифр (от 0 до 9) и 6 первых букв латинского алфавита (A, B, C, D, E, F). Буквы от A до F соответствуют числам от 10 до 15.

Значения цвета для стилевых свойств CSS

3.1. RGB — можно задавать значение цвета, исходя из десятеричной системы. Название данного метода является аббревиатурой трех основных задействованных в ней цветов: Red (красный), Green (зеленый), Blue (синий). Оттенки каждого из них находятся в диапазоне от 0 до 255. Для применения этой системы необходимо впереди прописать rgb, а в скобках указать каждый из компонентов цвета: rgb (240, 0, 180). Также не возбраняется использовать проценты:

3.2. RGBA — расширенный вариант предыдущего метода RGB, содержащий альфа-канал, который устанавливает прозрачность элемента в диапазоне от 0 до 1. Параметр «0» соответствует полной прозрачности, а «1» — совершенной непрозрачности.

4.1. HSL — наименование этого метода также представляет из себя не что иное как аббревиатуру, которая включает первые буквы трех слов: Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Именно эти характеристики в совокупности определяют конечный цвет. При этом оттенок расположен на конкретном месте цветового круга:

Поскольку весь круг составляет 360°, то каждому оттенку (hue) соответствует вполне конкретное значение в градусах в диапазоне от 0° до 359°. При этом параметры основных оттенков таковы: 0° — красный, 120° — зеленый, 240° — синий.

Насыщенность и светлота измеряются в процентах (от 0 ло 100%). Для saturate параметр 0 значит отсутствие цветовой гаммы, а 100% — максимально насыщенный цвет. Чем больше значение lightness, тем светлее тон, 0 соответствует черному, а 100% — белому.

4.2. HSLA — по аналогии с RGBA является расширенным вариантом HSL, к которому добавлен показатель прозрачности.

Угол поворота или наклона

В CSS в качестве параметров тех или иных свойств может применяться угловые характеристики (основа — круг). Вот какие единицы при этом используются:

  • градусы — deg (1 полный круг составляет 360deg);
  • грады — grad (полный круг 400grad);
  • радианы — rad. Целый круг равен 2&#960 (приблизительно 6.2832rad);
  • повороты — turn (1 turn приравнивается к полному повороту).

Немаловажно отметить, что могут использоваться отрицательные значения. Ниже даны наглядные примеры с параметрами некоторых углов (поворотов):

Для наглядности применим характеристики поворота для реализации градиентной заливки фона и в качестве одной из составляющих нашего образца поместим на страницу определенный текст:

А теперь составим и правило CSS для такого фона:

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

Комментарии в CSS

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

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

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

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

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

Как структурирован CSS

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

Необходимые знания: Базовая компьютерная грамотность, Базовое программное обеспечение, базовые знания работа с файлами, и базовые знания HTML (статья Введение в HTML), и знание о том Как работает CSS
Задача: Подробно узнать основные синтаксические структуры CSS.

Применение CSS к вашему HTML

Первое, что мы рассмотрим, это три метода применения CSS к документу.

Внешняя таблица стилей

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

Внешняя таблица стилей — это когда у вас есть CSS отдельным файлом с расширением .css , и ссылка на него из HTML-элемента <link> :

Файл CSS может выглядеть следующим образом:

Атрибут href элемента <link> должен ссылаться на файл в файловой системе.

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

Внутренняя таблица стилей

Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента <style> , содержащейся внутри HTML <head> .

Таким образом, HTML будет выглядеть вот так:

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

Встроенные стили

Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте style :

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

Есть несколько мест, где встроенные стили являются более распространёнными или даже желательными. Вам, возможно, придётся прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело). Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.

Игра с CSS в этой статье

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

Затем, когда вы столкнётесь с CSS и захотите поэкспериментировать со стилями, измените содержимое <body> HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.

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

Читайте дальше и получайте удовольствие!

Селекторы

Говоря о CSS, нельзя не упомянуть о селекторах, о некоторых типах которых мы уже говорили в руководстве Начало работы с CSS. Селектор — это то, как мы обозначаем что-либо в нашем HTML-документе, чтобы стилизовать его. Если стиль не применился, то это, скорее всего, потому, что селектор в таблицах стилей не совпал с тем, что в HTML-документе.

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

Примечание: вы узнаете больше о селекторах в руководстве CSS-селекторы в следующем модуле.

Спецификация

Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента p — он будет синим; также я задал класс, который сделает элемент красным:

А теперь допустим, что в нашем HTML-коде у нас есть абзац p с классом special . Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?

В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются каскадами, или спецификациями. В примере ниже мы задали два правила для селектора p , но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.

А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.

Попрактикуйтесь сами — добавьте два правила для параграфа p < . >в вашу таблицу стилей. Затем добавьте класс к одному элементу p и попробуйте применить к нему какой-нибудь стиль.

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

Свойства и значения

Если говорить в общем, CSS строится на двух его составляющих:

Свойства Определяют, какую характеристику вы желаете изменить (например, font-size , width , background-color ). Значения Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.

На изображении внизу выделены свойство и его значение. Здесь свойство — color , а его значение — blue .

A declaration highlighted in the CSS

Свойство вкупе со значением называется CSS-объявлением. CSS-объявления помещаются внутри блока объявлений CSS. Ниже показан наш CSS-код с выделенным блоком объявлений.

A highlighted declaration block

Наконец блок объявлений воссоединяется с селекторами, образуя CSS-правила. Наше изображение содержит два правила — одно для селектора h1 , другое для селектора p . Правило для h1 выделено.

The rule for h1 highlighted

Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием ( : ).

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

  • font-size
  • width
  • background-color
  • color (en-US)
  • border

Важно: Если свойство или значение не определено, то объявление считается недействительным — и будет попросту проигнорировано.

Важно: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, color надо всегда писать color ; британский вариант colour не будет работать.

Функции

Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию calc() . Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:

В результате получим это:

Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px. Не могу же я сказать, чему равны 90% блока?!

В следующем примере будут различные значения для свойства <transform> rotate() .

Результат этого кода будет:

Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл:

  • transform
  • background-image , в частности со значениями градиента
  • color (en-US) ,в частности со значениями rgb/rgba/hsl/hsla

@правила

До сих пор не сталкивались мы с правилами @rules (произносится как эт-рулс, от английского "at-rules"). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил @rules простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать @import :

Чаще других встречается @rules под названием @media : оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).

Ниже у нас CSS-файл, в котором значение заднего фона элемента <body> равно pink . Однако после мы добавили правило @media , которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.

Вы столкнётесь и с другими правилами @rules в продолжение следующих уроков.

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

Стенография

Некоторые свойства вроде font , background , padding , border и margin называются стенографическими свойствами, — они позволяют установить несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.

Правила написания CSS

Правила написания CSS

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

В этот раз мне хочется дать Вам несколько советов о правилах написания CSS. Многие Web-дизайнеры используют CSS неправильно. И если при небольшом коде — это не страшно, то если стиль уже растянут на сотни, а то и тысячи строк, то наступает момент, когда дизайнер уже не понимает, что происходит. И еле-еле на соплях и кое-как, до конца уродуя код, доводит дело до "завершения". В результате, ни о каком качестве и стабильности работы и речи идти не может. Вот чтобы свести данный фактор к минимуму (потому что полностью уничтожить его всё равно не получится), хочу дать Вам несколько советов по написанию стилей CSS.

Правило написания CSS №1 — Забейте на порядок

Многие дизайнеры используют порядок написания стилей, чтобы задавать разные приоритеты. То есть если мы напишем два свойства с разными значениям в одном типе CSS стиля (inline-стиль, внедрённый стиль и другие), то будет применён тот стиль, который написан ниже. Причём, это относится не только к свойствам, но и к селекторам. То есть часто на разных страницах, в разных порядках подключается стили, чтобы каждая страница применяла в итоге свои. Разумеется, это крайне плохо, потому что если случайно нарушить порядок, то ошибка проявится (и самое страшное — не факт, что сразу), и найти её будет весьма трудно. Вдобавок, велика вероятность дублирования, а это уже "грязь", которая, в лучшем случае, просто увеличит размер файла, а в худшем даст сбой в самый неожиданный момент. Поэтому избегайте влияние порядка по максимуму!

Правило написания CSS №2 — Не бойтесь наследования

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

Правило написания CSS №3 — Соблюдайте свой стиль

Очень важным правилом является соблюдение собственного стиля написания. Например, у меня стиль написания такой:

То есть у меня правила такие: название селектора, пробел, фигурная скобка, со следующей строки табуляция, название свойства, двоеточие и через пробел значение. Если имеются другие свойства у селектора, то со следующей строки, через табуляцию, вновь название свойства, а через двоеточие и пробел — значение. Все селекторы (в моём примере — b и p) я отделяю пустой строкой. Вот такой мой стиль написания стилей. Ещё рекомендуется писать селекторы по алфавиту — это тоже правильно, и я последнее время так их и пишу. Но главное — это соблюдать свой собственный стиль всегда и везде. Потому что многие его меняют день ото дня, а потом у них затрудняется восприятие того, что они понаписали.

Правило написания CSS №4 — Используйте комментарии

Это правило, которое соблюдают поистине единицы, к которым даже я не отношусь (хотя пытаюсь исправляться). Многие скажут использование комментариев — это не очень хорошо, потому что, во-первых, они увеличивают размер файла, а, во-вторых, зачем на них тратить время, если данный стиль нужен только мне, и никто больше на него смотреть не будет. Оба мнения ошибочные: первое потому, что никто Вас не заставляет писать целые тома, а 4-5 слов для каждого селектора увеличат в среднем не более, чем на 10%. А второе мнение ошибочно потому, что никто не знает, как будет развиваться Ваш сайт. И если он будет посещаемым, и Вам придёт в голову сменить дизайн, то будет плохо для человека, которого Вы наймете. Или если сами захотите сменить дизайн, то тоже лучше не будет, так как Вы уже забудете: где, что и зачем находится. Поэтому старайтесь комментировать то, что пишите, почаще.

Правило написания CSS №5 — Файл сброса

Данное правило остаётся под сомнением, хотя, без спору, оно является правильным, вот только использовать его или нет я оставляю на Ваше усмотрение. Заключается оно в следующем: необходимо создать CSS файл (reset.css), который будет сбрасывать все стили, применённые к стандартным элементам HTML. Например, убрать жирное начертание у тега <b> или убрать больший размер текста у заголовков <h1>. То есть просто уничтожить форматирование HTML-документа. Это хорошо, так как Вы будете точно знать, что никаких сюрпризов не будет, и Ваш код любой браузер воспримет на "Ура", а уже отсюда можно потихоньку наращивать файл стилей.

Пользоваться или нет данным советом — решать Вам, но, на мой взгляд, это очень большая потеря времени. И в итоге, Вам всё равно придётся ставить те стили, которые Вы изначально удалили.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 20 ):

Здравствуйте Михаил. Подскажите пожалуйста что такое default css?

Это файл, в котором сбрасываются все стили, чтобы все браузеры стали одинаково отображать стиль на данном этапе. Традиционно он называется reset.css

т.е. этот файл не является таблицей стилей?

Является. Там задаются правила, где обнуляются всякие отступы, поля, рамки и прочие свойства, которые даются браузерами по умолчанию. Введите в google reset.css, и, думаю, что первый же сайт покажет, как выглядит данный файл.

Спасибо за ответ. К сожалению поисковики не дали такой исчерпывающий ответ как Вы. Спасибо еще раз!

Вот так выглядит reset.css: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; >/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >body < line-height: 1; >ol, ul < list-style: none; >blockquote, q < quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: »; content: none; >table

Здравствуйте Михаил. Можно подробней объяснить про написание CSS файл (reset.css). Нужно убрать на сайте жирное подчеркивание текста,а страниц очень много. Как правильно это написать?

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

Здравствуйте!Подскажите как избавиться от этих пробелов по бокам? http://s2.ipicture.ru/uploads/20130321/rrSkV21f.png

Здравствуйте, Михаил. Изучаю с-час Ваш РНР курс, всё шло отлично до момента, когда началась работа с "подвалом". Я сделал всё один в один как Вы, проверил код несколько раз, но тем не менее для "подвала" CSS словно не работает, именно для "подвала". Не могу никак сдвинуть "Все права защищены" в центр страницы. Не подскажете, в чём может быть дело?

В чём угодно, гадать не буду.

привет,какая стандартная ширина сайта?спасибо.

Смотря какого. Обычно делают 990px ширину, если фиксированная. А если резиновая, то адаптируют под 990px и выше.

Здравствуй Михаил, не могли бы вы проще (или на примере) объяснить правило №1. Никак не доходит до меня.

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

Здравствуйте! Как лучше задавать стиль для содержимого div — присваивая класс/id блоку, то есть самому divу, или же содержимому?

В зависимости от содержимого. Если это текст,то лучше блоку. Если это список или ещё что-то,то лучше самому списку. Роли не играет.Зависит от нужной вложенности

dobrii ve4er. u menea document css ne delaet nikakih izmenenia,ne mogu poneati v 4iom problema? zaranee spasibo.

проблем может быть до миллиона) вы его хоть подключили? прочтите,что такое CSS пройдите бесплатный курс от Михаила по HTMl,чтобы понимать что и как

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Добавить комментарий

Ваш адрес email не будет опубликован.