Как покрасить всю страницу в html

«Покрасить» левую и правую стороны веб-страницы

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

Сейчас веб-страница просто синяя шапка на белом фоне. Как реализовать идею наиболее просто? Если не переписывать сначала, т.е. не окрашивать фон в серый, а потом размещать в центре белую секцию.

Какую помощь я ожидаю: код (рабочий или черновик), в котором есть класс CSS и его применение в .

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как заменить левую и правую стороны изображении?
Как заменить левую и правую стороны изображении(PIL,Image)?

Поменять местами левую и правую стороны массива
Помогите пожалуйста с кодом программы

Как заменить левую и правую стороны изображения
Как заменить левую и правую стороны изображении(PIL,Image)?

Напечатать левую и правую диагонали матрицы
Дан целочисленный массив В. Напечатать его левую и правую диагонали. Найти количество положительных.

Вывести левую и правую диагональ матрицы
Вот есть исходник не могу дописать чтобы он выводил левую и правую диагональ матрицы, и что-то не.

3106 / 2591 / 1219
Регистрация: 14.05.2014
Сообщений: 7,236
Записей в блоге: 1

Сообщение от const01

Сейчас веб-страница просто синяя шапка на белом фоне.
HTML и CSS в студию. Не совсем понятно это

Сообщение от const01

Как реализовать идею наиболее просто? Если не переписывать сначала, т.е. не окрашивать фон в серый, а потом размещать в центре белую секцию.

Регистрация: 23.03.2020
Сообщений: 24

я сделал сейчас так: создал в центре белую секцию (.center) и поместил туда все содержимое, а фон покрасил в желаемый цвет.

1 2 3 4 5 6 7 8 9

