Rumah > Artikel > hujung hadapan web > 详解css的四种书写方式介绍
详解css的四种书写方式介绍
- 高洛峰asal
- 2017-03-17 11:54:401239semak imbas
优先级： 外部样式 < 内部样式表 < 内联样式表；
优先级，即：同名的选择器右边的会覆盖左边
1.内部样式表
<head>
<style>
/*内部样式表，一般用于覆盖公用样式*/
＃headTip {
color: 0xff5;
}
</style></head></p>
<p></p>
<p>2.使用link标签，在文档中声明使用外接资源，最常用的一种方式。</p>
<p>css外部样式表指定编码的@CHARSET="utf-8"; 需要放在第一行。</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.@方式，引入css,注意这个是异步加载的，在整个html加载之后才加载，会导致页面闪烁。不推荐使用。
<head> <style> @import 'my-common.css'; </style></head>
4.内联样式表,优先级最高最直白，但不能复用不容易维护。
<body> <input type="text" style="color:0x550;font-size:30px;"/></body>
Atas ialah kandungan terperinci 详解css的四种书写方式介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：关于JavaWeb中CSS详细说明 Artikel seterusnya：详解css绝对定位对元素宽度的影响