Основы CSS

Каскадные таблицы стилей CSS — язык таблиц стилей, предназначенный для определения внешнего вида элементов HTML…


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

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

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

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

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

Назначение селектора заключается в том, что на его основании браузер определяет, на что именно (например, абзац - p{}) необходимо оказать воздействие и как его отобразить для конечного пользователя.

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

h2{ text-transform: lowercase;}

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

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

При этом в HTML названия элементов не чувствительны к регистру и хотя общепринято их написание в нижнем регистре, тем не менее одинаково корректно будет работать html разметка абзаца как <p></p>  так и <P></P>.

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

Виды каскадных таблиц стилей и особенности их применения

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

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

Она подключается с помощью тега <link>, включаемого между открывающимся и закрывающимся тегами <head></head> Количество подключаемых таким образом файлов не ограничено. Это позволяет либо объединить все стилевые файлы в один либо разделить их на несколько с последующим их подключением вышеуказанным способом.

В тег <link> включаются атрибуты rel="stylesheet", который определяет тип ссылки (на таблицу стилей).

<head>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css" media="all">
</head>

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

Внутренние таблицы стилей  также подключаются  между открывающимся и закрывающимся тегами <head></head>, но внутри тегов <style></style>. Данный вид стилей обладает большим приоритетом, чем внешние стили. Внутреннюю таблицу стилей удобно применять при разработке страницы, так как Вы сразу можете видеть результат работы без постоянного обновления кэша.

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

<head>
<style>
p, 
span {
color: #000;
margin-bottom: 20px;
padding: 16px;
}
</style>
</head>
<body>
...
</body>

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

<h2 style="font-size: 48px; color: blue;">Широкий выбор продукции в нашей фирме</h2>

Правило @import

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

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

<style>
@import url(style.css);
....здесь могут быть заданы любые другие стили
</style>

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

Селекторы и их виды

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

Под универсальным селектором (обозначаемым * или в совокупности с применением различных видов псевдоклассов *:after) понимается, что указанные в нем свойства и значения будут применены ко всем HTML элементам страницы. Так, например, запись:

 * {
padding:0;
}

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

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

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

img{
display:block, width: 200px;
}

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

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

  • Имена классов всегда начинаются с точки, и она помогает браузеру найти селекторы данного вида в таблице. Разрешается использовать только латинские буквы, цифры, дефисы и знаки подчеркивания.
  • После точки всегда идет латинская буква, поэтому название класса .6icon_block - неправильно, а .icon_block6 - будет допустимым.

Так, например, можно одинаковым образом стилизовать абзацы, расположенные в разных местах страницы или даже на разных страницах сайта, объединив их единым наименованием класса - p.service_description.

<p class="service_description">Наши услуги включают...</p>
.service_description {
font-family: "Open Sans";
color: #fff;
font-size: 18px;
}

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

<p class="service_description main_service"> Наши услуги включают...</p>

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

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

<h2 class="services"> Наши преимущества  </h2>
<p class="services"> Качество товара </p>
.services{
font-size: 28px;
color: #fff;
}

Общие стили будут применены как к заголовку, так и абзацу, так как они объединены единым классом services. В отличие от классов на странице может быть только один элемент (например, #delivery_steps) с  идентификатором (id). Если идентификатор повторяется на одной и той же странице (не обладает обязательным признаком уникальности) - это существенная ошибка в HTML-разметке. Его название должно содержать не менее одного символа и быть без пробелов. При этом, спецификация css не устанавливает ограничений на тип этих символов, поэтому в качестве идентификатора могут использоваться знаки подчеркивания, допустимы также цифры.

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

<div id="reviews"></div>
#reviews {
background-image: url(../img/reviews_bg.jpg);
box-shadow: -5px 5px 30px 0 rgba(0, 0, 0, .1);
}

Принципы действия селектора атрибута тесно связаны с заданным в нем именем или значением. Так, например, в записи [alt] браузер найдет и применит стилевые правила абсолютно ко всем элементам, для которых задан указанный атрибут. Для большей конкретизации возможно помимо атрибута задать еще и нужный в конкретном случае селектор - img[alt]. При использовании такого подхода поиск будет осуществляться с учетом сразу этих двух условий, то есть только изображения, у которых обязательно прописан атрибут. В целях большей конкретизации выбираемого элемента css предусматривает возможность указать конкретное значение атрибута. Так, в записи

img[title="офис"] {
display:inline-block;
min-width: 313px;
}

будут выбраны только те изображения, в названии которого есть указанное в квадратных скобках слово. Если нужно стилизовать только внешние ссылки с протоколом HTTPS, применяется запись в виде:

a[href^="<u><a href="https://">https://</a></u>"]

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

section[class~="process"] 

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

p[class|="advantage"] {
opacity: 0.85;
}

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

img[src$=".jpg"]

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

a[href*="shop"] {
text-decoration: underline;
color: #ddd;
font-family: "Futura";
}

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

1) прямой потомок родительского;

