Как при наведении на один элемент hover менять стили другого элемента css: Как изменить css одного div при наведении на другой с javascript? — Хабр Q&A — Независимое театральное объединение "Зрительские симпатии"

Содержание

Изучаем селекторы в CSS

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

В этой статье мы рассмотрим способы определения стилей веб-страницы с помощью селекторов классов, селекторов потомков, псевдоклассов и селекторов идентификаторов.

Для примера нам нужен только один HTML-файл и таблица стилей CSS. Создайте папку css-selectors и веб-страницу под названием selectors.html со следующей разметкой:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Селекторы CSS</title>
    <link rel='stylesheet' href='styles.css'/>
  </head>
  <body>
    <h2> Селекторы CSS</h2>
    <p>Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
       Это <strong>супер</strong> полезно.</p>
    <p>Классы чрезвычайно важны, так как они позволяют выбрать
       произвольные блоки на странице.  </p>
    <p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
       <a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.</p>
    <div>Кнопка Один</div>
  </body>
</html>

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

Селекторы классов позволяют применять стили CSS к определенному элементу HTML. Они дают возможность различать элементы HTML одного и того же типа. Например, когда есть два элемента <div>, но необходимо задать стили только для одного из них. Для селекторов классов нужны:

Указанный атрибут класса в элементе HTML;
Соответствующий селектор классов CSS.

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

<p> Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.  Это <strong>супер</strong> полезно.</p>

Теперь стилизуем абзац <p class=’synopsis’> в файле CSS с помощью следующего кода:

.synopsis {
  color: #7E8184;        /* Светло серый */
  font-style: italic;
}

Это правило применяется только к элементам с соответствующим атрибутом класса. Обратите внимание на точку (.) — префикс перед именем класса. Это отличает соседние селекторы CSS классов от селекторов типов:

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

Добавление атрибута class не изменяет смысловое значение HTML-документа и служит для подключения CSS. Рекомендуется избегать имен классов, основанных на том, как они отображаются. Использование чего-то более семантического, например, .synopsis, дает больше свободы в действиях. Что позволяет настроить отображение этого абзаца.

Атрибут class применяется не только к элементам <p> — он может быть использован для любого элемента HTML. Взяв на вооружение селекторы классов CSS, можно сделать блоки <div> и <span> намного более полезными. Мы можем использовать их для создания, как отдельных элементов, так и произвольных разделов веб-страницы:

Начнем с отдельных элементов. На этот раз мы будем использовать класс вместо CSS селектора div. Добавьте следующий код в файл styles.css:

.button {
  color: #FFF;
  background-color: #5995DA;    /* Синий */
  font-weight: bold;
  padding: 20px;
  text-align: center;
  border: 2px solid #5D6063;    /* Темно-серый */
  border-radius: 5px;
  width: 200px;
  margin: 20px auto;
}

Конечно, для этого нам нужен соответствующий атрибут класса. Измените <div> в файле selectors.html на следующий код:

<div>Кнопка Один</div>

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

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

Попробуем создать макет фиксированной ширины с использованием метода автополей. Сначала оберните весь документ в <div> и присвойте ему уникальный класс:

<body>
<div>  <!-- Добавьте это -->
<h2> Селекторы CSS</h2>
    <p >Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
       Это <strong>супер</strong> полезно.</p>
    <p>Классы чрезвычайно важны,, так как они позволяют выбрать
       произвольные блоки на странице.</p>
    <p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
       <a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.
   </p>
    <div>Кнопка Один</div>
</div>  <!-- Добавьте это -->
</body>
Затем добавьте следующий код в файл styles.css:
.page {
  width: 600px;
  margin: 0 auto;
}

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

Именно таким образом определяются более сложные макеты веб-страниц. Например, если на нашей странице была бы боковая панель, мы бы вложили все ее элементы в другой <div> с классом .sidebar.

Без CSS селекторов атрибутов классов, которые позволяют дифференцировать элементы <div>, ничего из этого не было бы возможно.

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

Чтобы создать еще одну кнопку, нужно добавить еще один HTML-элемент с тем же классом:

<div>Кнопка Один</div>
<div>Кнопка Два</div>

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

Что, если мы захотим немного изменить вторую кнопку? К счастью, можно применить несколько классов к одному и тому же HTML-элементу. Стили из каждого класса будут применены к элементу, что даст возможность повторно использовать стили .button и одновременно переопределить некоторые из них новым классом:

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

<div>Кнопка Два</div>

Этому элементу теперь присвоено два разных класса, и можно использовать любой из них для определения стилей. Это дает некоторые дополнительные возможности. Можно задать для второй кнопки стили класса .button и стили, относящиеся только к этой кнопке класса .call-to-action (обязательно добавьте этот код после правила .button):

.call-to-action {
  font-style: italic;
  background-color: #EEB75A;    /* Желтый */
}

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

Это добавление нового объявления по сравнению с исходным правилом .button — font-style;
Переопределение существующего в классе .button стиля — background-color.

Переопределение дочерних селекторов в CSS происходит из-за порядка размещения правил .call-to-action и .button в таблице стилей. Когда в файле CSS есть два противоречащих друг другу свойства, всегда применяется то, которое указано последним. Если бы вы разместили .call-to-action перед .button, применялось бы это правило, и кнопка осталась бы синей.

Это означает, что порядок атрибутов класса в HTML-элементе не влияет на поведение переопределения. Несколько классов в одном элементе применяются «одинаково», а приоритет определяется исключительно порядком размещения правил в файле styles.css.

Другими словами, следующие элементы эквивалентны:

<!-- В результате элементы будут отображаться на странице одинаково -->
<div>Кнопка Два</div>
<div>Кнопка Два</div>

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

Чтобы изменить этот элемент <em>, можно было бы добавить к нему еще один класс. Но это приведет к тому, что код будет не очень удобен. Мы хотим иметь правило .synopsis в качестве отдельного независимого компонента, для которого можно полностью задать стили через CSS. То есть без необходимости внесения изменений в HTML только для того, чтобы изменить какие-то стили:

Это то, для чего предназначены CSS селекторы потомков. Они позволяют настраивать только те элементы, которые находятся внутри другого элемента. Например, можно вывести этот элемент <em> в абзаце .synopsis со следующими стилями:

.synopsis em {
  font-style: normal;
}

Добавление этого правила в файл styles.css задаст отображение <em> вертикальными (римскими) символами, тем самым определяя разницу с курсивным шрифтом, которым отображается весь абзац <p>. При этом остальных элементов <em>, размещенных на странице это изменение не коснется:

Селекторы потомков не ограничиваются селекторами классов. Таким образом, можно комбинировать любую другую группу селекторов. Например, если нужно выбрать только элементы <em> внутри заголовков:

h2 em {
  /* определенные стили */
}

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

/* Старайтесь избегать такого */
.article h3 .subheading em {
  /* Конкретные стили */
}

Эти стили нельзя будет повторно использовать, поскольку они соответствуют только следующей структуре HTML:

<div>
  <h3>
    <span>Это <em>на самом деле</em> особенный текст. </span>
  </h3>
</div>

Если захотите применить эти стили к заголовку <h3>, который не был обернут в тег <div class = ‘article’>, придется здорово поломать голову. Та же ситуация, если вы захотите применить их к заголовку <h4>.

До сих пор все селекторы CSS, которые мы рассматривали, были связаны непосредственно с фрагментами HTML-разметки. Тем не менее, на отображаемой веб-странице происходит больше, чем задает HTML-контент. Существует «стандартный» перечень действий, которые может предпринять пользователь.

Классический пример — это ссылка. Веб-разработчик создает элемент <a href>. После того как браузер отобразил его, пользователи могут взаимодействовать с этой ссылкой: навести на нее курсор мыши, кликнуть ссылку и перейти по ней:

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

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

:link — ссылка, по которой пользователь еще не переходил;
:visited — ссылка, по которой пользователь переходил раньше;
:hover — ссылка, на которую пользователь навел курсор мыши;
:active — ссылка, нажатая мышью (или пальцем).

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

a:link {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: purple;
}
a:hover {
  color: aqua;
  text-decoration: underline;
}
a:active {
  color: red;
}

