Никакие. Теги не определяют цвет элемента. Оформление сайта — это к CSS.
Если это текст, то color, если нужно указать фон для блока — background.
Раньше использовался Но это очень устарело. Сейчас тег font не поддерживается. Сейчас это делается с помощью CSS.
Похожие вопросы
Ваш браузер устарел
Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.
Применение цвета к HTML-элементам с помощью CSS
Использование цвета — одна из фундаментальных форм человеческого восприятия, так дети экспериментируют с цветом ещё до того, как начинают осознанно рисовать. Возможно, именно поэтому цвет — одна из первых вещей, с которой люди хотят экспериментировать, изучая разработку веб-сайтов. С помощью CSS, существует множество способов присвоить цвет HTML элементам, чтобы придать им желаемый вид. Эта статья даёт базовые представления о всех способах применения цвета к HTML-элементам с помощью CSS.
К счастью, присвоить цвет к HTML-элементу очень просто, и это можно сделать практически со всеми элементами.
Завершим мы статью размышлениями на тему как использовать цвет с умом: как выбрать подходящий цвет, учитывая потребности людей с различными визуальными способностями.
Что может иметь цвет
На уровне элементов HTML, всему можно присвоить цвет. С точки зрения отдельных составляющих элементов, таких как текст, границы и т.д., существует ряд свойств CSS, с помощью которых можно присвоить цвет.
На фундаментальном уровне, свойство color (en-US) определяет цвет текста HTML-элемента, а свойство background-color — цвет фона элемента. Они работают практически для всех элементов.
Текст
Эти свойства используются для определения цвета текста, его фона и любого оформления текста.
Свойство color применяется к тексту и любому оформлению текста, например: подчёркивание, линии на текстом, перечёркивание и т.д.
Цвет фона текста.
Добавляет и устанавливает параметры тени для текста. Один из параметров тени — это основной цвет, который размывается и смешивается с цветом фона на основе других параметров. См. Text drop shadows, чтобы узнать больше.
По умолчанию, элементы оформление текста (подчёркивание, перечёркивание) используют цвет свойства color . Но вы можете присвоить другой цвет с помощью свойства text-decoration-color .
Цвет, который используется для выделения диакритических знаков, прилегающих к каждому текстовому символу. Это свойство используется преимущественно для восточноазиатских языков.
Цвет, который используется для каретки (caret (en-US)) (курсора ввода текста). Применимо только к редактируемым элементам, таким как и (en-US) или элементам , для которых установлен атрибут contenteditable .
Блоки
Каждый элемент представляет собой прямоугольный блок с каким-то содержимым, фоном и границей.
См. раздел Borders с перечнем свойств CSS, с помощью которых можно присвоить цвет границам блока.
Цвет фона блока.
Цвет линий, которые разделяют колонки текста.
Цвет контура, вокруг границы элемента. Этот контур отличается от границы элемента тем, что он не занимает место в документе и может перекрывать другой элемент. Обычно его используют как рамку-индикатор, чтобы показать какой элемент находится в фокусе.
Границы
Вокруг любого элемента можно создать границу (en-US) , т.е. линию вокруг содержимого элемента. См. Box properties, чтобы узнать больше про отношения между элементами и их границами, и статью Оформляем Границы с Помощью CSS (en-US) , чтобы узнать больше про то, как применять стили к границам.
Существует краткая запись border , которая позволяет задать сразу все свойства границы, включая даже не связанные с цветом свойства, такие как толщина линии (width), стиль линии (style (en-US) ): сплошная (solid), штриховая (dashed) и так далее.
Задаёт единый цвет для всех сторон границы элемента.
Позволяет установить цвет соответствующей стороне границы элемента: border-left-color — левая граница, border-right-color — правая, border-top-color — верхняя, border-bottom-color — нижняя.
С помощью этих свойств вы можете установить цвет границ, которые расположены ближе всего к началу и концу блока. Для письменности слева направо, начало границы блока — верхний край, а конец — нижний. Не путайте с началом и концом строки, где начало — это левый край, а конец — правый.
Эти свойства определяют цвет границы, расположенной ближе всего к началу и концу текста в блоке. Сторона начала и конца зависит от свойств writing-mode , direction и text-orientation (en-US), которые обычно (но не всегда) используются для настройки направления текста. Например, если текст отображается справа налево, то border-inline-start-color применяется к правой стороне границы.
Как можно ещё использовать цвет
CSS не единственная web-технология, которая поддерживает цвет.
Позволяет создавать растровую 2D-графику в элементе . См. Canvas tutorial, чтобы узнать больше.
Позволяет создавать изображения с помощью команд, которые рисуют определённые фигуры, узоры, линии для создания конечного изображения. Команды SVG форматируются в XML, и могут размещаться непосредственно на веб-странице, или в элементе , как и любое другое изображение.
Библиотека Веб-Графики (The Web Graphics Library) — это кроссплатформенный API на основе OpenGL ES, используется для создания высокопроизводительной 2D и 3D-графики в браузере. См. Learn WebGL for 2D and 3D, чтобы узнать больше..
Как задать цвет
Для того чтобы задать цвет в CSS, необходимо найти способ как перевести понятие «цвета» в цифровой формат, который может использовать компьютер. Обычно это делают разбивая цвет на компоненты, например какое количество единиц основных цветов содержится в данном цвете или степень яркости. Соответственно, есть несколько способов как можно задать цвет в CSS.
Подробнее о каждом значения цвета, можно прочитать в статье про CSS .
Ключевые слова
Существует набор названий цветов стандартной палитры, который позволяет использовать ключевые слова вместо числового значения цвета. Ключевые слова включают основные и вторичные цвета (такие как красный ( red ), синий ( blue ), или оранжевый ( orange )), оттенки серого (от чёрного ( black ) к белому ( white ), включая такие цвета как темносерый ( darkgray ) или светло-серый ( lightgrey )), а также множество других смешанных цветов: lightseagreen , cornflowerblue , и rebeccapurple .
См. Color keywords — полный перечень всех доступных ключевых слов.
RGB значения
Есть три способа передачи RGB цвета в CSS.
Шестнадцатеричная запись в виде строки
Шестнадцатеричная запись передаёт цвет, используя шестнадцатеричные числа, которые передают каждый компонент цвета (красный, зелёный и синий). Запись также может включать четвёртый компонент: альфа-канал (или прозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 — 0xFF) или, опционально, как число от 0 до 15 (0x0 — 0xF). Каждый компонент необходимо задавать используя одинаковое количество чисел. Так, если вы используете однозначное число, то итоговый цвет рассчитывается используя число каждого компонента дважды: «#D» превращается в «#DD» .
Цвет в шестнадцатеричной записи всегда начинается с символа «#» . После него начинаются шестнадцатеричные числа цветового кода. Запись не зависит от регистра.
Задаёт полностью непрозрачный цвет, у которого компонент красного цвета представлен шестнадцатеричным числом 0xrr , зелёного — 0xgg и синего — 0xbb .
Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xrr , зелёного — 0xgg и синего — 0xbb . Альфа канал представлен 0xaa ; чем ниже значение, тем прозрачнее становится цвет.
Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr , зелёного — 0xg и синего — 0xb .
Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr , зелёного — 0xg и синего — 0xb . Альфа канал представлен 0xa ; чем ниже значение, тем прозрачнее становится цвет.
Например, вы можете представить непрозрачный ярко-синий цвет как «#0000ff» или «#00f» . Для того, чтобы сделать его на 25% прозрачным, вы можете использовать «#0000ff44» или «#00f4» .
RGB запись в виде функции
RGB запись в виде функции, как и шестнадцатеричная запись, представляет цвет, используя красный, зелёный и синий компоненты (также, опционально можно использовать компонент альфа канала для прозрачности). Но, вместо того, чтоб использовать строку, цвет определяется CSS функцией rgb() . Данная функция принимает как вводные параметры значения красного, зелёного и синего компонентов и, опционально, четвёртого компонента — значение альфа канала.
Допустимые значения для каждого из этих параметров:
Альфа канал — это числовое значение между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный). Также можно указать значение в процентах, где 0% соответствует 0.0, а 100% — 1.0.
Например, ярко-красный с 50% прозрачностью может быть представлен как rgb(255, 0, 0, 0.5) или rgb(100%, 0, 0, 50%) .
HSL запись в виде функции
Дизайнеры часто предпочитают использовать цветовую модель HSL, где H — Hue (оттенок), S — Saturation (насыщенность), L — Lightness or Luminance (светлота). В браузерах HSL цвет представлен через запись HSL в виде функции. CSS функция hsl() очень похожа на rgb() функцию.
Рис. 1. Цилиндрическая модель HSL. Hue (оттенок) определяет фактический цвет, основанный на положении вдоль цветового круга, представляя цвета видимого спектра. Saturation (насыщенность) представляет собой процентное соотношение оттенка от серого до максимально насыщенного цвета. По мере увеличения значения luminance/ lightness (светлоты) цвет переходит от самого тёмного к самому светлому (от чёрного к белому). Изображение представлено пользователем SharkD в Wikipedia, распространяется на правах лицензии CC BY-SA 3.0 .
Значение компонента оттенок (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через жёлтый, зелёный, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS-свойством , а именно — в градусах ( deg ), радианах ( rad ), градиентах ( grad ) или поворотах ( turn ). Но компонент оттенок никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.
Компонент насыщенность (S) определяет количество конечного цвета из которого состоит указанный оттенок. Остальное определяется уровнем серого цвета, которое указывает компонент luminance/ lightness (L).
Подумайте об этом как о создании идеального цвета краски:
Вы начинаете с базовой краски, т.е. с максимально возможной интенсивности данного цвета. Например, наиболее насыщенный синий, который может быть представлен на экране пользователя. Это компонент hue (оттенок): значение представляющее угол вокруг цветового круга для насыщенного оттенка, который мы хотим использовать в качестве нашей базы.
Далее выберете краску серого оттенка, которая будет соответствовать тому, насколько ярким вы хотите сделать цвет. Это luminance/ lightness (яркость). Вы хотите, чтобы цвет был очень ярким, практически белым или очень темным, ближе к чёрному, или что-то среднее? Данный компонент определяется в процентах, где 0% — совершенный чёрный цвет и 100% — совершенный белый (независимо от насыщенности или оттенка). Средние значения — это буквальная серая область.
Теперь, когда у есть серый цвет и идеально насыщенный цвет, вам необходимо их смешать. Компонент saturation (насыщенность) определяет какой процент конечного цвета должен состоять из идеально насыщенного цвета. Остаток конечного цвета формируется серым цветом, который представляет насыщенность.
Опционально вы также можете включить альфа-канал, чтобы сделать цвет менее прозрачным.
Примечание: Обратите внимание, что, когда вы не указываете единицу измерения оттенка (hue), то предполагается, что он указан в градусах ( deg ).
Использование цвета
Теперь, когда вы знаете какие существуют свойства CSS для присваивания цвета к элементам и какие есть форматы описания цвета, вы можете соединить это вместе, чтобы начать использовать цвет. Как вы уже видели в списке под разделом Что может иметь цвет, существует множество вещей, к которым можно применить цвет, используя CSS. Давайте взглянем на это с двух сторон: использовать цвет в таблицах стилей (stylesheet (en-US)) и добавлять, изменять цвет, используя JavaScript код.
Цвет в таблицах стилей CSS
Самый простой способ присвоить цвет элементу и то, как это обычно делается — это просто указать цвет в CSS. Мы не будем останавливаться на каждом из вышеупомянутых свойств, а просто рассмотрим несколько примеров. Где бы вы не использовали цвет, принцип один и тот же.
Давайте начнём наш пример с результата, который нам нужно достичь:
HTML
HTML, который создаёт вышеупомянутый пример:
divclass="wrapper">divclass="box boxLeft">p>This is the first box.p>div>divclass="box boxRight">p>This is the second box.p>div>div>
Все волшебство, как всегда, происходит в CSS, где мы и будем присваивать цвет к данным HTML-элементам..
CSS
CSS мы рассмотрим более детально, чтобы по очереди проанализировать все интересные части.
Но больше всего нас интересует свойство граница border , которое устанавливает границу вокруг внешнего края элемента. Данная граница представлена сплошной линией, шириной в 6 пикселей, светло-бирюзового цвета ( mediumturquoise ).
Два цветных блока имеют ряд одинаковых свойств, поэтому далее мы установим класс .box , который определит эти общие свойства:
Вкратце класс .box устанавливает размер каждого блока и параметры шрифта. Также мы используем CSS Flexbox, чтобы с лёгкостью отцентрировать содержимое каждого блока. Мы включаем режим flex с помощью display: flex , и присваиваем значение center justify-content и align-items . Затем мы создаём отдельные классы для каждого из двух блоков, которые определят индивидуальные свойства.
Класс .boxLeft , который используется для стилизации левого блока, выравнивает контейнер по левому краю и присваивает цвета:
background-color определяет цвет фона блока значением rgb(245, 130, 130) .
outline , в отличие от привычного нам свойства border , не влияет на положение блока и его ширину. Outline представлен сплошной, темно-красной линией, шириной в 2 пикселя. Обратите внимание на ключевое слово darkred , которое используется для определение цвета.
Обратите внимание, что мы не определяем значение цвета текста. Это означает, что свойство color (en-US) будет унаследовано от ближайшего родительского элемента, у которого это свойство определено. По умолчанию это чёрный цвет.
Класс .boxRight описывает свойства правого блока. Блок выравнивается по правому краю и становится рядом с предыдущим блоком. Затем определяются следующие цвета:
background-color определяется значением HSL: hsl(270deg, 50%, 75%) . Это светло-фиолетовый цвет.
Outline блока определяет, что вокруг блока должна быть прерывистая линия, шириной в четыре пикселя, фиолетового цвета немного темнее, чем цвет фона ( rgb(110, 20, 120) ).
Цвет текста определяется свойством color (en-US), значение которого hsl(0deg, 100%, 100%) . Это один из многих способов задать белый цвет.
С помощью text-decoration (en-US) мы добавляем зелёную волнистую линию под текстом.
И наконец, свойство text-shadow добавляет небольшую чёрную тень тексту.
Предоставляем возможность пользователю выбрать цвет
There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you’re implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it’s been necessary to implement your own color picker, HTML now provides support for browsers to provide one for your use through the element, by using «color» as the value of its type attribute.
The element represents a color only in the hexadecimal string notation covered above.
Example: Picking a color
Let’s look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker’s value is displayed.
Примечание: On macOS, you indicate that you’ve finalized selection of the color by closing the color picker window.
HTML
The HTML here creates a box that contains a color picker control (with a label created using the element) and an empty paragraph element ( ) into which we’ll output some text from our JavaScript code.
The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won’t last, courtesy of the JavaScript below.
The script here handles the task of updating the starting color of the border to match the color picker’s value. Then two event handlers are added to deal with input from the element.
let colorPicker = document.getElementById("colorPicker");let box = document.getElementById("box");let output = document.getElementById("output"); box.style.borderColor = colorPicker.value; colorPicker.addEventListener("input",function(event) box.style.borderColor = event.target.value;>,false,); colorPicker.addEventListener("change",function(event) output.innerText ="Color set to "+ colorPicker.value +".";>,false,);
The input (en-US) event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box’s border color to match the color picker’s current value.
The change (en-US) event is received when the color picker’s value is finalized. We respond by setting the contents of the
element with the ID «output» to a string describing the finally selected color.
Using color wisely
Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren’t well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.
Finding the right colors
Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can’t replace having a good designer helping you make these decisions, they can definitely get you started.
Base color
The first step is to choose your base color. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage Mountain Dew and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:
A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.
A color that comes from imagery associated with what your content is about. If you’re creating a web site about a given item or product, choose a color that’s physically present on that item.
Browse web sites that let you look at lots of existing color palettes and imags to find inspiration.
When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.
Примечание: The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.
Fleshing out the palette
Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See Color and accessibility for a brief explanation of why this matters.
A few examples (all free to use as of the time this list was last revised):
MDN’s color picker tool
Paletton
Adobe Color CC online color wheel
When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you’ll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.
Примечание: Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.
Color theory resources
A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:
An online course which introduces concepts such as what color is, how it’s percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.
Color and accessibility
There are several ways color can be an accessibility problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it’s important to consider your use of color carefully.
You should do at least basic research into color blindness. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.
Примечание: The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won’t be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what’s happening.
For more information about color blindness, see the following articles:
Medline Plus: Color Blindness (United States National Institute of Health)
American Academy of Ophthamology: What Is Color Blindness?
Color Blindness & Web Design (Usability.gov: United States Department of Health and Human Services)
Palette design example
Let’s consider a quick example of selecting an appropriate color palette for a site. Imagine that you’re building a web site for a new game that takes place on the planet Mars. So let’s do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet’s surface. We use a color picker tool to select a sample of the color we choose.
Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A , which is an appropriate rusty orange-red color that’s so stereotypical of the Martian surface.
Having selected our base color, we need to build out our palette. We decide to use Paletteon to come up with the other colors we need. Upon opening Paletton, we see:
Next, we enter our color’s hex code ( D79C7A ) into the «Base RGB» box at the bottom-left corner of the tool:
We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the «add complementary» toggle underneath the menu that lets you select the palette type (currently «Monochromatic»). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C .
If you’re unhappy with the color that’s proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don’t like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:
That greyish blue in the top-right looks pretty good. Clicking on it, we find that it’s #556E8D . That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:
Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.
Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there’s just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It’s easy to go too far in one way or another so be sure to get feedback on your colors once you’ve selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.
See also
Drawing graphics (en-US)
Graphics on the web
MDN’s color picker tool (en-US)
Found a content problem with this page?
Edit the page on GitHub.
Report the content issue.
View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Какие теги определяют цвета элементов страницы
Тег позволял задать шрифт, размер и цвет текста на странице. Однако, этот тег является устаревшим и не рекомендуется к использованию в HTML. Вместо него следует использовать CSS для стилизации текста.
Текст
Атрибуты тега :
size — задавал размер шрифта, значение от 1 до 7 .
face — задавал название шрифта, например Arial , Times New Roman и т. д.
color — задавал цвет текста в формате HEX, например #000000 для чёрного цвета.
Примеры использования
Изменение цвета текста:
Красный текст
Изменение размера текста:
Крупный текст
Текст в шрифте Arial
Комбинирование нескольких атрибутов:
Текст в шрифте Arial, размером 3 и цветом #000000
Для чего использовался тег
Тег использовался для задания шрифта, размера и цвета текста на веб-странице. Однако, следует избегать использования этого тега и вместо него использовать CSS для стилизации текста.
Сейчас примеры использования тега можно найти только на устаревших сайтах
Глобальные атрибуты
Нюансы
Использование тега может привести к нежелательным результатам в браузерах, которые не поддерживают этот тег.
Чем заменить тег
Вместо тега следует использовать CSS для задания шрифта, размера и цвета текста на веб-странице. Например, можно использовать свойства font-family , font-size и color для задания соответствующих стилей текста в CSS.
���� Другие устаревшие теги
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Контейнер для чего угодно. Тег
Тег определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.
Заголовок секции
Какое-нибудь содержимое секции
6 октября 2023
Как добавить подпись в HTML. Тег
Описание изображения
Устаревший атрибут align — выравнивание подписи относительно элемента .
Тег может использоваться только внутри элемента .
Валидный HTML требует, чтобы тег находился после элемента или других медиа-элементов внутри . Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.
6 октября 2023
Метаданные HTML-страницы. Тег
Тег содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.
Атрибуты тега :
charset — кодировка символов в документе.
name — имя метаданных.
content — значение метаданных.
http-equiv — HTTP-заголовок для значения атрибута content .
Атрибут charset должен быть первым атрибутом в теге , а name и http-equiv нельзя использовать вместе.
4 октября 2023
Просто кнопка. Тег
Тег создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.
Атрибуты тега :
name — имя кнопки.
type — тип кнопки, по умолчанию — submit . Атрибут type необходим, если указан атрибут value .
value — значение, которое будет отправлено на сервер при нажатии на кнопку.
disabled — указывает, что кнопка должна быть отключена.
form — одна или несколько форм, к которым принадлежит кнопка.
formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
formmethod — метод HTTP, используемый при отправке данных формы.
formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
formtarget — указывает, где отображать ответ после отправки формы.
4 октября 2023
Независимый контент. Тег
Тег в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.
Заголовок статьи
Текст статьи.
Тегом размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Не используйте для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
3 октября 2023
Как встроить страницу через
Тег позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.
Простейший пример использования :
Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.
Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).
3 октября 2023
Выпадающий список. Тег
Тег используется для создания выпадающего списка. Этот тег содержит список опций, которые пользователь может выбрать. Когда пользователь выбирает опцию, выбранное значение отправляется на сервер или обрабатывается на клиентской стороне.
Все опции списка должны быть обёрнуты в тег .
Атрибуты тега :
autocomplete — подсказка для функции автозаполнения формы;
disabled — делает элемент неактивным;
form — связывает список с формой;
multiple — позволяет выбрать несколько опций;
name — задает имя элемента, которое будет отправляться на сервер;
required — делает элемент обязательным для заполнения;
size — задает количество строк в списке.
1 октября 2023
Встроенные CSS-стили для страницы с тегом
Тег используется для определения стилей для HTML-документов. Он является важным компонентом CSS, которые позволяют разработчикам создавать визуально привлекательные веб-страницы, определяя различные стили, такие как цвета, шрифты и макеты.
body
Добро пожаловать на мой сайт!
Атрибуты тега :
type — MIME-тип таблицы стилей.
media — типы носителей, для которы будет использоваться стиль.
29 сентября 2023
Изображение в HTML. Тег
Элемент используется для вставки изображений на веб-страницы.
У нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.
Существуют определенные правила или стандарты использования тега , которые рекомендуются для большинства случаев в веб-разработке. Несмотря на то что конкретные требования могут варьироваться в зависимости от проекта, ниже приведены атрибуты и практики, которые часто рекомендуются к использованию.
28 сентября 2023
Работа с цветом HTML – цвет фона и цвет текста
Дизайн не является центральной особенностью HTML, поэтому специального цветового тега HTML не существует. Однако вы можете изменить цвет любого текста следующими способами:
Использование встроенного атрибута style . Добавление цвета на веб-страницу является частью встроенного стиля CSS. Чтобы установить цвет текста или фона в HTML, вам нужно использовать атрибут style . Вы можете применить атрибут style к HTML-тегам ,
, , , или и т. д. Имейте в виду, что использование атрибута стиля переопределяет любой стиль, установленный в HTML-теге или во внешней таблице стилей.
Использование внутреннего CSS. Вариант внутреннего стиля CSS популярен для применения свойств к отдельным страницам путем помещения всех стилей в элемент , размещенный в HTML-документов.
Дополнительные сведения об использовании цветовых кодов HTML см. в статье Цветовые коды HTML.
Если вы хотите программно изменить текст, фон или цвет рамки в файле HTML, посетите статьи раздела Статьи с практическими рекомендациями. Статьи в этой главе отвечают на популярные вопросы и содержат примеры C#, предоставляющие необходимую информацию об использовании библиотеки классов Aspose.HTML для решения конкретных задач.
Цвет текста
Вы можете использовать встроенный атрибут style или элемент , чтобы изменить цвет текста, а затем установить значение с помощью свойства color . Свойство color устанавливает значение цвета переднего плана для текста элемента и оформления текста. Свойство color принимает имена цветов, значения RGB, RGBA, HEX, HSL или HSLA.
Цвет текста с помощью имен цветов HTML
Имя цвета отображает конкретное имя цвета HTML. Современные браузеры поддерживают 140+ названий цветов HTML, и вы можете использовать любое из них для своих элементов. Например, вы можете раскрасить текст, используя встроенный атрибут style , как показано в следующем примере:
1html>2body>3h2 style="color:DarkCyan;">How to set text color using HTML color names?h2>4h3 style="color:DarkRed;">Add a style attribute to the text element you want to colorize and use the color name to specify the color.h3>5h4 style="color:DarkBlue;">There are over 140 named colors to choose from that you can use.h4>6body>7html>
Тот же результат раскрашивания текста может быть достигнут с помощью внутреннего CSS, как показано в следующем примере:
1html>2head>3style>4h2 5color:DarkCyan;6>7h3 8color:DarkRed;9>10h4 11color:DarkBlue;12>13style>14head>15body>16h2>How to set text color using HTML color names?h2>17h3>Add a style attribute to the text element you want to colorize and use the color name to specify the color.h3>18h4>There are over 140 named colors to choose from that you can use.h4>19body>20html>
Отрендеренный HTML-код выглядит следующим образом:
Вы можете узнать больше о применении встроенного, внутреннего и внешнего CSS и их редактировании с помощью Aspose.HTML API из Edit CSS. Примеры C# изменения цвета текста с помощью Aspose.HTML API вы можете найти в статье Как изменить цвет текста в HTML.
Цвет текста с использованием цветовых кодов RGB, RGBA или HEX.
Для раскрашивания текста HTML вы можете использовать RGB или HEX, которые являются наиболее часто используемыми цветовыми кодами. Значение RGB определяет цвет HTML путем смешивания красных, зеленых и синих значений. Значение цвета HEX работает почти так же, как RGB, но выглядит иначе. Если вы хотите узнать больше о кодах RGB, RGBA и HEX, посетите статью Цветовые коды HTML.
Использование цветовых кодов RGB или HEX является наиболее распространенным способом добавления цвета на веб-страницы. Необходимо добавить атрибут style к текстовому элементу, который вы хотите раскрасить. В приведенном ниже примере мы используем элементы и , чтобы применить встроенный атрибут style и свойство color с кодами RGB, RGBA и HEX:
1html>2body>3h2 style="color:rgb(50,150,200);">How to use Text Color?h2>4h3 style="color:rgba(220,30,100,1);">1. To colorize HTML text, add a style attribute to the text element you want to color.h3>5h3 style="color:#1A8D7E">2. Apply the color property to specify the color using RGB, RGBA or HEX code.h3>6body>7html>
Визуализированный HTML-код выглядит следующим образом:
Цвет текста с использованием цветовых кодов HSL или HSLA
HSL (Hue, Saturation, Lightness) – это представление цветовой модели RGB в цилиндрических координатах. Оттенок (Hue) определяет основной цвет и измеряет его в градусах от 0 до 360 на цветовом круге RGB. Насыщенность (Saturation) – это интенсивность или чистота цвета, которая определяется в процентах от 0 (черный и белый) до 100 (яркий цвет). Легкость (Lightness) – это количество яркости или света в цвете. Он определяется в процентах от 0 (черный) до 100 (белый).
Цветовые значения HSLA являются расширением цветовых значений HSL с альфа-каналом, определяющим непрозрачность цвета. Значение цвета HSLA указывается с оттенком, насыщенностью, яркостью и альфа-каналом, где параметр альфа определяет непрозрачность. Альфа-параметр представляет собой число от 0,0, что означает «полностью прозрачный», до 1,0, что означает «полностью непрозрачный».
Используя тот же атрибут style , что и раньше, замените код RGB/RGBA/HEX или имя цвета значением HSL или HSLA в свойстве color :
1html>2body>3h2 style="color:hsl(200,100%,40%);">HSL and HSLA color codesh2>4p style="color:hsla(200,100%,40%,0.9); font-size:18px;">HSL(hue, saturation, lightness) is a representation of the RGB color model in cylindrical coordinates.p>5p style="color:hsla(200,100%,40%,0.6); font-size:18px;">HSLA color values are an extension of HSL color values with an alpha channel that determines the opacity of the color.p>6body>7html>
Отрендеренный HTML-код выглядит следующим образом:
Фоновый цвет – Background Color
Цвет фона для определенного элемента HTML
Вы можете использовать атрибут style , чтобы указать цвет фона для HTML-элемента, а затем установить значение, используя свойство background-color . Свойство background-color принимает имена цветов, значения RGB, RGBA, HEX, HSL или HSLA.
Определите, для какого элемента вы хотите изменить цвет фона. Если это абзац, найдите открывающий тег
. Это также может быть тег … , или . В этом примере мы добавляем цвет фона к элементам :
1html>2body>3p>The color name is "YellowGreen":p>4h2 style="background-color:rgb(154, 205, 50);">rgb(154,205,50)h2>5h2 style="background-color:#9ACD32;">#9ACD32h1>6h2 style="background-color:hsl(80, 61%, 50%);">hsl(80,61%,50%)h2>78p>RGBA values of name "YellowGreen" color, with different transparent:p>9h2 style="background-color:rgba(154, 205, 50, 0.2);">rgba(154,205,50,0.2)h2>10h2 style="background-color:rgba(154, 205, 50, 0.5);">rgba(154,205,50,0.5)h2>11h2 style="background-color:rgba(154, 205, 50, 0.8);">rgba(154,205,50,0.8)h2>1213p>HSLA values of name "YellowGreen" color, with different transparent:p>14h2 style="background-color:hsla(80, 61%, 50%, 0.2);">hsla(80,61%,50%,0.2)h2>15h2 style="background-color:hsla(80, 61%, 50%, 0.5);">hsla(80,61%,50%,0.5)h2>16h2 style="background-color:hsla(80, 61%, 50%, 0.8);">hsla(80,61%,50%,0.8)h2>17body>18html>
Отрендеренный HTML-код выглядит следующим образом:
Цвет фона для всей веб-страницы
Важно отметить, что в приведенном выше примере свойство background-color обеспечивает цвет фона текста, но не всего документа. Если вы хотите изменить цвет HTML для всей страницы, вы должны использовать свойство background-color атрибута style в открывающем теге раздела :
Изображение отображает HTML-код для установки цвета фона для текста (название цвета YellowGreen указано в разных цветовых кодах) и всей веб-страницы.
Еще один пример достижения эффекта окрашивания фона всей веб-страницы с помощью атрибута style со свойством background-color в открывающем теге секции :
1html>2body style="background-color:#ffe0e0;">3h2>How to set Background Color for the whole web page?h2>4p>Add the style attribute to the body section and apply the background-color property to specify a color using color name, RGB, HEX or HSL code.p>5body>6html>
Цвет границы – Border Color
Вы можете использовать атрибут style со свойствами border-style и border-color , чтобы указать цвет границы для текстовых элементов. Свойство CSS border-color определяет цвет четырех границ элемента. Свойство border-color будет работать, только если сначала определено свойство border-style , которое используется для установки границ. Это свойство не будет работать в одиночку. Если это свойство не установлено, оно наследует цвет элемента. Свойство border-color принимает имена цветов, значения RGB, RGBA, HEX, HSL или HSLA.
1html>2body>3p> The border-color property only works when the border-style property is defined first, which is used to set the borders.p>4h2 style="color:rgb(50,150,200); border-style:solid; border-color:rgb(220,30,100);">How to define border color?h2>5p> If the border-style property is defined and the border-color property is not set, the border inherits the element's color.p>6h2 style="color:rgb(50,150,200); border-style:solid;">How to define border color?h2>7body>8html>
Aspose.HTML предлагает бесплатное онлайн-приложение Color Wheel Picker, которое позволяет создавать наборы цветов в цветовом коде HEX. Вы можете использовать это бесплатное онлайн-приложение, чтобы найти цветовые гармонии, используя правила сочетания цветов, но также важно экспериментировать с цветом. Color Wheel Picker предлагает отличный способ поэкспериментировать с цветом и самостоятельно создавать захватывающие цветовые комбинации. Приложение работает для компьютеров, планшетов и мобильных устройств. Так что создавайте свою уникальную палитру для любого проекта!
