html — как установить цвет фона всей страницы в css
спросил
Изменено 11 месяцев назад
Просмотрено 295 тысяч раз
Я пытаюсь установить желтый цвет фона страницы на yumdom.com.
Я пробовал следующее, и это не удалось:
body{ background-color: yellow;} /*только полоска под заголовком становится желтой.*/ #doc3{ background-color: yellow;} /*результат тот же, что и выше*/ #bd { background-color: yellow;} /*результат тот же, что и выше*/ #yui-main { background-color: yellow;} /* прямоугольник становится желтым и заканчивается там, где заканчивается содержимое. Я хочу, чтобы этот прямоугольник простирался до нижнего колонтитула.*/
Также обратите внимание, что если в инструментах разработчика в Chrome я выделю один из html-элементов выше, я выделю только определенную часть страницы.
Я хочу, чтобы желтый цвет заполнил все пространство между верхним и нижним колонтитулами и не оставил пробелов.
Обратите внимание, что мы используем шаблоны YUI Reset, Fonts и Grids CSS V 2.8.0r4
Большое спасибо!
- html
- css
- jquery-ui-css-framework
Размер тела динамический, он равен размеру его содержимого.
В файле css вы можете использовать: * {background-color: black}
// Все элементы теперь имеют черный фон.
или
html {background-color: black}
// Страница теперь имеет черный фон, все элементы остались прежними.
<голова> <название> веб-страница название> голова> <тело> Добро пожаловать на мою страницу тело>
Я уже написал ответ на этот вопрос, но, похоже, он был удален. Проблема заключалась в том, что YUI добавил background-color:white
в элемент HTML. Я перезаписал это, и оттуда все было легко справиться.
Проблема в том, что тело страницы на самом деле не видно. DIV ниже имеют ширину 100% и сами цвета фона, которые переопределяют CSS тела.
Чтобы исправить ничейную территорию, это может сработать. Это не элегантно, но работает.
#doc3 { поле: авто 10px; ширина: авто; высота: 2000 пикселей; цвет фона: желтый; }
4
Я проверил ваш исходный код и обнаружил, что для изменения желтого цвета вам нужно добавить желтый цвет фона в: #left-padding, #right-padding, html, #hd, #main и #yui-main.
Надеюсь, это то, что вы хотели. Увидимся
Вы должны применить его к тегу body.
Сокращение:
тело { фон: черный; }
Отдельное свойство:
тело { цвет фона: черный; }
Вот html: инструкция по изменению цвета фона на YouTube.
В других ответах не упоминается, что существует четыре способа указать/изменить CSS:
- Внешний CSS (с использованием тега
- Внутренний CSS (введите CSS между
тегами
) - Встроенный CSS (введите атрибут
стиля
непосредственно внутри элемента HTML. - С JavaScript:используйте
document.querySelector("#id").style.backgroundColor='black'
<скрипт>
теги
1
Мне кажется,вам нужно установить желтый
на #doc3
,а затем избавиться от белого
,который вызывается на #yui-main
(который скрывает цвет #doc3
). Это дает вам желтый между верхним и нижним колонтитулом.
Вы используете селектор в CSS,я думаю,вы выбираете только компонент тела. Поэтому,если вы хотите,чтобы весь фон был одного цвета,вы должны выбрать правильный компонент. В HTML есть тело заголовка,тег заголовка определяет содержимое,отображаемое в теге. Тело определяет все тело вашего HTML. Выделенная часть — это заголовок и тело вашего HTML.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь,используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Обязательно,но не отображается
Опубликовать как гость
Требуется,но не отображается
Стиль Поля и фон страницы в CSS
pageSUMMARY
Создайте первые два стиля CSS — стили Body и HTML.Настройте протокол изменения размера текста.
Настройка стилей Body и HTML
Чтобы соответствовать цвету фона из Photoshop,откройте многослойный визуальный элемент Photoshop,щелкните квадрат «Установить цвет переднего плана» в нижней части палитры инструментов и щелкните серый цвет фона. Получите ссылочный номер веб-цвета в нижней части палитры цветов (в моем случае # 666666). Запишите это.
Сейчас самое время записать все другие соответствующие номера ссылок на цвета,такие как текст заголовка,текст абзаца и так далее. Также было бы полезно записать все размеры шрифта. Я считаю полезным распечатать документ Photoshop и разметить (вручную) все ссылки на цвета,размеры точек и ширину полей. Просто держите эту шпаргалку перед собой,чтобы сэкономить много времени (рис. 1 ).
Рис. 1. Шпаргалка руководства по стилю
Найдите панель стилей CSS
Когда шпаргалка окажется перед вами,откройте палитру стилей CSS:
СТИЛИ ОКНА/CSS
Вы должны увидеть имя таблицы стилей вверху (рисунок 2 ).
Рис. 2. Пустая палитра CSS
Создание BODY и HTML-стиля («селектор»)
Прежде чем погрузиться в построение структуры сайта,я хочу настроить очень удобный небольшой стиль,который будет создавать текст. размер ветерок позже. Это совет,который я почерпнул из книги Крейга Граннелла «9».0144 Основное руководство по веб-дизайну CSS и HTML . Существуют различные способы изменения размера текста на веб-странице — вы можете назначить что угодно,от пикселей до размеров точек,и все они будут иметь разные эффекты.
У меня есть две цели для текста на моем веб-сайте:
- Для дизайна
Я хочу быть уверенным,что текст будет отображаться в заданном размере,а отношения между заголовками и текстом абзаца будут правильными. - Для удобства использования
Я хочу,чтобы пользователь мог изменять размер текста в соответствии со своими требованиями
Проблема с размером в пикселях или пунктах заключается в том,что текст будет отображаться точно в требуемом размере,но (в Internet Explorer) пользователи не могут увеличивать или уменьшать размер текста,представленного таким образом,в соответствии со своим зрением.
В сущности,если для «селекторов» BODY и HTML в файле CSS атрибут font-size установлен на 62,5% и 100% соответственно,можно установить размеры шрифта,которые достаточно точно соответствуют размерам пунктов,используемым в графическом дизайне,используя «ems
Я предоставлю книге заботу об объяснении причин и причин (ее стоит заполучить),а просто расскажу вам,как настроить селекторы.
Создайте стиль HTML
Вы можете либо открыть окно стилей CSS,чтобы добавить их,либо просто вставить следующий код непосредственно в документ CSS:
html{
размер шрифта:100%;
}
body{
семейство шрифтов:Georgia,"Times New Roman",Times,serif;
цвет фона:#666;поле
:0px;
размер шрифта:62,5%;
цвет:#000;
}
Чтобы добавить стили через окно «Стили CSS»,нажмите кнопку «Новое правило CSS» в нижней части палитры (это выглядит как страница с маленькими +на нем).Окно диалога откроется.
Под селектором Тип :,выберите параметр «Тег
(переопределяет элемент HTML) » во всплывающем меню.
Под Имя селектора :выберите «html » в меню. Нажмите «ОК».
Откроется новое окно под названием «определение правила CSS для html ». Единственный элемент,который мы здесь меняем,— это размер шрифта,который можно найти в категории «Тип» (которая уже выбрана в левом столбце).
В поле Размер шрифта введите 100 и выберите % в меню небольших приращений справа от поля значения.
Нажмите OK.
Как только вы это сделаете,взгляните на документ CSS,и вы увидите,что код CSS был автоматически записан в документ.
Создайте стиль BODY
Теперь повторите процесс для селектора «тело» (на этот раз убедитесь,что вы выбрали « body » в меню «Имя селектора»). На этот раз,как только вы достигнете Определение правила CSS для тела 'окно:
В категории Type выберите ' Georgia,"Times New Roman",Times,serif ' (или что вы предпочитаете) из меню Font-family , введите 62,5% в Размер шрифта и выберите черный (#000) в меню Цвет ( рисунок 3 ).
Выбор семейства шрифтов гарантирует, что шрифтом по умолчанию для всего текста, отображаемого на сайте, будет шрифт Georgia (если он доступен) или Times New Roman (если шрифт Georgia отсутствует) или Times в качестве третьего варианта, или при отсутствии всех в-третьих, любой шрифт с засечками, установленный на компьютере. Этот выбор шрифта можно переопределить, создав стили класса или назначив разные стили содержимому определенных тегов DIV.
Теперь выберите категорию фона и введите #666666 в поле Background-color . Это должен быть точно такой же цвет, который выбран из исходного фона документа Photoshop. Если это не так, фоновое изображение не будет плавно сливаться с фоном.
Затем выберите категорию ящика . Чтобы гарантировать, что фоновые изображения и элементы веб-сайта прилегают к краям и верхней части окна браузера, нам нужно «обнулить» поля. Введите 0px в поле Top: Margin и установите флажок « Одинаково для всех: ».
Нажмите OK — на этом мы закончили.
Рисунок 3
Наконец, снова проверьте документ CSS. Вы легко сможете связать каждое действие, которое вы только что предприняли, с соответствующей строкой кода, которая была автоматически записана в таблицу стилей следующим образом:
html {
размер шрифта: 100%;
}
body {
семейство шрифтов: Georgia, "Times New Roman", Times, serif;
цвет фона: #666666; поле
: 0px;
размер шрифта: 62,5%;
цвет: #000;
}
Это, безусловно, самый эффективный способ научиться правильно размечать документ CSS — учитесь в процессе создания. Теперь мы можем перейти к более наглядной структуре самого веб-сайта.
Стиль полей и фона страницы в CSS — конец статьи
Перейти к предыдущей статье | Перейти на главную страницу | Перейти к следующей статье
Требуется обратная связь!
Пожалуйста, присылайте любые вопросы или отзывы по адресу: feedback@using-dreamweaver.