CSS基础认知
-
CSS初识
-
CSS的介绍
- 层叠样式表
- 作用：给页面中的html标签设置样式
-
CSS语法规则
-
选择器 { css属性 }
-
注意点
- 1、标点符号都是英文状态下的
- 2、每一个样式的键值对写完之后，最后需要写分号
-
-
CSS初体验
-
css写在哪里
- css写在style标签中，style标签一般写在head标签里面，title标签下面
-
标签选择器
-
常见的属性
-
文字的颜色
- color
-
文字的大小
- font-size
-
背景颜色
- background-color
-
宽度
- width
-
高度
- height
-
-
-
-
CSS引入方式
-
内嵌样式
-
书写位置
- css写在style标签中，style标签写在head标签里面，title标签的下面
-
作用范围
- 当前页面
-
使用场景
- 小案例、小demo
-
-
外联样式
-
书写位置
- css写在一个单独的.css文件中，此时需要通过link标签引入
-
作用范围
- 多个页面（谁引入，谁就生效）
-
使用场景
- 项目中使用
-
-
行内样式
-
书写位置
- css写在标签的style属性中
-
作用范围
- 当前标签
-
使用场景
- 在基础班是不用，之后配合js一起使用
-
-
基础选择器
-
选择器的作用
- 选中页面中对应的标签（找她），方便后续设置样式（改她）
-
标签选择器
-
结构：标签名 {css}
-
作用：通过标签名找到页面中所有这一类标签，设置样式
-
注意点
- 1、找的是一类标签，不能单独找到某一个
- 2、标签选择器无论嵌套关系有多深，都能找到对应的标签
-
-
类选择器
-
结构：.类名 {css}
-
作用：找到页面中所有带有该类名标签，设置样式
-
注意点
-
1、所有的标签都有class属性，class属性的属性值就叫做类名
-
类名的命名规则
- 由数字、字母、下划线、中划线组成，但是不能以数字或者中划线开头
- 命名尽量需要有意义
-
-
2、一个标签可以有多个类名，类名之间通过空格隔开
-
3、一个类选择器可以同时选中多个标签
-
多对多
-
-
-
id选择器
-
结构：#id属性值 {css}
-
作用：找到页面中带有该id属性值的标签，设置样式
-
注意点
- 1、id属性值相当于是身份证号码，在一个页面中是唯一的，不可重复的！！！
- 2、一个标签上只能有一个id属性值
- 3、一个id选择器只能选中一个标签
- 一对一
-
-
类与id的区别
-
class类名与id属性值的区别
- class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
- id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
-
类选择器与id选择器的区别
- 类选择器以.开头
- id选择器以#开头
-
实际开发的情况
-
类选择器用的最多
-
id一般配合js使用，除非特殊情况，否则不要使用id设置样式
-
实际开发中会遇到冗余代码的抽取问题
- 可以将一些公共的代码抽取到一个公共的类中去
-
-
-
通配符选择器
-
结构：* {css}
-
作用：找到页面中所有的标签，设置样式
-
注意点
- 针对于大型的项目，一般不会使用通配符选择器，可能会比较消耗浏览器的性能
- 之后可能在基础班的小页面中去除标签的默认margin和padding
字体和文本样式
-
-
字体样式
-
字体大小
-
font-size
-
取值
-
数字 + px
- px：像素
-
-
-
字体粗细
-
font-weight
-
取值
-
关键字
-
正常
- normal
-
加粗
- bold
-
-
纯数字
-
正常
- 400
-
加粗
- 700
-
-
-
-
字体样式
-
font-style
-
取值
-
正常
- normal
-
倾斜
- italic
-
-
-
字体类型
-
科普
-
常见字体系列
-
无衬线字体
-
sans-serif
-
特点
- 文字笔画粗细均匀，并且首尾无装饰
-
场景
- 网页中大多采用无衬线字体
-
常见该类别字体
- 黑体
- Arial
-
-
衬线字体
-
serif
-
特点
- 文字笔画粗细不均，并且首尾有笔锋装饰
-
场景
- 报刊书籍中应用广泛
-
常见该类别字体
- 宋体
- Times New Roman
-
-
等宽字体
-
monospace
-
特点
- 每个字母或文字的宽度相等
-
场景
- 一般用于程序代码的编写，利于代码编写和阅读
-
常见该类别字体
- Consolas
- fira code
-
-
-
-
font-family
-
取值
- 具体字体1,具体字体2,具体字体3,具体字体4,...,字体类型
- 具体字体名称："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……
- 字体系列名称：sans-serif、serif、monospace等……
-
渲染规则：
-
1、从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
-
2、如果都不支持，则显示最后设置的字体系列的默认字体
- window：微软雅黑
- mac：苹方
-
-
注意点
- 1、如果字体名称中存在多个单词，推荐使用引号包裹
- 2、最后一项字体系列不需要引号包裹
- 3、网页开发时，尽量使用系统自带字体，保证不同用户浏览网页都可以正确显示
-
-
-
样式的层叠问题
-
如果给同一个标签设置了相同的属性
-
此时样式会覆盖（层叠）
- 写在最下面的会生效
-
-
-
font属性的连写问题
-
1、顺序问题
-
font: style weight size family
-
稍微舒服
- swsf
-
-
2、省略问题
-
只能省略前两个
- 如果省略了相当于设置了默认值
-
省略的覆盖问题
-
如果需要同时设置单独的属性和连写形式
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
-
-
-
-
-
文本样式
-
文本缩进
-
text-indent
-
取值
-
1、数字 + px
-
2、数字 + em
- 1em = 当前标签的font-size的大小
-
-
注意点
- 不是独占一行的元素设置text-indent无效
-
-
文本水平对齐方式
-
text-align
-
取值
-
1、左对齐
- left
-
2、居中对齐
- center
-
3、右对齐
- right
-
-
注意点
- 如果让文本水平居中，text-align:center给文本的父元素设置
-
-
文本修饰
-
text-decoration
-
取值
-
1、下划线
- underline
-
2、删除线
- line-through
-
3、没有效果
- none
- 用来清除a标签默认的下划线
-
-
-
拓展：水平居中方法的小总结
-
text-align：center；
- 1、文本
- 2、span标签、a标签
- 3、input标签、img标签
- 注意点：如果需要让以上元素水平居中，此时直接以上元素的父元素设置即可
-
margin：0 auto；
- 1、div、p、h（盒子）
- 注意点：直接给当前元素设置的
-
-
-
行高
-
line-height
-
取值
- 1、数字+px
- 2、倍数（当前文字大小的倍数）
-
常见应用
- 1、line-height：文字父元素的高度，让单行文本垂直居中
- 2、设置line-height：1取消上下间距，精准布局时会使用
-
和font属性的连写形式
-
font：style weight size/line-height family
-
如果需要设置单独的样式和连写
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
-
-
-
补充：颜色常见取值（了解）
-
关键字
-
rgb表示法
- 每一项的取值范围：0~255
-
rgba表示法
-
a表示透明度
- 0~1
- 0：完全透明
- 1：完全不透明
-
-
十六进制表示法
-
#ffaabb
- #fab
-
-
Chrome调试工具
-
打开方式
-
右击→检查
-
看哪里
- elements：显示当前页面的html结构
- styles：显示当前标签的样式
-
-
选择元素
- 方法一：在左侧elements中点击需要调试的元素
- 方法二：点击左上角按钮后，直接在网页中点击需要调试的元素
-
功能
-
控制样式
-
1、修改属性值
- 直接点击属性值，直接修改
-
2、添加属性
- 在上一个属性的分号后点击一下，直接添加
-
3、控制样式生效
- 点击属性前的小框即可
-
注意点
- 调试工具仅仅只是当前的调试效果，需要在代码中修改才能永久保留
-
-
特殊情况
-
1、样式上有删除线
-
含义
- 样式失效
-
原因
- 1、样式被注释了
- 2、样式被覆盖了
-
-
2、样式前有小三角形
-
含义
- 样式报错
-
原因
- 1、属性值后没写分号
- 2、出现中文标点
- 3、属性名或者属性值单词拼错
Chrome调试工具-查错流程（经验）
-
-
-
-
遇到样式不出来时，学会通过调试工具找错！！！
-
查错流程
-
1、右击检查
-
2、哪里不会点哪里
- 在elements找到对应的元素
-
3、看styles中有没有自己设置的选择器
-
如果没有，一般是选择器写错了
- 常见原因1：选择器单词拼错
- 常见原因2：选择器结构写错
-
-
4、如果选择器有，但是样式没出来
-
看是否有删除线（没生效）
- 常见原因1：样式被注释
- 常见原因2：样式被覆盖
-
看是否有小三角形（报错）
- 属性名或者属性值有错误
- 常见原因1：属性值后没有分号
- 常见原因2：出现中文标点
- 常见原因3：属性名或者属性值单词拼错
-
-
