Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Правильное решение выделено красным.

↑

Стр 1 из 4Следующая ⇒

Расчет значения специфичности [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
div.cat-in-box	0, 0, 1, 1
#floor.cat-in-box	0, 1, 1, 0
div span	0, 0, 0, 2
.cat-in-box	0, 0, 1, 0
#floor span	0, 1, 0, 1
.text li.error span {}	0, 0, 2, 2
#wrapper.text #message p a {}	0, 2, 1,2
#main.content a:hover {}	0, 1(#main), 2(pre,.content), 1(a:hover)

Остюда сразу видно, что в нашем примере самым приоритетным является селектор #floor.cat-in-box.

Ещё задачка на порядок кода [16/18]

Здесь все просто.

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

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

<!DOCTYPE html>

<html>

<head>

<title>Ещё задачка на порядок кода</title>

<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="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>

<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;

}

.cats.cat-rudolf {

background-color: #e74c3c;

}

.cats.cat-snezhok {

background-color: #2ecc71;

}

.cats.cat-adolf {

background-color: #e67e22;

}

</style>

</head>

<body>

<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>. Он обозначает «просто текстовый блок». То есть особенного собственного смысла он не имеет. Также этот тег никак не изменяет отображение текста.

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

А уже для класса с помощью 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>

<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>

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>

<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>

<head>

<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-repeat: no-repeat;

background-position: 50% 50%;

}

.block2 {

background-repeat: no-repeat;

background-color: #f1c40f;

background-position: 50% 50%;

}

.block3 {

background-repeat: no-repeat;

background-color: #e74c3c;

background-position: 50% 50%;

}

.block4 {

background-repeat: no-repeat;

background-color: #3498db;

background-position: 60px 50%;

}

.block5 {

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-repeat: no-repeat;

background-color: #95a5a6;

background-position: 40px 50%;

}

.block9 {

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>

</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-repeat: no-repeat;

background-position: 50% 50%;

}

.block1 {

background-image: url("https://htmlacademy.ru/assets/course13/cat_purr.gif");

}

.block2 {

background-image: url("https://htmlacademy.ru/assets/course13/cat_walk.gif");

}

</style>

</head>

<body>

<div class="box box1">

<div class="block block1"></div>

</div>

<div class="box box2">

<div class="block block2"></div>

</div>

</body>

</html>

Несколько фонов [13/16]

Несколько фонов одному элементу можно задать с помощью множественных фонов. Это достаточно новая возможность CSS3, и мы рассмотрим её в продвинутых курсах.

А сейчас рассмотрим старую надёжную технику создан

12 3 4 Следующая ⇒

Поделиться:

Познавательные статьи:

Алгоритмические операторы Matlab

Конструирование и порядок расчёта дорожной одежды

Исследования учёных: почему помогают молитвы?

Почему терпят неудачу многие предприниматели?

Последнее изменение этой страницы: 2016-12-10; просмотров: 3206; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.138.101.51 (0.011 с.)