Html body background color: background-color | htmlbook.ru

Leave a Comment / Html / By /

Содержание

Как установить цвет страницы HTML

Для того, чтобы изменить цветовой фон страницы применяется тег bgcolor=»#цвет». Вместо слова цвет вставляются цвета HTML модели RGB, из 3 основных цветов — красный, зеленый, синий. Каждый цвет состоит из 2 знаков от 0 до 9или букв от A до F.

    Пример записи черного цвета — «#000000»,
белого — «#FFFFFF»,
красного — «#FF0000»,
зеленого — «#33CC00»,
желтого — «#FFFF00».

Что бы установить цвет фона всей страницы пишем : <body bgcolor=»#??????»> (порядок: красный/ зеленый/ синий). Тег bgcolor также вставляется в тот тег, который вы хотите изменить. Например
<tr bgcolor=»#0000FF»> или <td bgcolor=»#58F786″>.

Можно сделать фоном картинку или фото <body background=»?»> Чтобы изменить цвет текста на всей странице применяется параметр — text. Его надо вставить в тег<body text=»#FF0000″>. Если вам надо изменить цвет определенного участка текста надо применить тег

<font> </font>. Запись этого будет такая<font color=»#FF0000″> текст </font>.

Если вы хотите изменить цвет гиперссылок, то этот параметр записывается так:
<body link=»#FF0000″>.Также вы можете задать цвет активной ссылки <body alink=»#цвет»> и пройденной ссылки <body vlink=»#цвет»>

Таблица основных цветов в HTML

Имя
Значение
Цвет
aliceblue#F0F8FF&nbsp
antiquewhite#FAEBD7&nbsp
aquamarine#7FFFD4&nbsp
azure#F0FFFF&nbsp
beige#F5F5DC&nbsp
bisque#FFE4C4 &nbsp
black#000000&nbsp
blanchedalmond#FFEBCD&nbsp
blue#0000FF&nbsp
blueviolet#8A2BE2&nbsp
brown#A52A2A&nbsp
burlywood#DEB887&nbsp
cadetblue#5F9EA0&nbsp
chartreuse#7FFF00&nbsp
chocolate#D2691E&nbsp
coral#FF7F50&nbsp
cornflowerblue#6495ED&nbsp
cornsilk#FFF8DC&nbsp
crimson#DC143C&nbsp
cyan#00FFFF&nbsp
darkblue#00008B&nbsp
darkcyan#008B8B&nbsp
darkgoldenrod#B8860B&nbsp
darkgray#A9A9A9&nbsp
darkgreen#006400&nbsp
darkkhaki#BDB76B&nbsp
darkmagenta#8B008B&nbsp
darkolivegreen#556B2F&nbsp
darkorange#FF8C00&nbsp
darkorchid#9932CC&nbsp
darkred #8B0000&nbsp
darksalmon#E9967A&nbsp
darkseagreen#8FBC8F&nbsp
darkslateblue#483D8B&nbsp
darkslategray#2F4F4F&nbsp
darkturquoise#00CED1&nbsp
darkviolet#9400D3&nbsp
deeppink#FF1493&nbsp
deepskyblue#00BFFF&nbsp
dimgray#696969&nbsp
dodgerblue#1E90FF&nbsp
firebrick#B22222&nbsp
floralwhite#FFFAF0&nbsp
forestgreen#228B22&nbsp
fuchsia#FF00FF&nbsp
gainsboro#DCDCDC&nbsp
ghostwhite#F8F8FF&nbsp
gold#FFD700&nbsp
goldenrod#DAA520&nbsp
gray#808080&nbsp
green#008000&nbsp
greenyellow#ADFF2F&nbsp
honeydew#F0FFF0&nbsp
hotpink#FF69B4&nbsp
indianred#CD5C5C
&nbsp
indigo#4B0082&nbsp
ivory#FFFFF0&nbsp
khaki#F0E68C&nbsp
lavender#E6E6FA&nbsp
lavenderblush#FFF0F5&nbsp
lawngreen#7CFC00&nbsp
lemonchiffon#FFFACD&nbsp
lightblue#ADD8E6&nbsp
lightcoral#F08080&nbsp
lightcyan#E0FFFF&nbsp
lightgoldenrodyellow#FAFAD2&nbsp
lightgreen#90EE90&nbsp
lightgrey#D3D3D3&nbsp
lightpink#FFB6C1&nbsp
lightsalmon#FFA07A&nbsp
lightseagreen#20B2AA&nbsp
lightskyblue#87CEFA&nbsp
lightslategray#778899&nbsp
lightsteelblue#B0C4DE&nbsp
lightyellow#FFFFE0&nbsp
lime#00FF00&nbsp
limegreen#32CD32&nbsp
linen#FAF0E6&nbsp
magenta#FF00FF&nbsp
maroon#800000&nbsp
mediumaquamarine#66CDAA&nbsp
mediumblue#0000CD&nbsp
mediumorchid#BA55D3&nbsp
mediumpurple#9370DB&nbsp
mediumseagreen#3CB371&nbsp
mediumslateblue#7B68EE&nbsp
mediumspringgreen#00FA9A&nbsp
mediumturquoise#48D1CC&nbsp
mediumvioletred#C71585&nbsp
midnightblue#191970&nbsp
mintcream#F5FFFA&nbsp
mistyrose#FFE4E1&nbsp
moccasin#FFE4B5&nbsp
navajowhite#FFDEAD&nbsp
navy#000080&nbsp
oldlace#FDF5E6&nbsp
olive#808000&nbsp
olivedrab#6B8E23&nbsp
orange#FFA500&nbsp
orangered#FF4500&nbsp
orchid#DA70D6&nbsp
palegoldenrod#EEE8AA&nbsp
palegreen#98FB98&nbsp
paleturquoise#AFEEEE&nbsp
palevioletred#DB7093&nbsp
papayawhip#FFEFD5&nbsp
peachpuff#FFDAB9&nbsp
peru#CD853F&nbsp
pink#FFC0CB&nbsp
plum#DDA0DD&nbsp
powderblue#B0E0E6&nbsp
purple#800080&nbsp
red#FF0000&nbsp
rosybrown#BC8F8F&nbsp
royalblue#4169E1&nbsp
saddlebrown#8B4513
&nbsp
salmon#FA8072&nbsp
sandybrown#F4A460&nbsp
seagreen#2E8B57&nbsp
seashell#FFF5EE&nbsp
sienna#A0522D&nbsp
silver#C0C0C0&nbsp
skyblue#87CEEB&nbsp
slateblue#6A5ACD&nbsp
slategray#708090&nbsp
snow#FFFAFA&nbsp
springgreen#00FF7F&nbsp
steelblue#4682B4&nbsp
tan#D2B48C&nbsp
teal#008080&nbsp
thistle#D8BFD8&nbsp
tomato#FF6347&nbsp
turquoise#40E0D0&nbsp
violet#EE82EE&nbsp
wheat#F5DEB3&nbsp
white#FFFFFF&nbsp
whitesmoke#F5F5F5&nbsp
yellow#FFFF00&nbsp
yellowgreen#9ACD32&nbsp

