DOCTYPE html



<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<div> <h1>zagolovok</h1>
<p>abzac</p></div>
<div class="empty">nichego netu</div>
<ul>
<li class="first">odin</li>
<li>dva</li>
<li>tri</li>
</ul>
</body>
</head>
</html>
Наследование [2/18]
Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.
Стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно. Например, размер шрифта и его цвет достаточно применить к body, чтобы все элементы внутри имели те же свойства.
Наследование позволяет сократить размер таблицы стилей, но если стилей много, то отследить какой родительский элемент установил некоторое свойство, становится сложнее.
<!DOCTYPE html>
<html>
<head>
<title>Наследование</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Заголовок</h1>
<ul>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>
<p>Текст первого параграфа.</p>
<p>Текст второго параграфа.</p>
</body>
</html>
body{ font-family:'PT Sans', sans-serif;
color:#2980b9;
font-size:12px;
}
li{color:#1abc9c
}

Наследование «на пальцах» [3/18]
Давайте на простых примерах подробнее разберёмся, в чём же преимущество наследования.
Рассмотрим пример:
<p class="text">Cтрока c выделенным <span>словом</span></p>
Представим, что нам нужно установить красный цвет шрифта для всего текста. Зададим CSS-свойства следующим образом:
.text{ color:red;
}
Благодаря наследованию цвет шрифта в теге span автоматически станет красным:
Cтрока c выделенным словом
А так бы выглядел результат, если бы наследование не работало:
Cтрока c выделенным словом
Нам пришлось бы отдельно прописывать цвет шрифта для тега span. И тогда установка таких простых свойств как стиль шрифта стала бы большой проблемой: нужно было бы задавать свойства для всех возможных вложенных тэгов.
<!DOCTYPE html>
<html>
<head>
<title>Наследование «на пальцах»</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
</head>
<body>
<p>Первая строка с произвольным текстом.</p>
<p class="selected">Вторая строка с <span>произвольным</span> текстом.</p>
<ul>
<li>Первый элемент списка</li>
<li class="selected">Второй <span>элемент</span> списка</li>
<li>Третий элемент списка</li>
</ul>
</body>
</html>
body{ font-family:'PT Sans', sans-serif;
color:#7f8c8d;
font-size:12px;
}
.selected {
color:#e74c3c;
}
p>span{color:#3498db;
}
Еще немного про наследование [4/18]
Наверняка вы обращали внимание, что не все свойства наследуются тегами-потомками от их родителей.
Действительно, было бы странно, если бы свойство border автоматически устанавливалось для всех вложенных элементов.
Например, для этого куска кода:
<p class="bordered">Cтрока c выделенным <span>словом</span></p>
Установим CSS-свойство:
.bordered{ border:1px solid green;
}
Если бы наследовались все свойства, то результат бы выглядел так:
Cтрока c выделенным словом
На самом деле граница будет нарисована только у тега p.
О том, какие именно свойства наследуются, мы расскажем в следующих заданиях.
<!DOCTYPE html>
<html>
<head>
<title>Еще немного про наследование</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
</head>
<body>
<p>Первая строка с <a href="#">произвольным</a> текстом.</p>
<p>Вторая <span>строка</span> с произвольным текстом.</p>
<ul>
<li><a href="#">Первый элемент списка</a></li>
<li>Второй <span>элемент</span> списка</li>
<li>Третий элемент списка</li>
</ul>
</body>
</html>
body{ font-family:'PT Sans', sans-serif;
color:#7f8c8d;
line-height:16px;
}
a {
color:#3498db;
}
ul{ border:1px solid #1abc9c;
padding:25px;}

