前言

HTML5中属性名可以省略引号,但是一般不建议省略

css作用:
通知浏览器将所有满足定位条件的HTML标签进行统一定位
通知浏览器对已经定位HTML标签中样式属性进行集中统一赋值管理

CSS格式

css在html格式

1
2
3
4
5
6
7
8
9
10
11
12

<head>

<style type="text/css"> <!-- 告诉浏览器,当前style标签中,有text和css两种内容 -->
定位条件{
样式属性1: 值1;
样式属性2:值2
}
</style>


</head>

css除了直接写在html中,还可以写在css文件中,然后在html中引入
示例:

1
2
3
4
5
定位条件{
样式属性1: 值1;
样式属性2:值2
}

1
<link rel="stylesheet" type="text/css" href="css文件地址">

ID选择器

ID编号具有唯一性,不可重复

1
2
3
4
5
6
7
8

<style type="text/css"> <!-- 告诉浏览器,当前style标签中,有text和css两种内容 -->
#id编号{
样式属性1: 值1;
样式属性2:值2
}
</style>

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<head>
<meta charset="UTF-8" /><!-- 设置html字符集 -->
<style type="text/css"> <!-- style标签通常写在head里 -->
#one{
font-size: 21px;
color: #0048ff
}
#two{
font-size: 15px;
color: blueviolet;
}
</style>
</head>
<body>

<p id="one">
这是第一段文字
</p>

<!--
<p id="one"> id标签不可重复,所以此处不能再为one
这是第二段文字
</p>
-->
<p id="two">
这是第二段文字
</p>

</body>

演示:

这是第一段文字

这是第二段文字

标签选择器

1
2
3
4
5
6
<style type="text/css"> 
标签类型名{
样式属性1: 值1;
样式属性2:值2
}
</style>

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<head>
<meta charset="UTF-8" /><!-- 设置html字符集 -->
<style type="text/css">
div{
background-color: cornflowerblue;
width: 300px;
height: auto;
color: #fff
}
p{
font-size: 15px;
color: blueviolet;
}
</style>
</head>
<body>
<div> 这是一段文字 </div>
<p>
这是第一段文字
</p>
<div> 这是一段文字 </div>
<div> 这是一段文字 </div>
<p>
这是第二段文字
</p>


</body>

自定义选择器

格式:

1
2
3
4
5
6
7
8
9
<style type="text/css">
.自定义选择器名{
样式属性1: 值1;
样式属性2:值2
}
</style>


<标签名 class="自定义选择器名"> </标签名>

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
.ahzoo-a {
background-color: cornflowerblue;
width: 300px;
height: auto;
color: #fff
}

.ahzoo-z {
font-size: 15px;
color: blueviolet;
}
</style>


<div class="ahzoo-a">
<p class=ahzoo-z> 这是一段文字</p>
<span> 这是第二段文字 </span>
</div>

演示:

这是一段文字

这是第二段文字

CSS选择器层级关系

  • 包含关系
  • 并列关系
    示例1:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <body>
    <div>

    <p></p>
    <span></span>

    </div>

    </body>
    <!-- body与div、body与p和span、div和p与span之间即为包含关系
    p和tr之间为并列关系
    -->

示例2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style type="text/css">
div p {
background-color: cornflowerblue;
width: 300px;
height: auto;
color: #fff
}

span {
font-size: 15px;
color: blueviolet;
}
</style>


<div>
<p> 这是一段文字</p>
<span> 这是第二段文字 </span>
</div>