{
padding: 5px;
border: 1px solid #95a5a6;
color: #95a5a6;
}
</style>
</head>
<body>
< div class =" block 1">
< 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 >
Битва за курочку [9/18]
Перед тем как разбирать сложные правила работы каскадирования, расчёта специфичности и определения приоритетов, потренируемся на котиках.
Разберём пример. Вот HTML-код, в котором есть абзац с двумя классами:
<p class="red blue">Синий или красный?</p>
А вот CSS-код c двумя правилами для этих классов:
.blue {
color: blue;
}
.red {
color: red;
}
Вопрос: какого цвета будет текст абзаца? Какое из CSS-правил приоритетнее?
Ответ: красного цвета, второе правило приоритетнее.
Это происходит потому, что селекторы у правил одинакового типа, и соответственно обладают одинаковой специфичностью. В таком случае более высоким приоритетом обладает то правило, которое расположено в CSS-коде ниже. В нашем случае это правило для класса red.
В этой серии заданий вам нельзя менять значения CSS-свойств, но можно изменять селекторы или менять порядок CSS-правил в коде.
Битва за курочку. Раунд второй [10/18]
Чуть более сложный пример. Тот же HTML:
<p class="red blue">Синий или красный?</p>
Немного другой CSS:
p.blue {
color: blue;
}
.red {
color: red;
}
В этом случае текст абзаца будет синим. Происходит это потому, что селектор p.blue более специфичный, чем селектор.red.
Простое объяснение специфичности звучит так:
Чем меньшее количество элементов потенциально может выбрать селектор, тем он специфичнее.
В нашем примере селектор.red выберет все теги с нужным классом, а селектор p.blue выберет только абзацы с нужным классом.
Заметьте, что в этом задании одно из CSS-правил вынесено в заблокированный HTML-код, а вам нужно победить его, усилив другое CSS-правило.
Файл css4-34.html
<!DOCTYPE html>
< html >
< head >
< title >Битва за курочку. Раунд второй</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
< style >
/* Усильте селектор этого правила, чтобы вырвать курочку */
div.chicken.to-rudolf {
margin-left: 120px;
}
</style>
<link href="https://htmlacademy.ru/assets/course66/battle.css" rel="stylesheet" type="text/css">
<style>
div.to-keksik { /* Кексик закрепляет преимущество */
margin-left:120px;
}
</style>
</head>
< body >
< h 1>Кому достанется курочка?</ h 1>
<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>
Битва за курочку. Раунд третий [11/18]
А теперь посмотрим, как ведут себя контекстные селекторы.
<div class="experiment">
<p class="red blue">Синий или красный?</p>
</div>
И в CSS используем контекстный селектор для второго правила:
p.blue {
color: blue;
}
.experiment.red {
color: red;
}
Какой теперь будет цвет текста?
Кексик и Рудольф помогут разобраться, какой селектор специфичнее.
Файл css4-35.html
<!DOCTYPE html>
<html>
<head>
<title>Битва за курочку. Раунд третий</title>
<meta charset="utf-8">
<link href="https://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;
}
.battle.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>
Битва за курочку. Борьба накаляется [12/18]
Как вы уже знаете, существуют селекторы не только по классам, но и по id. Они начинаются с решётки #.
HTML:
<div id="experiment-1" class="experiment">
<p class="red blue">Синий или красный?</p>
</div>
CSS:
#experiment-1.blue {
color: blue;
}
.experiment.red {
color: red;
}
Особенность атрибута id заключается в том, что его значение должно быть уникальным в пределах страницы. То есть, может существовать только один тег с определенным значением id.
Получается, что селектор по id может выбрать только один элемент. И поэтому он на порядок специфичнее селекторов по тегам, классам, а также комбинаций этих селекторов.
Кексик и Рудольф демонстрируют его работу.
Файл css4-36.html
<!DOCTYPE html>
<html>
<head>
<title>Битва за курочку. Борьба накаляется</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<link href="https://htmlacademy.ru/assets/course66/battle.css" rel="stylesheet" type="text/css">
<style>
#keks-vs-rudolf.to-keksik { /* У Кекса железная хватка */
margin-left:120px;
}
#keks-vs-rudolf.to-rudolf { /* У Кекса железная хватка */
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>
Битва за курочку. Запрещённый приём [13/18]
Битва подходит к концу, и чтобы удержать победу, Рудольф решается на запрещённый приём: он прописывает стили с помощью атрибута style прямо в теге курочки.
CSS-правила, которые прописаны в style обладают наивысшим приоритетом. Такой способ задания стилей не приветствуется в профессиональной вёрстке сайтов и годится только для создания быстрых прототипов. Поэтому мы и назвали этот приём запрещённым.
Однако существует способ переопределить из подключаемых CSS-файлов даже стили, заданные в атрибуте style. Для этого нужно использовать ключевое слово!important. Оно задаёт CSS-свойству усиленный приоритет. Вот пример:
HTML:
<p style="color: red;" class="blue">Синий или красный?</p>
CSS:
.blue {
color: blue!important;
}
Цвет текста в этом примере будет синим.
При вёрстке не рекомендуется часто использовать!important. По возможности старайтесь обходиться без него.
Файл css4-37.html
<!DOCTYPE html>
< html >
< head >
< title >Битва за курочку. Запрещённый приём </title>
<meta charset="utf-8">
<link href="https://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>
.to-keksik {
margin-left:120px!important;
}
</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 style="margin-left: 120px;" class="chicken to-keksik to-rudolf"></div>
</div>
</body>
</html>
Еще одна задачка на специфичность [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; /* Оранжевый */
}
А теперь вопрос на засыпку: какого цвета будет коробка? Сначала сделайте предположение, а затем проверьте.
Почему именно такой и как это определяется мы расскажем в следующем задании.
Правильное решение выделено красным.
Расчет значения специфичности [15/18]
Вы вдоволь наигрались со специфичностью, а теперь пришло время изучить полные правила её вычисления.
Специфичность селектора разбивается на 4 группы — a, b, c, d:
· если стиль встроенный, т.е. определен как style="...", то а=1, иначе a=0;
· значение b равно количеству идентификаторов (тех, которые начинаются с #) в селекторе;
· значение c равно количеству классов, псевдоклассов и селекторов атрибутов;
· значение d равно количеству селекторов типов элементов и псевдо-элементов.
После этого полученное значение приводится к числу (обычно в десятичной системе счисления). Селектор, обладающий большим значением специфичности, обладает и большим приоритетом.
Посчитаем специфичность в нашем примере:
| Селектор | a (style), b(#), c(:hover,.class), d(тэг, псевдо-элемент) | Число |
| span | 0, 0, 0, 1 | 1 |
| div.cat-in-box | 0, 0, 1, 1 | 11 |
| #floor.cat-in-box | 0, 1, 1, 0 | 110 |
| div span | 0, 0, 0, 2 | 2 |
| .cat-in-box | 0, 0, 1, 0 | 10 |
| #floor span | 0, 1, 0, 1 | 101 |
| .text li.error span {} | 0, 0, 2, 2 | 22 |
| #wrapper.text #message p a {} | 0, 2, 1,2 | 212 |
| #main.content a:hover {} | 0, 1(#main), 2(pre,.content), 1(a:hover) | 121 |
Остюда сразу видно, что в нашем примере самым приоритетным является селектор #floor.cat-in-box.
Ещё задачка на порядок кода [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]
При создании стилей для сходных по внешнему виду или функциональности элементов, которые могут использоваться на странице неоднократно, очень удобно пользоваться перекрёстным наследованием.
Приём этот заключается в следующем:
1. создается базовый стиль для таких элементов;
2. определяются вспомогательные стили, которые применяются к элементам по мере надобности;
3. элемент наследует базовый стиль и один или несколько вспомогательных.
Пример:
На странице используются кнопки разного назначения: для отправки форм, для сброса информации в полях формы, как элементы навигации и т.д.
Можно вынести общее оформление (размеры, отступы и т.д.) для всех кнопок в отдельное 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
Испытание: взломанный котопрофайл [18/18]
У Кексика есть брат, которого зовут Феликс. Феликс толстоватый, очень мягкий и нерешительный тюфячок.
Неудивительно, что после эпичной победы Кексика в Битве за курочку его враги решили отыграться именно на Феликсе. Рудольф оказался злопамятным котом с серьёзными связями и смог найти злобных котохакеров, которые взломали и испортили личный профиль Феликса.
К счастью, до CSS-кода хакеры не добрались и напортачили только в HTML, а Кексик дружит с одним начинающим, но хорошим верстальщиком.
Помогите Феликсу исправить профиль. Верните испорченные стили обратно, увеличив специфичность и приоритетность испорченных CSS-правил.
Файл css4-39.html
Курс «Оформление текста, часть 1»
Главный текстовый тег — span [1/16]
При оформлении текста с помощью css чаще всего используют тег <span>. Он обозначает «просто текстовый блок». То есть особенного собственного смысла он не имеет. Также этот тег никак не изменяет отображение текста.
Однако, дополнительный смысл данному тегу добавляют с помощью классов. Например:
<span class="error"></span><span class="ok"></span>А уже для класса с помощью css задают стили и тем самым изменяют оформление.
Свойство font-size: задаем размер шрифта [2/16]
Cвойство font-size задает размер шрифта.
Размер шрифта лучше всего задавать в em — относительной единице измерения. 1em обычно равен длине буквы M в данном шрифте.
Другие единицы измерения для задания размеров шрифта:
· Пиксели: 20px
· Пункты: 15pt
· Проценты: 80%
Пиксели и пункты — это абсолютные единицы измерения, а проценты — относительные.
Также размер шрифта можно задавать с помощью ключевых слов: small, large и т.д. Но их обычно не используют.
Свойство font-weight: толщина начертания [3/16]
Полужирность текста можно задавать с помощью свойства font-weight, которое имеет два основных значения:
1. normal — обычное начертание;
2. bold — полужирное начертание.
На самом деле это свойство имеет много значений: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900. Эти значения задают степень толщины шрифта, от самого тонкого, до самого толстого.
Но большинство браузеров всё равно умеют отображать только два варианта толщины: обычный и полужирный. Поэтому и остальные значения свойства обычно не используют.
Свойство font-style: курсив [4/16]
Начертание текста можно задавать с помощью свойства font-style. Его основные значения:
1. normal — обычное начертание;
2. italic — курсивное начертание.
Это свойство имеет и другие значения, но их почти не используют.
Свойство font-family: шрифт [5/16]
Задать семейство шрифта можно с помощью свойства font-family. Можно задавать конкретное название шрифта: "Times New Roman". А можно задавать желаемый тип шрифта, например:
· serif — шрифт с засечками;
· sans-serif — шрифт без засечек.
Есть и другие типы, но они используются реже.
Обычно в качестве значения свойства задают список шрифтов, перечисляя их через запятую. В начале списка располагают самый редкий шрифт, затем похожий, но более распространенный, а в самом конце списка — желаемый тип шрифта. Пример:
body {
font-family: "PT Sans", "Arial", serif;
}
Браузер проходит по списку слева направо и использует первый найденный в системе шрифт.
Свойство color: цвет текста [6/16]
Цвет текста задаётся с помощью свойства color. Значение цвета можно задавать разными способами:
· Шестнадцатеричным кодом, например #FF9900.
· Ключевым словом: red.
· В RGB-формате: rgb(255, 255, 0).
Чаще всего цвет задают в шестнадцатеричном формате.
Свойство text-decoration: подчеркивание и другие эффекты [7/16]
Дополнительное оформление текста можно задать с помощью свойства text-decoration. Его значения:
1. underline — подчеркивание;
2. line-through — зачеркивание;
3. overline — черта сверху;
4. none — убирает вышеперечисленные эффекты.
К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел.
Декоративное подчеркивание [8/16]
Вы, наверное, уже много раз видели красивое пунктирное подчеркивание. Его используют для оформления ссылок и других динамических элементов. Технология следующая:
1. Убираем обычное подчеркивание с помощью text-decoration.
2. Задаем нужный цвет текста с помощью color.
3. Добавляем декоративное подчеркивание с помощью свойства border-bottom.
Также можно при наведении курсора скрывать такое подчеркивание с помощью псевдокласса:hover.
Задаем регистр символов с помощью text-transform [9/16]
С помощью css можно управлять даже регистром символов: делать буквы строчными или прописными. Делается это с помощью свойства text-transform. Его значения:
1. lowercase — все строчные;
2. uppercase — все прописные;
3. capitalize — каждое слово начинается с прописной;
4. none — отменяет изменение регистра.
Управляем пробелами: white-space [10/16]
Как вы уже знаете, браузер игнорирует множественные пробелы и переносы строк в HTML-коде. Изменить это поведение можно с помощью тега <pre>.
Однако, с помощью CSS управлять пробелами и переносами можно более гибко. За э
то отвечает свойство white-space, значения которого:
· nowrap — отображает весь текст одной строкой без переносов;
· pre — сохраняет пробелы и переносы как в исходном коде аналогично тегу <pre>;
· pre-wrap — работает как значение pre, но добавляет автоматические переносы, если текст не помещается в контейнер;
· normal — режим по умолчанию.
Файл css40.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Управляем пробелами: white-space</title>
<style>
h1 {
font-size: 24px;
white-space: pre-wrap;
}
p.nowrap {
white-space: nowrap;
}
p.like-pre {
white-space: pre;
}
</style>
</head>
<body>
<h1>Так возник Progressive Enhancement</h1>
<p class="nowrap">Короче говоря, такая халтура с отказоустойчивостью порядком надоела «правильным» разработчикам, надо было что-то делать.</p>
<p class="like-pre">
Progressive Enhancement возник
как реакция на плохой Graceful Degradation.
Теперь действительно хорошие
разработчики и дизайнеры
могут делать Progressive Enhancement,
а плохие не могут,
так как это сложнее и трудозатратнее.
Заодно новый подход впитал в себя
все лучшие практики
из Graceful Degradation.
</p>
</body>
</html>
Горизонтальное выравнивание текста: text-align[11/16]
Выравнивание текста по горизонтали задается с помощью свойства text-align. Его вы ужеиспользовали в курсе про таблицы. Значения свойства:
1. left — выравнивание по левому краю;
2. right — по правому краю;
3. center — по центру;
4. justify — по ширине.
Вертикальное выравнивание: vertical-align [12/16]
Выравниванием текста по вертикали можно управлять с помощью свойства vertical-align. Его действие хорошо заметно в ячейках таблицы. Внутри текстовой строки «работа» этого свойства заметна, если в ней есть фрагменты разного размера.
У данного свойства много значений, но самые часто используемые:
1. top — выравнивание по верхнему краю строки;
2. middle — по середине;
3. bottom — по нижнему краю;
4. baseline — по базовой линии (значение по умолчанию).
Верхние и нижние индексы на CSS [13/16]
Тэги
С помощью CSS можно имитировать теги <sub> и <sup>, которые применяются для создания нижних и верхних индексов. Делается это так:
Значения
1. Используем свойство vertical-align со значением sub или super.
2. Немного уменьшаем размер шрифта с помощью font-size.
Свойство line-height: управляем высотой строки[14/16]
Высотой строки или, правильнее, межстрочным интервалом можно управлять с помощью свойства line-height. Значение этого свойства можно задавать следующими способами:
1. Множителем, например 1.5, 2.
2. В процентах: 150%.
3. С помощью любых других единиц измерения CSS: 12px, 2em.
4. Ключевым словом normal, которое задает автоматический расчет высоты строки.
Предпочтительнее задавать межстрочный интервал либо множителем, либо в относительных единицах измерения.
Вертикальный ритм текста [15/16]
В веб-дизайне существует понятие «вертикальный ритм текста». Оно достаточно сложное и мы не будем глубоко в него вдаваться. Отметим лишь, что хороший вертикальный ритм улучшает восприятие текста.
Чтобы сохранить вертикальный ритм и хорошую читабельность текста при любом размере шрифта, нужно задавать размеры шрифта, межстрочный интервал и вертикальные отступы между заголовками и абзацами в относительных единицах.
Тогда, как бы пользователь ни изменял размер шрифта, ваш текст останется читабельным и удобным для восприятия. В этом задании вы потренируетесь использовать относительные единицы измерения.
Дополнительные материалы для тех, кто заинтересовался вертикальным ритмом:О вёрстке вертикального ритма, Compose to a Vertical Rhythm, Создание вертикального ритма на сайте, Генератор вертикального ритма.
Файл css41.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вертикальный ритм текста</title>
<style>
body {
font-size: 16px;
line-height: 1.3;
}
h1 {
margin-top: 0.7em;
font-size: 1.3em;
}
p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
</style>
</head>
<body>
<h1>Вертикальный ритм</h1>
<p>В веб-дизайне существует понятие «вертикальный ритм текста». Оно достаточно сложное и мы не будем глубоко в него вдаваться. Отметим лишь, что хороший вертикальный ритм улучшает восприятие текста.</p>
<h1>Правило относительных размеров</h1>
<p>Чтобы сохранить вертикальный ритм и хорошую читабельность текста при любом размере шрифта, нужно задавать размеры шрифта, межстрочный интервал и вертикальные отступы между заголовками и абзацами в относительных единицах.</p>
<p>Тогда, как бы пользователь ни изменял размер шрифта, ваш текст останется читабельным и удобным для восприятия. В этом задании вы потренируетесь использовать относительные единицы измерения.</p>
</body>
</html>
Испытание: рецепт на CSS [16/16]
В последнем испытании курса «Разметка текста с помощью HTML» вам нужно было разметить рецепт каши с помощью подходящих тегов.
В этом испытании вам нужно оформить этот же рецепт. Однако, задача изменилась. Исходный HTML-код уже полностью готов и заблокирован для редактирования. Вам нужно применить изученные в этом курсе CSS-свойства к соответствующим элементам <span>.
Файл css42.html (Рецепт)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пшенная каша с тыквой</title>
<style>
body {
width: 260px;
margin: 0;
padding: 0 10px;
font-family: "Times New Roman", serif;
font-size:16px;
line-height: 1.2;
}
h1 {
font-size: 18px;
}
span.sub {
vertical-align: sub;
font-size: 12px;
}
span.sup {
vertical-align: super;
font-size: 12px;
}
span.del {
text-decoration: line-through;
}
span.underline {
text-decoration: underline;
}
span.italic {
font-style: italic;
}
</style>
</head>
<body>
<h1>Пшенная каша с тыквой</h1>
<ol>
<li>Пшено, 1 стакан</li>
<li>Вода H<span class="sub">2</span>O или AquaLife<span class="sup">®</span>, 2 стакана</li>
<li>Молоко, <span class="del">1,5 стакана</span> 2 стакана</li>
<li>Масло сливочное, 3 ст.л.</li>
<li>Тыква, около 300г</li>
<li>Соль, по вкусу</li>
<li><span class="underline">Сахар демерара, посыпать сверху</span></li>
</ol>
<hr>
<span class="italic">Примечания:</span><br>
Пшено необходимо перебрать<br>
Тыкву нарезать кубиками 1х1 см<br>
Кашу перемешивать не надо<br>
</body>
</html>
Параметры фона
Cвойство background-color [1/16]
Цвет фона можно задать с помощью CSS-свойства background-color.
Напомним, что цвета в CSS можно задавать в разных форматах: в шестнадцатеричном (или HEX), в RGB или RGBA, а также с помощью цветовых констант, таких как red или green.
Более подробно о цветах можно прочитать на странице W3C HTML Colors или в переводной статье о теории цвета на Хабре.
Вот пример использования свойства:
selector { background-color: #ff0000;}
Файл css43.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title> Свойство background-color</title>
<style>
body {
padding: 10px;
text-align: center;
}
.block {
display: inline-block;
width: 192px;
height: 192px;
margin: 5px;
border-radius: 5px;
box-shadow: 1px 1px 3px #999999;
}
.block1 {
background-color: #2ecc71;
}
.block2 {
background-color: #3498db;
}
.block3 {
background-color: #e74c3c;
}
.block4 {
background-color:#e67e22;
}
</style>
</head>
<body>
<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
<div class="block block4"></div>
</body>
</html>
Свойство background-image [2/16]
Фоновое изображение можно задать с помощью CSS-свойства background-image. Делается это так:
selector { background-image: url("адрес-картинки");}Адрес картинки обязательно заключается внутрь url("..."). Адреса фоновых картинок такие же, как и адреса обычных картинок, которые вы задавали в курсе про ссылки и изображения.
Элементу можно одновременно задавать и цвет фона, и фоновую картинку. В этом случае картинка будет отображаться поверх фонового цвета.
Файл css44.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title> Свойство background-image</title>
<style>
body {
padding: 10px;
text-align: center;
}
.block {
display: inline-block;
width: 192px;
height: 192px;
margin: 5px;
border-radius: 5px;
box-shadow: 1px 1px 3px #999999;
}
.block1 {
background-color: #2ecc71;
background-image: url("https://htmlacademy.ru/assets/course13/cat_box.png");
}
.block2 {
background-color: #3498db;
background-image: url("https://htmlacademy.ru//assets/course13/cat_fish.png")
}
.block3 {
background-color: #e74c3c;
background-image: url("https://htmlacademy.ru//assets/course13/cat_drunk.png")
}
.block4 {
background-color: #e67e22;
background-image: url("https://htmlacademy.ru//assets/course13/cat_tied.png")
}
</style>
</head>
<body>
<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
<div class="block block4"></div>
</body>
</html>
Свойство background-repeat [3/16]
По умолчанию фоновое изображение повторяется. Это хорошо заметно, когда оно меньше блока. Управлять этим поведением можно с помощью CSS-свойства background-repeat. У свойства 4 значения:
· repeat — повторять во всех направлениях. Это значение по умолчанию.
· repeat-x — повторять только по горизонтали.
· repeat-y — повторять только по вертикали.
· no-repeat — не повторять.
Файл css45.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title> Свойство background-repeat</title>
<style>
body {
padding: 10px;
text-align: center;
}
.block {
display: inline-block;
width: 192px;
height: 192px;
margin: 5px;
border-radius: 5px;
box-shadow: 1px 1px 3px #999999;
}
.block1 {
background-color: #2ecc71;
background-image: url("https://htmlacademy.ru/assets/course13/cat_box.png");
background-repeat: repeat-x;
}
.block2 {
background-color: #3498db;
background-image: url("https://htmlacademy.ru/assets/course13/cat_fish.png");
background-repeat: repeat-y;
}
.block3 {
background-color: #e74c3c;
background-image: url("https://htmlacademy.ru/assets/course13/cat_drunk.png");
background-repeat: no-repeat;
}
.block4 {
background-color: #e67e22;
background-image: url("https://htmlacademy.ru/assets/course13/cat_tied.png");
background-repeat: repeat;
}
</style>
</head>
<body>
<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
<div class="block block4"></div>
</body>
</html>
Свойство background-position [4/16]
Cвойство background-position управляет расположением фонового изображения. Значение свойства состоит из двух частей, разделенных пробелом: x y.
x задаёт расположение по горизонтали, а y по вертикали.
В качестве значения x можно использовать ключевые слова left, center, right, значения в процентах и в пикселях.
В качестве значения y можно использовать ключевые слова top, center, bottom, значения в процентах и в пикселях.
Примеры использования свойства:
background-position: 50% 50%;
background-position: right bottom;
background-position: 50px 100px;
background-position: 0 100%;
background-position: left bottom;
Так сработают примеры:
1. картинка будет по центру;
2. правый нижний угол;
3. отступ 50px от левого края и 100px от верхнего;
4. 
левый нижний угол;
Файл css46.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title> Свойство background-position</title>
<style>
body {
padding: 10px;
text-align: center;
}
.block {
display: inline-block;
width: 192px;
height: 192px;
margin: 5px;
border-radius: 5px;
box-shadow: 1px 1px 3px #999999;
}
.block1 {
background-color: #2ecc71;
background-image: url("https://htmlacademy.ru/assets/course13/cat_box.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}
.block2 {
background-color: #3498db;
background-image: url("https://htmlacademy.ru/assets/course13/cat_fish.png");
background-repeat: no-repeat;
background-position: 100% 0;
}
.block3 {
background-color: #e74c3c;
background-image: url("https://htmlacademy.ru/assets/course13/cat_drunk.png");
background-repeat: no-repeat;
background-position: 0 100%;
}
.block4 {
background-color: #e67e22;
background-image: url("https://htmlacademy.ru/assets/course13/cat_tied.png");
background-repeat: no-repeat;
background-position: 100% 100%;
}
</style>
</head>
<body>
<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
<div class="block block4"></div>
</body>
</html>
Ещё немного background-position [5/16]
Когда фоновое изображение больше блока, то оно обрезается. Управлять тем, какую часть изображения будет видно, также можно с помощью свойства background-position.
Иногда для этого удобно использовать относительные значения (проценты), а иногда абсолютные (пиксели).
Кстати, можно использовать не только положительные, но и отрицательные значения. А также комбинировать пиксели и проценты.
Файл css47.html
<! DOCTYPE html >
<html lang="ru">
<head>
<meta charset="utf-8">
<title> Свойство background-position</title>
<style>
body {
padding: 10px;
text-align: center;
}
.block {
display: inline-block;
width: 120px;
height: 120px;
margin: 5px;
background-color: #34495e;
background-image: url("https://htmlacademy.ru/assets/course13/logo.png");
background-repeat: no-repeat;
border-radius: 5px;
box-shadow: 1px 1px 3px #999999;
}
.block1 {
background-position: 35px 25px;
}
.block2 {
background-position:95px 25px;
}
.block3 {
background-position:45px 50%;
}
.block4 {
background-position: 100% 50%;
}
</style>
</head>
<body>
<div class="block block1"></div>
<div class="block block2"></div>
<br>
<div class="block block3"></div>
<div class="block block4"></div>
</body>
</html>
Свойство background-attachment [6/16]
Обычно фоновое изображение прокручивается вместе с содержимым блока. Это хорошо видно в мини-браузере. Прокрутите окно вниз и увидите, что фон поднимется наверх.
С помощью свойства background-attachment можно зафиксировать фон на месте и он не будет перемещаться при прокручивании.
Значение свойства:
· scroll — фон прокручивается вместе с содержимым. Это значение по умолчанию.
· fixed — фон не прокручивается, зафиксирован на одном месте.
Это тот случай, когда легче показать, чем объяснять: выполняйте задание и смотрите, как изменяется поведение фона при прокрутке.
Файл css48.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title> Свойство background-attachment</title>
<style>
body {
background-color: black;
background-image: url("https://htmlacademy.ru/assets/course13/moon.jpg");
background-position: 50% 0;
background-repeat: no-repeat;
background-attachment: fixed;/*!!!!!!!!!!!!!!!!!!!!!!*/
}
.block {
width: 192px;
height: 256px;
margin: 20px auto;
background-color: #34495e;
background-repeat: no-repeat;
background-position: 50% 50%;
border-radius: 5px;
}
.block:nth-child(1) {
background-image: url("https://htmlacademy.ru/assets/course13/cat_clean.png");
}
.block:nth-child(2) {
background-image: url("https://htmlacademy.ru/assets/course13/cat_fight.png");
}
.block:nth-child(3) {
background-image: url("https://htmlacademy.ru/assets/course13/cat_hiss.png");
}
.block:nth-child(4) {
background-image: url("https://htmlacademy.ru/assets/course13/cat_poo.png");
}
</style>
</head>
<body>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</body>
</html>
Курс «Фоны, часть 1»
Свойство background [7/16]
Фон элемента можно задавать с помощью отдельных свойств: background-color,background-image и т.д. Получается довольно громоздкая запись.
Также задать фон можно с помощью сокращенного свойства background, в котором через пробел перечисляются его компоненты:
background: [bc] [bi] [br] [bp] [ba];/* Обозначения:[bc] — background-color[bi] — background-image[br] — background-repeat[bp] — background-position[ba] — background-attachment*/Если какой-то компонент не указан, то берется значение по умолчанию. Ниже примеры.
background: #e74c3c;background: url("img.png") no-repeat;background: url("img.png") 10px 20px;В первом примере просто задан цвет фона.
Во втором примере задано не повторяющееся фоновое изображение, а также по умолчанию прозрачный цвет фона, расположение в левом верхнем углу.
В третьем примере задано фоновое изображение и его расположение, а также по умолчанию прозрачный цвет фона и режим повторения во все стороны.
Файл css49.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title> Свойство background</title>
<style>
body {
padding: 20px;
font-size: 20px;
font-family: "Tahoma", sans-serif;
}
.block {
width: 140px;
margin: 25px auto;
padding: 25px 0;
padding-left: 90px;
color: white;
border-radius: 5px;
box-shadow: 1px 1px 3px #999999;
}
.block1 {
background: none;
background-color: #e74c3c;
background-image: url("https://htmlacademy.ru/assets/course13/cat_eyes.png");
background-repeat: no-repeat;
background-position: 10px 5px;
}
.block2 {
background: none;
background-color: #2980b9;
background-image: url("https://htmlacademy.ru/assets/course13/cat_fish.png");
background-repeat: no-repeat;
background-position: 10px 5px;
}
</style>
</head>
<body>
<div class="block block1">
Гипнокот
</div>
<div class="block block2">
Рыбокот
</div>
</body>
</html>
Файл css50.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Испытание: котокомикс</title>
<style>
body {
width: 300px;
margin: 0;
padding: 0;
padding-top: 15px;
font-size: 0;
text-align: center;
background: white;
}
.block {
display: inline-block;
width: 90px;
height: 90px;
margin-bottom: 1px;
margin-right: 1px;
background-color: black;
}
.block1 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_poo.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}
.block2 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_poo.png");
background-repeat: no-repeat;
background-color: #f1c40f;
background-position: 50% 50%;
}
.block3 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_hiss.png");
background-repeat: no-repeat;
background-color: #e74c3c;
background-position: 50% 50%;
}
.block4 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_walk.png");
background-repeat: no-repeat;
background-color: #3498db;
background-position: 60px 50%;
}
.block5 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_walk.png");
background-repeat: no-repeat;
background-color: #3498db;
background-position:30px 50%;
}
.block6 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_slippers.png");
background-repeat: no-repeat;
background-color: #27ae60;
background-position: 50% 50%;
}
.block7 {
background-color: #bdc3c7;
}
.block8 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_grumpy.png");
background-repeat: no-repeat;
background-color: #95a5a6;
background-position: 40px 50%;
}
.block9 {
background-image: url("https://htmlacademy.ru/assets/course13/cat_grumpy.png");
background-repeat: no-repeat;
background-color: #bdc3c7;
background-position:50px 50%;
}
/*
Используемые изображения:
/assets/course13/cat_poo.png
/assets/course13/cat_hiss.png
/assets/course13/cat_walk.png
/assets/course13/cat_slippers.png
/assets/course13/cat_grumpy.png
*/
</style>
</head>
<body>
<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
<div class="block block4"></div>
<div class="block block5"></div>
<div class="block block6"></div>
<div class="block block7"></div>
<div class="block block8"></div>
<div class="block block9"></div>
</body>
</html>
/* вариант*/
<!--style>
body {
width: 300px;
margin: 0;
padding: 0;
padding-top: 15px;
font-size: 0;
text-align: center;
background: white;
}
.block {
display: inline-block;
width: 90px;
height: 90px;
margin-bottom: 1px;
margin-right: 1px;
background-color: black;
}
.block1 {
background: #000000 url(/assets/course13/cat_poo.png) no-repeat center center;
}
.block2 {
background: #f1c40f url(/assets/course13/cat_poo.png) no-repeat center center;
}
.block3 {
background: #e74c3c url(/assets/course13/cat_hiss.png) no-repeat center center;
}
.block4 {
background: #3498db url(/assets/course13/cat_walk.png) no-repeat 230% center;
}
.block5 {
background: #3498db url(/assets/course13/cat_walk.png) no-repeat100% center;
}
.block6 {
background: #27ae60 url(/assets/course13/cat_slippers.png) no-repeat center center;
}
.block7 {
background: #bdc3c7
}
.block8 {
background: #95a5a6 url(/assets/course13/cat_grumpy.png) no-repeat 150% center
}
.block9 {
background: #bdc3c7 url(/assets/course13/cat_grumpy.png) no-repeat190% center
}
</style-->
Курс «Фоны, часть 1»
Формат JPEG [9/16]
В последующих нескольких заданиях мы рассмотрим наиболее распространенные форматы изображений для веб. И разберемся, где и как их лучше использовать при вёрстке.
Первый формат — JPEG. Этот формат хорошо подходит для фотографий и картин и плохо подходит для схем, чертежей, текста и графики.
При сохранении изображения в формат JPEG можно задавать уровень качества. Это позволяет добиваться снижения веса файла при достаточно хорошем качестве изображения.
Однако, если установить уровень качества слишком низким, то появятся артефакты.
JPEG не поддерживает прозрачность, поэтому изображение в формате JPEG — это всегда прямоугольник. Можно имитировать прозрачность, если в графическом редакторе задать изображению такой же цвет фона, как и у контейнера фотографии.
Используйте JPEG для размещения фото с наилучшим соотношением «размер файла»/«качество».
Курс «Фоны, часть 1»
Формат PNG-8 [10/16]
На самом деле, формат PNG один. А PNG-8 и PNG-24 это его подтипы, а также режимы сохранения в Photoshop. Мы не будем глубоко вдаваться в детали, а разберем типовые особенности.
PNG-8 по характеристикам схож с форматом GIF. Он хорошо походит для схем, чертежей, графиков и текста, а также изображений, где мало цветов. Максимальное количество цветов — 256.
PNG-8, как и GIF, поддерживает прозрачность. Это означает, что пиксель либо полностью прозрачный, либо полностью непрозрачный.
Если нужно сделать изображение с прозрачностью, то лучше задавать обводку такую же, как цвет фона. В фотошопе при сохранении обводка называется «Mate». Без обводки картинка будет выглядеть «обкусанной». Если фон неоднородный (градиент, 3 блок в мини-браузере), то PNG-8 с обводкой будет смотреться плохо.
Чем PNG лучше GIF? PNG более современный и свободный формат, а GIF более старый и проприетарный (за его использование могут потребовать деньги). Уровень сжатия, качество и другие характеристики примерно одинаковые, поэтому лучше всегда использовать PNG.
Формат PNG-24 [11/16]
PNG-24 — отличнейший формат. Он хорошо подходит и для схем-чертежей-графиков-текста, и для сложных многоцветных изображений, т.к. поддерживает практически неограниченное количество цветов.
На фотографиях обычно он уступает JPEG по размеру файла, но превосходит по качеству изображения. Но иногда разница по размеру файла настолько некритична, что можно использовать PNG.
Самый главный плюс PNG-24 — это полноценная поддержка полупрозрачности, которой нет ни в одном другом формате. Поэтому в веб-разработке при вёрстке сложных фонов, графических элементов со сложными тенями и так далее альтернативы PNG-24 просто нет.
Давным-давно в IE была проблема с поддержкой полупрозрачных PNG, но в более поздних версиях IE (8+), таких проблем нет.
Сравните котика-PNG-8 с обводкой из предыдущего задания и котика-PNG-24 из этого задания. Особенно то, как выглядят их края на желтом блоке и блоке с градиентом.
Некоторые верстальщики перестают использовать PNG-8 и используют только PNG-24.
Формат GIF [12/16]
Наверное, единственная причина использовать GIF заключается в том, что он поддерживает анимированные изображения.
Во всех остальных случаях используйте PNG или JPEG (если речь идёт о фотографиях и PNG даёт слишком тяжёлый файл).
Файл css51.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Формат GIF</title>
<style>
.box {
width: 256px;
height: 192px;
margin: 20px auto;
box-shadow: 1px 1px 3px #999999;
}
.block {
height: 192px;
background
