Цвет фона html тег: Как изменить цвет фона и текста веб-страницы?

Рис. 5-25. Атрибут topmargin Internet Explorer для опускания основного содержимого

5.3.1.8. Атрибуты стиля и класса

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

Здесь определяется «тело» для Yahoo Beta , потому что он не поддерживает ваш тег body. Вместо этого он создаст div-оболочку вокруг вашей электронной почты, и этот div унаследует ваши встроенные стили тела.

«#body_style» определен для AOL , поскольку он не поддерживает ваше встроенное определение тела или ваш тег тела, мы будем использовать его позже в качестве нашей оболочки.

Атрибут «min-height» в данном случае используется для AOL , чтобы ваш фон не обрезался, если ваше электронное письмо короткое.

Случайный факт : Если вы включите какие-либо одинарные кавычки в свои комментарии CSS, все ваше электронное письмо будет отображаться пустым в Entourage 08 . Этот лакомый кусочек поставил меня в тупик на некоторое время.

3.) Рекомендуемые стили по умолчанию

.ExternalClass используется для Hotmail и гарантирует, что ваша электронная почта будет занимать всю ширину панели просмотра.

Ярлык .yshortcuts {color: #F00;} предназначен для Yahoo Classic и Yahoo New . Установите цвет, который вы предпочитаете для своих ссылок.

По умолчанию я сбрасываю отступы и поля для своего электронного письма на «0». Это заставляет меня делать все интервалы встроенными. Это также перезаписывает CSS по умолчанию Hotmail: p {margin:0 0 1.35em}. Поскольку Gmail не поддерживает встроенный CSS и использует поля браузера по умолчанию для абзацев, я также всегда добавляю строку «margin=0».
Оттуда я делаю все интервалы между абзацами с отступами по нескольким причинам:

1. Hotmail не поддерживает свойства «margin» и «margin-top» и
2. Outlook 2007 и 2010 предлагают улучшенную поддержку заполнения в блочных элементах

Gmail использует цвет #2A5DB0 по умолчанию для якорей. Это еще один стиль, который я не позволяю себе изменить, потому что он заставляет меня перезаписывать цвета ссылок в строке.

4.) Тег Body

 <тело
стиль = "фон: # 000; минимальная высота: 1000 пикселей; цвет: # fff; семейство шрифтов: Arial, Helvetica, без засечек; размер шрифта: 12 пикселей"
ссылка = "#FF0000"
ссылка="#FF0000"
bgcolor="#000000"
текст="#FFFFFF">
 

Я включил атрибут стиля для Gmail , он не поддерживает встроенный CSS и преобразует этот тег body в div и сохранит его встроенные стили. Поскольку он преобразуется в div, другие атрибуты тела, такие как bgcolor, игнорируются.

Я включил атрибуты тела (ссылка, ссылка, bgcolor и текст) для Lotus Notes 6.5 и 7 , так как эти клиенты не предлагают значительной поддержки ни встроенного, ни встроенного CSS.

Атрибут «min-height» установлен для Gmail и AOL , поскольку они будут преобразовывать ваше тело в div.

5.) Упаковщик Span

Этот диапазон работает как оболочка и требуется для AOL . Вы можете использовать любой встроенный HTML-элемент, но это должен быть стандартный элемент. Например, пользовательский тег, такой как , не будет работать.

Поскольку Outlook 2007 и 2010 игнорируют display:block в этом интервале, он не будет создавать нежелательных горизонтальных пробелов (если в вашем электронном письме нет таблицы, высота которой превышает 23 дюйма).

