Синтаксис CSS. Идентификаторы и названия классов. После названий свойств

В прошлом уроке мы разбирали способы подключения CSS. Теперь перейдём к самому языку.

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

1. Селектор (выбор объекта, с которым будем работать. Например, заголовок, div, таблица и тд.)
2. Блок стилей - описание одного или нескольких свойств объекта - цвет, размер и тд. Заключается в фигурные скобки {}

Мы видим, как заголовку - селектор, в блоке стилей присваивается свойство цвет текста (color ) - синий.
Блок стилей состоит из свойств и их значений , которые при перечислении разделяются точкой с запятой (;) , как в примере ниже.

Теперь мы добавляем ещё одно свойство - форматирование текста (font) . В нём мы придаём значение размер текста - 20 пикселей .

Пример работы CSS Создайте в любом месте папку, например, урок 2 . В ней создайте файл style.css . В него скопируйте весь код ниже. В коде CSS мы задаём свойства для тега и заголовков и .

Код CSS (файл style.css )

Body{
background: gray;
color: white;
}
h1{color:#0085cc;}
h2{color:white;}
Обратите внимание, не будет разницы, записывать блок стилей в строчку (h1,h2) или в столбик (body). И тот, и другой вариант будут работать. Выбирайте так, как Вам удобно.

Теперь создаём HTML-файл. Неважно, какое будет название, главное, чтобы путь к файлу с CSS кодом был указан верно. Указывается также как и в ссылках, путях к изображениям. В примере ниже указан путь (style.css) в ту же директорию, что и html-файл. То есть оба файла должны быть в одной папке.

Код HTML

Пример работы CSS

Заголовок h1
Заголовок h2

Результат работы кода можно увидеть по ссылке ниже.

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

Идентификаторы

Идентификатор элемента - это селектор, который присваивается одному элементу и делает его уникальным. Задаётся при помощи параметра id .

Данному параграфу присвоен id. У него будут уникальные свойства.

Параметры текста останутся по умолчанию.

Разберём пример

Код HTML и CSS

Пример работы CSS

p{ color:black; }
p#blue{ color:blue; }

Текст который будет синего цвета, потому что есть id

Цвет текста останется по умолчанию.

Сначала в стилях у всех параграфов в свойстве цвета указан черный цвет, а текст параграфа с id "blue" будет синим. Селектор в данном случае состоит из элемента (p - параграф), разделителя (# - обозначение идентификатора) и имени идентификатора (blue).

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

Если хотите задать стили для нескольких элементов, то следует использовать классы .

Классы

Класс (class) - это селектор, который позволяет применить стили к одному и более элементам. Например, id применим только к одному уникальному элементу. В качестве значения принимается имя элемента.

Рассмотрим пример:

Код HTML и CSS

Пример работы CSS

p{ color:black; }
p#blue{ color:blue; }
p.blue{ color:blue; font-weight: bold;}

Цвет текста чёрный.

Текст синего цвета.

Текст полужирный и синего цвета.

Цвет текста чёрный.

В результате параграф с идентификатором (id ) blue будет иметь текст синего цвета, элементы с class blue будут выделены полужирным шрифтом и синим цветом. А все остальные элементы p будут иметь шрифт чёрного цвета.

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

Унифицированные селекторы

Унифицированные селекторы (.) - это селектор, который можно присвоить разному типу элементов, например, и заголовкам, и параграфам, и блокам (div). Самый распространённый вариант. До этого мы использовали конструкцию в коде CSS p#blue и p.blue , то есть сначала указывали тип элемента (p - параграф), а потом уже сам идентификатор или класс. Так вот можно указывать конструкцию проще, сразу начинать с .blue . Подобный селектор будет применим уже не только к параграфам, а к другим элементам.

Код HTML и CSS

Пример работы CSS

p{ color:black; }
#blue{ color:blue; }
.blue{ color:blue; font-weight: bold;}

Заголовок с идентификатором.

Цвет текста чёрный.

Текст полужирный и синего цвета.

Текст в блоке тоже полужирный и синего цвета
Текст в строчном элементе тоже полужирный и синего цвета

В результате унифицированный селектор, в данном случае класс .blue , мы применили и к парафграфу (p), и к блоку (div), и к строковому элементу (span). Результат везде одинаковый - текст полужирный и синего цвета.

Контекстные селекторы

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

Код HTML и CSS

Пример работы CSS

p strong{ color:blue;}

Цвет текста чёрный. Но теги полужирный шрифта тут не упоминаются.

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

И внимание!!! Параграф с фразой полужирным шрифтом синего цвета

Соответственно синим будет выделен только тот полужирный текст (strong), который будет в параграфе (p).

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

Группировка селекторов - это такая конструкция таблицы стилей, где блок объявления стилей обращён к одному и более ранее упоминаемым элементам и добавляет новое свойство.

По тексту сложно понять. Лучше сразу к примеру.

H1, h2, h3{ color:blue; }
h1{ font-size:18px; }
h2{ font-size:16px; }
h3{ font-size:14px; }
В первой строке мы упоминаем сразу несколько элементов . Для того, чтобы обратиться сразу к нескольким элементам надо в селекторе перечислить их через знак , (запятую) и пробел. Перед последним перечисляемым элементом запятая и пробел НЕ нужны .

Последующими упоминаниями данных элементов мы добавляем им значения новых свойств. В данном случае размера шрифта.

Код HTML и CSS

Пример работы CSS

h1, h2, h3{ color:blue; }
h1{ font-size:18px; }
h2{ font-size:16px; }
h3{ font-size:14px; }

Заголовок h1
Заголовок h2
Заголовок h3

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

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

Спасибо за внимание! Урок окончен!

По возможности поясняйте свой код, где это необходимо.

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

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

Задачи Отмечайте задачи для списка дел с помощью TODO .

Отмечайте задачи с помощью ключевого слова TODO . не используйте другие часто встречающиеся форматы, такие как @@ .

Заключайте контакты (имя пользователя или список адресатов) в круглые скобки: TODO(контакт) .

Описывайте задачу после двоеточия, например: TODO: Задача .

Рекомендуется: {# TODO(Ivan Ivanov): Разобраться с центровкой #} Тест
Рекомендуется:

• Огурцы
• Помидоры

Правила оформления HTMLТип документа Используйте HTML5.

(Рекомендуется использовать HTML с типом контента text/html . Не используйте XHTML, так как application/xhtml+xml (англ.) , хуже поддерживается браузерами и ограничивает возможность оптимизации.)

Валидность HTML По возможности используйте валидный HTML.

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

W3C HTML validator (англ.) чтобы проверить валидность кода.

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

Не рекомендуется: Проверка Просто проверка
Рекомендуется: Проверка Просто проверка.

Семантика Используйте HTML так, как это было задумано.

Используйте элементы (Иногда неверно называемые “тегами”) по назначению: заголовки для заголовков, p для абзацев, a для ссылок и т.д.

Это облегчает чтение, редактирование и поддержку кода.

Альтернатива для мультимедиа Всегда указывайте альтернативное содержимое для мультимедиа.

Постарайтесь указать альтернативное содержимое для мультимедиа: например для картинок, видео или анимаций, заданных с помощью canvas . Для картинок это осмысленный альтернативный текст (alt ), а для видео и аудио расшифровки текста и подписи если это возможно.

Альтернативное содержимое может помочь людям с с ограниченными возможностями. Например человеку со слабым зрением сложно понять, что на картинке если для нее не задан @alt . Другим людям может быть тяжело понять о чем говорится в видео или аудио записи.

(Если для картинки alt избыточен, или она используется только в декоративных целях в местах, где нельзя использовать CSS, используйте пустой альтернативный текст alt="" )

Разделение ответственности Разделяйте структуру, оформление и поведение.

Держите структуру (разметка), оформление (стили) и поведение (скрипты) раздельно и постарайтесь свести взаимодействие между ними к минимуму.

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

Старайтесь сократить их пересечения к минимуму, включая в шаблоны минимальное количество файлов стилей и скриптов.

Отделение структуры от представления и поведения помогает облегчить поддержку кода. Изменение шаблонов и HTML-документов всегда занимает больше времени чем изменение файлов стилей или скриптов.

Не рекомендуется: HTML sucks HTML Отстой

Я об этом и раньше где-то читал, но теперь точно все ясно: HTML - полная фигня!!1 Не могу поверить, что для того чтобы изменить оформление, нужно каждый раз все переделывать заново.
Рекомендуется: My first CSS-only redesign Мой новый CSS дизайн

Я читал об этом и раньше, но наконец-то сделал сам: Использую принцип разделения ответственности и не пихаю оформление в HTML

Как круто!

Ссылки-мнемоники Не используйте ссылки-мнемоники.

Единственное исключение из этого правила - служебные символы HTML (например < и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).

Необязательные теги Не используйте необязательные теги. (не обязательно)

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

(Может потребоваться некоторое время для того, чтобы этот подход начал использоваться повсеместно, потому что это сильно отличается от того, чему обычно учат веб-разработчиков. С точки зрения, согласованности, и простоты кода лучше всего опускать все необязательные теги, а не некоторые из них).

Не рекомендуется: Тратим байты - тратим деньги.
Рекомендуется: Байты-деньги!

Так-то

Атрибут "type" Не указывайте атрибут type при подключении стилей и скриптов в документ.

Не используйте атрибут type при подключении стилей (кроме вариантов когда используется что-то кроме CSS) и скриптов (кроме вариантов когда это не JavaScript).

Указывать атрибут type в данном случае не обязательно потому что HTML5 использует text/css (англ.) и text/javascript (англ.) по умолчанию. Это будет работать даже в старых браузерах.

Не рекомендуется:
Рекомендуется:
Не рекомендуется:
Рекомендуется:

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

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

Также ставьте отступы для всех элементов вложенных в блочный или табличный элемент.

(Если у вас возникнут сложности из-за пробельных символов между списочными элементами, допускается поместить все li элементы в одну строку. Линту [утилита для проверки качества кода прим. пер.] рекомендуется в данном случае выдавать предупреждение вместо ошибки.

Рекомендуется:

• Маша
• Глаша
• Чебураша

Рекомендуется: Прибыль Налоги

$ 5.00	$ 4.50

Правила оформления CSSВалидность CSS По возможности используйте валидный CSS-код.

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

Используйте такие инструменты как W3C CSS Валидатор (англ.) для проверки своего кода.

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

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

Вместо использования шифров, или описания внешнего вида элемента, попробуйте в имени класса или идентификатора выразить смысл его создания, или дайте ему шаблонное имя…

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

Использование функциональных или шаблонных имен уменьшает необходимость ненужных изменений в документа или шаблонах.

Не рекомендуется: /* Не рекомендуется: не имеет смысла */ #yee-1901 {} /* Не рекомендуется: описание внешнего вида */ .button-green {} .clear {}
Рекомендуется: /* Рекомендуется: точно и по делу */ #gallery {} #login {} .video {} /* Рекомендуется: шаблонное имя */ .aux {} .alt {}

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

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

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

Селекторы типа Избегайте использование имен классов или идентификаторов с селекторами типа (тега) элемента.

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

Сокращенные формы записи свойств Используйте сокращенные формы записи свойств, где возможно.

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

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

Не рекомендуется: /* Не рекомендуется */ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;
Рекомендуется: /* Рекомендуется */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;

0 и единицы измерения Не указывайте единицы измерения для нулевых значений

Не указывайте единицы измерения для нулевых значений если на это нет причины.

0 в целой части дроби Не ставьте “0” в целой части дробных чисел.

Не ставьте 0 в целой части в значениях между -1 и 1.

Кавычки в ссылках Не используйте кавычки в ссылках

Не используйте кавычки ("" , "" ) с url() .

Шестнадцатеричные названия цветов Используйте трехсимвольную шестнадцатеричную запись где это возможно.

Трехсимвольная шестнадцатиричная запись для цветов короче и занимает меньше места.

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

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

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

Разделители в классах и идентификаторах Разделяйте слова в идентификаторах и именах классов с помощью дефиса.

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

Не рекомендуется: /* Не рекомендуется: слова “demo” и “image” не разделены */ .demoimage {} /* Не рекомендуется: используется подчеркивание вместо дефиса */ .error_status {}
Рекомендуется: /* Рекомендуется */ #video-id {} .ads-sample {}

Хаки Избегайте использования информации о версии браузеров, или CSS “хаков”- сперва попробуйте другие способы.

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

Правила форматирования CSSУпорядочивание объявлений Сортируйте объявления по алфавиту.

Задавайте объявления в алфавитном порядке, чтобы получить согласованный код, с которым легко работать.

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

Отступы в блоках. Всегда ставьте отступы для содержимого блоков.

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

После объявлений Ставьте точку с запятой после каждого объявления.

После каждого объявления ставьте точку с запятой для согласованности кода и облегчения добавления новых свойств.

После названий свойств Используйте пробелы после двоеточий в объявлениях.

Всегда используйте один пробел после двоеточия (но не до) в объявлениях, для порядка в коде.

Отделение селектора и объявления Отделяйте селекторы и объявления переносом строки.

Начинайте каждый селектор или объявление с новой строки.

Разделение правил Разделяйте правила переносом строки.

Всегда ставьте перенос строки между правилами.

Мета правила CSSГруппировка правил Группируйте правила и обозначайте группы комментарием. (не обязательно)

По возможности объединяйте правила в группы. Обозначайте группы комментариями и разделяйте переносом строки.

ЗаключениеБудьте последовательны

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

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

Мы предлагаем единые правила оформления позволяющие писать код в одном стиле, но стиль кода, уже используемый в проекте, также важен.

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

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

Спасибо всем кто дочитал до этого места.

Теги: Добавить метки

CSS (Cascading Style Sheets), или каскадные таблицы стилей , используются для описания внешнего вида документа, написанного языком разметки. Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.

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

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

Рис. 1. Структура объявления CSS-стиля Виды каскадных таблиц стилей и их специфика 1. Виды таблиц стилей 1.1. Внешняя таблица стилей

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

К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов , указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).

Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .

1.2. Внутренние стили

Внутренние стили встраиваются в раздел HTML-документа и определяются внутри тега . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).

h1, h2 { color: red; font-family: "Times New Roman", Georgia, Serif; line-height: 1.3em; } ...

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

Когда мы пишем встроенные стили , мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:

Обратите внимание на этот текст.

Такие стили действуют только на тот элемент, для которого они заданы.

1.4. Правило @import

Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:

@import url(mobile.css); p { font-size: 0.9em; color: grey; }

Правило @import также используется для подключения веб-шрифтов:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Виды селекторов

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

2.1. Универсальный селектор

Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили} , *:checked {CSS-стили} .

2.2. Селектор элемента

Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1 .

2.3. Селектор класса

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

Инструкция пользования персональным компьютером .headline { text-transform: uppercase; color: lightblue; }

2.4. Селектор идентификатора

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

#sidebar { width: 300px; float: left; }

2.5. Селектор потомка

Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li , являющиеся потомками всех элементов ul .

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

p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;

p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса.first , который является потомком элемента

First a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом.first .

2.6. Дочерний селектор

Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.
Например, p > strong — выберет все элементы strong , являющиеся дочерними по отношению к элементу p .

2.7. Сестринский селектор

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

h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом , не затрагивая остальные абзацы;

h1 ~ p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.

2.8. Селектор атрибута

Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:

[атрибут] — все элементы, содержащие указанный атрибут, — все элементы, для которых задан атрибут alt ;

селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img — только картинки, для которых задан атрибут alt ;

селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img — все картинки, название которых содержит слово flower ;

селектор[атрибут~="значение"] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p — абзацы, имя класса которых содержит feature ;

селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p — абзацы, имя класса которых feature или начинается на feature ;

селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a — все ссылки, начинающиеся на http:// ;

селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img — все картинки в формате png ;

селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a — все ссылки, название которых содержит book .

2.9. Селектор псевдокласса

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

:hover — любой элемент, по которому проводят курсором мыши;

:focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;

:active — элемент, который был активизирован пользователем;

:valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;

:invalid — поля формы, содержимое которых не соответствует указанному типу данных;

:enabled — все активные поля форм;

:disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;

:in-range — поля формы, значения которых находятся в заданном диапазоне;

:out-of-range — поля формы, значения которых не входят в установленный диапазон;

:lang() — элементы с текстом на указанном языке;

:not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not() ;

:target — элемент с символом # , на который ссылаются в документе;

:checked — выделенные (выбранные пользователем) элементы формы.

2.10. Селектор структурных псевдоклассов

Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:

:nth-child(odd) — нечётные дочерние элементы;

:nth-child(even) — чётные дочерние элементы;

:nth-child(3n) — каждый третий элемент среди дочерних;

:nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2) ;

