CSS笔记汇总

1.css简介

1.1css语法规范

css主要有两部分组成：选择器和声明
声明里面有一组键值对，用来添加相关效果

注意：

• 属性与属性值之间用：隔开
• 属性之间用；隔开
• 属性与属性值以键值对形式出现

1.2css代码格式

紧凑格式：

展开格式：

注：

• h3后面和color：/font-size：后面要有空格
• 这里我们推荐使用展开格式

2.css基础选择器

选择器是用来选择标签并做相关效果修改的
css有基础选择器和复合选择器两种

2.1标签选择器

顾名思义，用标签如：<p><h1>…当作选择器，可以实现多个标签的共同修改

这里标签选择器虽然可以统一为所有标签进行样式设置，但是却不能差异化设计，这时候就用到了类选择器

2.2类选择器

注：

• 这里类的名字可以根据喜好来定义
• 长名字和词组用横线分割
• 不要用纯数字，中文命名，尽量用英文
• 类名不能使用常见标签如p/span…

2.3多类名选择器

可以给标签起多个类名，从而达到多种选择的目的

业务场景：主要是用来当我们为多个标签设置相同属性时，增加类的调用，从而达到简化代码的目的

2.4id选择器

id选择器与类选择器有点类似，可以把类名想象成“人的名字”，可以有多个。而id名是“身份证号”，只能有一个

2.5通配符选择器

css中通配符选择器用*来定义，可以实现html所有元素的修改
语法：
*{
属性：属性值；
}
注：通配符选择器不许调用，自动实现

3.css字体属性

3.1字体系列

css用font-family定义字体（微软雅黑还是宋体）

当然一个标签也可以支持多字体如上图，他的意思是浏览器先使用第一个字体，发现没有的话在使用第二个，以此类推
注：

• 字体与字体之间用逗号隔开
• 一般情况下字体要加引号（单引双引均可）

3.2字体大小

字体大小使用font-size来定义

注：

• px指像素值
• 谷歌默认字体大小16px
• 标题比较特殊，只能单独指定大小

3.3字体粗细

css使用font-weight定义字体粗细

属性值见下：

注：实际开发中我们经常使用数字来进行字体的粗细设置

3.4字体倾斜

css用font-style来定义字体是否倾斜


我们通常很少给字体添加斜体，反而会将<em>设置的斜体修改为正常

3.5字体符合属性书写规范

字体属性可以拿到一起来写，可以节约代码

这里有两点需要注意：

• 字体属性之间用空格隔开
• 不想写的字体属性可以省去，但是font-size和font-family不可省！！！

4.css文本属性

4.1文本颜色

css用color来定义文本颜色

当然还有其他写法

在开发中我们通常使用十六进制来修改颜色，但不必去记对应的字符或者rgb中的数字，通常在VScode中可以吸取颜色

4.2文本对齐

css中用text-algin来进行文本对齐

4.3文本缩进

css用text-ident进行文本缩进

这里有两种写法，这里更推荐使用第二种，他会在当前页面空出两个文字的大小，比像素值的写法更方便

4.4装饰文本

css用text-decoration进行文本装饰

注：这里的none可以用于a标签的下划线删除

4.5行间距

css用line-height定义行间距，单位是px

如果遇到网页中的行间距需要测量，这里给大家推荐一个插件，FastStoneCapture，可以进行行间距的测量。

5.css引入方式

5.1内部样式表

用<style></style>在html头部文件进行书写的一种方式

注：

• 只是我们通常将其放到头部文件中，实际上放哪里都可以
• 这样写结构清晰，但没有实现结构与样式的完全分离

5.2行内式样式表

非常简介的一种写法，但只适用于简单修改

5.3外部样式表

实际开发中最常用到的一种形式，可以实现结构与样式的分离

注：在新建的css文件中只需写选择器和声明即可