Уроки по HTML/Урок №4. Параметры тэга .

Урок №4. Параметры тэга <body>.

Цели работы:
1.Изучение параметров тэга <body>.
2.Закрепление изученного материала на примерах.
3.Повторение ранее изученного материала.

Как уже говорилось на уроке №1, между тэгами <body> …</body> заключается содержательную часть HTML-документа. Большинство тэгов, должно располагаться в данном разделе документа. Тэг <body> имеет ряд параметров, ни один из которых не является обязательным, но может пригодиться для разработки интересно оформленных HTML-страниц. Как Вы уже смогли заметить, если в тэге <body> параметры отсутствуют, то браузер отображает такую страницу белым цветом, текст отображается черным цветом, гиперссылки – синим. Это сделано не просто так. Черный текст на белом фоне считается классикой с точки зрения Web-дизайна (хотя и ужасно заезженной). Это весьма объяснимо, т.к. наиболее читабельный именно такой вариант. Представьте себе желтый текст на красном фоне, или синий на черном. В первом случае оформление – вырви глаз, раздражающее и тяжело воспринимаемое; во втором – вообще читать невозможно, т.к. буквы почти сливаются с цветом страницы. Пожалуй, становится понятным одно из основных правил оформления Web – страниц: Оформление страницы не должно затруднять восприятие информации, находящейся на ней. Это, однако, не означает то, что надо использовать белый фон документа и черный текст, просто надо всегда думать не только о себе, но и о тех людях, которые, возможно посетят Ваш сайт.

Итак, мы вплотную подошли к первому параметру тэга <body> bgcolor. Как Вы уже могли догадаться, данный параметр определяет цвет фона HTML – документа (bgcolor, от английского background color задний фон). В языке HTML цвета определяются цифрами в шестнадцатиричном коде. Цветовая гамма базируется на трех основных цветах – красном (Red), зеленом (Green) и синем (Blue) – и обозначается RGB. Для каждого цвета задается шестнадцатиричное значение в пределах от 00 до FF, что соответствует диапазону 0 – 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #. Например, зеленый цвет имеет код #008000. Чтобы не запоминать совокупность цифр или букв, можно воспользоваться таблицей цветов (с их кодами), либо просто называть цвета своими именами (по английски), что менее желательно. Например, запись параметра bgcolor=red внутри тэга <body> эквивалентна записи bgcolor=#FF0000. Если с помощью параметра bgcolor можно определить цвет фона документа, то, естественно, можно определить цвет текста, для этого служит параметр text. Например, запись text=#0000FF внутри тэга <body> будет задавать текст синего цвета. Заметим, что в данном случае, весь текст HTML-документа станет синим, в отличие от применения тэга <font> (Урок №2), которым выделяются лишь отдельные фрагменты. Выбирая цвета фона документа и текста, не забывайте о читаемости Вашей страницы: как только Вас начинает что-то смущать, раздражать, либо плохо восприниматься, попробуйте подобрать наиболее удачное сочетание цветов. Здесь главное чувство меры и эстетический вид страницы, о чем говорилось ранее.

Пример 4.1.Действие параметров bgcolor и text.

После выполнения в блокноте, сохраните данный пример как «song.htm» и увидите результат.

Продолжим знакомство с параметрами тэга

. Как известно, во всяком HTML- документе применяются гиперссылки. Существуют несколько параметров, определяющих цвет ссылки.
link – определяет цвет еще не просмотренной ссылки,
alink – определяет цвет активной ссылки (ссылки, которая работает в данный момент),
vlink – определяет цвет уже просмотренной ссылки.
Например: <body link=red alink=yellow vlink=blue>.
Здесь цвет не просмотренной ссылки — красный, активной – желтый, просмотренной – синий. По умолчанию браузеры выводят не посещенную ссылку — синим цветом, посещенную – фиолетовым.

Задание 4.1: Откройте документ «song.htm» и добавьте приведенные выше параметры, определяющие цвет ссылок. Конечно, необходимо будет создать гиперссылку, в данном документе, вспомните, как это делается (Урок №3). Если гиперссылка не создана, а в тэге <body> указаны ее параметры, то, естественно, Вы не увидите их действия. Для проверки работы гиперссылки, создайте самостоятельно еще один HTML – документ (с применением всех параметров, изученных на данном уроке) и в нем сделайте гиперссылку на первый файл («song.htm»). Если все работает, поздравляю. Поэкспериментируйте с цветами ссылок, текста и фона.

