HTML: Атрибут style

Атрибут style используется для стилизации элементов непосредственно в HTML коде. Цель атрибута style заключается в предоставлении простого способа изменения внешнего вида практически любого HTML элемента.

Примечание: тут мы рассматриваем атрибут style для формирования общего представления об использовании CSS стилей для оформления веб-страниц. Подробнее о возможностях CSS вы можете почитать в CSS самоучителе.

Код примера познакомит вас с новым способом форматирования документа:

  
Посмотрите на цвета и стили
 
Этот текст написан красным цветов с помощью шрифта Verdana.
 
Этот текст написан зеленым цветом с помощью шрифта Times.
 
Этот текст имеет размер 30 пикселей.
   

Внимательно посмотрите на пример, с помощью атрибута style мы задаем CSS стиль внутри HTML-элементов, такой способ задания стилей называется встроенным стилем. Встроенный стиль применяется только к элементу, в котором он был определён, и к его дочерним элементам (если применённые CSS свойства наследуются).

Примечание: посмотреть наследуется ли значение применённого свойства дочерними элементами или нет, можно в CSS справочнике на странице с данным свойством.

Задний фон

Задний фон элемента задается с помощью CSS свойства background-color, которое в качестве значения может принимать любое доступное значение цвета (про различные значения цветов смотрите ниже), после свойства обязательно должно идти двоеточие и значение, после значения обязательно ставится точка с запятой, эти правила распространяются на все свойства атрибута style . Если нужно задать несколько свойств стиля для одного элемента, то каждое последующее свойство записывается после ; » предыдущего свойства.

Цвет текста

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

Установка цвета по имени

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

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

Установка цвета с помощью RGB

Система RGB использует три числа, которые описывают относительное количество красного, зеленого и синего цветов, которые смешаны вместе для получения любого оттенка. Числа могут варьироваться от 0 до 255 для числовых значений или от 0% до 100%

Можно установить цвет, указав сочетание красного, зеленого и синего в определенной пропорции. Допустим, вам нужно задать оранжевый цвет, который состоит из 80% красного, 40% зеленого и 0% синего. Вот как это можно сделать:

Можно также задавать значение красного, зеленого и синего числами от 0 до 255. Например, вместо 80% красного, 40% зеленого и 0% синего можно написать 204 красного, 102 зеленого и 0 синего:

Шестнадцатеричные коды

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

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

Шрифт

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

font-family: Verdana, Geneva, Arial, sans-serif;

Свойство font-family дает возможность задать список предпочтительных шрифтов, которые указываются через запятую. Если имя шрифта состоит из нескольких слов, то такое название следует заключить в двойные кавычки, например: » Courier New «.

Размер

Размер шрифта очень сильно влияет на дизайн веб-страницы и читабельность ее текста. В CSS есть несколько единиц измерения, с помощью которых можно задавать размер для текста, все они подробно описаны в разделе Единицы измерения CSS. Также имеется возможность задавать размер с помощью ключевых слов:

Все доступные ключевые слова, задающие размер, вы можете посмотреть в нашем справочнике по CSS в описании свойства font-size.

Выравнивание текста

Выравнивание текста в HTML документе задаётся с помощью свойства text-align, которое позволяет выравнять текст по правой или левой строне, а так же задать выравнивание текста по ширине. Свойство text-align работает только с блочными элементами, выравнивая все строчные элементы внутри блочного:

  
Заголовок
 
Очень маленький размер текста.
 
Этот текст будет выровнен по правому краю.
   

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник

CSS Font Color

Cascading Style Sheets (CSS) is all about how a developer wants to present their page to the users. One must understand what will appeal to the end user in order to use appropriate styling. Choosing the color scheme is one of the core foundations of page styling and should be done very carefully. Who the end audience is should be the priority consideration. Choosing a text-color falls in the same scheme. The text has many properties that can be decided through CSS; color is one such. However, while determining the font color, we must select the background color which is apt to go with it. What is the use of having a pastel font against a white background? It will be strenuous for the user and highly likely for them to leave the page.

Web development, programming languages, Software testing & others

Text-Color Syntax and Uses

The color of the text can be set by using the color property. This can be declared for an HTML element, an id, and a class. It will be a good idea to set the background color. The syntax for text color is as follows:

color: Color Name / Hex Value/ RGB Value

While color name offers only a handful of options, the latter two parameters, i.e., Hex Value and RGB Value, offer a wider range of options where one can select from a wide range of hues and shades of the color. These values can be looked upon on the internet and used for styling the respective elements. The global values for this property are initial and inherited. While initial sets the color of the text to its default color, inherit does the bit of setting the color of the text as that set in the parent element.

Examples of Font Color in CSS

Let us take a look at the following examples to see how the text color property works:

1. Using Different Types of Parameters for Setting Text Color

• In this example, we will use different values, i.e., color name, hex value, or RGB value, to set the color for various elements. We will use an external style sheet to create the CSS file first.
• We will first define the color of the test for the heading element, i.e., . We will define the background color to keep the visibility of the font color in sync with the background. The code should be similar to the following:

• Similar to the above code snippet, we will set a class’s font color and background color. The idea is that this color scheme can be used by any element when required. It should be coded like this:

• As we can see, the code has all three types of values, i.e., hex value (#000000 for Black), RGB value (rgb(220, 20, 60) for Crimson), and just the color names (cornflowerblue). Combing the two snippets, we will get the final CSS file:

• Next, we will write an HTML page. Please note that we will use the CSS file created separately to call for the sheet through the HTML page.
• We will code the page to use and cls1. The code should be similar to the following:

   
Welcome to the page for text colors
 
We are testing colors through name and hex values along with using appropriate background colors
  

2. Text- Color Demonstration Using Internal CSS

• For this example, we will use internal CSS, i.e., in our HTML code, and include our styling definition within the style tag . We will start by creating an html file. Within the tag, we will define the tag. The coding will be:

• Next, we will use the class and element we styled within the body tag through internal CSS. The final html code should look like this:

   .colCls < color: darkolivegreen; font-size: 30px; background-color:lightcoral; border-style: inset; border-color: rgb(255, 182, 193); >p 
Testing Text Color
 
This is the paragraph style with defined text color, background color and borders.
  

3. Text-Color Demonstration Using Inline CSS

• For this example, we will define the style for the elements within the tags using the style parameter. The coding for the HTML file should be similar to this:

    
Testing Text Color Through Inline CSS
 
Testing Test Color Property through Inline CSS
  

• The elements (heading) and

  (paragraph) were styled using inline CSS. The output of the code should be similar to the screenshot below:

The above three examples explained how to set a color for the text and co-ordinating it with background and border colors. You can achieve this through External, Internal, and Inline CSS, as discussed in the previous example. Like always, there is always room for further experiments with other combinations of properties. Please note that the selection of the text color should be such that it is soothing for the users. It should be flashy when needed and subtle otherwise.

Recommended Articles

We hope that this EDUCBA information on “CSS Font Color” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

38+ Hours of HD Videos
9 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

149+ Hours of HD Videos
28 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

253+ Hours of HD Videos
51 Courses
6 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

CSS Course Bundle — 19 Courses in 1 | 3 Mock Tests
82+ Hours of HD Videos
19 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

Источник