В последнем варианте мы просто указали название тега

и прописали ему стиль. Это значит, что теперь все теги

будут наследовать значение этого стиля.

4. Как и где задавать стили CSS

5. В чем плюсы использования CSS

• Легко менять дизайн. Достаточно поменять стиль лишь в одном месте и он изменится на каждой странице сайта
• Это единственный способ изменять дизайн на сайте
• Простой синтаксис языка

6. Проблемы CSS с браузерами

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

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

• -moz- для браузера Firefox
• -webkit- для браузеров Chrome и Safari (в обоих браузерах используется один и тот же движок визуализации)
• -ms- для браузера Internet Explorer
• -o- для браузера Opera

7. Ответы на часто задаваемы вопросы

7.1. Что такое CSS3

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

7.2. В чём разница между CSS и HTML?

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

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

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

Что такое HTML?

HTML (Hypertext Markup Language) - это язык гипертекствой разметки . Не совсем понятно, верно? Упростив определение, можно сказать, что HTML - это "скелет" любой страницы.

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

Заголовок страницы

видимая часть ссылки(анкор)

Заголовок страницы

Это текст, параграф, заключенный в теги . Как правило, HTML состоит из тегов, которые открываются и закрываются, обрамляя те или иные элементы. Вот и сейчас абзац текста закончится и мы поставим.

Почему "скелет"? Если Вы присмотритесь, то интерпретированный код совсем никак не оформлен. Не заданы ни цвета, ни размеры, ни позиционирование.

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

Что такое CSS?

CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - это и есть та "волшебная магия" , которая делает HTML-разметку приятной глазу. При помощи CSS мы имеем возможность оформлять как угодно любой элемент, прописанный в разметке.

Думаю, лучше всего показать пример:

Зебры

Окраска

Узнать больше о зебрах!

• Без использования CSS
• С использованием CSS

Зебры

Зе́бры (лат. Hippotigris) - подрод рода лошади, включающий виды бурчеллова зебра (Equus quagga), зебра Греви (Equus grevyi) и горная зебра (Equus zebra). Гибридные формы между зебрами и домашними лошадьми называют зеброидами, между зебрами и ослами - зебрулами. Зебры живут маленькими группами, состоящими из самок с детёнышами и одного жеребца.

Окраска

По поводу фоновой окраски зебры часто встречаются две взаимоисключающие позиции: белая либо чёрная. Куратор отдела крупных млекопитающих зоопарка Атланты Лиза Смит (Lisa Smith) утверждает, что специалисты чаще всего описывают зебру как чёрную лошадь в белую полоску

Зебры

Зе́бры (лат. Hippotigris) - подрод рода лошади, включающий виды бурчеллова зебра (Equus quagga), зебра Греви (Equus grevyi) и горная зебра (Equus zebra). Гибридные формы между зебрами и домашними лошадьми называют зеброидами, между зебрами и ослами - зебрулами. Зебры живут маленькими группами, состоящими из самок с детёнышами и одного жеребца.

Окраска

По поводу фоновой окраски зебры часто встречаются две взаимоисключающие позиции: белая либо чёрная. Куратор отдела крупных млекопитающих зоопарка Атланты Лиза Смит (Lisa Smith) утверждает, что специалисты чаще всего описывают зебру как чёрную лошадь в белую полоску

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

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

Что такое PHP?

PHP (рекурсивный акроним словосочетания PHP: Hypertext Preprocessor) - это распространенный язык программирования общего назначения с открытым исходным кодом. PHP сконструирован специально для ведения Web-разработок и его код может внедряться непосредственно в HTML.

Что это означает для нас? Давайте посмотрим пример использования PHP:

echo "Привет, мир! Я - скрипт PHP.";
?>

Привет, мир! Я - скрипт PHP.

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

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

Именно благодаря языкам программирования, подобным PHP (и самому PHP), стало возможным создание CMS (Content Management System, "си эм эс") или Систем Управления Контентом.