Двинемся дальше. Обратимся теперь к параметрам, задающим границы полей HTML – документа. Таких параметров четыре:
topmargin — устанавливает границу верхнего поля документа в пикселях,
bottommargin — устанавливает границу нижнего поля документа в пикселях,
leftmargin — устанавливает границу левого поля документа в пикселях,
rightmargin — устанавливает границу правого поля документа в пикселях.
Например: <body topmargin=0 bottommargin=0 leftmargin=30 rightmargin=30>.
Здесь верхнее и нижнее поля отсутствуют (равны 0), а правое и левое поле по 30 пикселей.

Задание 4.2: Откройте документ «song.htm» и добавьте приведенные выше параметры, определяющие границы Вашего документа. Поэкспериментируйте с заданием различных значений границ.

Теперь поговорим о фоновых изображениях. Наряду с заданием цвета фона, HTML – страницу можно замостить так называемыми «обоями» или фоновым изображением. Для этого используется параметр background тэга <body>. Параметр background указывает на URL – адрес изображения, которое используется в качестве фонового. В качестве изображения должна использоваться «картинка» сохраненная в формате .Gif или .Jpeg (.jpg). Удобно использовать небольшое изображение (например, 5X5 см.) в качестве фонового, т.к. в этом случае оно застилает всю страницу без видимых швов (если оно удачно подготовлено для этих целей). Самой удобной программой для подготовки таких «кубиков» (текстуры) служит Photoshop (на худой конец Paint).

Задание 4.3: Откройте программу Paint, сожмите листок до небольших размеров; затем выберите какой либо цвет (лучше светлый) и, взяв на панели инструментов «распылитель», подготовьте равномерно раскрашенный «кубик». (Лучше использовать программу Photoshop и фильтр Texturizer из набора Texture). Сохраните полученную картинку в формате jpg (пусть ее имя будет pict). После этого откройте Вашу страницу «song.htm» и в тэг <body> вставьте background=pict.jpg. Сохранив изменения, вернитесь на страницу и увидите Ваши «обои».

Параметры bgcolor и background могут одновременно присутствовать в тэге <body>, в этом случае доминирующим будет background, а параметр bgcolor будет работать в случае, если пользователь находится в режиме отключения изображений.

Для обращения к следующему занятию Вам необходимо пройти тест

CSS Baseline — Material-UI

Material-UI предоставляет компонент CssBaseline, чтобы создать элегантную, согласованную и простую основу для работы.

Global reset

You might be familiar with normalize.css, a collection of HTML element and attribute style-normalizations.

import React from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';

export default function MyApp() {
  return (
    <React.Fragment>
      <CssBaseline />
      {}
    </React.Fragment>
  );
}

Scoping on children

However, you might be progressively migrating a website to Material-UI, using a global reset might not be an option. It’s possible to apply the baseline only to the children by using the ScopedCssBaseline component.

import React from 'react';
import ScopedCssBaseline from '@material-ui/core/ScopedCssBaseline';
import MyApp from './MyApp';

export default function MyApp() {
  return (
    <ScopedCssBaseline>
      {}
      <MyApp />
    </ScopedCssBaseline>
  );
}

⚠️ Make sure you import ScopedCssBaseline first to avoid box-sizing conflicts as in the above example.

Approach

Страница

The <html> and <body> elements are updated to provide better page-wide defaults. More specifically:

  • Поля во всех браузерах удалены.
  • The default Material Design background color is applied. It’s using theme.palette.background.default for standard devices and a white background for print devices.

Расположение

  • box-sizing is set globally on the <html> element to border-box. Every element—including *::before and *::after are declared to inherit this property, which ensures that the declared width of the element is never exceeded due to padding or border.

Typography

  • No base font-size is declared on the <html>, but 16px is assumed (the browser default). You can learn more about the implications of changing the <html> default font size in the theme documentation page.
  • Set the theme.typography.body2 style on the <body> element.
  • Set the font-weight to theme.typography.fontWeightBold for the <b> and <strong> elements.
  • Custom font-smoothing is enabled for better display of the Roboto font.

Кастомизация

Head to the global customization section of the documentation to change the output of these components.

HTML | Атрибут bgcolor

HTML | Атрибут bgcolor

Атрибут HTML bgcolor используется для определения цвета фона документа.

Синтаксис:

Значения атрибутов:

  • color_name: Указывает имя цвета фона документа.
  • hex_number: Указывает шестнадцатеричный код цвета фона в документе.
  • rgb_number: Указывает значение RGB для цвета фона в документе

Пример:

< html >

< голова >

< заголовок >

HTML body Bgcolor Attribute

заголовок

голова >

< корпус текст = «зеленый» bgcolor = «оранжевый» >

< центр >

9000 2 < h2 > GeeksforGeeks h2 >

< h3 >

HTML < body > атрибут bgcolor

h3 >

< p >

Это компьютер

Научный портал для компьютерных фанатов

p >

центр >

корпус >

html >

Выход: 902 49

Поддерживаемые браузеры: Браузеры, поддерживаемые bgcolor , перечислены ниже:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

HTML Цвет фона - javatpoint

- это атрибут для установки цвета фона элемента HTML.Этот атрибут используется со следующими тегами:

  • <таблица>
  • <выделение>

Синтаксис

<"tag" bgcolor = "Имя_цвета | Номер RGB | Шестнадцатеричный номер">

Примеры: В следующих примерах атрибут используется в различных тегах.

Пример 1: Используйте атрибут с тегом

<название> Пример атрибута цвета фона <центр>

javaTpoint



<центр>

Язык гипертекстовой разметки

Проверить это сейчас

Выход:

Пример 2: Используйте атрибут с тегом

<название> Пример атрибута Bgcolor <центр>

javaTpoint



<центр> <таблица> № рулона Имя 101 Абхай 102 Четан 103 Мэнприт 104 Ракеш 105 Сумит

Проверить это сейчас

Выход:

Пример 3: В следующем примере используется атрибут с тегом .

<название> Пример атрибута цвета фона

javaTpoint

Проверить это сейчас

Выход:

Поддержка браузера

HTML Tutorial - Bgcolor, цвета для фона, вставка изображения на фон

» HTML » Учебное пособие по HTML - Bgcolor, цвета фона, вставка изображения на фон

Атрибут Bgcolor используется для установки цвета фона абзаца, таблицы или любых других частей HTML.Рекомендуется умеренное использование этого тега. Также рекомендуется установить цвета фона и стили текста или ссылок с помощью CSS. Мы объясним более подробно, как это можно сделать, в следующем уроке CSS.

<"numetag" bgcolor = "Value">

Это модель того, как атрибут bgcolor будет использоваться в теге.

 html

HTML - Добавление цвета в таблицы

В следующем примере показано, как раскрасить таблицу во многие цвета, используя Атрибут bgcolor.

 html  <таблица>


 Эта строка желтая! 


 Эта строка серая! 


 Эта строка желтая! 


 Эта строка серая! 


 Эта строка желтая! 


 Эта строка серая!
Демо
Эта строка желтая!
Этот ряд серый!
Этот ряд желтый!
Этот ряд серый!
Этот ряд желтый!
Этот ряд серый!

HTML - Шрифт и фон вместе

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

 html  <таблица>

  Грин-Бэй  
  27  


  Новая Англия  
  20
Demo

Далее у нас есть простой пример таблицы с серым фоном в сочетании с тегом шрифта:

 html  




 Этот тег абзаца имеет серый фон с зеленым шрифтом.Вы должны увидеть шрифт Monotype Corsiva, если он у вас установлен, или Verdana в качестве резервной копии. Оба шрифта широко используются в качестве стандартных.
Демо
Этот тег абзаца имеет серый фон с зеленым шрифтом. Вы должны увидеть шрифт Monotype Corsiva, если он у вас установлен, или Verdana в качестве резервной копии. Оба шрифта широко используются в качестве стандартных.

Лучший способ кодирования фоновых цветов для HTML Электронная почта

Отсутствие какого-либо стандарта кодирования затрудняет создание электронных писем в формате HTML.Даже такая простая вещь, как применение цветов фона к элементам электронного письма, может быть непростой задачей. Фактически, существует ряд почтовых клиентов, которые по-разному отображают цвета фона в зависимости от того, как они закодированы.

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

Зачем использовать фоновые цвета в электронной почте?

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

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

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

Изображения включены Изображения выключены

Как закодировать цвет фона?

Обычно цвета фона применяются к нескольким общим элементам HTML:

и .В зависимости от вашего опыта и стиля программирования вы можете использовать один из шести (да, шесть) различных способов применения цвета фона к элементам в вашем письме:

  • Использование атрибута HTML bgcolor с трехзначным шестнадцатеричным кодом цвета
  • Использование атрибута HTML bgcolor с шестизначным шестнадцатеричным кодом цвета
  • Использование атрибута HTML bgcolor со значением цвета RGB
  • Использование свойства CSS background-color с трехзначным шестнадцатеричным кодом цвета
  • Использование свойства CSS background-color с шестизначным шестнадцатеричным кодом цвета
  • Использование свойства CSS background-color со значением цвета RGB

Трехзначный шестнадцатеричный код в электронном письме

Использование 3-значных или сокращенных HEX-кодов - не лучшая идея.Когда в тегах

и
используются трехзначные HEX-коды, получается синий (или иногда черный!) Фон, независимо от указанного цвета:

значений RGB в электронном письме

Значения

RGB оказались ненамного лучше, в результате получилось несколько прекрасных оттенков зеленого (несмотря на указание значений для белого и серого):

В некоторых случаях значения RGB, используемые с атрибутом HTML bgcolor, вообще не отображались.

Лучший способ закодировать цвет фона

Самый надежный способ кодирования цветов фона - использовать HTML-атрибут bgcolor с 6-значным HEX-кодом:

В зависимости от конкретной структуры почтовых клиентов, используемых вашей аудиторией, CSS background-color с 6-значным HEX-кодом также очень надежен.Почтовые клиенты, такие как Gmail, Apple Mail и Outlook, отлично поддерживают атрибут CSS background-color. Тем не менее, хотя некоторые методы работают согласованно с определенными элементами, придерживаться одной стратегии цвета фона проще, чем пытаться сохранить определенные причуды цвета фона.

Для простоты и лучшей поддержки клиентов наиболее популярным методом является старый атрибут HTML bgcolor и 6-значные HEX-коды.

Проверьте свою электронную почту перед отправкой

Просматривайте свои электронные письма в десятках популярных почтовых клиентов и устройств и выявляйте проблемы с отображением, в том числе цвета фона, которые не отображаются должным образом, с помощью Litmus Email Previews.

Узнать больше →

Изменение цвета

Изменение цвета

HTML-тегов, найденных в этом раздел:

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

Вернуться к темам Страница

Один из способов сделать веб-страницу более интересной приятно добавить цвет или фон изображения позади текста. К добавить цвет к фону, использовать атрибут <ТЕЛО> тег, известный как BGCOLOR. Большинство новых браузеров понимают цвета, указанные на английском языке. такие слова, как черный, синий, белый, красный и т. д.

Для синего фона добавьте следующее к тегу.

<КУЗОВ BGCOLOR = "СИНИЙ">

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

Веб-страница с цветами и цветом коды:
http://www.phoenix.net/~jacobson/rgb.html

Для возврата к белому цвету фона использование:

Не забудьте поставить знак # перед шестнадцатеричный код.

верх страница

Изменение текста Цвет
Чтобы изменить цвет текста для весь документ использует тег: <ТЕКСТ = "">

В пространстве между кавычками введите слово цвета, такое как красный, синий, зеленый и т. д. или Шестнадцатеричный код для 256 цветов, которые могут отображаться в сети. страница.Не забудьте поставить знак # перед шестигранником. код.

Для красного текста добавьте следующий атрибут к коду тега.

или

<КУЗОВ ТЕКСТ = "# ff0000">

# ff0000 - это цветовой код для красный.

<ЦВЕТ ШРИФТА =>
Чтобы изменить часть текста в HTML-документ для другого цвета используйте тег FONT COLOR.

Для изменения цвета шрифта на красный добавьте следующий атрибут в код к тег.

<ШРИФТ ЦВЕТ = "КРАСНЫЙ">

или

# ff0000 - это цветовой код для красный.

Пример:

Тело Фон

<ТЕЛО BGCOLOR = "# FF0000">

Этот фон КРАСНЫЙ

<ЦВЕТ ШРИФТА = белый> текст белый

<ШРИФТ COLOR = "# FFFF99"> Текст желтый

Щелкните здесь, чтобы перейти на веб-страницу

вверх страницы

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

<Фон тела = "graystars.gif"> сообщает браузеру чтобы получить изображение "graystars.gif" и поместить его в фон этой веб-страницы

Перейдите на пример веб-страницы, на которой отображается этот фон

Проверьте этот фоновый сайт на предмет больше бесплатных фонов:
The Справочные архивы - http: // the-tech.mit.edu/KPT/bgs.html

вверх страницы

Изменение цвета ссылок

Не посещал Ссылки
Текст непосещенной ссылки не связан в другое место
Чтобы изменить цвет непосещенной ссылки, используйте:

Создает страницу с синими ссылками
- код цвета # 00FF00 - это код синего цвета.

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

Посетили Ссылки

Просмотрено Ссылка цвет ссылки изменяется на после просмотра
Чтобы изменить цвет просматриваемой ссылки, используйте:

Создает страницу с посещенным фиолетовым цветом. ссылки
-цветовой код # DB70DB - это код для фиолетовый.

Активно Ссылки

Active Link временный цвет ссылка меняется на при нажатии на
Чтобы изменить цвет активной ссылки, используйте:

Создает страницу с красными ссылками, в то время как ссылка активная
- код цвета # FF0000 - это код красного цвета.

Примечание. Это изменяет цвета ссылок для весь документ.

Пример:

Вот несколько ссылок, у которых есть изменение цвета
<КУЗОВ LINK = "# 009900" VLINK = "# 00DD00">

Посмотрите пример веб-страницы:

Несколько советов по использованию цвет:
Имейте в виду при использовании цветов или изображения в фоновом режиме - насколько легко будет читать текст что перед ним.

Занятый фон затрудняет текст читать.

Темный текст на темном фоне и светлый текст на светлом фоне плохо читается.

Темный текст на темном фоне и светлый текст на светлом фоне плохо читается.

Сведите количество цветов к минимуму. Слишком много цветов будут отвлекать от страницы.

Перейти к следующему разделу таблиц

Вернуться к темам

последнее обновление: 05.07.99

примеров и передовых методов - Smashing Magazine

Об авторе

Мэтт Кронин - заядлый графический дизайнер, веб-дизайнер / разработчик, программист какао, фотограф, цифровой художник и т.п.Еще ему нравится писать, и он ... Больше о Мэтт ↬

Веб-дизайн прошел долгий путь с момента своего зарождения, особенно с точки зрения стиля. Взгляните на веб-сайт 10-летней давности и сравните его с сегодняшним. Различия огромны. Одно из основных изменений, которое вы заметите, - это фон. Сегодня фоны являются одной из основных функций, определяющих визуальный интерес веб-сайта. Фон содержит тему веб-сайта, и существует огромное количество возможностей при разработке фона веб-сайта.В этой статье рассматриваются лучшие практики и популярные тенденции фонов на современном этапе инновационного веб-дизайна . Вам также могут быть интересны следующие сообщения по теме: * Тенденции веб-дизайна на 2009 год • Тенденции мобильного веб-дизайна на 2009 год.

Веб-дизайн прошел долгий путь с момента своего появления, особенно с точки зрения стиля. Взгляните на веб-сайт 10-летней давности и сравните его с сегодняшним. Различия огромны. Одно из основных изменений, которое вы заметите, - это фон.Сегодня фоны являются одной из основных функций, определяющих визуальный интерес веб-сайта.

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

Вам также могут быть интересны следующие статьи по теме:

Базовые структуры фона

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

Фон тела Фон тела - самый «дальний» фон. Обычно это изображение, иллюстрация, текстура / узор или другой графический элемент.

Фон содержания Другой уровень структуры - фон содержания. Это фон текста, изображений и других базовых данных или информации.

Вариант 1. Слои содержимого и основного фона

Первая структура - это несколько слоев фона.Внизу - фон тела. Затем поверх него накладывается фон содержимого.

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

Дизайн выше показывает макет, в котором элементы содержимого отделены друг от друга. Ниже представлена ​​более распространенная многослойная структура.Обертка и содержимое имеют фон заданной ширины, а за пределами заданной ширины виден нижний слой.

Вариант 2: Контент непосредственно на иллюстрации или текстуре тела

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

На приведенном ниже веб-сайте содержимое, текст и изображения размещаются непосредственно на иллюстрированном фоне. Из-за контраста между белым текстом и синим фоном содержимое читается. Изображения имеют четкую границу, отделяющую их от фона и выводящую изображение вперед.

Вариант 3. Тело и фон контента как одно целое

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

На веб-сайте ниже показана эта структура с одноцветным фоном.

На веб-сайтах так много мест, где можно реализовать хороший дизайн фона. Два из этих мест - заголовок и верхняя часть оболочки. Вот несколько советов о том, как работать с фоном в этих двух областях.

Стандартный фон заголовка

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

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

Вот один пример заголовка, который красиво перетекает в фон содержимого. Вместо резкого и немедленного перехода с изображением графика исчезает:

Следующий подход отличается от эффекта перехода, но работает так же хорошо.Большой объем неиспользуемого пространства может показаться бессмысленным, но на самом деле он помогает разделить верхнюю навигацию и контент.

Flowing Illustrated Wrappers

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

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

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

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

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

Расширить графику по всей компоновке Хотя может быть достаточно только фона оболочки, вы также можете рассмотреть возможность продолжения иллюстрации через остальную часть фона. Взгляните на красивую иллюстрацию в Web Designer Depot ниже. Мало того, что за верхней частью обертки есть иллюстрация, но и графика, рассредоточенная по всему остальному фону.

Кроме того, иллюстрация заголовка продолжается в нижней части обертки.Это поддерживает живую тему на всей странице.

Фоны всего тела

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

Не забывайте о содержании Как было сказано выше, у вас есть так много возможностей при разработке фона, но есть тонкая грань между красивым фоном и тем, который слишком сильно отвлекает от контента.

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

Используйте световые блики или фаски для разделения цветов Один из широко используемых методов Web 2.0 - это подсветка (по сути, скосы) для разделения разных цветов на фоне или элементе, если на то пошло. А пока мы просто сосредоточимся на фоновом освещении.

Так как же использовать фаски? Это просто две линии размером в 1 пиксель, используемые для разделения цветов. Посмотрите на изображение ниже. Вы заметите, что при переключении цвета фона используется тонкая подсветка. Это делает макет очень красивым и чистым, одновременно добавляя объемности сайту.

Ниже более детально рассмотрены основные моменты. Цвет фона верхнего контейнера темнее, чем у нижнего контейнера. Затем для перехода между этими контейнерами есть две строки. Верх более темного цвета, а низ более светлого цвета.Это создает эффект фаски, который выглядит потрясающе при использовании в переходах.

Фаска отлично подходит для цветов со слабым контрастом, а также ее можно использовать с противоположными цветами, если более темный цвет фаски находится ближе к более светлому цвету фона. Другая сторона этого - изюминка. Подсветка лучше всего работает с высококонтрастными цветами. Это просто линия в 1 пиксель, используемая для перехода, например скос.

Этот метод также используется на веб-сайте Blog Action Day для разделения зеленого, серого и более темных цветов.Обратите внимание, как между светло-серым вверху и зеленым проходит белая линия размером 1 пиксель. Кроме того, ниже находится светло-зеленая 1-пиксельная линия, разделяющая зеленый и темно-серый цвета.

Сочетание фиксированной и жидкой графики: эффект параллакса Большинство веб-сайтов будут использовать статический фон без многослойных изображений. Если вы действительно хотите сделать дополнительный шаг, вы можете создать совместную гибкую и фиксированную многослойную графику.

Указанный ниже веб-сайт использует эту технику. Большие голубые облака на дальнем фоне находятся на заданном расстоянии слева, поэтому они перемещаются при изменении размера браузера.Слой на переднем плане, дома и деревья, статичен и не перемещается.

Этот метод почти создает эффект параллакса. Я говорю «почти», потому что эффекты параллакса обычно имеют много слоев для создания эффекта движения. Самый известный пример веб-сайта с хорошим эффектом параллакса на основе CSS - Silverback.

Веб-сайт Silverback состоит примерно из трех слоев. Фактически, каждый слой перемещается, но для всех них задан разный процент прокрутки, что означает, что они не перемещаются на одинаковую величину при настройке браузера.Обратите внимание на разные цвета и формы каждого слоя. Также обратите внимание, как верхний слой слегка размыт, чтобы придать эффекту большую глубину.

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

Creattica Daily использует именно эту технику.В качестве фона используется тонкий повторяющийся узор, но он остается в пределах контролируемого цветового диапазона.

Еще один чистый дизайн - это веб-сайт Product Planner, который имеет похожий узор и демонстрирует ту же технику с небольшим контрастом. Эта текстура обеспечивает более привлекательный визуальный эффект, помогая заинтересовать пользователя.

Объединить текстуру и иллюстрацию Некоторые веб-сайты используют только один или другой, но почему бы не объединить методы? Это создает еще более захватывающий и уникальный визуальный опыт.Веб-сайт ниже, Web Design Ledger, сочетает в себе иллюстрацию и текстуру дерева. Однако иллюстрация тонкая и не сильно контрастирует с текстурой дерева.

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

На этом веб-сайте прекрасно используются трехмерные световые эффекты. Размер фона и каждый элемент выглядят потрясающе и действительно привлекают внимание пользователя.Такой размер обязательно оставит хорошее впечатление и сделает сайт более запоминающимся.

Изображения всего тела

Использовать фиксированное изображение и фон содержимого Работа с фоном изображений может быть немного сложной, потому что вы не можете их повторить. Следовательно, вы должны найти другой способ включения изображения в макет.

Ниже представлен прекрасный пример этой техники от Nike. В качестве фона используется очень большое изображение, но фон фиксированный. Контейнер содержимого и фон содержимого прокручиваются, а фоновое изображение тела - нет.Кроме того, он использует изображение, которое течет во всех разрешениях, и изображение не масштабируется.