Наследуемые свойства [5/18]
К наследуемым свойствам относятся в первую очередь свойства, определяющие параметры отображения текста:
font-size, font-family, font-style, font-weight, color, text-align, text-transform, text-indent, line-height, letter-spacing, word-spacing, white-space,direction и т. д.
Также к наследуемым свойства относятся list-style, cursor, visibility, border-collapse и некоторые другие. Но они используются значительно реже.
Весь список наследуемых свойств смотрите в стандарте CSS. Значение yes в колонкеInherited?.
Эти свойства можно и нужно задавать через предков, следуя семантике документа.
Например, параметры текста зачастую не меняются в пределах отдельных блоков страницы: меню, основного содержания, информационных панелей. Поэтому общие параметры текста (цвет, размер, гарнитура) обычно указывают в стилях самих блоков.
<!DOCTYPE html>
<html>
<head>
<title>Наследуемые свойства</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="block1">
<p>Строка текста в первом блоке</p>
<p>Еще одна строка текста в первом блоке</p>
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
</div>
<div class="block2">
<p>Строка текста во втором блоке</p>
<p>Еще одна строка текста во втором блоке</p>
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
</div>
</body>
</html>
body{ font-family:'PT Sans', sans-serif;
font-size:12px;
text-align:center;
}
.block1 {
font-style:italic;
}
.block2 {
cursor:pointer;
}
.block2 ul{ list-style-type:square;
}

Ненаследуемые свойства [6/18]
В предыдущем задании мы перечислили основные наследуемые свойства. Все остальные относятся к ненаследуемым. Это параметры позиционирования, размеров, отступов, фона, рамок и т. д.
А именно: background, border, padding, margin, width, height, position и др.
Весь список ненаследуемых свойств смотрите в стандарте CSS. Значение no в колонкеInherited?.
Не наследуются они из соображений здравого смысла. Например: если для какого-либо блока установлен внутренний отступ, автоматически выставлять такой же отступ каждому вложенному элементу нет никакой надобности. Эти параметры чаще всего уникальны для каждого отдельного блока.
<!DOCTYPE html>
<html>
<head>
<title>Ненаследуемые свойства</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="block1">
<p>Строка текста в первом блоке</p>
<p>Еще одна строка текста в первом блоке</p>
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
</div>
<div class="block2">
<p>Строка текста во втором блоке</p>
<p>Еще одна строка текста во втором блоке</p>
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
</div>
</body>
</html>
body{ font-family:'PT Sans', sans-serif;
}
.block1 {
border:1px solid #1ABC9C;
padding:10px;
}
.block2 ul{ background:#3498db;
}
.block2 li{ background:#e74c3c;
}


Принудительное наследование [7/18]
Для каждого свойства может быть задано значение inherit.
Оно означает, что данное свойство принимает такое же значение, как и у родительского элемента. Значение inherit может быть использовано для усиления наследуемых значений, а также в свойствах, которые обычно не наследуются.
Запись выглядит следующим образом:
p{ background:inherit;
}
В данном случае у тегов p свойство background будет таким же, как и у их родительских тегов.
<!DOCTYPE html>
<html>
<head>
<title>Принудительное наследование</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
</head>
<body>
<p>Первый список</p>
<ul class="first-list">
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
<p>Второй список</p>
<ul class="second-list">
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
</body>
</html>
body{ font-family:'PT Sans', sans-serif;
}
ul{ margin: 5px;
padding: 5px;
border: 1px solid #666;
list-style: none;
}
.second-list li {
border:inherit;
margin:inherit;
padding:inherit;
}

Каскадирование [8/18]
CSS расшифровывается как «Cascading Style Sheets» или «каскадные таблицы стилей».
Каскадность обозначает, что к одному и тому же элементу может применяться несколько CSS-правил (наборов CSS-свойств). Среди этих свойств могут быть и конфликтующие между собой. Поэтому существуют инструкции, которые определяют, каким будет финальный набор свойств элемента.
Например, для элемента:
<p class="text" style="color: red;"></p>
CSS-правила существуют как минимум в трёх разных местах:
в подключаемом файле style.css для селекторов p или .text;
в атрибуте style;
в стандартных стилях отображения, встроенных в браузер.
Каскадирование как раз и определяет, какие именно свойства из этих источников применятся к данному абзацу.
Имеется три основные концепции, управляющие порядком, в котором применяются CSS-свойства:
важность;
специфичность;
порядок исходного кода.
Самыми важными для нас являются последние две и подробнее о них мы поговорим отдельно.
<!DOCTYPE html>
<html>
<head>
<title>Каскадирование</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="block1">
<p>Строка текста в первом блоке</p>
<p class="message">Еще одна строка текста в первом блоке</p>
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
</div>
<div class="block2 message">
<p>Строка текста во втором блоке</p>
<p class="message">Еще одна строка текста во втором блоке</p>
</div>
</body>
</html>
body{ font-family:'PT Sans', sans-serif;
}
p {
font-size:11px;
}
.block1 {
color:#1abc9c;
}
.message {
padding:5px;
border:1px solid #95A5A6;
color:#95a5a6;
}