Приведенный выше фрагмент кода отлично подходит для большинства сайтов, но давайте более внимательно рассмотрим поведение a:visited, когда мы изменим атрибут href на URL-адрес, который раньше посещали. Стиль a:hover применяется как к ранее посещенным ссылкам, так и к тем, по которым мы еще не переходили. Можно еще больше модифицировать ссылки, объединив псевдоклассы.

Добавьте это правило ниже предыдущего фрагмента кода:

a:visited:hover {
  color: orange;
}

Данный код создает специальный стиль для состояния при наведении курсора мыши на посещенные ранее ссылки. Наведя курсор на не посещенную ранее ссылку, мы увидим, что она «перекрашивается» в аквамариновый цвет. А при наведении курсора на посещенную ссылку она становится оранжевой. Фантастика! Но это ломает наш стиль a:active из-за некоторых внутренних аспектов CSS, о которых вы никогда не захотите читать. Когда вы нажмете на ссылку, она больше не будет становиться красной.

Можно исправить это с помощью CSS псевдоселектора a:visited:active. Добавьте следующий код в конец таблицы стилей. Обратите внимание, что, как и в случае с классом .call-to-action, порядок, в котором правила определяются в файле styles. css, имеет значение:

a:visited:active {
  color: red;
}

Эти два последних раздела позволят задавать стили посещенных ссылок полностью отдельно от не посещенных.

Псевдоклассы предназначены не только для определения стилей ссылок. Вместо указания стилей для класса a:link и потомков изменим с помощью псевдоклассов класс .button. Это позволит создавать кнопки, которые ведут куда-то.

Сначала нужно изменить кнопки, чтобы они стали элементами <a href>, а не просто элементами <div>, как показано ниже:

<a href='nowhere.html'>Кнопка Один</a>
<a href='nowhere.html'>Кнопка Два</a>

Если вы перезагрузите документ в браузере, то увидите, что некоторые стили больше не действуют. Хотя мы используем одни и те же классы. Это связано с тем, что <a> является встроенным элементом, а также имеет значение цвета по умолчанию:

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

Начнем с :link и :visited. Мы используем аналогичный подход, что и в предыдущем разделе о CSS селекторах родителя. Но поскольку это кнопки, то мы сохраним одинаковые цвета для состояний посещенная и не посещенная. Измените существующие правила .button следующим образом:

.button:link,                 /* Измените это */
.button:visited {             /* Измените это */
  display: block;             /* Добавьте это */
  text-decoration: none;      /* Добавьте это */
  color: #FFF;                /* Все остальное остается без изменений */
  background-color: #5995DA;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  border: 2px solid #5D6063;
  border-radius: 5px;
  width: 200px;
  margin: 20px auto;
}

Обратите внимание на новые псевдоклассы :link и :visited в селекторе. Без них стиль браузера по умолчанию для a:link не изменился бы. Теперь оформим состояние при наведении курсора.

.button:hover,
.button:visited:hover {
  color: #FFF;
  background-color: #76AEED;  /* Light blue */
}

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

.button:active,
.button:visited:active {
  color: #FFF;
  background-color: #5995DA;  /* Blue */
}

Стили, которые мы только что определили, готовы к повторному использованию. Назначьте класс .button любому HTML-элементу, и вы превратите его в интерактивную кнопку.

Займемся второй кнопкой. Предполагается, что она имеет желтый фон, но мы изменили это кодом из предыдущего раздела. Наш селектор .button:link более «специфичен», чем текущее правило .call-to-action, поэтому он имеет приоритет.

Исправим такое положение вещей, применив к нашему правилу .call-to-action несколько псевдоклассов. Замените существующее правило следующим (убедитесь, что это определено после новых стилей .button из предыдущего раздела о дочерних селекторах в CSS):

.call-to-action:link,
.call-to-action:visited {
  font-style: italic;
  background-color: #EEB75A;     /* Желтый */
}
. call-to-action:hover,
.call-to-action:visited:hover {
  background-color: #F5CF8E;     /* Светло-желтый */
}
.call-to-action:active,
.call-to-action:visited:active {
  background-color: #EEB75A;     /* Желтый */
}

Мы назначили класс .call-to-action только для второй кнопки, поэтому только она станет желтой. Конечно, нам по-прежнему нужно, чтобы класс .button был назначен для обоих элементов <a>, поскольку он определяет общие стили, такие как отступы, радиус границы и размер шрифта.

Состояния ссылок – это лишь один аспект псевдоклассов. Существует также множество других псевдоклассов, которые предоставляют дополнительную информацию о контексте элемента. Например, псевдокласс last-of-type выбирает последний элемент определенного типа в родительском элементе. Это является альтернативой селекторам классов.

Например, мы могли бы использовать :last-of-type, чтобы добавить в наш пример определенное пространство после последнего абзаца страницы:

p:last-of-type {
  margin-bottom: 50px;
}

Это позволяет не затрагивать первые два элемента <p> на странице, не добавляя для последнего абзаца новый атрибут класса:

Можно даже использовать псевдокласс :first-of-type вместо класса . synopsis. Заменив существующее правило .synopsis следующим фрагментом кода, мы получим тот же результат:

p:first-of-type {
  color: #7E8184;
  font-style: italic;
}

Использование этого метода вместо устаревших классов имеет свои преимущества и недостатки. Например, это работает только в том случае, если наш синопсис является элементом <p>. Если бы мы захотели создать синтаксис с несколькими параграфами, объединив много элементов <p> в <div class=’synopsis’>, нам пришлось бы переписать наш CSS-код. С другой стороны, псевдоклассы позволяют задавать стили для определенных элементов, не изменяя HTML. Это дает нам четкое разделение контента от представления.

Но псевдоклассы немного сложнее. Контекстные селекторы CSS first-of-type и last-of-type действуют только внутри своего родительского элемента. Другими словами, p:first-of-type выбирает первый элемент <p> в каждом элементе контейнера.

У нас есть один общий <div>, который обертывает контент (. page), поэтому для нас это не проблема. Но что произойдет, если мы добавим следующий код в нижнюю часть элемента .page:

<div>
  <p>If this page had a sidebar...</p>
  <p>We’d have some problems with pseudo-classes.</p>
</div>

Это иллюстрирует сложность применения псевдоклассов для структуры. Первый элемент <p> здесь также будет соответствовать p:first-of-type, потому что область применения псевдокласса ограничена родительским элементом.

Если вы не хотите затрагивать абзацы в боковой панели, и выбрать только первый <p> в контейнере <div class=’page’>, то нужно ограничить область его применения с помощью селектора дочерних элементов. Например:

.page > p:first-of-type {
  color: #7E8184;
  font-style: italic;
}

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

CSS селекторы идентификаторов – альтернатива селекторам классов. Они работают почти так же, но на странице может размещаться только один элемент с определенным идентификатором. Это означает, что вы не сможете повторно использовать стили.

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

<a href='nowhere.html'>Кнопка Два</a>

Соответствующий селектор CSS должен начинаться с символа хэша (#). Добавление следующего кода в файл styles.css изменит цвет текста желтой кнопки:

#button-2 {
  color: #5D6063;  /* Dark gray */
}

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

/* (Это тяжело поддерживать) */
#button-2,
#button-3,
#checkout-button,
#menu-bar-call-to-action {
  color: #5D6063;
}

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

Атрибуты id должны быть уникальными, поскольку на них указывают «фрагменты URL-адресов». Фрагменты — это элементы, с помощью которых можно указать пользователям на определенную часть веб-страницы. Они выглядят как селекторы идентификаторов, расположенные в конце URL-адреса:

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

<!-- С той же страницы -->
<a href='#button-2'>Go to Button Two</a>
<!-- С другой страницы -->
<a href='selectors.html#button-2'>Go to Button Two</a>

Если вы добавите первый вариант ссылки в разметку страницы selectors.html и кликните по ней, то увидите, что данный URL-адрес значится в адресной строке браузера. Чтобы увидеть, как осуществляется переход ко второй кнопке, нужно добавить на страницу немного произвольного контента или сделать высоту окна маленькой:

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

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

