Home >Web Front-end >HTML Tutorial >How to reference css style in html? Introduction to three methods of html referencing css files
How to reference css style in html? Introduction to three methods of html referencing css files
- 不言Original
- 2018-11-08 09:43:086989browse
There are three ways to reference CSS styles in HTML. So, what are the three ways? This article will give you a detailed introduction to three methods for html to reference css files.
Applying style sheets to HTML documents and XHTML documents in CSS can be roughly divided into the following three methods. (Recommended tutorial: css video tutorial)
1. Use the 2cdf5bf648cf2f33323966d7f58a7f3f element to call and apply external CSS files
2. Use the c9ccee2e6ea535a969eb3f532ad9fe89 element to apply Document unit
3. Apply styles by adding style attributes to elements
Use the 2cdf5bf648cf2f33323966d7f58a7f3f element to call and apply external CSS files
Create A CSS file that describes the style sheet separately from the HTML file and calls it from the HTML file. For calls, the external CSS file is specified via a 2cdf5bf648cf2f33323966d7f58a7f3f element in the 93f0f5c25f18dab9d176bd4f6de5d30e element describing the HTML document. To notify the browser etc. that the applied styles are based on CSS, specify text/css for the value of the type attribute of the 2cdf5bf648cf2f33323966d7f58a7f3f element. Taking into account compatibility with XHTML, ease of modifying styles, etc., it is recommended to set up the style sheet this way.
Style sheet components are described in external files (xxx.css).
p {color：blue; line-height：1.5;}HTML source code
<html> <head> <link rel =“ stylesheet ”type =“ text / css ”href =“ xxx.css ”> </ head> <body> <p>这是一个段落</ p> </ body> </ html>
Applied to document units using the c9ccee2e6ea535a969eb3f532ad9fe89 element
In HTML Write the c9ccee2e6ea535a969eb3f532ad9fe89 element in the 93f0f5c25f18dab9d176bd4f6de5d30e element of the document and set the style sheet for each document. Specify text/css as the value of the type attribute of the c9ccee2e6ea535a969eb3f532ad9fe89 element to inform browsers etc. that the applied styles are based on CSS.
Also, use 1e0dc9dd195550f5079c2ed08555544cThe comment style sheet section is to prevent the content of the c9ccee2e6ea535a969eb3f532ad9fe89 element from being displayed in older browsers that do not correspond to the style sheet. However, since most browsers in recent years support the c9ccee2e6ea535a969eb3f532ad9fe89 element, even if the 114f9caa7819112d907d03d4e7e1005f, there are almost no problems.
<html>
<head>
<style type="text/css">
<!--
p {color:blue; line-height:1.5;}
-->
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>Apply styles by adding style attributes to elements
Add style attributes to elements and describe style specifications directly in the HTML source code. In order to specify a style through the style attribute, in order to notify the browser etc. that the style sheet used in the document is CSS, add a e8e496c15ba93d81f6ea4fe5f55a2244 element to the 93f0f5c25f18dab9d176bd4f6de5d30e element and specify the style language specifying text/css as the value. In many cases, the browser will automatically figure this out even if you don't specify it, but you should write it to avoid glitches.
Style specification of style attributes is useful for partially prioritizing styles, but it tends to complicate style management as the HTML source becomes complex. When aiming for efficient style management, it is common to convert CSS portions to external files.
Example: Apply stylesheet directly using style attributes
<html> <head> <meta name="Content-Style-Type" content="text/css"> </head> <body> <p style="color:blue; line-height:1.5;">这是一个段落。</p> </body> </html>
The above is the detailed content of How to reference css style in html? Introduction to three methods of html referencing css files. For more information, please follow other related articles on the PHP Chinese website!