白乐天

道阻且长，行则将至。

CSS

发表于 更新于 分类于
本文字数： 7.9k 阅读时长 ≈ 7 分钟

CSS

层叠样式表（Cascading Style Sheets）,是一种样式表语言，用来描述HTML文档的呈现。

CSS引入方式

内部样式表

书写位置：title标签下方，style标签里

CSS书写规则：选择器 { 属性名 : 属性值;}

示例

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> p {color: red;} </style>
</head>
<body>
    <p>This is a Html document!</p>
</body>
</html>

效果如下

外部样式表

将CSS代码写在单独的CSS文件中（.css）。

在HTML里使用link标签引入。

示例

html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入当前目录下的 ht_css.css 样式表 -->
    <link rel="stylesheet" href="./ht_css.css">
</head>
<body>
    <p>This is a Html document!</p>
</body>
</html>

css文件

1
2
3
p {
    color: red;
}

效果如下

行内样式

配合Javascript使用，CSS写在标签的style属性值里。

示例

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color: red; font-size: 20px;">This is a Html document!</p>
</body>
</html>

属性

宽度高度背景色

  • width

    宽度

  • height

    高度

  • background-color

    背景色

示例

用宽度高度背景色画盒子

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
        <!-- 定义红色盒子 -->
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        } 
        <!-- 定义绿色盒子 -->
        .green {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">div_red</div>
    <div class="green">div_green</div>
</body>
</html>

效果

文字控制属性

  • font-size

    字体大小，单位是px。

    在谷歌浏览器中文字默认大小16px。

  • font-weight

    字体粗细

    属性值

    • 数字

      正常：400

      加粗：700

    • 关键字

      正常：normal

      加粗：bold

  • font-style

    字体样式

    属性值

    • 正常（不倾斜）：normal
    • 倾斜：italic

  • line-height

    行高

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

    属性值

    • 数字+px
    • 数字（设置为数字，line-height 会与font-size成比例，计算方式是 line-height = 字体大小 * 数值。）

  • font-family

    字体族

  • font

    复合属性

    属性的简写方式，一个属性对应多个值的写法，各属性值之间用空格隔开。

    1
    2
    3
    font: [font-style] [font-variant] [font-weight] [font-size] / [line-height] [font-family];

    font-size 和 font-family 是必选的，其它部分可以省略。

  • text-indent

    文本缩进

    属性值

    • 数字+px
    • 数字+em（1em = 当前标签的字号大小）

  • text-align

    文本对齐

    属性值 效果
    left 左对齐
    center 居中对齐
    right 右对齐

  • text-decoration

    修饰线

    属性值 效果
    none 无
    underline 下划线
    line-through 删除线
    overline 上划线

  • color

    颜色

    颜色表示方式 属性值 说明
    颜色关键字 颜色英文单词 red、green、blue…
    rgb表示法 rgb(r,g,b) r,g,b表示三原色，取值：0-255
    rgba表示法 rgba(r,g,b,a) a表示透明度，取值0-1
    十六进制表示法 #RRGGBB #000000,#ffcc00,简写：#000，#fc0

背景属性

  • background-color（bgc）

    背景色

  • background-image

    背景图

    属性值

    url(背景图的url或者背景图的路径)

  • background-repeat

    平铺方式

    属性值 效果
    no-repeat 不平铺
    repeat 平铺（默认效果）
    repeat-x 水平方向平铺
    repeat-y 垂直方向平铺

  • background-position（bgp）

    背景图位置

    属性值

    • 关键字

      关键字 位置
      left 左侧
      right 右侧
      center 居中
      top 顶部
      bottom 底部

    • 坐标（数字+px，正负都可以）

      水平：正数向右；负数向左

      垂直：正数向下；负数向下

    可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中。

  • background-size

    背景图缩放

    属性值

    • 关键字

      cover：等比例缩放图片以完全覆盖背景区，可能背景图片部分看不见

      contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白

    • 百分比

      根据盒子尺寸计算图片大小

    • 数字+px

  • background-attachment

    背景图固定

    属性值

    fixed

  • background（bg）

    复合属性

    属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定

选择器

查找标签，设置样式。

标签选择器

使用标签名作为选择器，选中同名标签设置相同的样式，但是无法差异化同名标签的样式。

类选择器

查找标签，差异化设置标签的显示效果。

  • 定义类选择器：.类名。
  • 使用类选择器：标签添加class = 类名。
  • 一个类选择器可以给多个标签使用。
  • 一个标签可以使用多个类名，class属性值里可以写多个类名，类名用空格隔开。

示例

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        <!-- 定义类选择器 -->
        .green {
            color: green;
        }

    </style>
</head>
<body>
    <!-- 使用类选择器 -->
    <p class="green">This is a Html document!</p>
</body>
</html>

效果

id选择器

查找标签，差异化设置标签的显示效果。

id选择器一般配合Javascript使用，很少用来设置CSS样式。

  • 定义id选择器：#id名
  • 使用id选择器：标签添加 id = "id名"
  • 同一个id选择器在一个页面只能使用一次

示例

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        <!-- 定义id选择器 -->
        #green {
            color: green;
        }

    </style>
