Home > Article > Web Front-end > Detailed explanation on how to use the style attribute of HTML tags (with specific examples)
Detailed explanation on how to use the style attribute of HTML tags (with specific examples)
- 寻∝梦Original
- 2018-08-27 14:10:3638244browse
This article explains to you the definition and function of the style attribute of HTML tags, as well as examples of how to use the style attribute in HTML, and various style analysis of the style attribute in HTML tags. Let’s take a look at this article together
First of all, let’s introduce the definition of the style attribute of the HTML tag:
The style attribute specifies the inline style of the element. )
The style attribute will override any global style settings, such as those specified in the c9ccee2e6ea535a969eb3f532ad9fe89 tag or in an external style sheet.
HTML style attribute example
Using the style attribute in HTML documents:
<h1 style="color:blue; text-align:center">This is a header</h1> <p style="color:red">This is a paragraph.</p>
The syntax of the style attribute in HTML tags:
<element style="value">
Attribute value of HTML tag style attribute:
style_definition: One or more CSS attributes and values separated by semicolons.
Various style analysis of the style attribute in HTML
1. The style attribute can set the font style (font-family:), font Size (font-size:), text color (color:), etc. It can be set in each different tag, or it can be set in a CSS style sheet. Because my articles are all written following http://www.codecademy.com, I have not introduced CSS yet, so I will not cover CSS here for the time being, just set it in the tag. , the following is the sample code and schematic diagram:
<!DOCTYPE html> <html> <head> <title>color the text</title> </head> <!-- now i will color the text--> <body> <h3 style="color:blue;font-size=20px">Hello World!</h3> <p style="color:red;font-size=10px">你好！！！！</p> </body> </html>
Note:
a) The browser I use is chrome, and when editing and displaying it, I always find that the set 10px font is not applied. Searching the chrome settings, I found that
is that the minimum font set in chrome is 12px, so the 10px font size is useless. Just change the minimum font of the chrome browser to a smaller size.
b) The assignment method in the style attribute is: attribute name: value, instead of the customary equal sign =. If the equal sign is used, the style effect will not be executed.
2. The background color can also be set in the style style. The style contains the attribute background-color. Setting its color value can change the background color within the entire label range
The color specified for background-color. The following is the sample code and schematic diagram: <!DOCTYPE html>
<html>
<head>
<title>color the text</title>
</head>
<!-- now i will color the text-->
<body>
<h3 style="color:blue;font-size=20px ;background-color:yellow">Hello World!</h3>
<p style="color:red;font-size=10px ;background-color:green">你好！！！！</p>
</body>
</html>
Some label attributes have the align attribute, which can set the text alignment and can also be set in style. Similar properties. The value of this attribute is text-align. Its values include left, center and right. The following is the sample code and schematic diagram:
<!DOCTYPE html> <html> <head> <title>color the text</title> </head> <!-- now i will color the text--> <body> <h3 style="color:blue;font-size=20px ;background-color:yellow;text-align:center">Hello World!</h3> <p style="color:red;font-size=10px ;background-color:green;text-align:right">你好！！！！</p> </body> </html>Two specific usage examples of the style attribute of html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习使用HTML</title>
<style>
/*标签选择器*/
h4 {
color: blue;
text-align: right;
}
</style>
</head>
<body>
<!--规定元素的行内样式-->
<p style="color:red;text-align:center">测试html的style属性</p>
<h4>h41</h4>
<h4>h42</h4>
</body>
</html>[Related recommendations from the editor]
html5 What is the role of the details tag? a5e9d42b316b6d06c62de0deffc36939Introduction to the use of tags (with usage examples)html What is table? f5d188ed2c074f8b944552db028f98a1How to use various attributes in the tag
The above is the detailed content of Detailed explanation on how to use the style attribute of HTML tags (with specific examples). For more information, please follow other related articles on the PHP Chinese website!