2) не вложен в другой элемент.

Так, в примере

<div class="first_screen">
<p class="desc">Наши <span> лучшие </span> платья </p>
</div>

элемент span вложен абзац, поэтому он - не дочерний элемент к блоку с классом first_screen. В записи h2 > span  браузер выберет все span, являющиеся дочерними для заголовка выбранного уровня. При организации структуры HTML элементы могут быть располагаться на одном и том же уровне и потому иметь общего родителя (так называемые сестринские элементы). Для их выбора применяются записи  такого вида:

p + span {
line-heigt: 33px;
display:block;
}

При таком подходе браузер сделает выборку всех первых span, которые в структуре следуют непосредственно за любым тегом <p>.

h3 ~ span {
color: #b2abab;
font-size: 2.3em;
font-style: italic;
}

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

section.advantages p{
color: orange;
}

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

span.social_media a {
text-transform: uppercase;
}

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

span .social_media a {
font-size: 1rem;
}.
<strong> </strong>
.social_media a {
font-size: 0.9rem;
}

— такой же стиль будет применяться к ссылкам, вложенным внутрь элемента с классом social_media.

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

.phone {
color: #847b7b;
transition: all .500ms ese-out;
}
.phone:hover {
color: #cf4040;
}

В приведенном примере благодаря свойству transition, цвет шрифта элемента, имеющего класс phone, плавно меняется с темно-серого на красный как интерактивная реакция сайта на действие пользователя, который навел мышку на данный элемент. Для интерактивности и изменения стилей ссылок при совершении пользователями и посетителями сайтов ряда действий можно использовать следующие селекторы псевдоклассов. Выбрать ссылки, по которым пользователь уже кликал и проходил к соответствующим материалам - :visited или, напротив, которые еще пользователь не выбирал и не использовал :link. В сферу действия селектора :focus  включаются интерактивные элементы страницы, которые активированы пользователем кликом мышки или по которому осуществлен переход; вследствие этого элемент становится активным, "в фокусе". Селектор :active работает с элементами, которые посетитель лендинга или сайта выбрал. В CSS имеется возможность применения псевдокласса :target для выбора элементов с символом #, использующегося как ссылка на документ или часть документа.

h4:target {
opacity: 0.5;
padding: 62px;
}

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

:not([type="phone"])

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

p:not(.service_info) {
color: pink;
}

В отношении него есть ряд ограничений:

  • этот селектор сочетается только с исключительно простыми селекторами (селектор тега,  селектор класса и другие, удовлетворяющие данному требованию);  
  • нельзя также в одной строке сразу указывать несколько селекторов:not()

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

.test:checked {
min-width: 33px;
}

Благодаря этому при выборе опции, задается минимальная ширина. Есть ряд селекторов, которые также позволяют работать с элементами форм, как важной составляющей взаимодействия с посетителем сайта. При корректности введенных данных используется селектор :valid (например, корректное введение email адреса пользователя в следующем виде [email protected]). При применении стилевых правил браузер проводит проверку корректности введенной информации пользователем и их соответствия заданным условиям. Если данные содержат ошибку (номер телефона содержит менее цифр, чем он должен иметь) применяется противоположный селектор :invalid.

input:invalid {
border: 3px solid #fdd;
}

Указанный селектор и правила устанавливают сплошную границу красного цвета шириной в 3px, если поле заполнено неправильно.

input:valid {
border: 3px solid #dfd;
}

Указанный селектор и правила устанавливают сплошную границу зеленого  цвета шириной в 3px, если поле заполнено корректно. При наличии диапазона значений (корректно, если меньше и больше каких-то показателей) удобно применять селекторы :in-range (соответствует заданным критериям), :out-of-range  (выходит за пределы).

<form>
<p>Введите цифру от 1 до 12</p>
<p><input type="number" id="numbers" min="1" max="12" value="1">
<label for="numbers"></label></p>
</form>
label {
min-height: 28px;
}
input:out-of-range {
background color: #7e8390;
}
input:out-of-range + label::after {
content: 'Вы ошиблись!';
color: #a21616;
}

В примере, в случае введения пользователем цифры меньше 1 или больше 12 будет применен селектор :out-of-range. Выборка активизированных и неактивных полей формы на html-странице осуществляется, соответственно, с помощью селекторов :active  и :disabled. Под неактивными полями понимаются такие поля, в которые невозможно вводить данные, в том числе до наступления каких-то событий или условий. В свою очередь совокупность активных элементов, чаще всего - полей форм (в которые можно вносить данные) можно выбрать с помощью селектора :enabled.

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

p:lang(en) {
color:#61ed1d;
}