Сделайте небольшую виньетку Еще один хороший прием для создания изображений - эффект виньетки. Это помогает сосредоточить внимание на содержимом в центре и очень хорошо смотрится на большом фоне изображений. Однако важно использовать только небольшую виньетку. Вы заметите, что у фона на самом деле есть тонкая виньетка.

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

Найдите баланс в контрасте Изображения хороши, но проблема возникает, когда цвета в изображениях имеют более глубокий контраст, чем содержимое и фон содержимого. Это немедленно переводит взгляд пользователя с контента на изображение, что, очевидно, является проблемой для удобочитаемости.

Я еще раз воспользуюсь этим же примером от Kraft.Если вы посмотрите очень внимательно, вы заметите, что изображение на самом деле не очень насыщенное по цвету. Это не потому, что это плохое изображение, а потому, что оно должно быть немного тусклым, чтобы…

Кроме того, обратите внимание, что изображение сфокусировано на мороженом. Контент находится вокруг мороженого в тех областях, где изображение выходит из фокуса. Отсутствие фокуса за контентом помогает еще больше привлечь внимание к контенту на переднем плане. Этого, конечно, добился фотограф, но это легко сделать с помощью простого эффекта размытия линз в Photoshop.

Создание бесшовных плиток или повторяющихся фонов

Самый простой способ создать хороший фон - использовать повтор. Для этого не требуются большие изображения, но вам нужно учитывать множество факторов при создании повторяющегося фона. Чтобы упростить объяснение, я воспользуюсь веб-сайтом Брэда Колбоу в качестве примера, потому что он плавно разбивает изображение на мозаику.

Использовать большие изображения для повтора Чтобы сделать действительно хороший фон, вам следует использовать большие изображения. Фоновое изображение, используемое Брэдом Колбоу, составляет около 1000 пикселей, затем оно повторяется.Взгляните на изображение ниже. Красные линии показывают, где изображение заканчивается и повторяется.

Выровнять края идеально Что более важно, края изображений должны идеально совпадать. Область, где встречается изображение, должна быть одного цвета, то есть при создании фонового изображения правая и левая стороны должны совпадать. Если вы используете формы, они должны аккуратно соединяться.

Взгляните на пример ниже. Первый снимок экрана - это точное изображение (в масштабе), используемое в качестве фона веб-сайта.Затем ниже приведен снимок экрана, который показывает, как изображение встречается, когда оно настроено на повтор. Края фонового изображения идеально совпадают. Обратите внимание на то, как облако течет без разрывов и прерываний, а цвет воды на правом и левом краю одинаков.

Удалить повторяющиеся заметные объекты Если вы размещаете фоновое изображение мозаикой, и объект на изображении заметно повторяется, удалите его. Вам нужен фоновый узор, который плавно перетекает и выглядит как одно изображение, а не несколько мозаичных изображений.Теперь это руководство не так важно для веб-сайта Брэда Колбоу, потому что оно использует очень большое изображение, а повторяющиеся объекты трудно заметить, когда повторяющееся изображение слишком велико. На это следует обратить внимание, если вы повторяете небольшое изображение.

Разместите графику в одном разделе, но не в другом Другой способ замаскировать повторяющееся изображение - поместить элемент в одну часть фона, но не в другую. Что это обозначает? Что ж, возьмем еще раз пример веб-сайта Брэда Колбоу.

На этом изображении показан остров, который Брэд включил в фон. Графика внутренних водоемов не повторяется с остальным фоном. Это дает больше вариаций и затрудняет заметить, что фон на самом деле является повторяющимся изображением.

Приемы работы с фоном для контента / оболочки

Фоны для контента тоже могут быть проблемой. Фон должен быть тонким, иначе он испортит контент. Вот несколько способов оживить фон контента, не переусердствуя.

Простой градиент

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

Посмотрите на снимок экрана ниже, затем попробуйте представить его без градиентного фона. Было бы очень скучно и пресно. Такой простой эффект может иметь большое значение.

Тонкая текстура

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

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

Преобразование обертки в основной фон

Поначалу это может показаться запутанным, но на самом деле это относительно простой метод, который выглядит очень красиво, если вы умеете делать это правильно. Чтобы увидеть его в использовании, посмотрите на снимок экрана ZenSender ниже. Вверху на фоновой структуре тела используется многослойный фон-оболочка. Затем, примерно на полпути, фон оболочки исчезает и переходит в фон единого тела. Это просто еще один метод, который следует рассмотреть.

Стиль границ оболочки / модулей

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

Использование полупрозрачных фонов содержимого в многоуровневом дизайне

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

Веб-сайт, показанный ниже, находит идеальный баланс с полупрозрачным фоном контента. Изображение тела хорошо видно, но текст по-прежнему читаем, а изображение тела не отвлекает внимание пользователя.

Витрина справочных элементов

365 дней астрономии Красивый фон с иллюстрацией фона причудливой оболочки.

TN Отпуск Очень красивая смесь стиля гранж и имиджевого коллажа.

Квадратный глаз Хороший фон и цвета, а также красивый дизайн заголовка.

Милость Александрийская Хороший пример узора, который подчеркивает тему дизайна.

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

Старый лофт Вот очень хороший пример размещения контента прямо на иллюстрации.

Studiobank Хороший фоновый узор с идеальным цветом.

HutchHouse Забавный иллюстрированный фон, привлекающий внимание пользователя.

280 слайдов Удачное сочетание цветов и градиентов, оживляющих дизайн.

JUNECLOUD Иллюстрированный заголовок и образец для его разделения.

Эндрю Грейг Красочный заголовок и хорошее использование скоса для разделения контейнеров.