6.) Таблица

 
 Вот куда вы могли бы сложить свои таблицы, я добавил атрибуты bgcolor и width для приложения  Android Gmail . Как я уже много раз упоминал ранее, Gmail преобразует ваше тело в div даже в мобильных приложениях. Поскольку в вашем теле не задана ширина, Android устанавливает ширину преобразованного тега тела в соответствии с шириной области просмотра устройства. Короче говоря, ваш фоновый цвет будет обрезан, если вы не добавите его в каждую из своих таблиц.
  Случайный факт : по крайней мере одна текстовая строка « Entourage 04 и 08  могли обрабатывать встроенный и встроенный CSS. Это особенно важно, если вы полагаетесь только на div.
  
  
 Я протестировал это в следующих почтовых клиентах: 
 Android Gmail
 Почта Android
 АОЛ
 Окружение 04
 Окружение 08
 Gmail
 Горячая почта
 Айпад
 iPad Gmail
 Айфон
 iPhone Gmail
 Живая почта
 Lotus Notes 6. 5
 Lotus Notes 7
 Lotus Notes 8
 Lotus Notes 8.5
 Mac Mail
 Outlook 2003
 Перспективы 2007
 Outlook 2010
 Outlook Express
 Тандерберд2
 Тандерберд3
 Почта Windows
 Бета Yahoo
 Yahoo Classic
 Yahoo Новый
 Автор: Alex Ilhan 
 Родом из Англии, Алекс привносит свой опыт разработки электронной почты, бесконечный поток чашек чая и британский цинизм. Подпишитесь на него в Твиттере: @omgitsonlyalex.
 Автор: Alex Ilhan 
 Родом из Англии, Алекс привносит свой опыт разработки электронной почты вместе с бесконечным потоком чашек чая и британским цинизмом. Подпишитесь на него в Твиттере: @omgitsonlyalex.
 Как установить цвет фона для бесконечной длины страницы? - HTML и CSS - Форумы SitePoint 
 TechnoKid  21 июня 2017 г. , 13:43 
 #1
 Привет.
 Я заключил все «тело» веб-страницы в элемент div с целью центрирования, которому я назначил только максимальную ширину, минимальную ширину, поля, отступы и фон; ничего больше. Содержимое веб-страницы представляет собой список, в котором можно сделать несколько вариантов выбора, и после каждого выбора под списком появляется элемент div, содержащий соответствующую информацию.
 Как сделать так, чтобы цвет фона постоянно отображался на всей странице, а не только за текущим содержимым страницы и за выбранными элементами div?
 Я пытался задать длину 100%, но это не сработало. Придание ему смехотворно большой высоты действительно работает, но есть ли правильный способ сделать это, то есть сделать так, чтобы цвет фона отображался на всю (бесконечную) длину страницы независимо от того, есть ли там какой-либо контент?
 Любые подсказки будут очень признательны.
 Спасибо.
 ТехноМедведь  21 июня 2017 г., 13:45 
 #2
 Обычный метод заключается в том, чтобы установить цвет фона для тела и использовать div-оболочку для фактической «страницы» (с содержимым), установив минимальную/максимальную ширину и т. д. на ней, а не на теле.
 1 Нравится
 ТехноКид  21 июня 2017 г., 13:59 
 #3
 Привет, ТехноМедведь; Спасибо за ваш быстрый ответ!
 У меня уже есть другой цвет фона основного текста, который отлично работает (он покрывает всю ширину и высоту страницы), однако центральная часть (обертка div) не работает.
 Вот пример того, как это у меня:
 <стиль>
тело {
    фоновый цвет:
}
.что бы ни {
    Максимальная ширина:
    минимальная ширина:
    маржа: авто;
    заполнение:
    фон:
}

<тело>
<дел>
ВСЕ СОДЕРЖАНИЕ МОЕЙ СТРАНИЦЫ


 
 1 Нравится
 Эмго  21 июня 2017 г., 14:03 
 #4
 Я должен добавить еще один простой метод. Если вам действительно нужно все окно, добавьте свойство background в свой HTML-тег.
 Тег body — это элемент HTML-страницы, размеры которого находятся в пределах окна, поэтому он может быть больше или меньше. Если вы хотите повлиять на базовый фон, используйте тег html.
 Я не думаю, что это хорошая идея делать это просто для того, чтобы обойти правильную структуру, но это сработает. Вы можете проверить это в этом окне в инспекторе.
 Теперь, если вы хотите использовать указанный элемент в качестве контейнера для содержимого и хотите, чтобы он реагировал на содержимое внутри него, расширяясь за пределы размеров браузера, вы должны разрешить ему распознавать это содержимое. Вы можете сделать это, используя  overflow: auto; высота: авто;  на ваших контейнерах. Имейте в виду, что если у вас есть более высокий контейнер, который не расширяется, ваш контейнер содержимого может быть скрыт.
 
    <заголовок>
<стиль>
    HTML {
        цвет фона: черный;
        /* проверяем, будет ли он работать */
        переполнение: скрыто;
        высота: 0px;
    }
    .главный {
        переполнение: скрыто;
        дисплей: блок;
        ширина: ?;
        высота: авто;
    }

