1.内敛嵌入式
直接写在标签里面;
style="样式1:样式1值;样式2:样式2值"
<a style="cursor: pointer;color: red;text-decoration: underline;">百度</a>
2.链入外部样式文件
在head标签中添加链接标签:
<link href="css/1.css" rel="stylesheet" type="text/css" />
3.定义内部样式代码块
在head标签中添加<style></style>标签;
4.选择器
4.1 ID 选择器
#c{
color: blue;
}
<h1 id="c">北京欢迎你</h1>
4.2 类选择器
.p1{
color: yellow;
}
<p class="p1"> 愿你历尽千帆,归来仍是少年。</p>
4.3 标签选择器
body{
background: url(../images/1.jpg)
no-repeat scroll top left;
}
4.4 伪类
设置伪类的顺序:a:link->a:visited->a:hover->a:active
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
4.5其他
/*通配选择符*/
*{
font: "微软雅黑";
font-size: 16px;
color: brown;
}
/*包含选择符*/
div h1,p{
color:#33CCCC;
font-family: ‘Microsoft YaHei’;
font-size: 20px;
line-height: 20px;
}
/*选择符分组*/
#cc,.pp{
color:#33CCCC;
font-family: ‘Microsoft YaHei’;
font-size: 20px;
line-height: 20px;
}
5.优先级
行内样式表 > 内部样式表 > 外部样式表
ID 选择器 > 类选择器 > 标签选择器