CSS 课程笔记

CSS 第一天

层叠样式表 (Cascading Style Sheets，缩写为 CSS）

是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。

例如上图的文字居中样式，图片大小设置，块元素排列，都需要CSS来操作

1.1 CSS的定义

<title>CSS定义</title>
<style>
/* 选择器 {} */
body{
    background-color: rgb(255, 255, 255);
}
p{
color:red;
}
</style>
</head>
<body>
    <p>体验 CSS</p>
</body>

课堂作业：22

课堂提问：

1.2 CSS的引入方式

CSS也可以单独书写，存放于外部，管理更加方便

课堂作业：23

课堂提问：

1.3 选择器

作用：查找标签，设置样式

CSS为了适应各样的场景，准备了多种选择器

基础选择器：

标签选择器
使用标签名作为选择器，选中同名标签设置相同的样式
例如：p , h1 , div , a , img
类选择器
步骤1：定义类选择器 .类名
步骤2：使用类选择器标签中添加 class="类名"
- 类名自定义，但是不要使用纯数字或中文，尽量使用英文命名，多个单词连用可以加 - 连接
- 一个类选择器可以给多个标签使用
- 一个标签，可以使用多个类名，类名中间用空格隔开 class="类名1 类名2"
id选择器
id选择器，一般配合JS使用，很少用来设置CSS样式
步骤1：定义id选择器 #id名
步骤2：使用id选择器标签里添加 id="id名"
- 同一个id选择器，在一个页面只能使用一次
通配符选择器
查找页面所有标签，设置相同样式。
通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

1.4 画盒子

两个div应该使用什么选择器，两个盒子大小尺寸不同，颜色不同。

1.5 文字控制属性

作用：美化文字

文字控制属性就是可以直接控制文字的样式，例如字体大小、粗细等类型

1、字体大小

属性名：font-size

属性值：文字尺寸，PC 端网页最常用的单位 px

p {
font-size: 30px;
}

经验：谷歌浏览器默认字号是16px

2、字体粗细

属性名：font-weight

属性值：

/* 不加粗 */
font-weight: 400;
/* 加粗 */
font-weight: 700;

3、字体样式（是否倾斜）

作用：文字的倾斜效果

属性名：font-style

属性值

• 正常（不倾斜）：normal

• 倾斜：italic

4、行高

作用：设置多行文本的间距

属性名：line-height

属性值

• 数字 + px

• 数字（当前标签font-size属性值的倍数）

line-height: 30px;

/* 当前标签字体大小为16px */

line-height: 2;

行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。

垂直居中技巧：行高属性值等于盒子高度属性值

注意：该技巧适用于单行文字垂直居中效果

5、字体族

属性名：font-family

属性值：字体名

font-family: 楷体;

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

拓展（了解）：font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找

• font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体

6、font 复合属性

div {
/* 文字倾斜 */
font-style: italic;
/* 文字加粗 */
font-weight: 700;
/* 字体大小是30px */
font-size: 30px;
/* 行高为字号的2倍 */
line-height: 2;
/* 字体是楷体 */
font-family: 楷体;
}

div {
/* font: 是否倾斜 是否加粗 字号/行高 字体; */
font: italic 700 30px/2 楷体;
}

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

font: 是否倾斜是否加粗字号/行高字体（必须按顺序书写）

注意：字号和字体值必须书写，否则 font 属性不生效

7、文本缩进

属性名：text-indent

属性值：

• 数字 + px

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

p {

text-indent: 2em;

}

8、文本对齐方式

作用：控制内容水平对齐方式

属性名：text-align

属性值

text-align: center;

text-align本质是控制内容的对齐方式，属性要设置给内容的父级。

9、文本修饰线

属性名： text-decoration

10、color 文字颜色

提示：只要属性值为颜色，都可以使用上述四种颜色表示方式，例如：背景色

理解CSS颜色的四种表示方式-CSDN博客

1.6 调试工具

作用：检查、调试代码；帮助程序员发现代码问题、解决问题

1. 打开调试工具

浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查

F12

2. 使用调试工具

CSS 第二天

2.1 复合选择器

复合选择器就是将基础选择器进行重新组合，达到更方便的用法，更精准得找到我们的标签

复合选择器

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

作用：更准确、更高效的选择目标元素（标签）。

后代选择器

后代选择器：选中某元素的后代元素。

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

<style>
div span {
color: red;
}
</style>
<span> span 标签</span>
<div>
<span>这是 div 的儿子 span</span >
</div>

子代选择器

子代选择器：选中某元素的子代元素（最近的子级）。

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

<style>
div > span {
color: red;
}
</style>

并集选择器

并集选择器：选中多组标签设置相同的样式。

选择器写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。

<style>
div,
p,
span {
color: red;
}
</style>
<div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>

伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态：选择器:hover { CSS 属性 }

例：新闻中心首页_新浪网

<style>
a:hover {
color: red;
}
.box:hover {
color: green;
}
</style>
<a href="#">a 标签</a>
<div class="box">div 标签</div>

2.2 CSS特性

CSS特性：化简代码 / 定位问题，并解决问题

• 继承性

• 层叠性

• 优先级

继承性

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

注意：如果标签有默认文字样式会继承失败。

例如：a 标签的颜色、标题的字体大小。

层叠性

特点：

• 相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性

• 不同的属性会叠加：不同的 CSS 属性都生效

注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断。

优先级

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

2.3 Emmet语法

Emmet写法：代码的简写方式，输入缩写 VS Code 会自动生成对应的代码。

2.4 背景属性

背景图

网页中，使用背景图实现装饰性的图片效果。

属性名：background-image（bgi）

属性值：url(背景图 URL)

提示：背景图默认有平铺（复制）效果。

课堂作业：28

背景平铺方式

背景图位置

属性名：background-position（bgp）

属性值：水平方向位置垂直方向位置

• 关键字

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

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

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

提示：

• 关键字取值方式写法，可以颠倒取值顺序

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

背景缩放

作用：设置背景图大小

属性名：background-size（bgz）

常用属性值：

• 关键字

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

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

• 百分比：根据盒子尺寸计算图片大小

• 数字 + 单位（例如：px）

提示：工作中，图片比例与盒子比例相同，使用 cover 或 contain 缩放背景图效果相同。

背景固定

作用：背景不会随着元素的内容滚动，一般是用在网页背景大图位置

QQ Windows版-轻松做自己

属性名：background-attachment（bga）

属性值：fixed

2.5 背景复合属性

属性名：background（bg）

属性值：背景色背景图背景图平铺方式背景图位置/背景图缩放背景图固定（空格隔开各个属性值，不区分顺序）

2.6 显示模式

显示模式：标签（元素）的显示方式。

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

块级元素 （div）

独占一行

宽度默认是父级的100%

添加宽高属性生效

行内元素 （span）

一行可以显示多个

设置宽高属性不生效

宽高尺寸由内容撑开

行内块元素 （img）

一行可以显示多个

设置宽高属性生效

宽高尺寸也可以由内容撑开

转换显示模式

属性名：display

课堂提问：

综合案例：

案例二：