<тело>
    
  


 
 2 лайка
 ТехноМедведь  21 июня 2017 г. , 14:06 
 #5
 Это должно работать нормально. По моему опыту, когда что-то ведет себя не так, как ожидалось, это обычно происходит потому, что я сделал что-то глупое, например, забыл точку с запятой после объявления выше.
 Прогоняли ли вы и HTML, и CSS через валидаторы? Обычно это самый простой способ найти опечатки и другие глупые ошибки.
 1 Нравится
 красотка  21 июня 2017 г., 14:13 
 #6
 Привет, TechnoKid,
 это действительно помогло бы участникам здесь решить 
 вашу проблему, если бы они действительно могли ее увидеть.
 Так что поставьте ссылку или все соответствующие HTML 
 и CSS и я уверен, что они будут повсюду 
 это как сыпь.
 То, что вы предоставили до сих пор, бессмысленно.
 головка
 1 Нравится
 21 июня 2017 г., 14:14 
 #7
 Пожалуйста, скопируйте это в файл, откройте его в своем браузере и сообщите нам, если это ближе к тому, что вы хотите.
 

<голова>
    <мета-кодировка="utf-8">
    

    <тип стиля="текст/CSS">
тело {
    цвет фона:#bdf;
    заполнение: 0;
    маржа: 0;
}
.внешний {
    максимальная ширина: 960 пикселей;
    мин-высота: 100vh;
    цвет фона:#fdb;
    поле:0 авто;
}
    

<тело>
<дел>



 
 2 лайков
 ТехноКид  21 июня 2017 г. , 14:46 
 #8
 Привет, Эмго, спасибо. К сожалению, это тоже не сработало; это то же самое, но теперь выровнено по левому краю, а не по центру.
 Не помню, прогонял ли я эту версию через валидаторы; Спасибо за напоминание!
 Хорошо, тупица, спасибо. Обычно я удаляю большую часть текущей информации и заменяю ее примерами информации для целей публикации, так что это может занять некоторое время.
 ронпат, спасибо; это почти то, что я ищу. Я предпринял ленивую попытку просто добавить ваш min-height:100vh; к моему коду, но это дало мне только фон для видимой части экрана; нет фона, если я прокрутил вниз. В любом случае, я попробую это с моим существующим кодом и посмотрю, поможет ли он.
 Между тем, есть ли способ избавиться от синего пространства в самом низу оранжевого центра (видно, если добавить много строк текста)? Поля уже равны 0.
 Спасибо.
 ТехноКид  21 июня 2017 г. , 14:55 
 #9
 Привет, ронпат; нет, он по-прежнему показывает фон только для видимой области.
 Я постараюсь составить пример в соответствии с советом coothead как можно скорее и отпишусь. Возможно, это связано с другой проблемой, с которой я столкнулся в системе.
 Спасибо.
 ронпат  21 июня 2017 г., 14:56 
 #10
 ЕСЛИ цвет фона не совпадает с высотой страницы в вашем коде, но он соответствует моему коду (он должен применяться к div-оболочке с содержимым внутри оболочки), то вы применяете его не к тому контейнеру .
 Пожалуйста, опубликуйте рабочую страницу с соответствующими HTML и CSS, демонстрирующими проблему (по запросу coothead), чтобы мы могли увидеть, что вы видите, и код, который ее вызывает.
 2 лайка
 zack1  21 июня 2017 г., 17:07 
 #11
 Между прочим, если контейнер div не увеличивается по вертикали вместе с содержимым, возможно, содержимое не в потоке. Если вы используете числа с плавающей запятой или абсолютные позиции, контейнер не будет расти вместе с ними.
 Другая проблема заключается в том, что div-контейнер не может быть выше собственного контейнера. В таком случае . Вам нужно установить тело как 100% высоты, прежде чем вы сможете установить дочерний элемент как 100% высоту.
 Еще один потенциал с поплавками, возможно, вы можете попробовать добавить четкий поплавок в нижней части контейнера div. Вот так:
 