:nth-child(n+2) — выбирает все элементы, начиная со второго;

:nth-child(3) — выбирает третий дочерний элемент;

:nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nth-child() , но начиная с последнего, в обратную сторону;

:first-child — позволяет оформить только самый первый дочерний элемент тега;

:last-child — позволяет форматировать последний дочерний элемент тега;

:only-child — выбирает элемент, являющийся единственным дочерним элементом;

:empty — выбирает элементы, у которых нет дочерних элементов;

:root — выбирает элемент, являющийся корневым в документе — элемент html .

2.11. Селектор структурных псевдоклассов типа

Указывают на конкретный тип дочернего тега:

:nth-of-type() — выбирает элементы по аналогии с:nth-child() , при этом берёт во внимание только тип элемента;

:first-of-type — выбирает первый дочерний элемент данного типа;

:last-of-type — выбирает последний элемент данного типа;

:nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;

:only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.

2.12. Селектор псевдоэлемента

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

:first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;

:first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;

:before — вставляет генерируемое содержимое перед элементом;

:after — добавляет генерируемое содержимое после элемента.

3. Комбинация селекторов

Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:

img:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .

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

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

H1, h2, p, span { color: tomato; background: white; }

5. Наследование и каскад

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

5.1. Наследование

Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space и word-spacing . Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.

