Использование разных способов применения стилей 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
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
-
Бесплатный весенний вектор
-
Сайты, посвященные свадьбам
-
Милый графический дизайн от Клаудии Бордин
-
Красивый текстовый 3D-эффект в Adobe Photoshop
-
Вектор в стиле ретро для вашего дизайна
-
Монохромный веб-дизайн
-
Японский стиль в изобразительном искусстве
-
Тонированные изображения с помощью множественных фоновых изображений
-
Строгие узоры и иллюстрации от Гарри Голдхока
-
Бесплатные весенние фотографии
-
Яркое на темном в веб-дизайне
-
20 крутых примеров нейл-арта
-
Бесплатный клипарт лепестков
-
Разные шрифты на одной веб-странице
Самые комментируемые
- 50 прикольных страниц ошибки 404
90
- Flash и HTML5 для клиентов, разработчиков и пользователей. Откручиваем гайки.
88
- 16 лучших бесплатных графических редакторов
70
- Интервью с fashion-иллюстратором Lilit Sarkisian
64
- Дизайн схемы проезда
62
- 12 сайтов, на которых можно продавать свои работы
61
- 370 экшенов для фотошопа
58
- Как выглядят сайты дизайнерских вузов - их и наши
58