... содержание...
  <дел>

 
 Добавление прозрачного элемента в нижней части контейнера заставит контейнер «расти» до самого длинного содержимого, если в нем есть поплавки.
 Помимо этого, как уже говорили другие, поможет снимок экрана или пример кода. Сделайте снимок экрана и скройте все конфиденциальное. Это немного сложно визуализировать.
 1 Нравится
 ТехноКид  21 июня 2017 г., 23:48 
 #12
 Спасибо за ответ, zack1. Прежде чем я рассмотрю ваши комментарии, я сначала приведу пример, чтобы сэкономить время на случай, если кто-то из вас сразу заметит что-то очевидное, поскольку я очень новичок в этом. Спасибо.
 https://jsfiddle.net/kbq7ymbk/58/
 Фон появляется только для содержимого, которое там есть, и если вы нажмете на первый и второй элементы в списке, это покажет вам, как фон будет выглядеть для тех только элементы и не присутствуют постоянно на всем протяжении страницы.
 Все правильное кодирование было выполнено пользователем Paul_Wilkins; центрирование делал я, поэтому не работает! Хаха.
 Спасибо.
 ПолОБ  22 июня 2017 г., 7:46 
 №13
 Привет,
 Вам уже пару раз давали ответ, но, очевидно, вы упустили важные понятия или, возможно, упустили их из виду 🙂
 Рон даже предоставил рабочий пример, который вы, должно быть, скопировали неправильно, так как он это делает что вы хотите.
 Добавьте в свою скрипку следующий код, а затем сообщите нам, если это не то, что вы хотели?
 HTML, тело {
  маржа: 0;
  заполнение: 0;
  высота:100%;
}
.главный{
  минимальная высота: 100%;
  мин-высота: 100vh;
 box-sizing:border-box;
  }
 
 Чтобы основной контейнер занимал высоту окна просмотра, вы можете использовать min-height:100vh (не высота (никогда не используйте высоту, если вы не знаете, почему это возможно)). Только современные браузеры понимают vh, поэтому для отката вы устанавливаете html и body на высоту: 100% (потому что в этом примере они могут переполниться без последствий), а затем используете min-height: 100% в основном контейнере, как в коде I. указано выше,
 Если вы выполните поиск на форумах для высоты: 100%, я много писал о том, как вы можете или не можете использовать его, поскольку это довольно сложная тема
 4 лайков
 ТехноКид  22 июня 2017 г., 11:44 
 №14
 Спасибо, ПолОБ.
 В конце концов, у меня все еще та же проблема, о которой я говорил в своем посте № 8 для ronpat. т. е. оранжевой является только видимая область экрана, а не ниже. Я добавил в список еще несколько опций, чтобы лучше показать эффект. Если вы прокрутите страницу вниз, все ли будет оранжевым в конце? Вы упомянули, что только современные браузеры понимают vh; Я все еще использую древнюю версию Firefox, так что, возможно, она мне просто не подходит. В данный момент я не могу выполнить обновление, так как мой компьютер не позволяет мне это сделать, но я смогу протестировать его в IE9. /10 за несколько дней.
 https://jsfiddle.net/kbq7ymbk/59/
 Спасибо.
 ПолОБ  22 июня 2017 г., 12:38 
 №15
 ТехноКид:
 т.е. оранжевой является только видимая область экрана, дальше вниз не идет.
 В скрипте, который вы написали, это неправда, и теперь оранжевый цвет перемещается в нижнюю часть области просмотра. Код, который я вам дал, в любом случае должен работать обратно в IE6, но, как правило, в наши дни я не поддерживаю меньше, чем IE11, и вы тоже не должны. (Старые браузеры представляют собой серьезную угрозу безопасности, и никто не должен их использовать. Недавние атаки программ-вымогателей, которые несколько недель назад привели к остановке многих крупных финансовых учреждений, были вызваны старым программным обеспечением, и теперь мы должны активно поощрять наших пользователей к обновлению до более безопасные альтернативы. )
 У вас действительно есть некоторые проблемы со сворачивающимися полями, из-за которых оранжевый цвет немного смещается вниз по странице, и это можно исправить, добавив отступы по 1 пикселю сверху и снизу к основному контейнеру.
 Скрипка должна работать в любой версии Firefox, выпущенной в этом веке, поэтому, возможно, вы не очистили свой кеш или, возможно, у вас поврежден кеш.
 Не полагайтесь на один браузер при разработке. В вашей системе должен быть хотя бы один из основных браузеров (последних версий) для тестирования. В противном случае ваши тесты бессмысленны, поскольку вы тестируете только себя и никого другого.
 Наконец, вам также следует тестировать в реальных условиях, так как «скрипки» подходят для быстрых тестов, но не всегда дают точную картину. В любом случае, я нахожу «codepen» намного лучше, чем скрипка, и более надежным.
 5 лайков
 киска  22 июня 2017 г. , 13:11 
 №16
 ТехноКид:
 Все правильное кодирование было выполнено пользователем Paul_Wilkins; 
 центрирование делал я, поэтому не работает! 
 Ха-ха.
 Несмотря на то, что в вашем коде есть многочисленные ошибки кодирования 
