一、CSS基础选择器

1、标签选择器

  • 为统一类型的标签设置同一样式，不能差异化设置。
1
2
3
4
p {
    color: rgba(0, 0, 255, 0.29);
    font-size: 100px;
}

2、类选择器

  • 样式点定义
  • 结构类（class）调用
  • 一个或多个
  • 开发最常用
1
2
3
4
5
6
7
8
9
10
.red {
    color: red;
}
.blue {
    color: blue;
}


<div class="red">我是DIV</div>
<div class="blue">我是DIV</div>

注意事项

  • 不要使用纯数字、中文等命名， 尽量使用英文字母来表示
  • 长名称或数组可以使用 - 来为选择器命名

完整列子

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .blue {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div></div>
</body>
</html>

类选择器-多类名

多个类型必须用空格隔开

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .font {
            font-size: 40px;
            color: blue;
        }
    </style>
</head>
<body>
    <div class="red font">
        <p>Hello World</p>
    </div>
</body>
</html>

3、id选择器

  • 样式通过#号定义
  • 结构通过id调用
  • 只能调用一次
  • 别人切勿使用
1
2
3
4
5
6
#pink {
    color: pink;
}
<div id="pink">
        <p>Hello World</p>
</div>

4、通配符选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

1
2
3
4
* {
  text-align: center;
  color: blue;
}

二、CSS字体属性

1、字体系列 font-family

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h2 {
            font-family: 'Microsoft YaHei';
        }
        p {
            font-family: Arial, "Microsoft Himalaya";
        }
    </style>
</head>
<body>
    <h2>主题标签</h2>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
</body>
</html>

2、字体大小 font-size

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body {
            font-size: 30px;
        }
        /*标题标签比较特殊，需要单独指定大小*/
        h2 {
            font-size: 40px;
        }

    </style>
</head>
<body>
    <h2>主题标签</h2>
    <p>段落标签</p>
</body>
</html>

3、字体粗细 font-weight

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .font {
            font-weight: bold;
        }

    </style>
</head>
<body>
    <h2>主题标签</h2>
    <p>段落标签</p>
    <p class="font">文本加粗</p>
</body>
</html>
  • normal：正常的字体。相当于number为400
  • bold：粗体。相当于number为700。
  • bolder：特粗体。也相当于strong和b对象的作用
  • lighter：细体

用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

4、文字样式 font-style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .font {
            font-style: italic;
        }

    </style>
</head>
<body>
    <p class="font">上课时候的你</p>
</body>
</html>

5、字体的复合属性

1
2
3
4
5
6
.font {
    font-style: italic;
    font-weight: bolder;
    font-size: 20px;
    font-family: 微软雅黑;
}
1
2
3
4
.font {
    /*font: font-style font-weight font-size font-family*/
    font: italic 700 16px 微软雅黑;
}

注意事项

  • 顺序不能改变，并且各个属性之间以空格隔开
  • 必须保留font-size和font-family

三、CSS文本属性

1、文本颜色

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .font1 {
            color: #bc05f1;
        }

        .font2 {
            color: rgb(208, 10, 10);
        }

        .font3 {
            color: blue;
        }
    </style>
</head>
<body>
    <p class="font1">十六进制改颜色</p>
    <p class="font2">RGB代码改颜色</p>
    <p class="font3">预定义的颜色值</p>
</body>
</html>

2、对齐文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .font {
            /*text-align: left;*/
            text-align: center;
            /*text-align: right;*/
        }

    </style>
</head>
<body>
    <p class="font">本子上是盒子中文字对齐</p>
</body>
</html>

3、装饰文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .font {
            /*text-decoration: underline; 下划线*/
            /*text-decoration: overline; 上划线*/
            text-decoration: line-through;
        }

    </style>
</head>
<body>
    <p class="font">文本内容</p>
</body>
</html>

取消链接的下划线

1
2
3
a {
    text-decoration: none;
}

4、文本缩进

文本第一行的缩进

1
2
3
4
5
6
p {
    /*text-indent: -20px;*/
    /*text-indent: 20px;*/
    /*2em则是缩进两个字的距离*/
    text-indent: 2em;
}

5、行间据

行高=上间距+文本高度+下间距

1
2
3
p {
    line-height: 20px;
}

四、CSS的引入方式

1、内部样式表

1
2
3
4
5
<style>
    p {
        line-height: 20px;
    }
</style>

2、行内样式表

1
2
<p>腐烂进泥土</p>
<p style="color: pink">埋下来年春天的希冀</p>
  • 可以控制当前标签样式
  • 双引号中间写CSS语法

3、外部样式表

1
<link rel="stylesheet" href="css/mycss.css">