1.内链样式表
格式:
<body style="background-color:green margin:0; padding:0;"></body>
2.嵌入式样式表
需要将样式放在<head></head>中
格式:
<head> <style type="text/css"> body{ background-color:green; color:red; } p{ color:#fff; }
</style> </head> <body> <p>学习CSS</p> </body>
3.引入式样式表
原html文件中格式:
<hesd> <link rel="stylesheet" type="text/css" href="style.css"> </head>
新建一个名为style.css的文件,内容格式为:
body{
background-color:red;
color:#fff;
}
4.标记选择器
一个选择器可以控制若干个样式属性,他们之间用分号隔开,最后一个分号可以不加
<head> <style type="text/css"> p{ color:#fff; font-size:18px; } </style> </head> <body> <p>学习CSS</p> </body>
5.class选择器
定义以.开始
可以重复使用
可以控制div容器
<head> <style type="text/css"> .p { color:#fff; font-size:18px;} </style> </head> <body> <p class="p">学习CSS</p> </body>
6.子类选择器
<head> <style type="text/css"> .p { color:#fff; font-size:18px;} /* 整个div*/ .p p{color:red;} /* 学习css*/ </style> </head> <body> <div class="p"> <p>学习CSS</p> 学习学习学习 </div> </body>
7.ID选择器
唯一选择器
定义以#开始
<head> <style type="text/css"> #p { color:#fff; font-size:18px;} </style> </head> <body> <p id="p">学习CSS</p> </body>
8.优先级问题
1)id>class>html
2)同级时选择离元素最近的一个
9.组合选择器(同时控制多个元素)
h1,h2,div {font-size:14px;color:red;}
10.伪元素选择器(控制超链接样式)
1)a:link 正常连接的样式
2)a:hover 鼠标放上去的样式
3)a:active 选择链接时的样式
4)a:visited 已经访问过的链接的样式
11.CSS注释方式 /*......*/
html注释方式 <!--......-->