Что нам сейчас стоит уяснить? PHP-скрипты - это своеобразный "клей-конструктор" , который позволяет программировать вывод различной информации на экран пользователя. Для создания обычной статичной страницы в Интернете достаточно использования HTML в паре с CSS. Но если эта страница (к примеру, новость) является частью какого-либо динамического сайта, то скорее всего ее появление - это результат выполнения PHP-скрипта.

Что такое JS?

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

Для начала предлагаю рассмотреть небольшой пример того, что можно сделать с помощью JS:

Назначение CSS

Дизайн Web-узлов - это точное размещение компонентов HTML-страниц относительно друг друга в рабочей области окна браузера.

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

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

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

Другой способ управления настройками браузера - программирование на JavaScript. Бурное развитие этого языка позволяет говорить о возможности полного контроля над процессом отображения HTML-страниц. Недостаток JavaScript - отказ от декларативного характера разметки и относительно большой объем кода для переопределения свойств элементов разметки .

Спецификация CSS (Cascading Style Sheets) позволяет остаться в рамках декларативного характера разметки страницы и полностью контролировать форму представления элементов HTML-разметки .

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

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

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

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

А теперь переопределим стиль отображения для элемента разметки I (открыть):

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

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

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

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

Способы применения CSS

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

Итак, различают четыре способа применения стилей:

• переопределение стиля в элементе разметки ;
• размещение описания стиля в заголовке документа в элементе STYLE ;
• размещение ссылки на внешнее описание через элемент LINK ;
• импорт описания стиля в документ.

Здесь мы следуем за Джорджем Янгом из Microsoft (Cascading Style Sheets in Internet Explorer 4.0. Microsoft, 1997). Важно отметить, что в браузерах других производителей импорт стиля не поддерживается. Однако, поскольку патент на CSS1 принадлежит Microsoft, опустить импорт в нашем описании было бы неправильно.

Переопределение стиля

Заголовок первого уровня

Атрибут style можно применить внутри любого элемента разметки . Например, мы можем через style определить ширину и выравнивание элемента hr (горизонтальное отчеркивание):

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

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

Элемент STYLE

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

Элемент STYLE дает возможность определить стиль отображения для:

• стандартных элементов HTML-разметки ;
• произвольных классов (селектор CLASS );
• НTML-объектов (селектор ID ).

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

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

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

...

Этот параграф мы используем как пример применения описания стиля для стандартного элемента HTML-разметки.

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

Ссылка на внешнее описание

Ссылка на описание стиля , расположенное за пределами документа, осуществляется при помощи элемента LINK , который размещают в элементе HEAD . Внешнее описание может представлять собой файл, содержащий описание стилей. Описание стилей в этом файле будет по синтаксису в точности совпадать с содержанием элемента STYLE .

Здесь важны значения атрибутов REL и TYPE . Атрибут REL должен иметь значение stylesheet . Type может принимать значения text/css или text/javascript . Второй тип описания стилей введен Netscape. Его мы в данном учебном курсе не обсуждаем.

Атрибут HREF задает универсальный локатор ресурса (URL) для внешнего файла описания стилей. Это может быть ссылка на файл с любым именем, а не только на файл с расширением *.css .

Импорт описания стилей

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

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

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

Синтаксис

Формально стиль отображения элементов разметки задается ссылкой в элементе разметки на селектор стиля. Синтаксис описания стилей в общем виде представляется следующим образом:

selector[, selector[, ...]] { attribute:value; }

selector selector { attribute:value; }

В первом варианте перечислены селекторы , для которых действует данное описание стиля. Второй вариант задает иерархию вложенности селекторов , для совокупности которых определен стиль. Напомним, что речь в данном случае идет об описаниях стилей в нотации text/css . Описания стилей размещаются либо внутри элемента STYLE , либо во внешнем файле .

В качестве селектора можно использовать имя элемента разметки , имя класса и идентификатор объекта на HTML-странице.

Атрибут (attribute) определяет свойство отображаемого элемента, например левый отступ параграфа (margin-left) , а значение (value) - значение этого атрибута, например, 10 типографских пунктов (10 pt).

Селектор - имя элемента разметки

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

Внешний файл при этом может выглядеть следующим образом:

I, EM {color:#003366;font-style:normal} A I {font-style:normal;font-weight:bold; text-decoration:line-through}

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

Последняя строка определяет стиль отображения вложенного в гипертекстовую ссылку курсива:

intuit

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

Селектор - имя класса

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

...

Этот параграф мы отобразим белым цветом по черному фону

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

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

a.menu { color:red;background-color:white; text-decoration:none; } a.paragraph { color:navy; text-decoration:underline; }

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

Селектор - идентификатор объекта

Объектная модель документа (Document Object Model) описывает документ как дерево объектов. Объектами являются: сам документ, его разделы (элемент DIV ), картинки, параграфы, приложения и т.п. Каждый из объектов можно поименовать и обращаться к нему по имени. Данная возможность используется при программировании страниц на стороне клиента.

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

a.mainlink { color:darkred; text-decoration:underline; font-style:italic; } #blue { color:#003366 } ... основная гипертекстовая ссылка модифицированная гипертекстовая ссылка

Следует отметить, что интерпретация идентификаторов объектов в Internet Explorer и Netscape Navigator различна. Существует еще атрибут name у элемента разметки . При идентификации объекта Netscape Navigator обычно имеет дело именно с этим атрибутом, а Internet Explorer - с атрибутом ID .

Различия в интерпретации ID в браузерах при декларативном использовании CSS не очень страшны. Другое дело, если автор решится программировать стили, т.е. изменять значения атрибутов описателей стилей. В этом случае разница объектных моделей документов в Netscape Navigator и Internet Explorer проявится в полной мере. Фактически, придется для каждого из браузеров разрабатывать совершенно разные страницы.

Наследование и переопределение

При обсуждении технических спецификаций часто бывает полезно вникнуть в смысл названия. В названии принято точно определять суть и назначение стандарта или спецификации. Описание стилей отображения элементов HTML-разметки носит название "Каскадные таблицы стилей" . Со словом "стилей" все более-менее понятно. Под словом "таблицы" следует понимать набор свойств элемента разметки , который можно представить в виде строки в таблице свойств, т.е. элементы разметки - строки, а свойства - столбцы. А вот слово "каскадные" требует пояснения.

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

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

Не все атрибуты стиля могут наследоваться. Например, "набивка" (отступ содержания элемента от его границ) элемента BODY не наследуется вложенными в него элементами и определяется по умолчанию или прописывается для каждого элемента отдельно. Алгоритмы наследования в Internet Explorer и в Netscape Navigator разные, поэтому для единства отображения элементов следует прописывать стиль по максимуму атрибутов.

Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS , для чего нужен и как его правильно использовать. Это базовый урок из серии "Для самых маленьких", в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS - Каскадных таблиц стилей (C ascading S tyle S heets).

Класснуть

Запинить

Часть 1. Основы CSS

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

Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.

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

1.1 Использование CSS в HTML документах

CSS довольно просто использовать в HTML документах. Его можно:

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

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

Просто, не правда ли?

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

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

//HTML:

Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет - серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class , все эти элементы получат одинаковое оформление - серый фон цвета #999.

1.3 Каскадирование, наследование и приоритет

Понять принцип каскадирования несложно. Давайте взглянем на пример:

//HTML

Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children , который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent . Если в HTML документе мы вынесем тег .children из тега div с классом .parent , он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.

Что мы получим в результате нашего примера. Тег с классом.children получит цвет текста #666, так как имеет более длинный каскад, а.parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children , то его текст покрасится в цвет родителя color: #999;

Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

1. Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important . Не важно, какую вложенность имеет селектор, каким образом используются стили - инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать!important .
   Пример использования!important: .my-class { background-color: #999!important; }
2. Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style , которые мы рассмотрели ранее:
3. Стили, заданные в теге style в самом документе имеют меньший приоритет;
4. Ещё меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега
5. Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
   //HTML

   Далеко-далеко за словесными горами.

   //CSS .my-class { margin: 10px; } будет иметь меньший приоритет для дочернего p , чем: .my-class p { margin: 15px; } В результате тег

   Находящийся в теге с классом.my-class получит значение свойства margin: 15px.

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

My-class.class-2 { margin: 10px; } будет иметь больший приоритет, чем: .my-class { margin: 15px; }

И т.д. по логической цепочке.

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

My-class { margin: 10px; } будет иметь меньший приоритет, чем идущий после него точно такой-же селектор: .my-class { margin: 15px; }

В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

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

Часть 2. CSS свойства

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

Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

CSS Свойство	Частота использования	Описание
color	960 раз	Цвет текста элемента:
background-color	755 раз	Цвет фона элемента:
font-size	524 раза	Размер шрифта:
opacity	435 раз	Уровень прозрачности элемента:
padding	372 раза	Размер полей внутри элемента:
width	356 раз	Ширина блочного элемента, не включая размеры границ и полей:
margin	311 раз	Внешние отступы элемента:
height	305 раз	Высота блочного элемента, не включая размеры границ и полей:
font-weight	280 раз	Насыщенность шрифта:
text-align	245 раз	Горизонтальное выравнивание текста:

Часть 3. Медиа-запросы

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

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

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media . Структура медиа запроса довольно проста:

Условием может выступать либо устройство - all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

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

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом.my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И) , not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы) . Нет логического оператора or (ИЛИ) , его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