</head>
<body>
    <!-- 使用id选择器 -->
    <p id="green">This is a Html document!</p>
</body>
</html>

效果

通配符选择器

查找页面所有标签，设置相同样式。

通配符不需要调用，浏览器会自动查找所有标签，设置相同样式。

通配符选择器使用*来定义。

示例

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        <!-- 定义通配符选择器 -->
        * {
            color: green;
        }

    </style>
</head>
<body>
    <p >This is a Html document!</p>
    <div>
        This is a div label!
        <span>This is a span label!</span>    
    </div>
</body>
</html>

效果

复合选择器

由两个或多个基础选择器，通过不同的方式组合而成。

后代选择器

用于选择某个元素内部的所有指定后代元素，无论它们嵌套在多少层。

写法：父选择器 子选择器{ CSS属性 } ，父子选择器之间用空格隔开。

示例

1
2
3
4
5
6
7
8
9
10
div p {
    color: red;
}

<div>
    <p>这是一个段落。</p> <!-- 会被选中 -->
    <span>
        <p>嵌套的段落。</p> <!-- 也会被选中 -->
    </span>
</div>

子代选择器

子选择器只选择直接子元素，不会匹配更深层的后代。

写法：父选择器 > 子选择器{ CSS属性 } ，父子选择器之间用 > 隔开。

示例

1
2
3
4
5
6
7
8
9
10
div > p {
    color: blue;
}

<div>
    <p>直接子元素段落。</p> <!-- 会被选中 -->
    <span>
        <p>嵌套的段落。</p> <!-- 不会被选中 -->
    </span>
</div>

并集选择器

并集选择器可以同时选择多个不同类型的元素。

示例

1
2
3
4
5
6
7
h1, p, .box {
    background-color: lightgray;
}

<h1>标题</h1> <!-- 受影响 -->
<p>段落</p> <!-- 受影响 -->
<div class="box">我是box</div> <!-- 受影响 -->

交集选择器

交集选择器选择同时匹配多个条件的元素。

示例

1
2
3
4
5
6
div.box {
    border: 2px solid black;
}

<div class="box">我是box</div> <!-- 受影响 -->
<div>普通div</div> <!-- 不受影响 -->

伪类选择器

用户交互伪类

  • link

    访问前的状态。

    1
    2
    3
    a:link {
        color: blue;
    }

  • visited

    访问后的状态。

    1
    2
    3
    a:link {
        color: #999;
    }

  • hover

    当鼠标悬停在元素上时触发。

    1
    2
    3
    a:link {
        color: red;
    }

  • active

    当元素被点击时触发。

    1
    2
    3
    a:link {
        color: green;
    }

CSS三大特性

继承性

子级默认继承父级的文字控制属性。

层叠性

  • 相同的属性会覆盖：后面的属性会覆盖前面的CSS属性。
  • 不同的属性会叠加：不同的CSS属性都生效。

优先级

也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

规则：选择器优先级高的样式生效。

公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important（选中标签的范围越大，优先级越低）

叠加计算规则

如果是复合选择器，则需要权重叠加计算。

规则：

  • 比较 行内样式、id选择器、类选择器和标签选择器的个数，从左至右比较选择器的个数，同一级个数多的优先级高，如果个数相同，则向后比较。

  • !important权重最高

  • 继承权重最低

Emmet写法

代码的简写方式，输入缩写会自动生成对应的代码。

HTML

说明 标签结构 Emmet
类选择器 <div class="box"></div> 标签名.类名
id选择器 <div id="box"></div> 标签名#id名
同级标签 <div></div><p></p> div+p
父子级标签 <div><p></p></div> div>p
多个相同标签 <span></span><span></span><span></span> span*3
有内容的标签 <div>111</div> div{内容}

显示模式

块级元素

  • 独占一行
  • 宽度默认是父级的100%
  • 添加宽高属性生效

行内元素

  • 一行共存多个
  • 尺寸由内容有关
  • 设置宽高不生效

行内块元素

  • 一行共存多个
  • 默认尺寸与内容有关
  • 设置高生效

转换显示模式

属性名：display

属性值

属性值 效果
block 块级
inline-block 行内块
inline 行内

案例效果

热词

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
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            display: block;
            background-color: #3064bb;
            color: wheat;
            width: 200px;
            height: 80px;
            text-decoration: none;
            line-height: 80px;
            text-align: center;
            font-size: 18px;
        }

        a:hover{
            background-color: #608dd9;
        }
    </style>
</head>
<body>
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">JavaScript</a>
    <a href="#">Python</a>
    <a href="#">Java</a>
</body>
</html>

效果