Но не все селекторы CSS равнозначны. «Специфичность CSS» — это значимость, установленная для различных категорий селекторов. Это означает, что некоторые селекторы всегда будут переопределять другие независимо от того, какую позицию они занимают в таблице стилей.

Если вы добавите следующий код после существующих правил .call-to-action, он переопределит заданный ранее цвет фона. Если вы разместите его в верхней части файла, он сам будет переопределен, и наша кнопка не станет красной. Это ожидаемое поведение:

.call-to-action:link,
.call-to-action:visited {
  background-color: #D55C5F;    /* Красный */
}

Теперь посмотрите, что происходит, когда мы пытаемся сделать то же самое с помощью селектора идентификатора. Во-первых, обязательно удалите предыдущий фрагмент кода, а затем попробуйте добавить приведенный ниже код до существующих правил .call-to-action:

#button-2 {
  background-color: #D55C5F;    /* Красный */
}

CSS селекторы идентификаторов имеют более высокую специфичность, чем селекторы классов, поэтому вторая кнопка будет красной, даже если мы зададим фоновый цвет с помощью .call-to-action:link ниже. Концепция «порядок имеет значение» работает только тогда, когда все правила имеют одинаковую специфичность:

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

•	#button-2
•	.button:link и .synopsis em (они равнозначны)
•	.button
•	a:link
•	a

Иногда это приводит к путанице. Это настолько серьезная проблема, что была разработана целая методология под названием «BEM». Суть BEM заключается в попытке обеспечить то, чтобы правила CSS были многоразовыми, сделав все селекторами классов. Это исключает возможность возникновения проблем.

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

Пожалуйста, оставьте свои комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, подписки, отклики, лайки, дизлайки!

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

Вадим Дворниковавтор-переводчик статьи «css selectors»

Селекторы CSS – точечное применение свойств CSS к элементам страницы (тегам)

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

22.04.2013

Здравствуйте дорогие подписчики и не менее дорогие гости Site on! Надеюсь, вам были интересны предыдущие статьи раздела HTML + CSS, потому как сегодня скучать точно не придётся, ведь мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.

Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор.

p {color: red}
div span {background: green}
ul li {list-style: none}

Селекторы class и id

В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

<div>текст в первом диве</div>
<div>текст во втором диве</div>
<div>текст в третьем диве</div>

На что стоит обратить внимание:

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

Как обратиться к классу или id в файле стилей (CSS)?

Смотрим пример:

#first {color: red;} /* обращаемся к id с именем first */
. second {color: blue;} /* обращаемся к классу с именем second */
#first .second {color: orange;} /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */
.first .third {color: grey;} /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */

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

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

В чём различие class и id?

Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:

 <style>
#first {color: red;}
.blue {color: blue;}
</style>
<div>текст в диве</div>

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

По синтаксису: в случаи с классом мы можем выбрать, у какого именно тега должен находиться данный класс, для этого после имени тега БЕЗ пробела мы должны обратиться к классу. Пример:

.myclass {свойства} /* применятся ко всем тегам, которые содержат класс myclass */
div.myclass {свойства} /* применятся только к тегам div, которые содержат класс myclass */

Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:

<style>
#super {свойства} /* правильно */
div#super {свойства} /* Неправильно, но работать будет */
</style>
<div>текст</div>

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

Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.

Родственный селектор

Идём дальше. Из статьи о наследовании в CSS вы уже знаете о двух самых простых видах селекторов, это селектор по тегу (элементу) и по потомку. Давайте освежим вашу память:

 div p {color: green;} /* Селектор по потомку */
p {color: red;} /* селектор по тегу */

Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:

<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

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

div>p {color: blue;} /* только первый уровень вложенности */
div p {color: blue;} /* абсолютно все параграфы внутри div */

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

С этим разобрались, у нас на вооружении уже 3 вида селекторов, теперь хочу вам рассказать о весьма необычном селекторе, который выделяется среди всех остальных – это так называемый универсальный селектор, который обозначается звёздочкой (*):

* {margin: 0; padding: 0;}

Так у меня начинается каждый новый проект, советую вам делать также. Универсальный селектор распространяется на все элементы страницы (теги), но имеет нулевой приоритет (ниже только отсутствие приоритета вовсе). Его обычно используют, чтобы перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов. Представьте себе, и такое имеет место быть! Достаточно многим тегам браузеры по умолчанию устанавливают свои свойства, например, тегу гиперссылки <a> синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд. Нам это запоминать, знать и использовать совсем не к чему, поэтому самые банальные свойства мы сразу же убираем с помощью универсального селектора, однако я бы не советовал дописывать в него что-то ещё (или дописывать, но аккуратно), несмотря на наименьший (нулевой) приоритет универсального селектора, он в некоторых случаях всё же может перебить вам другие свойства, так что имейте это в виду.

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

Псевдо-классы

В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся ( :first-child, :link, :visited, : lang() ):

<style>
p:first-child {color: green;} /* сработает, если p является первым ребёнком своего родителя */
</style>
<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

Результат:

Естественно можно комбинировать селекторы как захотим, например:

div>span p:first-child {color: green;} /*сработает, если p является первым ребёнком своего родителя и находится внутри тега span, который является прямым потомком тега div */

Название представленного выше псевдо-класса говорит само за себя first-child — первый ребёнок.

Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:

a:link {color: blue;} /* у не посещённых ссылок задаём синий цвет, и по умолчанию они подчёркнуты */
a:visited {color: green; text-decoration: none;} /* у посещённых ссылок текст будет зелёным, убираем подчёркивание */

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

q:lang(de) {quotes: "\201E" "\201C";} /* кавычки для немецкого языка */
q:lang(en) {quotes: "\201C" "\201D";} /* кавычки для английского языка */
q:lang(ru) {quotes: "\00AB" "\00BB";} /* кавычки для русского языка */

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

Динамические псевдо-классы

Динамические псевдо-классы – это :active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:

p:active {background: red;} /* стиль, который применится к тегу по нажатию на него (клику мышью) */
input:focus {width: 400px;} /* стиль, который применится к элементу, на котором в данный момент фокус (работает, к примеру, для текстовых полей ввода: textarea, input). В данном случае по взятию в фокус, ширина input станет равна 400 пикселей, удобно использовать для красивого эффекта удлинения поля по клику. */
div:hover {background: green;} /* срабатывает по наведению курсора на элемент, в основном применяется для создания красивого эффекта при наведении на ссылки. */

Примените данные стили к нашему примеру выше, и вы сами всё увидите.

Смежные селекторы

Смежные селекторы – это ближайший сосед ниже по коду, не ребёнок! Очень удобный селектор:

<style>
div + p {background: green; color: white;} /* Применить свойства к тегу p, если сразу после закрывающегося тега div открывается тег p */
p + span {background: orange;} /* не сработает, так как у нас нет открывающегося тега span, сразу после закрывающегося тега p */
</style>
<div>
  <p>текст в параграфе первого div</p>
</div>
<p>текст в параграфе ВНЕ div</p>
<div>
  <p>текст в параграфе второго div</p>
</div>
<span>текст в спане</span>
<p>снова параграф вне div</p>

Результат:

Обобщённые смежные селекторы

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

<style>
div~p{color: green;}
</style>

<div>текст в диве</div>

<p>параграф</p>
<p>параграф</p>
<p>параграф</p>

<span>текст в спане</span>

<p>параграф</p>
<p>параграф</p>

<div>
<p>параграф в диве</p>
<p>параграф в диве</p>
</div>

<span>текст в спане</span>
<p>параграф</p>

Результат:

Селекторы атрибутов

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

p[align] {свойства} /* применить ко всем тегам p, у которых есть атрибут align */

p[align="center"] {свойства} /* где значение атрибута align равно center */

p[align^="center"] {свойства} /* где значение атрибута align начинается на center */

p[align*="center"] {свойства} /* где значение атрибута align содержит center */

p[class~="site"] {свойства} /* где site может находиться среди других слов, отделенных пробелами (<p></p>) */

p[class|="site"] {свойства} /* где значение атрибута class состоит только из слова site или начинается им, после чего ставится дефис и пишется остальная часть значения (<p></p> или <p></p>) */

