css样式有三种类型:
1、内联式-----将css代码直接写在html中.
用 <style> 标记将样式定义为内部块对象.
示例代码如下:
<style type="text/css">
p{
color: #ff22dd;
font-size: 14px;
}
</style>
内联 CSS 可以有效减少 HTTP 请求,提升页面性能,缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面,因此能防止 CSS 文件无法读取而造成页面裸奔的现象。
2、外联式-----将CSS代码作为文件单独存放,如以aaa.css文件包含所有样式。
在HTML 中的外部级联采用 <link> 标记语句来引入。
示例代码如下:
<link href="aaa.css" rel="stylesheet" type="text/css" />
3、嵌入式-----将CSS代码直接添加于所修饰的标记元素。
示例代码如下:
<pre name="code" class="html"><div style="float:right;margin-right:20px;padding:4px;">Test</div>
对于一个标签的同一个属性,若具有多个css样式,则要进行选择,即有优先级。
1. 嵌入式 >> 内联式>> 外联式
2. 如果css样式都是内联式,且同一标签同一属性有多个css,需要考虑权值,权值越高,优先选择
普通标签 : 权值为1
类选择符:权值为10
ID选择符:权值为100
e.g:显示红色
/*权值100*/
#e{
color: red;
}
/*权值2*/
div p{
color: black;
}
/*权值1*/
div,p{
color: orange;
}
/*权值1*/
p{
color: green;
}
/*权值11*/
.em p{
color: blue;
}
<pre name="code" class="html"><body>
<p>first</p>
<div class="em">
<p style="text-align: left" id="e">测试</p>
</div>
</body>
如果权值相同,则选择距离标签最近的css样式
3.最高权值
关键字 !important 可以指明当前属性值最高权值,优先使用
甚至优先选在嵌入式之前
e.g:显示粉色
/*权值100*/
#e{
color: red ;
}
p{
color: pink !important;
}
</style>
</head>
<body>
<div class="em">
<p style="text-align: left ;color: black" id="e">测试</p>
</div>
对于同一标签的不同属性,则可以进行叠加显示
e.g:显示黑色字,并且有边框,字体为Arial
/*权值2*/
div p{
color: black;
}
/*权值1*/
div,p{
color: orange;
border: 1px solid seashell;
}
/*权值1*/
p{
color: green;
font-family: Arial;
}