Ещё задачка на порядок кода [16/18]
Здесь все просто.
Если два CSS-правила применяются к одному и тому же элементу и имеют одинаковую специфичность, то более приоритетным будет то правило, которое появится в коде позже другого.
С этим фактом вы уже познакомились на битве за курочку. А сейчас просто закрепим этот материал, выполнив несколько простейших головоломок на изменение порядка кода.
<!DOCTYPE html>
<html>
<head>
<title>Ещё задачка на порядок кода</title>
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/assets/course66/catinbox.css">
<style>
.boxes .cat-keksik {
background-color: #e74c3c; /* Красный */
}
.boxes .cat-rudolf {
background-color: #3498db; /* Синий */
}
.boxes .cat-snezhok {
background-color: #2ecc71; /* Зеленый */
}
.box{
background-color: #bdc3c7; /* Серый */
}
</style>
</head>
<body>
<div class="boxes">
<div class="box cat-keksik">Кексик</div>
<div class="box cat-rudolf">Рудольф</div>
<div class="box cat-snezhok">Снежок</div>
</div>
</body>
</html>
Перекрестное наследование [17/18]
При создании стилей для сходных по внешнему виду или функциональности элементов, которые могут использоваться на странице неоднократно, очень удобно пользоваться перекрёстным наследованием.
Приём этот заключается в следующем:
создается базовый стиль для таких элементов;
определяются вспомогательные стили, которые применяются к элементам по мере надобности;
элемент наследует базовый стиль и один или несколько вспомогательных.
Пример:
На странице используются кнопки разного назначения: для отправки форм, для сброса информации в полях формы, как элементы навигации и т.д.
Можно вынести общее оформление (размеры, отступы и т.д.) для всех кнопок в отдельное CSS-правило для класса, например, .button.
А затем создать дополнительные CSS-правила, в которых будут определены только различающиеся свойства этих кнопок, например, цвет фона. Для этих правил можно использовать такие названия классов: .button-send, .button-clear, .button-navigation.
Каждая кнопка в HTML-коде будет иметь два класса: общий и дополнительный.
<a class="button button-send">Отправить</a>
<!DOCTYPE html>
<html>
<head>
<title>Перекрестное наследование</title>
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<style>
body {
padding: 10px;
font-family: "PT Sans", sans-serif;
}
.cats {
position: relative;
width: 390px;
margin: 20px auto;
padding: 20px;
text-align: center;
box-shadow: 0 0 3px #999999;
}
.cats .cat {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
text-align: center;
color: #ffffff;
background-repeat: no-repeat;
background-position: 50% 80%;
border-radius: 5px;
box-shadow: 0 0 3px #999999;
}
.cats .cat-keksik {
background-color: #3498db;
background-image: url("/assets/course13/cat_walk.png");
}
.cats .cat-rudolf {
background-color: #e74c3c;
background-image: url("/assets/course13/cat_grumpy.png");
}
.cats .cat-snezhok {
background-color: #2ecc71;
background-image: url("/assets/course66/cat_w.png");
}
.cats .cat-adolf {
background-color: #e67e22;
background-image: url("/assets/course66/cat_a.png");
}
</style>
</head>
<body>
<div class="cats">
<div class="cat cat-keksik">Кексик</div>
<div class="cat cat-rudolf">Рудольф</div>
<div class="cat cat-snezhok">Снежок</div>
<div class="cat cat-adolf">Адольф</div>
</div>
</body>
</html>
Файл css4-38.html