body { font-family: Helvetica, sans-serif; background: #f8f9fa; } .center{ background-color: white; padding: 0px 0px; }

1 2 3 4 5 6

div class="center"> . /div>

однако оно неуклюже растянулось, я ожидал, что размер подстроится под самую широкую часть содержимого — навигационного бара, мне не ясно как вообще размер такой определился. (контраст картинки я увечили, чтобы можно было разглядеть границу между двумя цветами фона)

вопрос: с помощью каких параметров белую секцию можно подогнать под то, что нарисовано в макете выше?

6188 / 3424 / 1028
Регистрация: 07.09.2019
Сообщений: 5,484
Существуют разные способы; могу предложить явно задать ширину для .center:

.center{width:60%; margin-left:auto; margin-right:auto;}

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Отобразить левую половину матрицы на правую
Подскажите, как отобразить левую половину второй матрицы на правую зеркально симметрично.

Отобразить левую половину матрицы на правую
Делать через указатели. В главной функции динамично выделить память под указанную пользователем.

Отобразить правую половину матрицы на левую
Суть условия задачи: Размерность матрицы вводится с клавиатуры. Заполнить матрицу случайными.

Напечатать левую и правую диагонали двумерного массива
Дан целочисленный массив В. Напечатать его левую и правую диагонали.

Напечатать левую и правую диагонали целочисленного масссива
дан целочисленный массив b 1..5 1..5 напечатать его левую и правую диагонали в турбо паскале

Переставить местами правую и левую часть массива
Дан массив M, размерность задать в программе с помощью именованной константы. Указать.

Как изменить фон в footer и header? — Вопросы по CSS

Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.

В Joomla Extensions Directory появился тег совместимости с Joomla 5.

Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��

JoomlaDay Spain, Madrid.

В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.

Применение цвета

Adobe InDesign поддерживает различные способы применения цвета, включая панель «Инструменты» и «Управление», палитру «Цветовые образцы» и «Цвет», а также инструмент «Палитра цветов».

Для цвета можно указать место применения: обводка или заливка объекта. Обводка представляет собой рамку или фрейм объекта, а заливка — фон объекта. При применении цвета к текстовому фрейму можно указать, следует ли выполнять эту операцию для текстового фрейма или для текста внутри фрейма.

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

• Для контура или фрейма используйте инструмент «Выделение» или инструмент «Частичное выделение» .

• Для изображения в градациях серого или монохромного (1-битового) изображения щелкните маркер захвата содержимого или используйте инструмент «Частичное выделение». К изображению в градациях серого или монохромному изображению можно применить только два цвета.

• Для текстовых символов используйте инструмент «Текст» , чтобы изменить цвет отдельного слова или всего текста во фрейме.

Примечание.

Чтобы изменить цвет пробелов в пунктирной, точечной или полосовой обводке, используйте палитру «Обводка».

На панели «Инструменты» либо на палитре «Цвет» или «Цветовые образцы» выберите режим «Форматирование изменяет текст» или «Форматирование изменяет контейнер» в зависимости от того, требуется ли применять цвет к тексту или текстовому фрейму

На панели «Инструменты», палитрах «Цвет» или «Цветовые образцы» выберите поле «Заливка» или «Обводка», чтобы определить заливку или обводку объекта (если выбрано изображение, поле «Обводка» не оказывает влияния).

A. Поле «Заливка» B. Форматирование изменяет контейнер C. Поле «Обводка» D. Форматирование изменяет текст

Выполните одно из следующих действий:

• Выберите цвет, оттенок или градиент, используя палитру «Цветовые образцы» или «Градиент».

• Выберите цвет, оттенок или градиент, используя меню «Обводка» или «Заливка» на панели «Управление».

• Дважды щелкните поле «Заливка» или «Обводка» на панели «Инструменты» или палитре «Цвет», чтобы открыть инструмент «Палитра цветов». Выберите нужный цвет и нажмите кнопку «ОК».

Примечание.

Цвет можно применить к любому изображению в градациях серого при условии, что оно не содержит альфа-каналов или каналов плашечных цветов. Если изображение импортировано с обтравочным контуром, для применения цвета только к обтравленной области выберите обтравочный контур с помощью инструмента «Частичное выделение».

Выбор цвета при помощи палитры цветов

С помощью инструмента «Палитра цветов» можно выбирать цвета из поля цвета или указывать номера цветов. Цвета можно определить с помощью цветовых моделей HSB, RGB, HSB, Lab или CMYK.

Дважды щелкните поле «Заливка» или «Обводка» на панели «Инструменты» или палитре «Цвет», чтобы открыть инструмент «Палитра цветов».

Чтобы изменить спектр цветов, отображаемый в инструменте «Палитра цветов», щелкните букву «R» (красный), «G» (зеленый) или «B» (синий) либо «L» (яркость), «a» (зелено-красная ось) или «b» (сине-желтая ось).

A. Исходный цвет B. Новый цвет C. Поле цвета D. Треугольники цветовой шкалы E. Спектр цветов
Чтобы определить цвет, выполните одно из следующих действий:

• Щелкните или перетащите курсор внутри поля цвета. Курсор в виде перекрестия обозначает положение текущего цвета в поле.

• Перетащите треугольники цветовой шкалы по спектру цветов или щелкните внутри спектра.

• Введите значения в любом из текстовых полей.

Чтобы сохранить цвет как образец, выберите «Добавить образец CMYK», «Добавить образец HSB», «Добавить образец RGB» или «Добавить образец Lab». InDesign добавляет цвет в палитру «Цветовые образцы», используя цветовые значения в качестве его имени.

Нажмите кнопку «ОК».

Применение последнего использованного цвета

На панели «Инструменты» отображается последний использованный цвет или градиент. Этот цвет или градиент можно применять непосредственно из панели «Инструменты».

Выберите объект или текст, у которых необходимо заменить цвет.

На панели «Инструменты» нажмите кнопку «Заливка» или кнопку «Обводка» в зависимости от того, у какой части текста или объекта необходимо заменить цвет.

На панели «Инструменты» выполните одно из следующих действий:

• Нажмите кнопку «Цвет» , чтобы применить последний сплошной тон, выбранный в палитре «Образцы» или «Цвет».

• Нажмите кнопку «Градиент» , чтобы применить последний градиент, выбранный в палитре «Образцы» или «Градиент».

• Нажмите кнопку «Нет» , чтобы удалить заливку или обводку объекта.

Удаление цвета заливки или обводки

Выберите объект или текст, цвет которого необходимо удалить.

На панели «Инструменты» нажмите кнопку «Заливка» или кнопку «Обводка» в зависимости от того, цвет какой части текста или объекта необходимо удалить.

Нажмите кнопку «Нет» , чтобы удалить заливку или обводку объекта.

Применение цвета с помощью перетаскивания

Удобным способом применения цветов или градиентов является перетаскивание из источника цвета на объект или палитру. Перетаскиванием можно применять цвета или градиенты к не выделенным заранее объектам. Можно перетаскивать следующие объекты:

• Поле «Заливка» или поле «Обводка» из панели «Инструменты» или другой палитры.
• Поле «Градиент» из палитры «Градиент».
• Образцы из палитры «Цветовые образцы».
• Последний использованный образец в пределах цветового охвата, расположенный рядом со значком цвета вне цветового охвата в палитре.

Можно перетаскивать цвета или градиенты на следующие объекты и палитры.

• Заливка или обводка контура. Чтобы перетащить цвет на заливку или обводку, при перетаскивании расположите центр значка перетаскивания точно над заливкой или обводкой контура, затем отпустите кнопку мыши.
• Палитра «Цветовые образцы».

Один или несколько образцов из палитры «Цветовые образцы» либо образец цвета, расположенный рядом со значком цвета вне цветового охвата, можно перетащить в окно другого документа InDesign; при этом образцы добавляются в палитру «Цветовые образцы» этого документа.

Применение цвета или образца градиента

Выделите текстовый или объектный фрейм с помощью инструмента «Выделение» либо выделите часть текста с помощью инструмента «Текст» .

Если палитра образцов не открыта, выберите меню «Окно» > «Цвет» > «Образцы».
В палитре «Цветовые образцы» выберите поле «Заливка» или поле «Обводка».
Выполните одно из следующих действий:

• Чтобы применить цвет к выделенному тексту, нажмите кнопку «Текст» .
• Чтобы применить цвет к выделенному текстовому или объектовому контейнеру (например, фрейму или таблице), нажмите кнопку «Объект» .

Щелкните образец цвета или градиента. Выбранный цвет или градиент применяется к любому выделенному тексту или объекту, а также отображается в палитре «Цвет» и в поле «Заливка» или в поле «Обводка» на панели «Инструменты».

Примечание.

Цвета по умолчанию для заливки или обводки можно задать тем же способом, что и остальные значения по умолчанию в InDesign. Выберите «Редактирование» > «Снять выделение» , чтобы снять выделение со всех объектов, затем выберите цвет.

Применение цвета с использованием палитры «Цвет»

Для работы с цветом рекомендуется использовать палитру «Цветовые образцы», но смешивать цвета можно также с помощью палитры «Цвет». В любой момент можно добавить текущий цвет из палитры «Цвет» в палитру «Цветовые образцы». Палитра «Цвет» наиболее удобна для смешивания безымянных цветов.

Примечание.

Если выбран объект, для которого используется именованный образец, при изменении его цвета с помощью палитры «Цвет» изменится цвет только этого объекта. Если необходимо изменить цвет во всем документе, дважды щелкните его образец в палитре «Цветовые образцы».

Изменение цвета заливки или обводки

Выберите объект или текст, цвет которого необходимо изменить.
Если палитра «Цвет» не открыта, выберите меню «Окно» > «Цвет».
В палитре «Цвет» выберите поле «Заливка» или поле «Обводка».

A. Поле «Заливка» B. Поле «Обводка» C. Форматирование изменяет контейнер D. Форматирование изменяет текст

Если выделен текстовый фрейм, выберите поле «Контейнер» или поле «Текст» , чтобы изменить цвет заливки или текста внутри фрейма.

Выполните одно из следующих действий.

• Переместите в нужное положение ползунок шкалы «Оттенок», отображаемый по умолчанию, если для объекта используется образец из палитры «Цветовые бразцы».

• Выберите цветовую модель LAB, CMYK, HSB или RGB в меню палитры «Цвет» и используйте ползунки, чтобы изменить цветовые значения. Можно также ввести цветовые координаты в текстовых полях рядом с цветовыми шкалами.

• Поместите курсор над цветовой шкалой и щелкните.

• Дважды щелкните поле «Заливка» или «Обводка» и выберите цвет с помощью инструмента «Палитра цветов». Затем нажмите кнопку «ОК».

При появлении значка предупреждения о цвете вне цветового охвата в случае необходимости использовать цветовые значения CMYK, ближайшие к исходному заданному цвету, щелкните маленькое поле цвета рядом со значком предупреждения.

Создание образца цвета в палитре «Цвет»

Проследите, чтобы в палитре «Цвет» цвет, который необходимо добавить, отображался в активном поле «Заливка» или «Обводка».

Выберите «Добавить в цветовые образцы» в меню палитры.

Цикл по цветовым режимам

Выполните одно из следующих действий:

• В палитре «Цвет» щелкните, удерживая нажатой клавишу «Shift», цветовую шкалу в нижней части палитры.

• В диалоговом окне Новый образец цвета или «Параметры образца» щелкните поле цвета, удерживая нажатой клавишу «Shift».

• В диалоговом окне «Новый градиент» или «Параметры градиента» выберите узел градиента, убедитесь в том, что в меню «Цвет узла градиента» выбрана цветовая модель RGB, LAB, HSB или CMYK, а затем щелкните, удерживая нажатой клавишу «Shift», поле цвета.

Создание цветовых тем с помощью инструмента «Цветовая тема»

Цветовые темы можно извлечь из выбранных областей, изображений или объектов в документе InDesign. Также можно выбрать цвет из изображения, изображение полностью или весь макет. По существу, можно создать цветовые темы из любых цветов в графическом объекте. Используйте инструмент цветовой темы для выбора одного цвета или темы и добавления цветовой темы на панели образцов.

Добавьте эти цвета к макету, добавьте их на панель «Цветовые образцы». Изображения можно сохранять непосредственно в Creative Cloud libraries.

Выберите инструмент «Цветовая тема» на панели инструментов. Для переключения между инструментом «Цветовая тема» и инструментом «Пипетка» можно использовать сочетание клавиш I.

Щелкните любую часть макета для выбора цвета. Также можно эффективно использовать цвета из любого графического объекта, размещенного в Adobe Photoshop, Illustrator или любом другом файле. Цвет сохраняется сразу после выбора с помощью инструмента темы. Если после выбора цветов переключиться на другой инструмент для выполнения каких-либо операций, например рисования объектов, а затем снова выбрать инструмент цветовой темы, сохранится тема, выбранная ранее. Выбранная тема сохраняется для повторного использования, пока вы не нажмете клавишу ESC и не закроете панель. При нажатии клавиши ESC все изменения отменяются.

Наведите указатель мыши для отображения автоматически отмечаемых областей в InDesign, из которых можно создать цветовую тему. Щелкните соответствующий раздел, и в InDesign будет создана цветовая тема.

Цветовая тема создается из пяти разных цветов. Щелкните всплывающее меню для просмотра других созданных вариантов цветов.

A. Щелкните для просмотра всех тем B. Добавить текущую цветовую тему к образцам C. Сохранить в текущую библиотеку CC

Цветовая тема создается из пяти разных цветов. Щелкните всплывающее меню (A на изображении), чтобы просмотреть другие варианты, созданные для одной и той же цветовой темы, например: «Цветной», «Яркий», «Глубокий» и «Приглушенный». Если вам не нравится созданная цветовая тема, нажмите клавишу Esc и создайте ее заново либо нажмите клавишу Alt, чтобы временно переключиться в режим выбора и выбрать новую тему. Удерживая клавишу Shift, щелкните мышью один (конкретный) цвет, чтобы выбрать его в качестве основного цвета темы. Цветовые темы создаются по правилам Adobe Color: аналогичные, монохромные, трехцветные, дополнительные, составные, тени.

Чтобы применить цвета, можно выбрать один конкретный цвет в инструменте «Цветовая тема». Наведите указатель мыши на элемент страницы. Пипетка отображается наполовину наполненной, щелкните элемент для изменения заливки или обводки. При наведении указателя мыши на текст пипетка изменится на текст. Цвет, созданный в инструменте «Цветовая тема», можно применить к тексту.

1. Преобразовать согласно методу документа.
2. Преобразовать в CMYK.
3. Преобразовать в RGB.

Каким тегом разделить два блока, чтобы покрасить в два разных цвета?

Выполняю задание от 12 ролика по HTML. Нужно создать два блока и покрасить их в красный и зеленый цвета. Но получается только один цвет на оба блока. Нужно видимо разделить их каким то тегом, чтоб покрасить отдельно. Спасибо а ответ.

3 ответов

У двух блоков должны быть разные классы, чтобы не красились. Там дальше интерактивное задание будет с готовым кодом.

Ок, спасибо нашел. Буду делать заново.

Нужно создать отдельный div для двух блоков текста, затем добавить еще один стиль, в котором вместо класса .content написать, например, .content2

Sign up or Log in to write an answer

• Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.

Общие ссылки

• Отзывы
• Политика конфидециальности
• Условия использования
• Блог
• Цена и оплата
• Курсы и скринкасты
• Сертификаты
• Партнерская программа
• Комьюнити

Наши курсы и скринкасты

• HTML/CSS Advanced
• Bootstrap 4
• Vue JS
• Linux, GIT and web-hosting
• HTML and CSS
• Modern Javascript
• Javascript/jQuery
• Codeigniter
• Все курсы и скринкасты