p[class$="site"] {свойства} /* где значение атрибута align заканчивается на site */

CSS 3 псевдо-классы

Вы уже ознакомились со всеми основными селекторами и вам на первых парах этого должно хватить с горкой. Однако в CSS 3 появилось множество новых псевдо-классов, теперь мы можем брать не только первого ребёнка, но и любого другого по счёту, можем идти от обратного, брать не первого, а последнего ребёнка и так далее и тому подобное. Всё это очень удобно и практично, разве что у вас могут возникнуть проблемы со старыми версиями IE. Давайте соберём все силы в кулак и пробежимся по всем оставшимся селекторам, чтобы потом уже вы могли иметь их ввиду при вёрстке собственного макета.

:last-child – аналог :first-child, только берёт не первого, а последнего ребёнка.

:only-child – сработает, если элемент (тег) является единственным ребёнком.

:only-of-type — сработает, если элемент (тег) является единственным ребёнком своего типа.

:nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:

<style>
div p:nth-child(5) {background-color: green;} /* Обращаемся к 5 по счёту ребёнку, если он является тегом p.  */

div p:nth-child(2n) {background-color: yellow;} /* Обращаемся к каждому второму ребёнку, если он является тегом p. */

div p:nth-child(2n+6) {background-color: red;} /* Обращаемся к каждому второму ребёнку начиная с шестого, если он является тегом p. */
</style>

<div>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>

<span>текст в спане</span>

<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
</div>

Результат:

:nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.

:first-of-type – первый ребёнок своего типа в рамках прямого родителя.

:last-of-type – последний ребёнок своего типа в рамках прямого родителя.

:empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).

:not() – делает исключение для заданных элементов. Пример:

<style>
p:not(.roll) {color: red;} /* для всех параграфов на странице делаем красный цвет текста, за исключением параграфов с классом roll */
</style>

<p>параграф с классом roll</p>

<p>параграф</p>
<p>параграф</p>

<p>параграф с классом roll</p>

Результат:

Управление полями, формами, переключателями и флажками в CSS

:enabled — применяется к доступным элементам интерфейса как формы, кнопки, переключатели и тд. По умолчанию все элементы интерфейса являются доступными.

:disabled — применяется к заблокированным элементам интерфейса как кнопки, формы и так далее. Элементы интерфейса являются заблокированными, если к ним в HTML добавить атрибут disabled или в XHTML disabled=”disabled”.

:checked – применяется к элементам интерфейса типа переключатели (radio) и флажки (checkbox), когда они находятся во включённом положении.

Псевдо-элементы

Псевдо-элементы, аналогично псевдо-классам вычисляются браузером автоматически, нам об этом заботиться не нужно. Чтобы не путать псевдо-элементы с псевдо-классами в спецификации CSS 3 было решено использовать двойное двоеточие, вместо одинарного, как было в CSS 2. Поэтому в Интернете вы можете встретить псевдо-элементы как с одинарным двоеточием так и с двойным – и тот и тот вариант верен. Однако для лучшей совместимости с IE рекомендуют использовать одинарное двоеточие.

:first-line – первая строка внутри блочного или табличного элемента.

:first-letter – первая буква внутри блочного элемента.

:before и :after – используются чтобы с помощью CSS вставить содержимое до или после элемента, к которому они относятся, лично я ими не пользовался, поэтому сильно расписывать не буду. А как часто вы используете данные псевдо-элементы в своих проектах? Можете поделиться своим опытом в комментариях к данной статье.

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

Преимущества оптимизации HTML за счёт CSS

Суть всего написанного выше отчасти заключается в том, чтобы отказаться от повсеместного использования атрибутов class и id в HTML, тем самым возложив всё на плечи могучих таблиц стилей.

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

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

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

Пожалуйста, оцените эту статью

Средняя оценка: 4.

87 из 5 (проголосовало: 314)

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

Вы можете помочь развитию проекта, сделав всего 1 клик:

Спасибо!

Видео курс HTML и CSS. Верстка веб-страницы

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