, которые могут привести к сбою проверки, решение 
 вашей актуальной проблемы состоит в том, чтобы просто изменить это…
 #categories [type="checkbox"] {
  положение: абсолютное;
  слева: -9999px;
 } 
 …к этому
 #categories [type="checkbox"] {
  положение: абсолютное;
  верх: -9999em;
 } 
 Работа сделана, мы все можем идти домой.
 головка
 3 нравится
 ТехноКид  22 июня 2017 г., 14:41 
 # 17
 PaulOB, да, я знаю, извините, но у меня сейчас нет выбора; Я застрял с очень старым Firefox, так как мой компьютер в настоящее время не позволяет мне установить более новую ОС и, следовательно, браузер. Я был так занят этим, что у меня просто не было времени починить свой компьютер! Это компьютер с Linux, поэтому у меня нет IE, однако готовая веб-страница будет использоваться в IE9 и 10, поэтому на них все должно работать правильно.
 В моем конце действительно не хватало оранжевого фона.
 Да, все мои собственные тесты основаны на локальных файлах; Я использую скрипку для публикации и быстрых тестов, как вы говорите.
 О-о-о, тупица! Что я могу сказать? Не обращайте внимания на эту проблему, ваш совет — это то, что решило другую проблему, с которой я столкнулся и пытался решить в течение самого долгого времени !!!
 Что касается этого вопроса, комбинация вашего маленького наконечника и min-height ronpat и PaulOB: 100vh; это то, что заставило всех работать здесь, включая мой собственный оригинальный код!
 Всем большое спасибо!
 Еще одна последняя проблема: я предпочитаю иметь постоянно видимую вертикальную полосу прокрутки (которая у меня есть), так как это предотвращает перескакивание страницы, когда она продолжает появляться и исчезать, когда требуется прокрутка, однако есть ли причина, по которой существует прокручивать «кнопку» и прокручивать страницу, если это всего лишь одна страница и нет содержимого для прокрутки?
 https://jsfiddle. net/kbq7ymbk/62/
 Спасибо.
 ПолОБ  22 июня 2017 г., 17:12 
 # 18
 ТехноКид:
 Еще одна последняя проблема: я предпочитаю иметь постоянно видимую вертикальную полосу прокрутки (которая у меня есть), поскольку это предотвращает перескакивание страницы, когда она продолжает появляться и исчезать, когда требуется прокрутка, однако есть ли причина, по которой существует прокрутка «кнопка» и прокрутка страницы, если это всего лишь одна страница и нет содержимого для прокрутки?
 У вас нет постоянно видимой полосы прокрутки в области просмотра, так как у вас нет механизма для ее предоставления. Обычно вы просто используете  html{overflow-y:scroll} , и это поможет.
 Вертикальная полоса прокрутки видна только потому, что вы пропустили совет, который я дал о сворачивании полей, а поля вашего контента схлопываются за пределы основного контейнера и толкают его вниз, делая его выше, чем область просмотра, и, таким образом, давая прокрутку, когда она не нужна . Добавьте отступы по 1px сверху и снизу к .main, чтобы остановить схлопывание полей.
 1 Нравится
 zack1  22 июня 2017 г., 19:01 
 # 19
 Кстати, вы могли бы исправить это, установив  position:relative;  в #container. Это связано с тем, что если вы делаете абсолютную позицию, она должна основываться на родительском элементе с нестатической позицией. В вашем случае это может быть только позиция на основе тела.
 Происходит немного сложно.
 Несмотря на то, что вы установили left:-1000px на входы   , он все равно занимал вертикальное пространство из-за меток   . Метки не содержатся во входных данных, они представляют собой отдельную строку и теги 
  между ними.
 Если вместо этого вы установите position:relative для #container, абсолютная позиция будет относительно этого блока, и все будет работать нормально.
No related posts.
 
  alexxlab   Автор записи 
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт 
  

  

    
Контент