Русскоязычные тексты обозначаются в скобках как ru и так далее. Помимо перечисленных селекторов псевдоклассов спецификацией css  предусмотрены также структурные псевдоклассы. Их главное отличие в том, что браузер, сталкиваясь с ними, учитывает параметры, заданные в его круглых скобках (селекторы структурных псевдоклассов).  C использованием ключевых слов odd(нечетный) и (even) в селекторе :nth-child()  можно задать стиль элементам по признаку их четности-нечетности и указать каждой группе или одной из них собственные  правила оформления.

В разнообразном синтаксисе CSS есть возможность выбирать элементы по их местонахождению в структуре HTML документа. Не все селекторы часто используются, однако такой подход дает возможность выбрать наиболее оптимальный способ для конкретной ситуации при разработке. Так, селектор :nth-child(3) из дочерних элементов выберет 3-й элемент. В случаях, когда есть необходимость перебрать все элементы и найти каждый 3-й,  применяется запись :nth-child(3n). Возможно также смещение условий выборки и начать не с первого, а сразу с элемента, указание на который имеется в дополнительном условии. Так, если к вышеуказанной записи добавить определенное число, например, :nth-child(3n+2), то браузер выберет из дочерних элементов каждый 3-й, но  выборку начнет со 2-го; Если для применения стилевых правил нужно получить все дочерние элементы, начиная сразу, например, со 2-го, необходимо сделать следующую запись в стилевом файле - :nth-child(n+2);

Селектор :nth-last-child() направлен на выборку в списке дочерних только последнего элемента. При подобном подходе поиск требуемого элемента можно задать и числом, если их общее количество известно и не планируется изменять, но отличие селектора заключается в том, что его работа начинается в обратном порядке с последнего дочернего элемента; Синтаксис CSS позволяет осуществлять проверку, имеется ли у элемента какие либо дочерние элементы, либо выбрать элемент только, если он содержит единственный дочерний. В структуре страницы не каждый элемент имеет вложенные, дочерние элементы, и для его выбора используется :empty. 

1) <p>Доставка на дом быстрая </p>
2) <p>Доставка на дом <span> очень </span> быстрая </p>
p:empty {
background-color: orange;
padding-top: 20px;
margin-bottom: 27px;
}

Оранжевый фон, внутренний верхний отступ и внешний нижний отступ браузер придаст только  "пустому" абзацу под № 1, так как во втором случае span будет являться дочерним. Необязательно указывать в круглых скобках число, если нужны только последний (:last-child)  или первый элементы (:first-child). Если в родительском контейнере содержится только один, а соответственно, единственный дочерний элемент, он может быть выбран с помощью селектора :only-child. Если нужно применить стилевые правила для корневого элемента (в document - html) следует использовать селектор :root.

Предусмотренные css  селекторы структурных псевдоклассов типа основаны на том, что браузер осуществляет выборку нужных элементов, основываясь на содержащейся в нем информации о типе дочернего тега. Осуществляет выборку единственного элемента заданного типа из дочерних элементов родительского контейнера - :only-of-type. Аналогично с селекторами, выбирающими последний и первый элемент, css  предусматривает такие же селекторы, которые  дополнительно проверяют тип элемента. Так для первого дочернего  элемента применяется :first-of-type  и по аналогии для последнего -  :last-of-type. Например, в структуре страницы имеется блок с классом information. Чтобы определить внешнее оформление абзаца этого блока необходимо применить селектор следующего вида:

.information p:last-of-type

В таком примере символ p, соответствующий абзацу <p></p>,  содержит данные о типе элемента, подлежащего форматированию. Принцип действия селектора :last-of-type во многом сходен с :last-child в части вычисления браузером месторасположения искомого элемента. Этот инструмент применим на практике, когда, например,  необходимо, задать свойства и значения последнему экземпляру элемента определенного типа. Возможны случаи, когда на момент написания CSS нет точных данных, что такой элемент будет последним в структуре дочерних.

Также использование селектора позволяет в дальнейшем добавлять в блок элементы, относящиеся к иному типу, однако, работа стилевых правил в этой части не изменится. Селектор :nth-of-type()  сходен во многом с селектором :nth-child(), но для его применения равнозначно важно выполнение не только условия о расположении элемента, но и его типа. Ключевые слова для :nth-of-child- odd, even, 3, 3n и тому подобные работают и здесь и дополнительно регламентируются типами. В качестве одного из примеров использования этого селектора можно привести стилизацию строк таблиц.

tr:nth-of-type(odd) {
background-color: #f01a1a;
}

В этом случае каждой нечетной строке таблицы будет задан красный цвет.

tr:nth-of-type(even) {
background-color: #86d05d;
}

В этом случае каждой четной строке таблицы будет задан зеленый цвет.

