Home >Web Front-end >HTML Tutorial >What does the html style tag mean? Detailed explanation on how to use the style tag
What does the html style tag mean? Detailed explanation on how to use the style tag
- 寻∝梦Original
- 2018-08-22 13:58:3916494browse
This article mainly talks about the definition and attribute introduction of html style tag. First, let us understand some uses and positions of style tag in HTML, and then introduce some methods and detailed techniques in use. Let's do it together Let’s take a look at the definition and usage of
html style tag:
c9ccee2e6ea535a969eb3f532ad9fe89 tag is used to define style information for HTML documents.
In style, you can specify how the HTML document is rendered in the browser.
The type attribute is required and defines the content of the style element. The only possible value is "text/css". The
style element is located in the head section.
HTML c9ccee2e6ea535a969eb3f532ad9fe89 tag instance:
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>Required attributes:
type: text/css: Specifies the MIME type of the style sheet.
html Detailed explanation of how to use the style tag:
##531ac245ce3e4fe3d50054a55f265927Write the styles of various tags in the tag pair, which can be body It can also be h1, that is, write all the inline styles together . For example, if 10 tags are all of the same class, you need to write 10 in the inline style and in style Just write one. Now they are all design patterns that separate structure (html), style (css), and behavior (js)<p id="xxx">===><style>#xxx{}</style>
<p class="xxx">===><style>.xxx{}</style>
<body></body>===><style>body{}</style>
The style tag is divided according to its location in the css style sheet Three types:
1. Embedded style sheet2. Internal style sheet3. External style sheet Let’s explain it in detail below :1. The embedded style sheet is written in the tag (Tag) that uses it. For example, if it is used in the e388a4556c0f65e1904146cc1a846bee tag,
other The syntax is:<p style font-size:20pt>这段文字使用了内嵌样式表，更改了字体大小为20</p>
2. Internal style sheet is different from the embedded style sheet, which is written between the 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 tags of the html web page, so It is valid for all of this page. It should be noted that because it is not written in a certain tag, you must pay attention when writing it. If you want to use this style sheet in that tag, you must also write it clearly when you define it, otherwise it will cause the entire page to be cluttered. confusion. For example:
<html>
<head>
p.mylayout <style type="text/css">{font-size:22pt; color:blue; border-width:1px; border:double; text-align:center; }</style></head>
<body>
<p class="mylayout">这段文字使用了样式表</p>
<p>这段文字没有使用样式表</p>
</body>
</html> You can see that when defining an internal style sheet, when declaring c9ccee2e6ea535a969eb3f532ad9fe89 before, you should first declare in which tag this style sheet is used. If you do not want to use this style sheet in all the pages of the web page, If this style sheet is used in all tags, add a self-defined style sheet name after the declared tag, such as p.mylayout above, which means that this style sheet can only be used in the e388a4556c0f65e1904146cc1a846bee tag of the web page. To use this style sheet, declare it in the e388a4556c0f65e1904146cc1a846bee tag. The declaration method is 0520d7dcd51e235b29e286f78a25dfc7Using style sheet selection, you can use the same HTML tag to form different styles. For example, you want the paragraph e388a4556c0f65e1904146cc1a846bee to have two styles, one is centered and the other is right-aligned. You can write the following style: p.right {text-align:right}
p.center {text-align:center}where right and center are two style sheets. Then you can reference these two style sheets. The sample code is as follows: <p class="center">这一段居中显示。</p> <p class="right">这一段是居右显示。</p>You can also directly use "." plus the style sheet name without using HTML tags. The sample code is as follows:
.center {text-align: center}This universal style sheet name has no label limitations and can be used for different labels. For example: <h1 class = "center">这个标题居中显示。</h1> <p class = "center">这个段落居中显示。</p>
3. External style sheet
The external style sheet is to write the content of the style sheet separately into a notepad and save it with the suffix .css file, add the following code to the web page you want to call (of course still add it between 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1):<link href="你css文件所在的文件夹" rel="stylesheet" type="text/css">For example: First write a piece of code and save it as p.css
p.mylayout {font-size:20pt; border-width:1px; color:blue; } Then call this style sheet in the web page you wrote: <HTML> <head> <link href="p.css所在的相对路径" rel="stylesheet" type="text/css"> </head> <body> <p class="mylayout"> 这个标题使用了Style 。</p> <p>这个标题没有使用Style。</p> </body> </HTML>So an external style sheet can be called by many web pages, this is the external style Benefits of table. Style sheets can also be concatenated, that is, a web page uses multiple css, and the order of concatenation is: embedded > internal > external > browser's own That is to say, when When a web page has internal css, its call to external css will be overwritten (that is, external css will not work) Nesting description when css style sheet is defined: p b {color :blue;}When used:
<p>这段文字在b标签中的为<b>蓝色</b></p>cursor:hand This attribute turns the mouse into the shape of a hand. 【Editor's related articles】
html What is the function of em tag? The difference between 907fae80ddef53131f3292ee4f81644b and 5a8028ccc7a7e27417bff9f05adf5932 tags
html5 What does the output tag mean? How to use the html5 output tag
The above is the detailed content of What does the html style tag mean? Detailed explanation on how to use the style tag. For more information, please follow other related articles on the PHP Chinese website!