1. Старайтесь использовать только внешние подключаемые CSS файлы . Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
2. Старайтесь стилизовать только классы . Не стилизуйте идентификаторы (задаются через id="решетку" и пишутся через #решетку). Старайтесь меньше стилизовать теги без классов. Например, если вы стилизуете тег h3, а в дальнейшем SEO специалист решит, что заголовок здесь не уместен, обычный div должен иметь такие-же свойства с классом заголовка и отображаться также. Как вариант можно сделать дубликаты HTML тегов в классы, например, .h1, .h2, .h3, .footer, .header, .aside и стилизовать их соответствующим образом;
3. Старайтесь стилизовать элементы максимально автономно, сокращайте цепочку каскада до одного блока, чтобы было меньше зависимостей от родительских элементов. Это необходимо для максимально эффективного повторного использования блоков на странице и их модификации в других местах верстки. Но без фанатизма. Не стоит задавать отдельные классы каждому тегу в блоке, если не предполагается его автономное использование. Если вы перенесете блок в другое место страницы, он должен отображаться также и не зависеть от родителя. В этом вам поможет использование какой-либо методологии именования классов. Не важно, будет это БЭМ, методология, либо разработанная на основе вашего личного опыта или простые правила, предложенные мной - это лучше, чем называть классы как попало и строить нелогичные и длинные цепочки классов;
4. Старайтесь называть классы тегов в зависимости от того, какую функцию выполняет блок, а не от того, какое в нем будет содержание. Например, если у вас есть секция с отзывами в виде карусели, не стоит называть селекторы, используя слова reviews , otzivy и т.д. Лучше назвать carousel-once , если планируется выводит по одному пункту карусели на странице. В дальнейшем, возможно вы будете использовать эту карусель не только для оформления отзывов, а задействуете этот код например, для вывода списка коллег компании. В таком случае наименование класса reviews будет несколько неуместным;
5. Используйте CSS препроцессоры, в этом нет ничего сложного. Мой выбор пал на препроцессор Sass уже довольно давно и я его рекомендую к использованию. У нас есть неплохой урок, в котором я рассказываю как легко пользоваться препроцессором и как он упрощает жизнь: ;
6. Используйте сброс стандартных стилей браузера или нормализацию, которая приводит стандартные стили к общему для всех браузеров знаменателю. Я использую в своих проектах Normalize.css , который входит в состав CSS фреймворка Bootstrap;
7. Когда почувствуете, что выполняете слишком много однообразной работы в процессе верстки - переходите к использованию какого-либо CSS фреймворка или разработайте свой с наиболее часто используемыми элементами, это ускорит вашу работу. Я использую в работе только сетку Bootstrap без стилистического оформления кнопок, панелей и прочих элементов. Этого вполне достаточно для эффективной работы. Хорошая адаптивность Bootstrap сетки по-умолчанию также радует;
8. Самостоятельно экспериментируйте со свойствами. Открывайте CSS справочник и пробуйте. Только так можно наработать опыт, запомнить какое свойство что делает и довести написание стилей документа до автоматизма.