Битва за курочку [9/18]
Перед тем как разбирать сложные правила работы каскадирования, расчёта специфичности и определения приоритетов, потренируемся на котиках.
Разберём пример. Вот HTML-код, в котором есть абзац с двумя классами:
<p class="red blue">Синий или красный?</p>
А вот CSS-код c двумя правилами для этих классов:
.blue{ color:blue;
}
.red{ color:red;
}
Вопрос: какого цвета будет текст абзаца? Какое из CSS-правил приоритетнее?
Ответ: красного цвета, второе правило приоритетнее.
Это происходит потому, что селекторы у правил одинакового типа, и соответсвенно обладают одинаковой специфичностью. В таком случае более высоким приоритетом обладает то правило, которое расположено в CSS-коде ниже. В нашем случае это правило для класса red.
В этой серии заданий вам нельзя менять значения CSS-свойств, но можно изменять селекторы или менять порядок CSS-правил в коде.
<!DOCTYPE html>
<html>
<head>
<title>Битва за курочку</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<link href="/assets/course66/battle.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Кому достанется курочка?</h1>
<div class="battle">
<div class="cat cat-keksik">Кексик</div>
<div class="cat cat-rudolf">Рудольф</div>
<div class="chicken to-keksik to-rudolf"></div>
</div>
</body>
</html>
.to-rudolf{ margin-left:120px;
}
.to-keksik{ margin-left:-120px;
}
<!DOCTYPE html>
<html>
<head>
<title>Битва за курочку. Раунд второй</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<link href="/assets/course66/battle.css" rel="stylesheet" type="text/css">
<style>
div.to-keksik{ /* Кексик закрепляет преимущество */
margin-left:-120px;
}
</style>
</head>
<body>
<h1>Кому достанется курочка?</h1>
<div class="battle">
<div class="cat cat-keksik">Кексик</div>
<div class="cat cat-rudolf">Рудольф</div>
<div class="chicken to-keksik to-rudolf"></div>
</div>
</body>
</html>
div.to-rudolf{ margin-left:120px;
}

Битва за курочку. Раунд третий [11/18]
А теперь посмотрим, как ведут себя контекстные селекторы.
<div class="experiment">
<p class="red blue">Синий или красный?</p>
</p>
И в CSS используем контекстный селектор для второго правила:
p.blue{ color:blue;
}
.experiment .red{ color:red;
}
Какой теперь будет цвет текста?
Кексик и Рудольф помогут разобраться, какой селектор специфичнее.
<!DOCTYPE html>
<html>
<head>
<title>Битва за курочку. Раунд третий</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<link href="/assets/course66/battle.css" rel="stylesheet" type="text/css">
<style>
.battle .to-rudolf{ /* Рудольф вцепился сильнее */
margin-left:120px;
}
</style>
</head>
<body>
<h1>Кому достанется курочка?</h1>
<div class="battle">
<div class="cat cat-keksik">Кексик</div>
<div class="cat cat-rudolf">Рудольф</div>
<div class="chicken to-keksik to-rudolf"></div>
</div>
</body>
</html>
.to-keksik{ margin-left:-120px;
}
.battle>.to-keksik{margin-left:-120px;
}

Битва за курочку. Борьба накаляется [12/18]
Как вы уже знаете, существуют селекторы не только по классам, но и по id. Они начинаются с решётки #.
HTML:
<div id="experiment-1" class="experiment">
<p class="red blue">Синий или красный?</p>
</p>
CSS:
#experiment-1 .blue{ color:blue;
}
.experiment .red{ color:red;
}
Особенность атрибута id заключается в том, что его значение должно быть уникальным в пределах страницы. То есть, может существовать только один тэг с определенным значениемid.
Получается, что селектор по id может выбрать только один элемент. И поэтому он на порядок специфичнее селекторов по тэгам, классам, а также комбинаций этих селекторов.
Кексик и Рудольф демонстрируют его работу.
<!DOCTYPE html>
<html>
<head>
<title>Битва за курочку. Борьба накаляется</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<link href="/assets/course66/battle.css" rel="stylesheet" type="text/css">
<style>
#keks-vs-rudolf .to-keksik{ /* У Кекса железная хватка */
margin-left:-120px;
}
</style>
</head>
<body>
<h1>Кому достанется курочка?</h1>
<div id="keks-vs-rudolf" class="battle">
<div class="cat cat-keksik">Кексик</div>
<div class="cat cat-rudolf">Рудольф</div>
<div class="chicken to-keksik to-rudolf"></div>
</div>
</body>
</html>
.battle .to-rudolf{ margin-left:120px;
}
#keks-vs-rudolf .to-rudolf{ margin-left:120px;
}
Битва за курочку. Запрещённый приём [13/18]
Битва подходит к концу, и чтобы удержать победу, Рудольф решается на запрещённый приём:
Он прописывает стили с помощью атрибута style прямо в тэге курочки.
CSS-правила, которые прописаны в style обладают наивысшим приоритетом. Такой способ задания стилей не приветствуется в профессиональной вёртске сайтов и годится только для создания быстрых прототипов. Поэтому мы и назавали этот приём запрещённым.
Однако существует способ переопределить из подключаемых CSS-файлов даже стили, заданные в атрибуте style. Для этого нужно использовать ключевое слово !important. Оно задаёт CSS-свойству усиленный приоритет. Вот пример:
HTML:
<p style="color:red;" class="blue">Синий или красный?</p>
CSS:
.blue{ color:blue !important;
}
Цвет текста в этом примере будет синим.
При вёрстке не рекомендуется часто использовать !important. По возможность старайтесь обходиться без него.
<!DOCTYPE html>
<html>
<head>
<title>Битва за курочку. Запрещённый приём</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<link href="/assets/course66/battle.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Кому достанется курочка?</h1>
<div id="keks-vs-rudolf" class="battle">
<div class="cat cat-keksik">Кексик</div>
<div class="cat cat-rudolf">Рудольф</div>

<!-- Видя, как победа ускользает из лап,
Рудольф решается на запрещенный приём --> <div style="margin-left:120px;" class="chicken to-keksik to-rudolf"></div>
</div>
</body>
</html>/
* Усилением селектора здесь не обойтись.
Придётся ответить грубостью на грубость */
.to-keksik{ margin-left:-120px !important;
}
Еще одна задачка на специфичность [14/18]
Как вы уже догадались, самым главным механизмом для определения приоритетов стилей является специфичность. Поэтому давайте еще немного потренируемся работать с ней.
Рассмотрим пример: на полу в коробке сидит кот
<div id="floor"><span class="cat-in-box">Кексик</span></div>
Допустим в стилях существуют следующие определения:
span{ background-color:#27ae60; /* Зеленый */
}
div span{
background-color:#2980b9; /* Синий */
}
#floor .cat-in-box{ background-color: #34495e; /* Мокрый асфальт */
}
.cat-in-box{
background-color: #8e44ad; /* Фиолетовый */
}
#floor span{ background-color: #c0392b; /* Красный */
}
div .cat-in-box{
background-color: #e67e22; /* Оранжевый */
}
А теперь вопрос на засыпку: какого цвета будет коробка? Сначала сделайте предположение, а затем проверьте.
Почему именно такой и как это определяется мы расскажем в следующем задании.
<!DOCTYPE html>
<html>
<head>
<title>Еще одна задачка на специфичность</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<link href="/assets/course66/catinbox.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="floor">
<span class="cat-in-box">Кексик</span>
</div>
</body>
</html>
#floor .cat-in-box{ background-color: #34495e; /* Мокрый асфальт */
}
.cat-in-box{
background-color: #8e44ad; /* Фиолетовый */
}

Расчет значения специфичности [15/18]
Вы вдоволь наигрались со специфичностью, а теперь пришло время изучить полные правила её вычисления.
Специфичность селектора разбивается на 4 группы — a, b, c, d:
если стиль встроенный, т.е. определен как style="...", то а=1, иначе a=0;
значение b равно количеству идентификаторов (тех, которые начинаются с #) в селекторе;
значение c равно количеству классов, псевдоклассов и селекторов атрибутов;
значение d равно количеству селекторов типов элементов и псевдо-элементов.
После этого полученное значение приводится к числу (обычно в десятичной системе счисления). Селектор, обладающий большим значением специфичности, обладает и большим приоритетом.
Посчитаем специфичность в нашем примере:
Селектор a,b,c,dЧисло
span0,0,0,1 1
div .cat-in-box0,0,1,1 11
#floor .cat-in-box0,1,1,0 110
div span0,0,0,2 2
.cat-in-box0,0,1,0 10
#floor span0,1,0,1 101
Остюда сразу видно, что в нашем примере самым приоритетным является селектор #floor .cat-in-box.
<!DOCTYPE html>
<html>
<head>
<title>Расчет значения специфичности</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
</head>
<body>
<ol>
<li>
<p>Рассчитайте значение специфичности для селектора:</p>
<pre>.text li.error span{}</pre>
<p>Ответ <input type="text" name="exercise_1"></p>
</li>
<li>
<p>Рассчитайте значение специфичности для селектора:</p>
<pre>#wrapper .text #message p a{}</pre>
<p>Ответ <input type="text" name="exercise_2"></p>
</li>
<li>
<p>Рассчитайте значение специфичности для селектора:</p>
<pre>#main .content a:hover{}</pre>
<p>Ответ <input type="text" name="exercise_3"></p>
</li>
</ol>
</body>
</html>
body{ font-family:'PT Sans', sans-serif;
}
li{ margin-bottom:30px;
}
pre{ max-width:350px;
padding:5px 10px;
background:#F7F7F9;
border:1px solid #E1E1E8;
border-radius:3px;
}
input[type="text"]{
width:50px;
padding:3px;
margin-left:5px;
font-family:'PT Sans', sans-serif;
vertical-align: middle;
border:1px solid #ccc;
border-radius:5px;
}

Еще задачка на порядок кода [16/18]
Здесь все просто.
Если два CSS-правила применяются к одному и тому же элементу и имеют одинаковую специфичность, то более приоритетным будет то правило, которое появится в коде позже другого.
С этим фактом вы уже познакомились на битве за курочку. А сейчас просто закрепим этот материал, выполнив несколько простейших головоломок на изменение порядка кода.
<!DOCTYPE html>
<html>
<head>
<title>Еще задачка на порядок кода</title>
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/assets/course66/catinbox.css">
</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>
.box{background-color: #bdc3c7; /* Серый */
}
.cat-rudolf {
background-color: #3498db; /* Синий */
}
.cat-keksik {
background-color: #e74c3c; /* Красный */
}
.cat-snezhok {
background-color: #2ecc71; /* Зеленый */
Перекрестное наследование [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="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
</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>
body{ padding:10px;
font-family:'PT Sans', sans-serif;
}
.cats{ position:relative;
width:390px;
padding:20px;
margin:20px auto;
text-align:center;
box-shadow:0 0 3px #999;
}
.cats .cat{ display: inline-block;
width:100px;
height:100px;
margin:10px;
padding:10px;
text-align:center;
color: #fff;
background-repeat:no-repeat;
background-position: 50% 80%;
box-shadow:0 0 3px #999;
border-radius:5px;
}
.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');
}

Приложенные файлы

  • docx 11020284
    Размер файла: 3 MB Загрузок: 0

Добавить комментарий