一、CSS定义

层叠样式表(Cascading Style Sheet,缩写为CSS)，是一种样式表语言，用来描述HTML文档的呈现。
书写位置：title标签下方添加style双标签，style标签里面书写CSS代码。
格式：选择器{ 属性名：属性值}

<style>
选择器{
属性名：属性值
属性名：属性值
属性名：属性值
......
}
</style>

文字颜色：color
字号：font-size

属性名和属性值成对出现，键值对

二、CSS引入方式

• 内部样式表：学习使用
  CSS代码写在style标签里面
• 外部样式表：开发使用
  CSS代码写在单独的CSS文件中(.css)
  在HTML使用link标签引入

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

• 行内样式：配合JavaScript使用
  CSS写在标签的style属性值里

<div style="CSS 属性">...</div>

三、选择器

作用：查找标签，设置样式。
基础选择器

• 标签选择器
• 类选择器
• id选择器
• 通配符选择器

1.标签选择器
标签选择器：使用标签名作为选择器（选同名标签设置相同的样式）
例如：p,h1,div,a,img … …

特点：选中同名标签设置相同的样式，无法差异化同名标签的样式

2.类选择器
作用：查找标签，差异化设置标签的显示效果。
步骤：

• 定义类选择器（.类名）
• 使用类选择器（标签添加class=“类名”）

效果：

一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开。

注意：
1.类名自定义，不要用纯数字或中文，尽量用英文命名2.一个类选择器可以供多个标签使用
3.一个标签可以使用多个类名，，类名用空格隔开

3.id选择器
作用：查找标签，差异化设置标签的显示效果。
场景：一般配合JavaScript使用，很少用来设置CSS样式

步骤：

• 定义id选择器（#id名）
• 使用id选择器（标签添加id=“id名”）

规则：同一个id选择器在一个页面只能使用一次

4.通配符选择器
作用：查找页面所有标签，设置相同样式。

通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式。

5.画盒子
作用：使用合适的选择器画盒子

属性名	作用
width	宽度
height	高度
background-color	背景色

四、文字控制属性

描述	属性
字体大小	font-size
字体倾斜	font-style
字体粗细	font-weight
行高	line-height
字体族	font-family
字体复合属性	font
文本缩进	text-indent
文本对齐	text-align
修饰线	text-decoration
颜色	color

1.字体大小
属性名：font-size
属性值：文字尺寸，PC端网页最常用单位px
2.字体粗细
属性名：font-weight
属性值：数字（开发使用）

正常	400
加粗	700

关键字：

正常	normal
加粗	bold

3.字体样式（是否倾斜）
作用：清除文字默认倾斜效果
属性名：font-style
属性值：

• 正常：normal
• 倾斜：italic

4.行高
作用：设置多行文本的间距
属性名：line-height
属性值：

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

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

垂直居中技巧：行高属性值等于盒子高度属性值
注意：只能单行文字才能垂直居中

5.字体族
属性名：font-family
属性值：字体名

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

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

7.文本缩进
属性名：text-indent
属性值：

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

8.文本对齐方式
作用：控制内容水平对齐方式
属性名：text-align
属性值：

属性值	效果
left	左对齐（默认）
center	居中对齐
right	右对齐

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

10.文本修饰线
属性名：text-decoration

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

11.颜色
属性名：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	开发使用（从设计稿复制）