CSS基础入门手册

• 1
• 2
• 3
• 4

后代选择器的写法, 会把链接1 和 2 都选中

.two a {
   color: red;
}
1
2
3

子选择器的写法, 只选链接 1

.two>a {
   color: red;
}
1
2
3

并集选择器

用于选择多组标签. (集体声明)

元素1, 元素2 { 样式声明 }
1

• 通过 逗号 分割等多个元素.
• 表示同时选中元素 1 和 元素 2
• 任何基础选择器都可以使用并集选择器.

苹果
香蕉

  
鸭梨
  
橙子

1
2
3
4
5
6

把苹果、香蕉、鸭梨和橙子 颜色改成红色

div,
h3,
ul>li {
    color: red;
}
1
2
3
4
5

伪类选择器

1.链接伪类选择器

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)

2.:force伪类选择器

复合选择器小结

5 常用元素属性

CSS 属性有很多, 可以参考文档

参考文档

5.1 字体属性

5.1.1 设置字体

body {
  font-family: '微软雅黑';
  font-family: 'Microsoft YaHei';
}
1
2
3
4

• 字体名称可以用中文, 但是不建议

• 多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )

• 如果字体名有空格, 使用引号包裹.

• 建议使用常见字体, 否则兼容性不好.

5.1.2 字体大小

p {
   font-size: 20px;
}
1
2
3

5.1.3 字体粗细

p {
  font-weight: bold;
  font-weight: 700;
}
1
2
3
4

• 可以使用数字表示粗细.
• 700 == bold, 400 是不变粗, == normal
• 取值范围是 100 到 900

无论是不是标题标签，都能被设置

5.1.4 文字样式

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;
1
2
3
4

5.2 文本属性

5.2.1 文本颜色

认识 RGB
我们的显示器是由很多很多的 “像素” 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色.
我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.
计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).
数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色

文本颜色，我们是使用 color 来设置

color的写法：

1. 直接写单词

2. 使用rgb的形式

3. 使用16进制的形式(最常用)

color: red;
color: #ff0000;
color: rgb(255, 0, 0);
1
2
3

我们如何获取到每个颜色的 rgb值呢？

告诉大家一个小技巧，qq截图自带这个功能

只要把鼠标放到对应的颜色上就行啦

注：

1. 16进制形式：使用6个16进制数来表示，两两一组，前两个数组表示R，中间两个数字表示G，最后两个数字表示B

2. 如果是16进制表示，可能存在缩写的现象：AABBCC ——> ABC

5.2.2 文本对齐

控制文字水平方向的对齐

不光能控制文本对齐, 也能控制图片等元素居中或者靠右

text-align: [值];
1

• center: 居中对齐
• left: 左对齐
• right: 右对齐

5.2.3 文本装饰

text-decoration: [值];
1

常用取值:

• underline 下划线. [常用]
• none 啥都没有. 可以给 a 标签去掉下划线.
• overline 上划线. [不常用]
• line-through 删除线 [不常用]

例如 B 站这里的导航链接, 就是使用 none 属性去的掉的下划线. [可以 F12 观察]

5.2.4 文本缩进

控制段落的 首行 缩进 (其他行不影响)

text-indent: [值];
1

• 单位可以使用 px 或者 em.
• 使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
• 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)

"text-indent">
    
"one">正常缩进
    
"two">反向缩进

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

5.2.5 行高

行高 = 文字高度 + 行间距
1

行高指的是上下文本行之间的基线距离

基线之间的距离 = 顶线间距离 = 底线间距离 = 中线间距离 = 行高
1

line-height: [值];
1

CSS里没有一个单独的属性控制行间距，但是可以通过 行高 & 文字高度 互相配合，就可以设置出不同的行间距了

5.3 背景属性

5.3.1 背景颜色

background-color: [指定颜色]
1

默认是 transparent (透明) 的. 可以通过设置颜色的方式修改

"bgc">
   
"one">红色背景
   
"two">绿色背景
   
"three">透明背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

5.3.2 背景图片

background-image: url(...);
1

比 image 更方便控制位置(图片在盒子中的位置)

注意:

1. url 不要遗漏.
2. url 可以是绝对路径, 也可以是相对路径
3. url 上可以加引号, 也可以不加.

"bgi">
    
"one">背景图片

1
2
3
4
5
6
7
8
9

重要取值:

• repeat: 平铺
• no-repeat: 不平铺
• repeat-x: 水平平铺
• repeat-y: 垂直平铺

#####5.3.3 背景位置

background-position: x y;
1

参数有三种风格:

1. 方位名词: (top, left, right, bottom)
2. 精确单位: 坐标或者百分比(以左上角为原点)
3. 混合单位: 同时包含方位名词和精确单位

"bgp">
    
"one">背景居中

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

计算机中的平面坐标系, 一般是左手坐标系

5.3.4 背景尺寸

background-size: length|percentage|cover|contain;
1

• 可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
• 也可以填百分比: 按照父元素的尺寸设置.
• cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
• 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

5.4 圆角矩形

通过 border-radius 使边框带圆角效果.

length 是内切圆的半径. 数值越大, 弧线越强烈

<div>hellodiv>
1

div {
      width: 200px;
      height: 100px;
      border: 2px solid green;
      border-radius: 10px;
}
1
2
3
4
5
6

效果展示

生成圆形

让 border-radius 的值为正方形宽度的一半即可

div {
   width: 200px;
   height: 200px;
   border: 2px solid green;
   border-radius: 100px;
   /* 或者用 50% 表示宽度的一半 */
   border-radius: 50%;
}
1
2
3
4
5
6
7
8

生成圆角矩形

让 border-radius 的值为矩形高度的一半即可

div {
    width: 200px;
    height: 100px;
    border: 2px solid green;
    border-radius: 50px;
}
1
2
3
4
5
6

###6 元素的显示模式

上述内，介绍的是一个元素自身的相关样式属性

接下来介绍一些 元素和元素 之间的相关样式属性 ——> 布局

6.1 块级元素

h1 - h6
p
div
ul
ol
li
...
1
2
3
4
5
6
7

• 独占一行
• 高度, 宽度, 内外边距, 行高都可以控制.
• 宽度默认是父级元素宽度的 100% (和父元素一样宽)
• 是一个容器(盒子), 里面可以放行内和块级元素

6.2 行内元素

a
strong
b
em
i
del
s
ins
u
span
...
1
2
3
4
5
6
7
8
9
10
11

• 不独占一行, 一行可以显示多个
• 设置高度, 宽度, 行高无效
• 左右外边距有效(上下无效). 内边距有效.
• 默认宽度就是本身的内容
• 行内元素只能容纳文本和其他行内元素, 不能放块级元素

6.3 块级元素和行内元素的区别

1. 块级元素独占一行；行内元素不独占一行.

2. 块级元素,高度,宽度,内外边距,行高,都是可以控制的；而行内元素,设置高度,宽度,行高,都是无效的，设置内边距都有效，外边距的话，左右外边距有效，上下外边距无效.

3. 块级元素默认的宽度,是和父元素一样宽；行内元素宽度则是内容本身 (里面包含的文字宽度是相关的)

4. 块级元素,内部的元素可以是块级元素,也可以是行内元素；而行内元素内部的元素只能是文本或者行内元素，不能是块级元素

6.4 改变显示模式

使用 display 属性可以修改元素的显示模式

例：可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素.

• display: block 改成块级元素 [常用]
• display: inline 改成行内元素 [很少用]
• display: inline-block 改成行内块元素 （即不独占一行，又有块元素的属性）
• display: none 让元素隐藏，不显示

7 盒模型

HTML中元素最基本的排列规则：

1. 每一个 HTML 元素就相当于是一个矩形的 “盒子”
2. 这个盒子由这几个部分构成

• 边框 border
• 内容 content
• 内边距 padding
• 外边距 margin

盒模型 不适用于 行内元素，都是以块级元素为基准来介绍的

7.1 边框

• 粗细: border-width
• 样式: border-style, 默认没边框。 1.solid 实线边框 2. dashed 虚线边框 3. dotted 点线边框
• 颜色: border-color

div {
    width: 500px;
    height: 250px;
    border-width: 10px;
    border-style: solid;
    border-color: green;
}  
1
2
3
4
5
6
7