ГОТОЧИНА Очень красивое блеклое изображение и хорошее использование полупрозрачных элементов.

Электронная свадьба Низкоконтрастные формы фона корпуса идеально дополняют остальной дизайн.

Bellingham Real Estate Хорошая графика заголовка и красиво текстурированный фон оболочки.

Duplika Отличный и яркий фон для тела.

ANidea Яркий, но мощный фон тела со стилем оболочки, который работает с фоном.

Flash Gaming Summit На этом веб-сайте используется красочный статичный фон тела.

Twiistup Яркий и интенсивный статический фон под отдельными элементами контента.

Болезнь дизайна Веселые и легкие, в этом дизайне контент расположен прямо над фоном.

RapidWeaver Красивый фон обертки, переходящий в простой белый фон.

Sony CES 2009 г. Мощный фон с наложенными поверх него отдельными модулями.

Посредственно Это потрясающий фон с хорошей размерностью.

Крис Мерритт Некоторые световые эффекты с уникальным узором наложены сверху, чтобы создать крутой визуальный эффект.

Робин Этот фон использует иллюстрацию и мягкие цвета, чтобы сделать визуально приятным впечатление.

Продвинутый велнес Цвета фона навигации сразу захватывают пользователя, но по-прежнему работают с остальным дизайном.

Август Фоновое изображение не слишком отвлекает и красиво тускнеет.

(al)

Добавление цветов и шрифтов | Infopeople

Чтобы изменить цвет фона, вам необходимо добавить атрибут и значение цвета к открывающему тегу BODY (вы никогда не добавляете атрибут к закрывающему тегу!). Вот как выглядит атрибут:

bgcolor = "# ffffff"

Вот как это выглядит в теге BODY :

Значение "#ffffff" - это шестнадцатеричный код .Существуют буквально сотни возможных шестнадцатеричных кодов, которые можно применить к фону. Щелкните здесь, чтобы увидеть некоторые возможности. «#ffffff» - это код белого цвета, и вам всегда нужно использовать «#» и заключать шестнадцатеричный код в кавычки (помните, это значение атрибута).

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

В тег BODY мы можем добавить больше атрибутов, которые будут влиять на цвет текста и ссылок на веб-странице.Эти атрибуты:

text = "# 000000"
ссылка = "# 0033cc"
vlink = "# ff0000"

Атрибут текст влияет на цвет обычного текста (текста, на который нет ссылок) на странице. Ссылка Атрибут влияет на цвет текста ссылки на странице (по умолчанию для ссылок используется синий цвет). Атрибут vlink влияет на цвет посещенных ссылок на веб-странице (по умолчанию для посещенных ссылок используется фиолетовый цвет).

Если я добавлю эти атрибуты к тегу BODY , он будет выглядеть так:

Фон страницы будет белым (атрибут bgcolor , «#ffffff» - это шестнадцатеричный код для белого), текст (значение текста , «# 000000» - это шестнадцатеричный код для черного) будет черным, ссылки (атрибут ссылка ) будут синими, а посещенные ссылки (атрибут vlink ) будут красными.

Давайте продолжим и добавим атрибуты к тегу BODY нашего файла index.html.

  1. Откройте файл index.html в Блокноте.
  2. Замените открывающий тег на этот тег:
  3. Сохраните файл в Блокноте, затем просмотрите его в веб-браузере.

Не слишком круто, а? Но эти атрибуты BODY влияют на весь текст на веб-странице. Что, если вы хотите контролировать цвета определенных фрагментов текста на странице? Для этого вам нужно узнать о теге FONT .

Введение в шрифты

Весь текст на веб-странице набран шрифтом. Шрифт - это в основном текстовый стиль. Вы знаете, что шрифт стоит перед по имени: Arial, Courier, Times. Шрифты также имеют размеров и цветов . Ваш браузер использует некоторые настройки шрифта по умолчанию: по умолчанию лицо обычно Times, размер по умолчанию - 3, а по умолчанию цвет черный.

Но тег FONT позволяет вам переопределить эти значения по умолчанию и отображать текст особым образом.

Вот пример из Webmonkey (отличный учебный веб-сайт по HTML от журнала Wired). Поверьте на слово:

ТЕХНИКОЛОР

Если я ничего не сделаю, это будет просто черный текст, размер 3. Но если я добавлю к нему тег FONT и добавлю атрибуты , цвет (используйте bgcolor только в теге BODY . ) и размер Я могу изменить внешний вид слова:

  ТЕХНИКОЛОР

, который в веб-браузере выглядит так:

ТЕХНИКОЛОР

Вы заметили, что добавление атрибута size = "5" со значением 5 увеличило текст? Размер шрифта от 1 до 6:

большой
крошечный

Атрибут face сложнее; вы должны использовать только те шрифты, которые есть у всех на своих компьютерах.Arial - безопасный шрифт в использовании, он очень удобочитаемый, что делает его очень популярным. Courier и Times также являются безопасным выбором. Вы должны пока придерживаться этих начертаний шрифта.

Вот пример атрибутов FONT цвет, размер и лицо в действии:

ТЕХНИКОЛОР

, который выглядит так в веб-браузере (обратите внимание, что я уменьшил размер шрифта и изменил начертание на шрифт, похожий на пишущую машинку, под названием Courier):

ТЕХНИКОЛОР

Вы даже можете сделать каждую букву в слове отдельным цветом:

  Т 
 E 
 C 
 H 

 N 
 Я 
 C 
 О 
 L 

 О 
 R

, который в веб-браузере выглядит так:

T E C H N I C O L O R

Если вы используете тег FONT для назначения цветов, эти цвета будут иметь приоритет над любыми цветами, которые вы назначили в теге BODY .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *