Home > Article > Web Front-end > Detailed explanation of the four writing methods of css
Detailed explanation of the four writing methods of css
- 高洛峰Original
- 2017-03-17 11:54:401239browse
Priority: External style < Internal style sheet < Inline style sheet;
Priority, that is: the right side of the selector with the same name will overwrite the left side
1. Internal style Table
<head>
<style>
/*内部样式表，一般用于覆盖公用样式*/
＃headTip {
color: 0xff5;
}
</style></head></p>
<p></p>
<p>2. Use the link tag to declare the use of external resources in the document, which is the most common way. </p>
<p>The @CHARSET="utf-8"; specified encoding in the css external style sheet needs to be placed on the first line. </p>
<p class="cnblogs_code"></p>
<pre class="brush:php;toolbar:false"><span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">link </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="./my-common.css"</span><span style="color: #ff0000"> rel</span><span style="color: #0000ff">="stylesheet"</span><span style="color: #ff0000"> media</span><span style="color: #0000ff">="screen"</span><span style="color: #ff0000"> type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">/></span><span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">><br></span>
3.@ method, introduce css. Note that this is loaded asynchronously. It is loaded after the entire html is loaded, which will cause the page to flicker. Not recommended.
<head> <style> @import 'my-common.css'; </style></head>
4. Inline style sheets have the highest priority and are the most straightforward, but they cannot be reused and are not easy to maintain.
<body> <input type="text" style="color:0x550;font-size:30px;"/></body>
The above is the detailed content of Detailed explanation of the four writing methods of css. For more information, please follow other related articles on the PHP Chinese website!