Селектор :nth-last-of-type() — работает с дочерними элементами, соответствующими двум условиям (расположение + заданный тип). Выборка начинается браузером с конца и до элемента, удовлетворяющего одновременно обоим условиям. В синтаксисе CSS есть также набор селекторов псевдоэлементов, тесно связанные со свойством content.

:before  и :after — осуществляют вставку содержимого (указываемого и генерируемого на основании свойства "content"), соответственно, перед и после элемента. Для использования псевдоэлемента следует создать класс и применить его, например, к абзацам, которым должно предшествовать какое-то произвольное сообщение для пользователя.

<p class="discount"></p>
.discount:before {
content: "ЛУЧШИЙ ВЫБОР";
}

При такой записи браузер на лету добавит перед каждым элементом с классом discount  сообщение с вышеуказанным текстом. Поэтому такой текст называется сгенерированным контентом. Имеется возможность придать собственное стилевое оформление только первой строке (:first-line) или первой букве (:first-letter).

p:first-letter {
font-size: 2em;
}

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

В целях  выбора узкого набора требуемых элементов, для которого необходимо применить соответствующие стили css позволяет использовать комбинацию селекторов. Так, например, для того, чтобы задать сплошную границу толщиной 1px красного цвета ко всем нечетным картинкам, имеющим альтернативный текст «Наш офис», можно указать, что такой стиль должен появиться у элемента, удовлетворяющего сразу обоим вышеуказанным требованиям.

img[alt*="Наш офис"]:nth-of-type(odd) {
border 1px solid red
}

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

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

h4,
.main_title,
p
{
color: orange;
background-color: black;
}

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

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

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

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

Благодаря наследованию свойства css передаются от родительских элементов к их потомкам и не требуется повторно определять их для каждого их них отдельно, дублируя одни и те же свойства и корреспондирующие им значения. Согласно спецификации по общему правилу наследованием обладают две группы свойств, которые отвечают за форматирование блоков и тестовые составляющие html  страницы. Так, к первой группе относятся такие свойства как, например,  определение свойств фона (background), способ отображения и позиционирования (display, position), границы (border),  отступы (padding, margin), высота и ширина, в том числе максимальные и минимальные величины (height, width, min-width, max-width, min-height, max-height), а также некоторые другие. Наследование перечисленных свойств, как правило, нецелесообразно в силу специфики самих названных свойств, но при наличии такой необходимости CSS  позволяет изменить и это положение по умолчанию, о чем будет сказано ниже.

Во вторую группу входят основные свойства, отвечающие за стили текстовой информации: цвет(color), шрифт(font), расстояние между буквами (letter-spacing), высота строки (line-height), преобразование текста, (например, его отображение только заглавными буквами text-transform), видимость (visibility) и другие. Несмотря на то, что в css, как указано выше, есть большой перечень свойств, которые не наследуются, тем не менее, данное положение при необходимости можно изменить с помощью использования ключевого слова inherit.  Его применение принудительно предписывает обязательное наследование любого значения свойства родителя, в том числе, которые по умолчанию не обладают возможностью наследования.

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

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

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

<div id="block" class="service"></div>
div {
border: 2px double green;
}
#block {
min-height: 300px;
}
.service {
float: left;
}

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

Порядок подключения таблиц стилей к HTML

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

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

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

При написании css свойств стоит всегда организовывать таблицы стилей таким образом, чтобы не нарушать универсальный принцип DRY (Don’t repeat yourself)- «не повторяй себя» для того, чтобы избежать повторного определения одних и тех же значений для каких-то элементов на странице и не перегружать файл стилей  ненужными свойствами. Однако при конкретизации значений, применяемых к конкретным элементам, браузер осуществляет вычисление показателей специфичности и, соответственно, применяемых итоговых значений свойств. При просмотре css в режиме разработчика и дублировании свойств, можно увидеть, как свойства, обладающие меньшим приоритетом, зачеркиваются и, соответственно, не влияют на итоговый вид страницы.

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

В случае, если у элемента имеются встроенный стиль, специфичность будет вычислена как 1, 0, 0, 0;

Специфичность элементов и псевдоэлементов вычисляется как 0, 0, 0, 1;

При наличии у элемента id или класса, эти значения приобретут, соответственно следующие значения:

#title 0, 1, 0, 0;

.advantages 0, 0, 1, 0;

При описании свойств с применением нескольких селекторов итоговое значение специфичности суммируется.  Так, например,

img {
display: inline-block;
}

- специфичность 0, 0, 0, 1

h2 span {
color: #fff;
}

- специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2

section#services {
background-color: green;

- специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2.

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

Правило css - !important.

Любое значение свойств можно задать с применением правила !important, размещаемого прямо после него, до закрывающейся скобки и без пробела. То есть, вот таким образом -

p.description {
color: #000!important;
}

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

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

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


Оцените полезность статьи:

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (3 оценок, среднее: 5,00 из 5)
Загрузка...

Ваш комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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