Восьмой урок, и в нем мы с вами будем делать сайт используя новые страницы и уже существующие для сайта Aquatic. Давайте разберем на данном уроке как же мы будем создавать самую главную страницу. Итак, для начала посмотрим что у нас есть в описании данного урока. У нас есть описании есть текст по созданию сайт и макет. Мы видим что нам нужно создать сайт, добавить новую страницу к существующим страницам сайта и есть резюме по тому что стоит делать. Итак, давайте перейдем к студии, посмотрим что у нас в есть наш с вами пример index.html, это уже за нас свёрстаная страничка. В принципе рекомендовано делать следующим образом. Изначально запуститься, просмотреть страницу, увидеть то как она сверстана, попытаться её самому переверстать, то есть использовать данную страничку как макет того что вам стоит сделать. Итак, посмотрим что нас тут есть в данном index.html. Вернемся в студию и видим что у нас есть текстовое содержимое и есть файл, который мы отдельно подключаем на седьмой строке, это наши с вами стили. И в данных стилях мы будем задавать тот как нужно отображать наш сайт. Давайте зайдем в стили и посмотрим, у нас их здесь достаточно, их здесь 250 строк. Сейчас мы попробуем их всех перебрать. Давайте посмотрим как создавалась наша страница. Для начала у нас есть тег <Body> . то есть начнем просмотр визуальной части, не будем рассматривать заголовок и метатеги, здесь и так все понятно. Просто задали кодировку и задали заголовок страницы. Итак, в теге <Body> мы указали внутренние и внешние отступы. Давайте что бы для наглядности работать с данным примером сделаем следующее: создадим новый файл .css вот таким вот образом с помощью студии, назвав его stylesheet.css и в него перенесем все правила поочередно переподключив в файле index.htm наш с вами стиль. Мы с вами ссылались на style.css stylesheet.css; вот мы добавляем этот файли на седьмой строке удаляем старую ссылку. Как только запустимся и видим что наш сайт «разъехался» потому что осталась только структура а наши с вами стили пусты. И давайте посмотрим что же мы использовали в style.css. В стилях мы указали что отступы мы обнуляем для Body. Давайте посмотрим, запустимся и видим что у нас есть небольшие отступы у элементов от верха и левого края страницы и мы делаем следующее: мы в Body пишем что padding:0px; margin:0px; Итак, после этого мы видим что используем фон, а точнее в виде фона мы используем картинку, это просто градиентная полоска, которая из белого цвета к низу переходит к голубому. Давайте и мы её будем использовать для нашего с вами решения. Вот мы используем соответствующую полочку, говорим что она у нас будет отступать сверху и слева по 0рх, повторяться будет по Х и часть оставшейся заливки, которой не зальет наш элемент будет белым. Итак, давайте тогда еще укажем цвет текста для нашего с вами случая для сайта AQUATIC. И этот цвет текста будет для всех элементов в теге <body>, которые мы не переопределим к другому цвету. То есть цвет будет вот такой вот серый, студия нам подсказывает что это будет за hex-код и сімейство шрифтов у него будет arial, а если arial не будет найден то helvetica или sans-serif; Давайте это продублируем в наших с вами стилях и посмотрим какие изменения. Вот мы запустились и видим что вот уже есть фон для нашего body и вот таким вот образом мы еще указали цвет шрифта, вот он стал серым, для всего тега body. Давайте продолжим строить наш и посмотрим что было дальше. После этого мы создали универсальный селектор для множества элементов на странице: для div, p, ul, h2, h3, h4, h5, h5, img и для них мы сбросили отступы, есть более универсальный способ это сделать, мы можем просто поставить звездочку «*» и соответственно после * написать эти правила. Звездочка применит для всего на странице эти правила. Так что можно использовать такой вариант вместо того, который представлен у нас в примерах. После этого что мы делаем? После этого мы для Ul расбрасываем margin-ы. Маркеров в подстановке у нас не будет. Давайте и это продублируем. Пишем: Ul и для него указываем: margin:0px; padding:0px; После этого мы будем создавать класс, который будет растягивать наш текст по ширине, это класс .justify . Очень удобная практика, когда вам нужно выравнивать текст по ширине, по высоте, по какому либо краю, задавать цвет, например создать класс .blue, который будет задавать цвет для вашего текста, и вам будет достаточно добавить класс для любого элемента, даже если у этого элемента уже есть классы, и он применит соответствующие стили, по этому давайте создадим класс .justify и зададим для него выравнивание текста по ширине. После этого мы будем размечать области наших элементов, то есть раньше мы задавали общие правила для элементов тегов а теперь мы уже будем их именовать и указывать как же они должны себя вести более индивидуально. То есть они будут не такие абстрактные. Итак, мы с вами будем обращаться к #topPan. Top pan (верхняя панель) – скорей всего это имел ввиду автор когда создавал этот ID. И на 11й строке мы с вами видим наш #topPan, он начинается на 11й и заканчивается на 15й, в нем у нас есть ссылка, картинка логотип и класс .caption, но мы пока что разговариваем о #topPan. Итак, что мы делаем? Мы задаем ему размеры: 778рх х 65рх, задаем ему фон (видим какой) и так же указываем цвет шрифта, позиционирование и говорим что он у нас будет отступать от левого и правого края по автомату, то есть будет находиться по центру. Давайте данное свойство перезапишем в stylesheet.css и посмотрим что же произойдет. Итак, мы обращаемся к элементу по #topPan. Кстати, при обращении к ID очень важно соблюдать реестр. Указываем ширину 778рх и ширину 65рх. После этого будем задавать background, давайте посмотрим что же у нас за файл отвечает за фон. Это файл topbg.jpg, давайте найдем этот файл. Мы видим файл topbg.jpg и нам с вами нужно его добавить в наш с вами background. Мы его перетягиваем, видим что студия сама генерирует наш тег, нам не нужно писать то что я до этого писал. Единственное что нам нужно уточнить: мы говорим что это изображение не нужно повторять и заполнять ту часть, которую не залил фон представить белым. Итак, после этого мы должны будем указать цвет. Цвет будет со значениями : #828282, это будет сероватый цвет, близкий к серому, давайте его продублируем. Вот студия нам показывает какой это цвет будет. После этого мы используем position:relative; margin: 0 auto; Поскольку ноль является значением, которое понятно интерпретатору и пикселями или без, так что приставку рх вы можете не писать. Итак, запустимся и посмотрим что получилось. Напоминаю, что запускаться нужно с файла index.htm, если мы запустимся из файла .css то мы увидим что у нас просто будет лист наших с вами элементов. Запускаемся и видим, что наш с вами сайт начинает обретать какие то черты, то есть по тихоньку видим как он меняется и как работают те свойства, которые мы применяем. Возвращаемся к файлу со стилями и смотрим что же в нем мы делали дальше. Мы обращались к картинке с классом #logo, давайте посмотрим есть ли у нас эта картинка. Да, есть у нас такая картинка на 13й строке, у нее класс #logo, есть ссылка на изображение logo.gif, сейчас мы найдем его у нас в папке, это файл Aquatic. И задаем alt width height для данной картинки, то есть если мы здесь использовали атрибуты то можем не обращаться к нашим с вами стилям. По этому переписуя данный пример мы можем просто указать позицию absolute и отступы по верхнему и левому краю (12рх 235рх). Мы пишем для нашего #topPan , я пишу что хочу обратится к картинке с классом (которого пока что нету) .logo. Потом обращаемся к классу .logo и в этом классе задаем position: absolute; и отступ сверху top:12px и слева left:235px. Давайте запустимся и посмотрим получилось ли у нас обратится к изображению. И мы видим, что действительно его сдвинули на 235рх от левого края. Давайте посмотрим что мы делали дальше. Дальше в наших стилях мы с вами обращались к параграфу с классом . caption. Давайте посмотрим есть ли у нас такой параграф. Конечно есть, он находится на строке 14, в нем находиться текстовое поле. И что же мы для него делали? Мы задали для него ширину 200 пикселей, задали фон белый, задали цвет шрифта, позиционирование абсолют и задали отступы (сверху рх и слева 235рх). Давайте продублируем это в наших стилях. И делаем следующее: мы указываем #topPan, обращаемся к параграфу с классом .caption и соответственно в этом классе мы будем делать следующее: будем задавать ширину (width:200px), фон (background:white;) далее помним что задавали position:absolute и отступы сверху top:43px; и слева 235px; Итак, что еще стоит ответить, мы использовали не только те свойства которые написали но еще и цве шрифта. Важно что бы текст был такой же как указано цветом на 23й строке и указываем его #828282 . Итак, после этого мы обращаемся к #headerPan. Давайте посмотрим где оно у нас в верстке. Мы видим что в верстке этот элемент находиться на 16й строке, так же в нем есть список с классом . leftmenu , это наш немаркированный список, так же в нем есть класс .clients для последнего li и в нем мы указываем ссылку якорь которой ведет на перезагрухку данной страницы для всех страничек кроме странички home.,то есь нашего элемента списка. Итак, давайте к стилям, так же для #headerPan мы задаем ширину и высоту, так же задаем фон, вот такой вот интересный, так же используем positiob:relative, margin и padding . Давайте это все продублируем для нашего #headerPan. Итак, мы с вами обращаемся к id, обязательно нужно указывать решетку и пишем headerPan, после этого мы должны задать ширину для данного элемента и высоту. Давайте посмотрим какая ширина и высота (686 на 153)рх. После этого мы задаем фон, поскольку фон мы уже задавали способами студии и просматривали как это делается поэтому просто скопируем отступы. Обратно таки они по умолчанию, мы используем отступы по центру (0 auto) и padding-и. Padding-и более пользовательские в настройке мы можем изменить на несколько пикселей и посмотреть что у нас особо ничего не поменялось за счет того, что мы добавили по высоте или снизу нашего элемента небольшой отступ расширив его. Итак, давайте запустим наш пример и посмотрим появились ли какие то изменения. Действительно, мы видим, появились изменения появились, то есть наш список принял позицию, которую и должен был принимать, так же мы видим что применился background, который изменил нашу страничку. Итак, что мы будем дальше делать в наших стилях. Будем описывать класс .leftmenu поскольку он у нас есть. И так же мы будем обращаться к классу .clients и прочим элементам. Давайте посмотрим что мы здесь делаем. Давайте зададим ширину .leftmenu. Итак, давайте это сделаем и обсудим почему мы ее задаем так же как задавали в наших примерах. Итак мы обращаемся к ul, в нашем #headerPan, который на странице может быть только один мы ищем ul мало того, не какой то простой ul а с классом, имя класса .leftmenu. #headerpan ul.leftmenu . Что нам дает такое подход. Если бы мы написали просто leftmenu, то оно бы применилось ко всем leftmenu на странице, а вот с такой вот записью как на 63 строке мы ограничили наш поиск #headerPan и именно к ul мы обращаемся и задаем ширину для данного класса (width: 87px;) Итак, что мы делаем дальше. Мы будем задавать ширину и высоту для Li и приманять к ним рамку, давайте это сделаем. Итак, мы обращаемся к #headerPan, обращаемся к ul, к leftmenu и к li в нем. Width:87px, heught:22px. После этого мы указываем рамочку border: 1px solid, так же нужно посмотреть какой у нас здесь код цвета, мы его скопируем и будем использовть данный цвет. Видим что мы задали то как должен выглядеть наш список, ширину и высоту и рамки для элементов списка. Вот мы увидели то как должны выглядеть наши рамки, но опять-таки, если вернуть к изначальному макету мы видим что они были не такими. Поэтому давайте вернемся к нашему коду. Мы указали border, а нам нужна рамка для низа элемента, по этому border-bottom. Давайте так же изменим форму нашей рамки, мы писали solid а нам была представлена dashed, Давайте посмотрим что получилось. И мы видим что таким образом у нас получилось отобразить наше меню так, как было в макете. Итак, давайте посмотрим что мы дальше использовали. В стилях на 73й строке обращение к селекторам с ссылками, которые находятся в li в классе . leftmenu для ul, который в свою очередь находиться в #headerPan. То есть, таким образом мы очень точно задали селектор, конкретно для этих селекторов. Давайте посмотрим что мы здесь будем делать. Сначала обратимся к #headerPan, к ul, к .leftmenu, к li и к ссылке, то есть вот такой вот длинный селектор : #headerPan ul.leftmenu li a. Но он хорош тем что мы можем очень точно задать элемент, котору мы применяем эти стили и точно применятся эти свойства, которые мы задали этим элементам, то есть уточнить выборку нашу. Итак, что мы здесь делаем, мы задаем ширину и высоту (72 и 22)рх. После этого мы смотрим, что мы задавали не только высоту и ширину а еще и фон и использовали свойство display:block; После того как задавали высоту и ширину задаем display:block;. Итак, мы задали фон, как раз как вы понимаете, если посмотреть на макет то мы сейчас будем пытаться задать для наших ссылок фон, который будет выглядеть в виде квадрата и видим что это вот действительно квадрат. Что же мы здесь будем делать? Итак, смотрите. Давайте запустимся и посмотрим что у нас здесь получилось. У нас получилось что наши элементы все равно с маркером и фон налез на наш текст. Почему же это произошло? Потому что наш элемент ссылка воспринимается как строчный элемент, то есть как элемент типа <span> , в котором мы не могли указывать высоту и ширину, также у нас были проблемы с margin и так далее. Мы бы хотели что бы ссылка вела себя как <Div>, как блочный элемент, поэтому мы используем свойство display, которое еще не было рассмотрено, но которое будет рассмотрено на курсе java script advanced и ему указываем display:block; Давайте посмотрим какие изменения произошли. Пока что ничего не произошло. Но как только мы применим все наши стили, используя свойство line-height Давайте сделаем это, зададим наш цвет для текста. Цвет у нас был следующий, копируем его, вставляем; Так же мы будем использовать здесь свойство text-decoration; для того что бы убрать у ссылок нижнее подчеркивание. Давайте это проверим. Видим что у ссылок пропало нижнее подчеркивание. Так же нам еще стоит задать внутренние свойства и задать значения, которые будут в примере. Запускаемся и видим как у нас изменились значения. Что еще стоит сделать? Мы научились задавать ширину и высоту элемента и использовать её и так же можем использовать свойтсво line-height; Оно измеряет высоту блока, берет значение которое используем мы и выравнивает текст по высоте значения, которое указано в свойстве line-height То есть если мы укажем значение line-height равным значению нашего height, свойства нашей высоты то такой текст будет выровнен по центру, давайте попробуем это сделать и посмотрим зачем мы все таки использовали display:block; Указываем значения line-height: 22рх; Вот таким образом мы перебрали наши стили, давайте запустимся и посмотрим что же у нас произошло и видим что текст выровнялся по центру блока. Видим что у нас есть маркеры, маркеры мы не убрали у нас на строке 12. Для Ul мы должны указать list-style-type:none; И таким образом мы убираем маркеры которые были здесь лишними. Итак, давайте посмотрим на каком этапе у нас готовоность сайта. Мы видим, что если вернуться к примеру, который был изначально, то мы практически сделали header. А сейчас давайте сделаем пункт меню. Итак, мы видим что для пункта меню мы будем использовать другую картинку, которая будет подменять наш с вами маркер и будем обращаться к свойству hover, то есть наш псевдокласс. Это hover который мы с вами проходили и как же мы будем обращаться к нему. Итак, как же будет выглядеть наш селектор. Итак, мы обращаемся к #headerPan ul.leftmenu li a:hover и для данного псевдокласса мы укажем свойства. Итак, как вы видите мы используем практически те же свойства, которые у нас были, только добавляем другую ссылку для background. Итак, копируем ссылку и переносим те свойства, которые нам нужны для работы hover-а. И давайте запустимся и посмотрим получилось ли у нас это воссоздать. Видим что получилось и у нас меню работает так же само как и в нашем примере изначально. Вот если к нему перейти то мы видим что так же само работало меня. Когда возвращаемся к верстке то видим, что мы еще не писали класс .clients. Что же для данного класса мы будем указывать. Мы будем указывать что у него нету рамки. Для чего это нужно? Давайте запустимся и посмотрим как выглядит наш шаблон. Мы видим что у нас нижнее подчеркивание для ссылки about us, но опять таки если просмотреть наш с вами макет, то у нас его нету. То есть если нам нужно работать по макету и дизайнер представил такой вот макет то нам нужно убрать нижнюю рамку. Как же это сделать? Очень просто. Мы обращаемся к нашему классу .clients и не задам ему рамки, давайте это сделаем. Итак, мы обращаемся к #headerPan ul.leftmenu li.clients и указываем что нам не нужны нижняя рамка. И давайте запустися и посмотрим что нижняя рамка пропала. Итак, давайте вернемся к нашим стилям и увидим что у нас теперь есть возможность обращаться к div-у с #bodyPan. Мы видим что к #bodyPan мы создаем div c #leftPan, далее создаем заголовок на 26й строке h3, создаем список с ссылками, которые будут вести нас на различные рыбы, так же после этого мы создаем еще один заголовок и еще один список, это все будет в левой панеле. Далее мы создаем div с #rightPan, создаем параграф с классом more и ссылку. Далее будем использовать параграф с классом .justify, то есть текст в нем будет выровнен по ширине, так же мы создаем картинку, которую будем выравнивать по левому краю и задаем ей alt и title . Далее мы создаем еще несколько параграфов с классом more и с классом justify размещая их в правом блоке и после этого мы дойдем к div-у с id=”footermainPan”. Итак, давайте на этом диве остановимся и разберем все таки какие классы и какие ID мы применяли. Начем с #bodyPan. #bodyPan это тело нашего с вами сайта, то есть до этого у нас с вами был заголовок а сейчас будет тело сайта. Итак, что мы будем делать с данным дивом. Мы будем задавать ему ширину, фон, position: relative, указывать то, что он будет находиться по центру и будем задавать внутренние отступы. Итак, давайте зададим эти свойства. Итак, мы с вами обращаемся к #bodyPan и зададим наши свойства. Мы изначально задавали ширину. Ширина данного элемента будет 686рх. После этого мы использовали background, давайте его скопируем, указывали position: relative, давайте его скопируем, указывали что данный элемент будет выровнен по центру по горизонтали и задавали внутренние отступы. Отступы были следующие : 22рх это внутренний сверху, справа и снизу не будет а слева будет 92рх. Итак, давайте запустимся и посмотрим что у нас произойдет. Мы видим что наши с вами элементы приняли соответствующую позицию, были заданы внутренние отступы. И давайте вернемся к верстке. Мы видим что у нас есть блок с #leftPan, вот мы его с вами и будем изменять. Видим что у него есть 114рх ширины и отступ по левому краю, так и пишем соответственно для нашего #leftPan и задаем ширину 114рх и говорим что он будет обтекаем по левому краю, то есть к нему по левому краю будут прижиматься элементы, то есть наша правая часть странички. Давайте вернемся и увидим что действительно это же у нас и произошло. Сейчас давайте напомним себе каким же образом должна выглядеть наша страничка, просмотрим изначальный макет и видим что у нас все таки у нас здесь должен быть список красивый. Этого мы сейчас и будем добиваться. Итак, возвращаемся к нашей с вами верстке. Видим список и явно будем менять список и заголовки, которые у нас есть. Начнем конечно с заголовка. Вот у нас есть здесь h3, мы для него будем задавать ширину высоту, фон, цвет текста, будем использовать высоту нашего текста 18рх и line-height, в которую будем вписывать этот h3, она как раз совпадает со всей высотой блока, то есть в эту высоту 34рх будут вписаны буквы размером 18рх, такими, который создают визуальные впечатления будто элемент находиться по центру по вертикали. Давайте зададим для нашего h3 стили, пишем таким вот образом leftPan h3. Мы задали для него ширину и высоту (114*34)рх. Далее указываем фон и цвет шрифта, давайте скопируем эти значения что бы не запоминать hex коды. Для фона конечно легко заполнить background:#fff; что равно белому цвету а вот для цвета текста не так просто и давайте зададим размер шрифта, после которого зададим ширину линии в которую нужно вписать этот шрифт размер которого будет 18рх, а высота блока будет равна высоте в которую нужно будет вписать текст. Давайте запустимся и посмотрим что же у нас изменилось. Видим что таким образом наш текст принял более интересное форматирование, видим что Fishes, Plants это наш h3. Итак, давайте посмотрим что же мы будем применять для нашего ul и li. Для ul и li мы будем задавать ширину и восоту, сделаем это следующим образом. Мы напишем что #leftPan ul { у нас будет шириной 114рх а #leftPan li, то есть элементы которые находятся в нашем немаркированном списке шириной будут 114рх и высотой 34рх. Давайте запустим данный пример и увидим что обратно-таки применились наши стили для ul и li. Мы еще можем обратится к нашей ссылке. К ссылке мы можем обращаться как к ul или меню левее, то есть то что у нас было заранее. Мы задавали для нее background в качестве маркера. Подстановка таким образом не для элемента списка а для ссылки. Будем задавать ширину, высоту и прочие свойства. Давайте начнем. Для начала будем обращаться к селектору #leftPan ul li a и будем указывать следующие атрибуты. Ширина будет 102рх и высоту 24рх. Так же нужно на секундочку остановиться и сказать что если вам нужно измерять какую то ширину или высоту то вы это можете сделать с помощью средств которые есть в Mozilla. Допустим вы можете выбрать в средствах которые есть для веб-разработчиков, например линейка, которая измеряет размеры элементов, можно посмотреть какие вам нужны отступы и какие нужно использовать значения. Можно так же использовать стандартные средство для разработчиков, ним можно рассматривать шрифты, все стили, которые применяются и отдельные правила те которые мы применяли, так же их можно отменить. Отменив парочку можно увидеть что мало что меняется для наших ссылок. Окей, давайте тогда обратно перейдем к верстке и посмотрим что же мы должны задать после этого. После этого мы должны задать фон, это будет картинка, которая будет находиться рядом с текстом и после картинки мы обязательно указываем что будем использовать display: block; для элемента. И так же указываем что будем использовать цвет шрифта, который мы уже использовали выше на 106 строке. И далее мы задаем следующие настройки. Мы убираем подчеркивание у ссылок, задаем высоту линий в которых будет вписан текст и внутренние отступы. Давайте это сделаем. Убирать подчеркивание можно с помощью text-decoration: none; еще задаем внутренние отступы: 0 0 0 12рх. И давайте запустимся и посмотрим что у нас получилось. У нас получился список, примерно такой же как в нашем макете. Давайте вспомним что так что не так, давайте вспомним какие то свойства. Видим что в принципе у нас все получилось. Единственное что отличается это наше с вами наведение. То есть когда мы наводимся на элементы то не видим изменения квадратов слева от текста. Как мы уже знает это делает свойство hover. Так что можем смело обращаться к нашему свойству hover. Пишем hover и таким вот образом будем работать на наведение. Нам нужно будет скопировать их кода в файле style.css и посмотреть какой стиль нужно примеменять к ссылкам и давайте запустимся и посмотрим. Вот мы указали его и видим что он очень хорошо работает, единственное что мы можем указать как мы это и делали в примере что у нас не должно быть подчеркивания текста и цвет текста должен быть таким же как указано выше. Но мы этого можем и не делать но код все равно у нас должен отработать. Итак, переходим дальше и будем говорить о правой панеле, то есть это #rightPan, к которому мы обращаемся и соответственно к этому id мы будем применять следующие свойства. Мы с вами сказали что ширина у него будет 500рх, так же после этого мы укажем обтекание по левому краю. Еще в стилях видим что мы будем задавать рамку (скопируем ее). То есть эта рамка будет полем по левому краю, она будет цельной 1рх. Эта рамка есть у нас в дизайне, давайте посмотрим. Видим что дана рамка есть в макете и выглядит таким образом мы добились ее у себя в стилях. И еще мы задаем внутренние и внешние отступы. Давайте из зададим. У нас внешние отступы задаются с помощью margin, указываем 28рх 0 0; Внутренние отступы с помощью padding: 30px 0; Далее мы будем для параграфов, которые в #rightPan , они отступают снизу по внутреннему отступу 10рх. Итак, далее мы будем обращаться к #rightPan .more. Это картинка, которая у нас меняется, такая себе анимация. Изначально мы задаем для данного класса наши с вами размеры. Как видите, вы очень часто будете обращаться к записи width и height, то есть будете задавать ширину и высоту, ее приходится задавать практически для всего. Итак, после того как вы зададите ширину и высоту а они у нас (582рх на 25рх) вы можете задать следующее, вы можете задать картинку, то есть фон. Мы ее копируем, вставляем и говорим что каждый такой элемент так же у нас будет обтекаем по левому краю. И последнее что нам осталось указать это внутренние отступы (0 0 0 20рх 0). Итак, давайте запустимся и посмотрим что у нас на данный момент готово. Мы видим что у нас появились наши параграфы, так же появились некие картинки, которые здесь присутствовали. Что еще стоит указать? То что мы с вами обратились всего то пока что только к нашему классу .more в #rightPan-e, он у нас еще и менялся этот класс .more на другую картинку, у нас был hover, мы будем переключать. И кроме hover-а мы еще обращались к ссылке. Давайте посмотрим на свойства, которые задавали ссылкам и на сами ссылки. Итак, мы делаем следующее, обращаемся к нашей ссылке #rightPan p.more a { . Мы щем ссылку в параграфе с классом .more. Далее указываем ширину и высоту (92х21)рх. После этого указываем то какого фона у нас должен быть элемент, наша ссылка. Так же указываем что ссылка должна вести себя как блочный элемент, например как Div. Мы можем обратится к ширине, высоте, задать выравнивание и самое главное мы можем задать line-height, так же задаем цвет шрифта, который находиться в данной ссылке и как мы говорили будем задавать высоту линии. Высота линии это достаточно простое значение, будет задавать значение высоты нашего элемента, нашей ссылки. После этого мы так же скажем что весь текст, который находиться у нас в ссылке будет большим, то есть используем свойство text-transforms и задаем ему значение uppercase и уберем подчеркивание в ссылке text-decoration:none; Что мы еще с вами будем делать? Мы будем задавать отступы, давайте их скопируем, внутренние и внешние отступы. Ширина высота и отступы это наверное три основные блока, которые вы будете использовать при построении. Так же будет работать с hover который будет выступать в роле фонового изображения для нашей с вами ссылки, для нашего параграфа с классом .more. Что мы здесь будем делать? Мы будем работать на событие hover, пишем псевдокласс hover и в нем будем обращаться как раз к background. И видим что при таком вот обращении мы с вами можем менять изображение. И давайте запустимся и псомтотрим что же у нас получилось. Мы видим что у нас получились соответствующие блоки с линей и анимацией изменяющихся кнопок. И давайте вернемся к нашому примеру и вернемся к тому на чем мы остановились, на #footermailPan, это подвал. У нас был заголовок, тело а теперь нижняя часть — подвал. У нас есть #footermailPan и класс .copyright, который будет нести в себе копирайт нашего сайта и давайте же посмотрим какие стили мы для данных элементов заданы. Итак, для #footermailPan мы задали следующие стили. Давайте сначала обратимся к этому Id=”footermailPan” и в нем мы зададим высоту элемента (как вы видите высота у нас 103рх) и заодно скопируем фон. После этого мы должны задать цвет шрифта, как вы видите за это отвечает свойство color. После этого мы должны задать семейство шрифта и размер шрифта. И после мы указываем position: relative , выравниваем по центру наш элемент, очищам его от выравниваний, что бы он не притягивался блоку справа. То есть мы сделали left bar, right bar. Float: left мы очищаем. Итак, давайте зададим оставшиеся свойства: position: relative, после укажем что мы хотим избавиться от float-ов. Так же укажем что мы хотим распологать по центру наши элементы и последний момент который нам осталось добавить это внутренние отступы. Давайте посмотрим что у нас получилось. Мы видим что footer у нас уже внизу, а не как до этого он находился справа и прижимался к элементам. То есть практически мы сделали то что было в нашем с вами макете. Единственное что осталось это красиво выровнять список и поставить копирайт. Давайте этим займемся. Нам нужно обратится к #footerPan и задать ширину и выравнивание по центру. Итак, давайте обратимся к этому элементу и укажем ширину и так же укажем что он у нас выровнен по центру. Обновляемся в нашем примере. И видим что таким образом мы уже прижали наши элементы ближе к центру. То есть мы можем увеличить/уменьшить картинку и увидеть что изображение стало более похоже на наш дизайн. Элементы находятся в тех местах, в которых должны быть. Так же укажем : position: relative, данный элемент не будет изменять верстку и соответственно находиться на новом слое. Он будет наследовать верстку в предыдущем слое, то есть слои не разъедутся. После того как мы задали #footerPan мы будем задавть стили для нашего ul который в нем находиться. Давайте обратимся к ul, который находится в footerPan. Это происходит следующим образом: мы просто пишем перед ul — #footerPan и задаем ему ширину 608рх, указываем позицию по центру. И так же говорим что наш с вами элемент будет высотой 20рх, position: relative; Запускаемся и видим что текс выровнен как раз по линии, на которой находится начало контента сайта. Итак, давайте вернемся к нашему с вами примеру и посмотрим что же мы делали дальше. А дальше обращались к li и говорили что они выровнены по левому краю. выставим их в ряд. Запускаемся и видим что теперь наши элементы красиво находятся друг за другом. Что будем делать после этого? После этого будем обращаться к ссылкам. Будем задавать для них цвет и фон. Давайте сразу скопируем эти два стиля и обратимся к нашим #footerPan li a и зададим стили, цвет и фон. Далее мы еще должны указать внутренние отступы. Указываем 0 10рх 0. Далее мы работает со следующими значениями. Мы указываем размер шрифта 13рх и указываем то что у нас данные ссылки не будут подчеркнуты. Далее, указываем следующие: при наведении на hover событие у нас ссылки будут подчеркиваться. Давайте это укажем. Обращаемся к #footerPan li a и в этой ссылке работаем на событие hover и используем text-decoration: under-line; Давайте запустимся и увидим что нам осталось сделать всего то наш copyright, сделать так что бы он быглядел так же как в нашем примере с которого мы начинали. Вот видим «copyright», он выглядит красиво. А у нас он немного съехал. Давайте исправим это. Давайте посмотрим как это делали в стилях. Мы обращались к параграфу с классом .copyright в наших стилях. Обращаемся к #footerPan p.copuright и таким образом задаем ширину и внутренние отступы. Ширина как мы видим у него будет 250рх а внешние отступы будут 10рх 0 0 93рх. Итак, давайте запустимся и посмотрим что наш макет в принципе готов. Мы видим что таким образом отображается макет, который мы с вами создали и вот исходный вариант данного макета. Итак, это все по данному уроку. Предлогаю вам, если вы смотрели этот урок и одновременно перебирали стили, создать парочку страничек, заполнить наши пункты меню или создать еще одну страничку. На этом данный урок можно считать законченным.

