Использование разных способов применения стилей CSS

3 июля 2018 | Опубликовано в css | Нет комментариев »

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

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

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>The Passenger Pigeon</title>
        </head>
        <body>
        ...
        </body>
</html>

После этого добавьте следующий код CSS:

head, title {
        display: block;
}

И вы увидите, что название страницы теперь видно в окне браузера, как обычно видны другие элементы, находящиеся в теге <body>.

И в этом случае элементу названия можно задавать стили точно так же, как это делается для других элементов:

head, title {
        display: block;
}
title {
        font-family: Avenir, Arial, sans-serif;
        background-color: #ddeefe;
        padding: 2rem;
        font-size: 3.5rem;
        color: #20242e;
        background-image: url(image.jpg);
        background-repeat: no-repeat;
        background-position-x: 550px;
}

И хотя у этой страницы по-прежнему нет содержимого в теге <body>, Вы увидите то, что увидели бы, если бы задали шрифт, цвет фона, внутренние отступы, размер и цвет шрифта и фоновое изображение без повторения другому блочному элементу с текстом.

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также: