- 层叠样式表（cascading style Sheet）的简称，CSS也是一种标记语言，可以给HTML书写出来的网页设置不同的样式
- h1 {color:red;fontsize:14px;}
- 语法注意点：
- 1.选择器：用于制定CSS样式的HTML标签，{}里面是对该选择器设置的具体样式
- 2.属性和属性值是以“键值对”形式出现
- 3.属性是一种特定的样式属性，eg：字体颜色、大小等
- 4.属性和属性值之间“：”隔开
- 5.多个键值对之间用英文“;”隔开
- 1.选择器：用于制定CSS样式的HTML标签，{}里面是对该选择器设置的具体样式
- 样式一般写在<head>标签中的<style>标签内（内部样式）
- 标签选择器（元素选择器）
- 定义：是指用HTML标签名作为选择器，对页面中所有符合条件的一类标签来指定统一的CSS样式
- 语法：
- 优点：能快速设置页面中一类标签样式
- 缺点：不能差异化设置样式
- 定义：是指用HTML标签名作为选择器，对页面中所有符合条件的一类标签来指定统一的CSS样式
- 类选择器
- 差异化选择不同的标签
- 语法：
- 语法注意：
- 1.类选择器用英文"."来定义，后面要跟类名
- 2.长类名一般可以用横线来进行连接
- 3.不要使用纯数字、中文等进行命名，要使用英文字母命名
- 4、命名要有意义，尽量使他人一眼就知道这个类名的目的
- 1.类选择器用英文"."来定义，后面要跟类名
- 多类名使用
- 1.标签class属性中写多个可以进行多类名调用
- 2.多个类名之间要用空格隔开
- 3.调用完就会显示所有被调用类名所声明的样式
- eg：
- 1.标签class属性中写多个可以进行多类名调用
- 差异化选择不同的标签
- ID选择器
- 定义：
- ID是唯一的标识，所以ID选择器主要是为了唯一id的HTML元素来指定特定的样式
- id选择器用"#"来定义，用id来调用
- ID是唯一的标识，所以ID选择器主要是为了唯一id的HTML元素来指定特定的样式
- eg：
- id选择器和类选择器之间的区别
- 1.类选择器相当于人名，一个人可有多个名字，一个名字也可被多人使用
- 2.id选择器相当于省份证号码，唯一的，不能重复
- 3.id选择器再一个网页中只能使用一次，类选择器可以使用多次
- 4.类选择器子在修改样式中使用的频率最高，id选择器一般用于页面的唯一性元素上，与js来用
- 1.类选择器相当于人名，一个人可有多个名字，一个名字也可被多人使用
- 定义：
- 通配符选择器
- css中，通配符选择器用"*"来定义，标识选择页面中的所有元素
- 通配符选择器不需要进行调用，可以直接给所有元素设置样式
- css中，通配符选择器用"*"来定义，标识选择页面中的所有元素
- font-family（字体选择）
- 注：
- 各字体间要使用英文","隔开
- 一般情况下，使用系统默认字体，保证在任何浏览器中都能正常显示
- 如果字体名字有空格，要用""将字体名字引起来
- 各字体间要使用英文","隔开
- CSS Unicode字体
- 在css字体设置中，如果要避免乱码，可以使用Unicode字体来进行字体声明
- 常用Unicode表：
- 在css字体设置中，如果要避免乱码，可以使用Unicode字体来进行字体声明
- 注：
-
- font-size（字体大小）
- 1.单位:px
- 2.谷歌默认字体16px
- 3.可以给body标签中置顶文字大小，改变整个页面的文字大小
- 4.不同浏览器可能默认字体大小不同，尽量设置一个明确字体大小，不要使用默认大小
- 1.单位:px
- font-style（字体风格）
- 常用属性值
- normal：默认值，浏览器显示标准字体样式
- italic：斜体样式
- normal：默认值，浏览器显示标准字体样式
- 注：
- 斜体样式平常很少使用，而是更大将<em>/<i>改为正常字体
- 斜体样式平常很少使用，而是更大将<em>/<i>改为正常字体
- 常用属性值
- font-weight（字体粗细）
- 设置文本粗细
- 常用数值：
- 400：正常字体粗细
- 700：加粗字体
- 不加px单位
- 400：正常字体粗细
- 设置文本粗细
- 字体的复合属性
- 字体属性可以综合书写，代码精简，开发常用方式
- 语法格式
- 注：
- 使用font属性时，必须按照严格的语法格式中属性值的顺序来进行书写，不可以随便更换顺序，各属性用空格隔开
- 可以省略：font-style font-weight，不可省略：font-size font-family
- line-height是为了设置行高
- 具体像素值
- 倍数
- 具体像素值
- 使用font属性时，必须按照严格的语法格式中属性值的顺序来进行书写，不可以随便更换顺序，各属性用空格隔开
- 文本颜色
- 可以使用16进制、RGB及英文单词表示颜色，实际开发最常用的是16进制
- 文本对齐
- 文本装饰
- text-dacoration属性设置文本装饰，使用最多的属性值是line-through（价格删除）和none（主要给a标签取消下划线）
- text-dacoration属性设置文本装饰，使用最多的属性值是line-through（价格删除）和none（主要给a标签取消下划线）
- 文本缩进
- text-indent属性来对指定文本的第一行进行缩进
- 可以使用具体像素值进行缩进
- 使用em 单位值缩进
- em是一个相对单位，就是当前元素的一个文字大小，要缩减两个font-size单位时，将text-indent值写为2em
- text-indent属性来对指定文本的第一行进行缩进
- 行间距
- line-height属性，设置行间距、行高，
- 可以写具体的像素值或倍数
- line-height属性，设置行间距、行高，
- 行内（行内式）样式表
- 在元素标签内部的style属性中设置css样式，适合于简单的样式修改
- 注：
- 行内样式书写时，要符合css书写规范
- 样式写在style属性中，要双引号引起来
- 书写繁琐，没有实现结构样式分离的思想
- 行内样式书写时，要符合css书写规范
- 内部（嵌入式）样式表
- html页面内部，所有css代码写下style中
- 注：
- 没有实现结构和样式分离
- 练习时使用
- 没有实现结构和样式分离
- html页面内部，所有css代码写下style中
- 外部（链接式）样式表
- 实际开发中最常用的方式，创建一个css文件放入需要样式，然后在html中引入样式文件即可
- 引入外部样式表步骤
- 1.创建后缀名为.css的样式文件
- 2.在HTML文件中，使用<link>标签来进行引入
- link属性
- rel
- 定义当前文档与被链接文档的关系，这里直接写成stylesheet，表示被链接的文档是一个样式表文件
- 定义当前文档与被链接文档的关系，这里直接写成stylesheet，表示被链接的文档是一个样式表文件
- href
- 定义引入文件路径
- 定义引入文件路径
- rel
- link属性
- 1.创建后缀名为.css的样式文件
- 整合多个外部样式表集中导入
- 样式表1
- 样式表2
- 几种样式表
- 实际开发中最常用的方式，创建一个css文件放入需要样式，然后在html中引入样式文件即可
