Использование разных способов применения стилей 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
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191