Изучаем HTML, XHTML и CSS Элизабет Фримен, Эрик Фримен

Эффект наведения, который меняет другой элемент > Лакмус

Вроде* работает. Все в порядке, когда я использую простой HTML. Но когда я пытаюсь использовать его внутри шаблона MailChimp (который я сначала экспортировал, а затем загрузил как свой собственный код), он ничего не делает.

Что особенно странно, так это то, что когда я удаляю эту часть стиля MailChimp, кажется, что она снова работает.

Это блок, который я должен был удалить (но он мне нужен):

 
    /*
    @tab Тело
    @section Телосложение
    @tip Установите цвет фона и границы для основной части письма.*/
        #templateBody {
            /*@editable*/background-color:#ffffff;
            /*@editable*/background-image:none;
            /*@editable*/background-repeat:no-repeat;
            /*@editable*/background-position:center;
            /*@editable*/background-size:cover;
            /*@editable*/border-top:0;
            /*@editable*/border-bottom:0;
            /*@editable*/padding-top:9px;
            /*@editable*/padding-bottom:32px;
        }

        #templateBody .mcnTextContent,#templateBody .mcnTextContent p {
            /*@editable*/color:#202020;
            /*@editable*/font-family:'Helvetica Neue', Helvetica, Arial, Verdana, без засечек;
            /*@editable*/font-size:16px;
            /*@editable*/line-height:150%;
            /*@editable*/text-align:left;
        }
    /*
    @tab Тело
    @section Ссылка на тело
    @tip Установите стиль для ссылок в теле письма.  Выберите цвет, который поможет им выделиться из вашего текста.
    */
        #templateBody .mcnTextContent a,#templateBody .mcnTextContent pa{
            /*@editable*/color:#2baadf;
            /*@editable*/font-weight:normal;
            /*@editable*/text-decoration:underline;
        }
    /*
    Нижний колонтитул @tab
    @section Стиль нижнего колонтитула
    @tip Установите цвет фона и границы для нижнего колонтитула вашего электронного письма.
    */
        #templateFooter {
            /*@editable*/background-color:#ffffff;
            /*@editable*/background-image:none;
            /*@editable*/background-repeat:no-repeat;
            /*@editable*/background-position:center;
            /*@editable*/background-size:cover;
            /*@editable*/border-top:0;
            /*@editable*/border-bottom:0;
            /*@editable*/padding-top:9px;
            /*@editable*/padding-bottom:9px;
        }
    /*
    Нижний колонтитул @tab
    @section Текст нижнего колонтитула
    @tip Установите стиль для нижнего колонтитула вашего электронного письма. Выберите размер и цвет, который легко читается.
    */
        #templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
            /*@editable*/color:#656565;
            /*@editable*/font-family:Helvetica;
            /*@editable*/font-size:12px;
            /*@editable*/line-height:150%;
            /*@editable*/text-align:center;
        }
    /*
    Нижний колонтитул @tab
    @section Нижняя ссылка
    @tip Установите стиль для ссылок нижнего колонтитула электронной почты. Выберите цвет, который поможет им выделиться из вашего текста.*/
        #templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{
            /*@editable*/color:#2baadf;
            /*@editable*/font-weight:normal;
            /*@editable*/text-decoration:underline;
        }

Как изменить стиль другого элемента в событии наведения CSS

Опубликовано: 21 февраля 2018 г. | Автор: Юлия | Рубрики: Разработка, советы и рекомендации | Теги: изменить стиль элемента при наведении, css, селектор css, наведение, наведение | Комментариев нет »

Довольно простой вопрос, не правда ли?
Что я хочу сделать, так это повлиять на свойства одного элемента при наведении на другой элемент :

Мой HTML выглядит следующим образом:

<дел>
jpg» alt=»тестовое изображение»>
<дел>
Наведите курсор!

И элемент «кнопка» должен менять свой цвет при наведении на элемент «div class=»card»‘.

Другими словами,
, если кнопка находится где-то внутри контейнера:
.my-container:hover button i {background-color:blue;}

Если кнопка находится непосредственно внутри контейнера:
.мой-контейнер: наведение > кнопка я {цвет фона: синий;}

Если кнопка находится рядом (после закрывающего тега container) контейнера:
.

my-container:hover + button i {background-color:blue;}

Если кнопка находится где-то внутри контейнера:
.my-container:hover button i {background-color:blue;}

Если кнопка является родственной контейнеру:
.my-container:hover ~ button i {background-color:blue;}

*Дополнительную информацию можно найти в справочнике по селекторам CSS.

Проверьте отдельный пример: как изменить стиль другого элемента в событии наведения CSS >>

Отображение контура (не границы!) при наведении курсора

Предоставление обратной связи, когда пользователи наводят курсор на объект, на который можно нажать или интерактивный (это вообще слово?) обычно считается хорошим дизайном. Для текста у вас есть много способов индикации наведения — такие способы, как подчеркивание, изменение цвета и т. д. Для блоков, коробочные вещи, такие как изображения или элементы div, одна из самых распространенных вещей, которые вы можете сделать, это показать контур или рамку вокруг элемента при наведении курсора.

Ниже приведен пример того, что я имею в виду:

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

Начало работы

Чтобы продолжить, создайте новый HTML-документ и скопируйте/вставьте его. следующий HTML в него: