цвет фона отображается в padding · GitHub
цвет фона отображается в padding
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
.fdiv | |
{ | |
width: 200px; | |
height: 100px; | |
/* | |
цвет фона отображается в padding | |
*/ | |
padding: 10px 150px 0 10px; | |
background: orange; | |
text-align: justify; | |
/* | |
потом добавляем border | |
и опять увеличиваем количество оранжевого | |
*/ | |
border: 20px solid transparent; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below.
To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersShow hidden characters
<div> | |
строка текста, которая показывает, | |
где начинается и заканчивается контент-часть блока | |
</div> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
{«view»:»separate»,»fontsize»:»100″,»seethrough»:»»,»prefixfree»:»1″,»page»:»all»} |
НОУ ИНТУИТ | Лекция | Цвет и шрифт
< Лекция 2 || Лекция 3: 123 || Лекция 4 >
Аннотация: Управление отображением цветами текста и фоном, на котором отображается текст, а также использование гарнитур шрифтов.
Ключевые слова: css, очередь, элемент разметки, цвет текста, color, цвет фона, ‘border-color’, AND, background, интерпретация, Internet, строковый, HTML, атрибут, блочный элемент, параграф, строковый элемент, in-line, таблица, инвертирование, поддержка, ‘background-image’, ‘background-repeat’, ‘background-attachment’, ‘background-position’, шрифт, Web, helvetica, monospace, автор, начертание, гарнитура, размер шрифта, кегль, пиксел (px), типографский пункт (pt), font-variant, определение, обратная связь, спецификация CSS-P, перечисление, Windows, oblique, параметр
Управление цветом в CSS
intuit.ru/2010/edi»>Каскадные таблицы стилей (CSS) в первую очередь описывают свойства текста. Это касается как текстовых блоков, так и строковых элементов разметки содержания страницы. В данном разделе речь пойдет об управлении отображением цвета текста ( color ) и цвета фона ( background-color ), на котором отображается текст.Кроме цвета текста и цвета фона CSS позволяет определять цвет границы текстового блока ( border-color ).
Атрибуты стилей, которые мы собираемся рассмотреть, согласно спецификации Microsoft, относятся к группе атрибутов Color and Background Properties. Всего в эту группу входит семь атрибутов, шесть из которых определяют свойства фона. Кроме цвета фона и его прозрачности, можно управлять фоновой картинкой (координатами ее размещения и способами повторения). К сожалению, Netscape Navigator большинство из этих атрибутов не поддерживает, поэтому мы не будем рассматривать их подробно.
Интерпретация атрибутов цвета в Netscape Navigator и Internet Explorer различна. В Netscape Navigator фоновый цвет отображается только там, где есть текст, а в Internet Explorer фоновый цвет заливает весь блок или строковый элемент вне зависимости от наличия в нем текста.
Цвет текста
В HTML для управления цветом отображаемого текста используется элемент FONT. Его аналогом в CSS является атрибут color. Этот атрибут можно применять как для блочных, так и для строковых элементов разметки.
Рассмотрим в качестве блочного элемента разметки ячейку таблицы:(открыть)
TD { color:darkred; }
Рис. 3.1. Блочный элемент разметки для ячейки таблицы.
В данном примере цвет текста определен только для обычной ячейки, поэтому содержание заголовка колонки отображается основным цветом (#003366).
При определении цвета текста для блочного элемента весь текст этого элемента отображается заданным цветом. Частичное изменение цвета возможно, если поместить строковый элемент разметки внутрь блочного:(открыть)
P { color:darkred; } I { color:#003366;font-style:normal; }
Рис. 3.2. Частичное изменение цвета текста внутри блочного элемента
В данном примере в качестве блочного элемента мы используем параграф, а в качестве строкового элемента (in-line) применяем I. Таблица в данном случае большого значения не имеет, но используется для единообразия с предыдущим примером. В нее мы помещаем параграф со встроенным в него in-line элементом разметки.
Цвет фона текста
В HTML цветом фона можно управлять только для конкретного блочного элемента разметки. Таким элементом может быть вся страница:
<BODY BGCOLOR=...>...</BODY>
Или, например, таблица:
<TABLE BGCOLOR=...>...</TABLE>
В приведенном ниже примере для выделения текста применено инвертирование цвета фона и цвета текста:(открыть)
<SPAN STYLE="background-color:black;color:white;"> как строковые элементы разметки </SPAN>
Рис. 3.3. Инвертирование цвета фона и цвета текста для выделения текста.
При использовании цвета фона следует помнить, что поддержка этого атрибута реализована для всех блочных элементов разметки только в Internet Explorer 4.0. Поддержка CSS в версиях Netscape Navigator гораздо скромнее.
Для работы с фоном элементов существует несколько атрибутов, которые поддерживаются только в Internet Explorer, начиная с версии 4.
background:transparent|color url repeat scroll position
Пример:
P { background: gray 'http://intuit.ru/intuit.gif' no-repeat fixed center center; }
Однако при всем изобилии возможностей, злоупотреблять ими не стоит.
Дальше >>
< Лекция 2 || Лекция 3: 123 || Лекция 4 >
Базовый CSS: Цвета в CSS
Урок 5: Цвета в CSS
/en/basic-css/text-styling-in-css/content/
Цвета в CSS
По умолчанию все элементы HTML, которые вы добавить на ваши веб-страницы отображаются в черно-белом режиме. Хотя иногда это может быть именно то, к чему вы стремитесь, добавление цвета может добавить визуальный интерес к странице, а CSS упрощает изменение. Изменение цветов текста и фона в элементах HTML может иметь большое значение для того, чтобы сделать ваши веб-страницы более уникальными и удобочитаемыми.
Цвет текста
Будь то элемент
, элемент
или любой другой, текст, который вы добавляете на свою веб-страницу, будет черным по умолчанию . Если вы хотите изменить цвет вашего текста, вы можете использовать объявление CSS color
, чтобы установить любой цвет, например:
color: red;
Например, рассмотрим простой элемент
:
Вот абзац.
Если бы вы загрузили это на веб-страницу, вы бы увидели черный текст на белом фоне:
Допустим, вы хотите, например, сделать текст красным. Все, что вам нужно сделать, это добавить набор правил CSS , который использует объявление color
с желаемым цветом в качестве значения:
p { красный цвет; }
Если бы вы загрузили это на веб-страницу, вместо этого вы бы увидели красный текст:
Имейте в виду, что объявление color
относится конкретно к тексту. Он не меняет фон, контуры или что-то еще. Если применить его к HTML-элементу, который не содержит текста, он ничего не сделает.
Цвет фона
Конечно, раскрашивать стоит не только текст. Если вы хотите раскрасить остальную часть веб-страницы, например, части ваших HTML-элементов, которые не являются текстом, вам нужно вместо этого использовать CSS-объявление
. Выглядит это так:
background-color: black;
Например, давайте рассмотрим еще один простой элемент
:
Вот другой абзац
Опять же, если бы вы загрузили этот элемент на веб-страницу, вы бы увидели черный текст на белом фоне. Представьте, что вы хотите изменить это на белый текст на черном фоне. Сначала вы должны добавить свой набор правил с объявлением, чтобы сделать текст белым:
р { белый цвет; }
Однако, если бы вы загрузили это, у вас был бы белый текст на белом фоне, так что вы бы ничего не увидели. Следующим шагом будет добавление объявления для изменения цвета фона:
p { белый цвет; цвет фона: черный; }
Если вы загрузите это на веб-страницу, вы увидите что-то вроде этого:
Пока что результаты могут показаться немного сжатыми, но вы узнаете больше об объявлениях CSS для управления размером фона и интервалами в следующих уроках.
Шестнадцатеричные коды
Все значения цвета и цвета фона, которые мы использовали до сих пор, представляли собой простых английских слов , таких как «красный» или «черный». Однако вы не можете определить каждый возможный цвет с помощью определенного слова. Чтобы указать именно тот цвет, который вы хотите, вам обычно нужно использовать шестнадцатеричные коды цветов, которые обычно называют шестнадцатеричными кодами ( шестнадцатеричный — это сокращение от шестнадцатеричный ).
Шестнадцатеричный код представляет собой шестизначный ряд букв и цифр используется для определения точного цвета.
#4C4C4C
Иногда вы также можете видеть трехсимвольные шестнадцатеричные коды , но они просто сокращены и в конечном итоге представляют собой полный шестизначный код. Например, #AA22DD
можно сократить до #A2D
.
Существует логика, согласно которой буквы и цифры складываются в тот или иной цвет, но шестнадцатеричные коды, как правило, — это не то, что можно запомнить и мгновенно вспомнить . Вместо этого существует множество инструментов для выбора цвета, которые могут помочь вам найти цвет, который выглядит так, как вы хотите, а затем сообщить вам соответствующий шестнадцатеричный код. Например, если вы погуглите «подборщик цветов», вы найдете простой встроенный в результаты:
Вы также можете использовать:
- Любое количество специализированных веб-сайтов для выбора цвета
- Инструменты, встроенные в такие программы, как Photoshop или Illustrator
Представьте, что вы сделали абзац с белым текстом на черном фоне, как мы делали ранее, но вам показалось, что фон слишком темный. Может быть, вы хотите, чтобы он был не совсем черным, а скорее темно-серым. Вы можете попытаться найти список названий цветов, которые распознает ваш браузер, и посмотреть, сможете ли вы выбрать одно из них — 9.0017 darkgray , может быть, но более точным способом получить именно то, что вы хотите, было бы использование шестнадцатеричного кода.
Набор правил и объявление будут точно такими же, как то, что вы видели до сих пор , но вместо английского слова для значения вы должны использовать шестнадцатеричный код:
p { белый цвет; цвет фона: #5E5D5D; }
Если вы загрузите это на веб-страницу, вы увидите более светлый фон:
Значения английских слов, которые вы использовали, на самом деле всего сокращение браузера для шестнадцатеричных кодов . Например, вместо красного в качестве значения можно использовать #FF0000, чтобы получить тот же цвет.
Попробуйте!
Попробуйте добавить каждое из этих объявлений к входным данным ниже:
color: #FFF; цвет фона: #000;
Селектор для набора правил уже определен для вас и нацелен на абзац справа от него. После того, как вы попробуете эти объявления, попробуйте самостоятельно изменить некоторые значения . Например, попробуйте заменить некоторые названия цветов, например «зеленый» или «синий», или попробуйте найти шестнадцатеричный код вашего любимого цвета на сайте выбора цвета и введите его здесь.
При использовании названия цвета, такого как «зеленый», не включайте знак номера. Например, цвет : #зеленый;
неверен, поэтому вы должны использовать цвет: зеленый; Вместо
.
Сделай сам!
Откройте файл styles.css в проекте GCF Programming Tutorials в текстовом редакторе и добавим несколько новых объявлений цветов. Для лучшего понимания убедитесь, что вы действительно вводите этот код, а не копируете и вставляете его.
- Во-первых, давайте добавим общий цвет фона для страницы. Сначала его будет не так много, но позже он станет более заметен. Добавьте это к набору правил
body
, который вы уже создали:background-color: #EEE;
- Мы также добавим фон ко всему элементу
div
, который содержит весь текст обзора. В конце концов у нас будет более одногоdiv
на странице, поэтому давайте создадим новый набор правил, использующий класс, который мы добавили в качестве селектора:.обзор { цвет фона: белый; }
- Давайте сделаем так, чтобы заголовок веб-страницы тоже выделялся. У вас уже есть набор правил, ориентированный на идентификатор
#header
, поэтому мы можем просто добавить туда следующие объявления:background-color: #333; белый цвет;
- Наконец, давайте сделаем кнопку внизу более привлекательной. Вы уже добавили набор правил, ориентированный на элементы
button
, поэтому добавьте к нему следующие объявления:цвет: белый; цвет фона: #28A745;
Если вы загрузите файл index.html в браузере или обновите страницу, вы увидите множество новых цветов. Это должно выглядеть примерно так.
Поздравляем, вы раскрасили свою веб-страницу!
ПродолжатьПредыдущий: Стилизация текста в CSS
Далее:Каскадирование, специфичность и наследование в CSS
/en/basic-css/cascading-specificity-and-inheritance-in-css/content/
Почему цвет фона моего тела в Css не работает с примерами кода
Почему цвет фона моего тела в Css не работает с примерами кода
В этом сеансе мы попытаемся решить головоломку «Почему цвет фона моего тела в Css не работает», используя компьютерный язык. Следующий код служит иллюстрацией этого момента.
<тело>
Решение ранее упомянутой проблемы «Почему цвет фона моего тела в Css не работает» также можно найти в другом методе, который будет обсуждаться ниже с некоторыми примерами кода.
<тело>
На множестве наглядных примеров мы продемонстрировали, как решить проблему «Почему цвет фона моего тела в Css не работает».
Почему цвет фона моего тела не отображается в CSS?
, потому что вы установили цвет фона, а затем перезаписали его, используя сокращение фона…. либо переместите вызов background-color после сокращения фона, либо добавьте его К сокращению… браузер интерпретирует ваш текущий код следующим образом… 02 апреля 2010 г.
Почему цвет фона не работает в CSS?
Вам необходимо применить очистку плавающей точки к родительскому элементу div, чтобы убедиться, что он занимает внутренние элементы. Вы можете либо вставить
до того, как родитель закроется, либо применить класс clearfix к родительскому div. Сохраните этот ответ. Показать активность в этом сообщении.29 октября 2012 г.Как изменить цвет фона моего тела?
Чтобы установить цвет фона в HTML, используйте атрибут стиля. Атрибут стиля указывает встроенный стиль для элемента. Атрибут используется с HTML-тегом
со свойством CSS background-color. HTML5 не поддерживает атрибут bgcolor тега, поэтому для добавления цвета фона используется стиль CSS. 22 декабря 2021 г.Как получить полный цвет фона в CSS?
Свойство background-color указывает цвет фона элемента.
- Цвет фона страницы задается следующим образом: body {
- Здесь элементы
,
и
будут иметь разные цвета фона: h2 {- div { цвет фона: зеленый;
- дел {
Почему цвет не отображается в HTML?
У границ нет фона, поэтому вы могли использовать недопустимый атрибут для определения цвета. Он работает нормально и не показывает здесь, я не могу представить случай, когда он не работал бы 26 июля 2020 г.
Как добавить цвет фона для всех элементов h2 в CSS?
Чтобы добавить цвет фона для всех элементов
, какой из следующих HTML-синтаксисов используется
- h2 {цвет фона: # FFFFFF}
- {цвет фона: # FFFFFF} . ч2.
- {цвет фона: # FFFFFF} . h2(все)
- х2. все {bgcolor = #FFFFFF}
Почему CSS не работает?
Убедитесь, что тег ссылки находится в нужном месте. Если вы поместите тег внутри другого допустимого тега заголовка, такого как тег
или