Свойства, относящиеся к форматированию блоков, не наследуются. Это background , border , display , float и clear , height и width , margin , min-max-height и -width , outline , overflow , padding , position , text-decoration , vertical-align и z-index .

Принудительное наследование

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

Как задаются и работают CSS-стили

1) Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);

2) Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;

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

Рис. 2. Режим разработчика в браузере Google Chrome

4) При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.

div {border: 1px solid #eee;} #wrap {width: 500px;} .box {float: left;} .clear {clear: both;}

5.2. Каскад

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

Правило!important

Вес правила можно задать с помощью ключевого слова!important , которое добавляется сразу после значения свойства, например, span {font-weight: bold!important;} . Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.

Специфичность

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

для id добавляется 0, 1, 0, 0 ;
для class добавляется 0, 0, 1, 0 ;
для каждого элемента и псевдоэлемента добавляется 0, 0, 0, 1 ;
для встроенного стиля, добавленного непосредственно к элементу — 1, 0, 0, 0 ;
универсальный селектор не имеет специфичности.

H1 {color: lightblue;} /*специфичность 0, 0, 0, 1*/ em {color: silver;} /*специфичность 0, 0, 0, 1*/ h1 em {color: gold;} /*специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about {color: blue;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar {color: grey;} /*специфичность 0, 0, 1, 0*/ #sidebar {color: orange;} /*специфичность 0, 1, 0, 0*/ li#sidebar {color: aqua;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

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

Порядок подключённых таблиц

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

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

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

Простая таблица стилей

Давайте же взглянем, как выглядит самая элементарная таблица стилей и из каких элементов она состоит. Это пример CSS-стиля для всех тегов

Которые есть на веб-странице:

Как теперь будет выглядеть текст

В браузере и что означает каждая строка? Все очень просто: шрифт будет иметь полужирное начертание и цвет #1E824C (шестнадцатеричный код цвета) и отображаться в размере 1em (относительная единица, равная размеру шрифта, который задан по умолчанию в браузере).

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

Селектор Указывая его, мы говорим браузеру, к чему именно хотим применить стиль. В нашем случае селектором является p . Блок объявлений Так называется всё содержимое, находящееся между фигурными скобками {} после селектора. Стилевое свойство Это команда, с помощью которой указывается желаемый вариант форматирования (например, вы хотите изменить начертание шрифта font-weight , цвет color , размер шрифта font-size и т. д.). После имени свойства необходимо ставить двоеточие. В дальнейшем вы познакомитесь с большим количеством свойств CSS. Значение свойства После двоеточия записывается само значение свойства, которое вы определяете самостоятельно, создавая таким образом собственный стиль. В зависимости от свойства необходимо указывать подходящее ему значение.

Например, начертание шрифта задается ключевыми словами bold , bolder и т. д., цвет – шестнадцатеричным значением, RGB(A), HSL(A) или ключевыми словами red , orange , white и т. д., размер шрифта – единицами измерения CSS (процентами% , пикселямиpx , пунктамиpt , высотой шрифтаem ) или константами small , medium , large и т. д. После указания значения свойства ставится точка с запятой.

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

P {font-weight:bold;color:#1E824C;font-size:1em;}

Он тоже работает, но легко ли в нем разобраться? Особенно когда код CSS достаточно длинный. Конечно, не помешало бы разделить его хотя бы пробелами. Существует несколько правил хорошего тона, и если вы сразу выучите их, то в будущем скажете себе «спасибо».

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

P { font-weight: bold; color: #1E824C; font-size: 1em; }

А такая форма записи весьма громоздка, хоть и работает:

P {font-weight: bold;} p {color: #1E824C;} p {font-size: 1em;}

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

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

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

/* Стиль для основного текста */ p { font-weight: bold; color: #1E824C; font-size: 1em; }

Внутренние и внешние таблицы стилей

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

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

Внешние таблицы стилей гораздо более распространены. Вам нужно только подключить таблицу ко всем необходимым веб-страницам, используя тег c атрибутом rel (определяет отношение между страницей и подключаемым файлом) и значением stylesheet , которое означает, что в подключаемом файле содержится таблица стилей. Атрибут href – это путь (URL) к вашему файлу.css:

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

Урок: создаем таблицу стилей

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

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

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

Подключение CSS к HTML

Для начала откройте на компьютере любой текстовый редактор (подойдет блокнот) и создайте пустой файл с именем style , сохранив его с расширением.css (должен получиться файл style.css). Сохраните файл в той папке, где находится загруженный HTML-документ.

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

Вкратце о том, что вы только что сделали. Вставив этот код в HTML-документ, вы:

• указали ссылку на шрифт под названием Roboto Condensed, который будет взят с сервера Google (подробнее о шрифтах Google мы расскажем позже);
• подключили свою внешнюю таблицу стилей style.css (пока что пустую).

Пишем стиль CSS

Сохраните изменения в HTML-документе и перейдите в вами созданный пустой файл.css . Давайте добавим стиль для страницы:

Html { padding-top: 5px; background-image: url(background.jpg); }

Сохраните изменения. Поздравляем, вы написали первое правило – оно касается тега . Первое свойство - padding-top - добавит отступ сверху между окном браузера и содержимым веб-страницы в размере 5 пикселей. С помощью второго свойства, background-image , вы подключили изображение для фона всей страницы, указав путь к графическому файлу (находится в той же папке, что и HTML-документ).

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

Body { width: 75%; padding: 40px; margin: 15px auto; background-color: #EBEBEB; border-radius: 30px; }

Сохраните изменения в файле. Сейчас вы:

• задали область для содержимого тега , которая равна 75% от ширины окна браузера;
• обеспечили отступ в 40 пикселей от всех сторон области содержимого;
• расположили область по центру страницы, а также сделали отступ сверху и снизу в 15 пикселей;
• задали цвет фона #EBEBEB для области содержимого;
• скруглили углы прямоугольной области, указав радиус скругления 30 пикселей.

Снова обновите HTML-документ. При этом убедитесь, что кэш отключен либо перезагрузите страницу с обновлением всех связанных с ней файлов, используя специальную комбинацию клавиш (например, для Chrome это Ctrl+F5 ).

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

Изменяем шрифт с помощью CSS

Пора украсить наш текст. Добавьте в таблицу стилей этот код и сохраните изменения:

H1 { color: #E87E04; font-size: 2em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; } h2 { color: #E87E04; font-size: 1.7em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; } p { color: #22313F; line-height: 150%; margin-top: 20px; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; }

Написав это, вы задали цвета шрифтов для тегов h1 , h2 , p , указали их размеры, добавили отступы margin от левого края в 20 пикселей и дополнительно для

Сделали отступ сверху в 20 пикселей и установили интерлиньяж line-height (межстрочный интервал текста) на 50% больше стандартного. К тому же, вы подключили ко всем трём тегам шрифт Roboto Condensed (вот для чего в самом начале необходимо было указать ссылку на него в HTML-файле).

Обновите страницу в браузере и полюбуйтесь результатом работы. В этом уроке мы попробуем еще одну вещь. Допишите в CSS этот код:

Emphasis { font-weight: bold; }

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

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

В качестве тренировки попробуйте изменить размер текста для

(допустим, 1.1em), а также увеличить отступ между

И левым краем области содержимого еще на 10 пикселей.

Выводы

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

Любой стиль CSS состоит из нескольких элементов: селектора, стилевого свойства и значения этого свойства.

Все свойства и их значения записываются в блоке объявлений между двумя фигурными скобками {} после указания селектора.

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

Требуется обязательно ставить двоеточие после свойства и точку с запятой после значения.

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

Игорь . Обновление:Октябрь 30, 2018 .

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

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

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

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

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

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

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

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

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

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

Body { font-size: 14px; background: #00ff00 url("west.png") repeat-x; }

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

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

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

Body { font-size: 14px; } body { background: #00ff00 url("west.png") repeat-x; }

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

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

Body { font-size: 14px; background: #00ff00 url("west.png") repeat-x; }

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

Body{font-size:14px;background:#00ff00 url("west.png") repeat-x}

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

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

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

Блок с зеленым текстом, окруженный рамкой

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

#area {color: green; border: 2px solid #d6c99a}

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

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

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

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

Проценты

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

Table {width: 100%; /* Ширина таблицы в процентах */}

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

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

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

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

P {text-align: justify}

Эта запись означает, что текст абзаца выравнивается одновременно по левому и правому краю :

2. CurrentColor — соответствует значению свойства color текущего элемента и указывает цвет для областей, которые по умолчанию его не получают. Допустим, контейнер с классом «bl-2» вложен в «bl-1»:

Значение currentColor определяет цвет фона

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

Bl-1 { padding: 10px; /* Поля вокруг внутреннего контейнера */ background: currentColor; /* Цвет фона */ } .bl-2 { color: blue; /* Цвет текста */ padding: 10px; /* Поля вокруг текста */ background: #ccc; /* Цвет фона */ }

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

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

Значение inherit определяет наследование свойств

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

Bl-1 { border: 4px solid red; padding: 10px; } .bl-2 { border: inherit; padding: inherit; }

В итоге оформление рамок (border) и размеры полей (padding) перенесены с родительского блока (bl-1) на внутренний (bl-2) :

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

Параметры свойств CSS

Существуют самые разнообразные значения, которые определяют те или иные стили, определяющие внешний вид элементов на веб-странице.

Читайте подробности далее

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

H2 { color: #2e15d1; font-family: Verdana, sans-serif; } p { color: green; } .init { color: initial; font-family: initial; }

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

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

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

Цвет текста зеленый (green) - наследует значение свойства "color" для класса "zzz"

Цвет текста красный (red) в соответствии со значением свойства "color" для тега p

P {color: red} .zzz {color: green} .xxx p {color: unset}

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

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

Цвет рамки черный - значение по умолчанию

Цвет рамки (blue - синий) задан в свойствах контейнера div

Div { border: 2px solid blue; margin-bottom: 10px; margin-top: 10px; padding: 10px; } .xxx { border-color: unset; }

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

URL, или адрес

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

Body { background: url(https://сайт/images/star.jpg) no-repeat; /* Абсолютный путь */ } div { background: url(images/globus.jpg) no-repeat; /* Относительный путь */ }

Время

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

Рассмотрим пример.

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

Loading { width: 440px; margin: auto; padding: 20px; background: #c49746; color: #fff; text-align: center; } .spin { display: inline-block; width: 70px; height: 70px; border: 10px double #ccc; border-right: 10px double transparent; border-radius: 70px; /* Анимация */ animation: spin 5s linear 0s infinite normal; } /* Устанавливаем вращение */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

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

Строки

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

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

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

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

Актуальная версия статьи.

А теперь стили:

New::after { content: "обновлено"; color: red; }

Цвет

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

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

P {color: green}

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

P {color: #f8f9e3}

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

Div { background-color: rgb (210, 0, 90); color: rgb (100%, 50%, 15%); }

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

Body {background-color: rgba (255,255,255,.9)}

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

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

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

Div {background-color: hsl(40,90%,15%)}

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

Div {color: hsla(120,100%,50%,0.6)}

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

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

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

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

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

Градиентная фоновая заливка.

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

Body { background: #f5e573; background: linear-gradient(-5deg, #f5e573, #f7f4db 50%, #f7f6eb); }

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