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、属性名或者属性值单词拼错