边框会撑大盒子

我们代码里写的尺寸是500*250，但是通过开发者工具查看到的实际尺寸是 520*270

这是为什么呢？

边框会撑大原有的盒子

如果想解决这个问题，怎么办？

可以通过这个特殊的操作，如果不加，默认是 content-box ——边框会撑大盒子

通常会希望页面中所有的元素都能按照 boder-box 来进行布局，此时就可以使用 通配符选择器来实现了

上面的代码也支持简写, 没有顺序要求

border: 1px solid red;
1

如

div {
    width: 500px;
    height: 250px;
    border: 10px solid green;
}  
1
2
3
4
5

可以改四个方向的任意边框

border-top/bottom/left/right
1

边框是分成四个方向的.

可以直接给四个方向都加边框,也可以只加某个方向.

还可以让不同的方向设置.上不同的边框

7.2 内边距

默认内容是顶着边框来放置的. 用 padding 来控制这个距离 （内容和边框的距离）

可以给四个方向都加上边距

• padding-top
• padding-bottom
• padding-left
• padding-right

1. 内边距也会影响到盒子大小(撑大盒子)。
2. 使用 box-sizing: border-box 属性也可以使内边距不再撑大盒子. (和上面 border 类似)

7.3 外边距

控制 盒子和盒子 之间的距离（元素与元素之间的距离）

可以给四个方向都加上边距

• margin-top
• margin-bottom
• margin-left
• margin-right

复合写法的规则与padding 相同

margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40
1
2
3
4

7.4 块级元素水平居中

注意 是元素水平居中，不是文字水平居中

前提:

• 指定宽度(如果不指定宽度, 默认和父元素一致)
• 把水平（左右方向的） margin 设为 auto

三种写法均可

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
1
2
3

8 弹性布局

这是CSS后来引入的特性，使用弹性布局，就可以代替很多旧式的写法，是页面的布局更加简单方便，并且更符合逻辑

初次感受

创建一个 div, 内部包含三个 span

    <div>
        <span>1span>
        <span>2span>
        <span>3span>
    div>

    <style>
        div {
            width: 100%;
            height: 150px;
            background-color: red;
        }
        div>span {
            background-color: green;
            width: 100px;
        }
    style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

此时我们看到的效果是

我们稍稍改进~

给 div 加上 display:flex; 之后, 效果为

此时我们发现，span 有了高度, 不再是 “行内元素了”

再给div加上 justify-content: space-around; 此时效果为

此时可以看到这些 span 已经能够水平隔开了

然后再把 justify-content: space-around; 改为 justify-content: flex-end; 可以看到此时三个元素在
右侧显示了.

8.1 弹性布局基本概念

flex 是 flexible box 的缩写. 意思为 “弹性盒子”

当给一个元素设为display: flex此时子元素就不再遵守原来的"块级元素" "行内元素"的规则了，变成了弹性元素

这些元素就会按照弹性布局的规则来排列（但是不影响孙子元素）

flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.

• 被设置为 display:flex 属性的元素, 称为 flex container
• 它的所有子元素立刻称为了该容器的成员, 称为 flex item
• flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

8.2 弹性布局常用的属性

#####8.2.1 display: flex;

开启弹性布局

8.2.2justify-content

设置主轴上的子元素排列方式

使用之前一定要确定好主轴是哪个方向

属性取值

    

        1
        2
        3
    


    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

未指定 justify-content 时, 默认按照从左到右的方向布局 (和 justify-content: flex-start; 效果一样)

设置 justify-content: flex-end; , 此时元素都排列到右侧了.

设置 jutify-content: center; , 此时元素居中排列

设置 justify-content: space-around; 平分了剩余空间

设置 justify-content: space-between; 先两边元素贴近边缘, 再平分剩余空间

justify-content: space-around; 和 justify-content: space-between; 的应用非常广泛

像淘宝、B站等都是基于它们布局的

8.2.3 align-items

描述的侧轴上的排列方式(侧轴是和主轴垂直的方向)

在上面的代码中, 我们是让元素按照主轴的方向排列, 同理我们也可以指定元素按照侧轴方向排列

取值和 justify-content 差不多

垂直居中 align-items: center