标签：title ccf link bsp log 红色 logs sheet 选择器
一、引入方式（只介绍两种常用的）
1、直接在HTML的head标签写<style></style>添加样式
2、在head中引入CSS文件： <link href="xx.css" type="text/css" rel="stylesheet" >
二、选择器
1、标签、id、class选择器
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>TEST</title>
6 <style>
7 /*标签选择器*/
8 p{
9 color: blue;
10 }
11 /*id选择器*/
12 #Myid{
13 color: red;
14 }
15 /*class选择器,为所有的class="Myclass2"的加样式*/
16 /*也可以用 div.Myclass2来表示为div标签的class为Myclass2的加样式*/
17 .Myclass2{
18 color: red;
19 background-color: black;
20 }
21 </style>
22 </head>
23 <body>
24 <P>标签选择器</P>
25 <p id="Myid">id选择器（id是唯一的不可以重复）</p>
26 <div class="Myclass1">class选择器（名称可以重复，也可以有多个）1</div>
27 <div class="Myclass1 Myclass2">class选择器（名称可以重复，也可以有多个）2</div>
28 </body>
29 </html>
2、组合选择器
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>TEST</title>
6 <style>
7 /*逗号表示同时样(可以多个组合)*/
8 p,div{
9 color: brown;
10 background-color: blue;
11 }
12 /*为css1后代所有的div标签加红色背景*/
13 .css1 div{
14 color: brown;
15 background-color:red;
16 }
17 /*为css1的子代所有的div标签加白色背景*/
18 .css1>div{
19 color:black;
20 background-color:white;
21 }
22 /*为紧挨着css2的P标签（兄弟标签）加上绿色的背景*/
23 .css2+P{
24 color:black;
25 background-color:green;
26 }
27 </style>
28 </head>
29 <body>
30 <p>与小div爷爷同级的p</p>
31 <div class="css1">我是是小div爷爷！
32 <div>我是小div的爸爸！
33 <div class="css2">我是小div！</div>
34 <p>我是小div的兄弟，小p</p>
35 </div>
36 </div>
37 </body>
38 </html>
3.伪装类选择器
<style>
p[name1 ="xx1"]{/*加样式*/}
</style>
.......
<p name1="xx1">
----------------------------------------------
# 有多个名字，找其中的某个
<style>
p[name1^ ="xx2"]{/*加样式*/}
</style>
.......
<p name1="xx1 xx2">
----------------------------------------------
# 找一XX1开头的（| 代表找以什么开头的）
<style>
p[name1| ="xx1"]{/*加样式*/}
</style>
.......
<p name1="xx1-xx2">
标签：title ccf link bsp log 红色 logs sheet 选择器
原文地址：http://www.cnblogs.com/ggboom/p/7456110.html
