css基础知识点总结

css初级

css的使用：选择器{属性名：属性值；}

css引入方式

引用方式	书写位置	作用范围	使用场景
内嵌式	css写在style标签中	当前页面	小案例
外联式CSS 写在单独的css文件中，通过link标签引入	多个页面	项目中
行内式	CSS写在标签的style属性中	当前标签	配合js使用

基础选择器

选择器	html中写法	css中引入样式	注意点
标签选择器		标签名	1.标签选择器选择的是一类标签，而不是单独某一个 2．标签选择器无论嵌套关系有多深，都能找到对应的标签
类选择器	class="类名"	.类名{属性名：属性值}	1．所有标签上都有class属性，class属性的属性值称为类名（类似于名字) 2．类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头 3.一个标签可以同时有多个类名，类名之间以空格隔开 4.类名可以重复，一个类选择器可以同时选中多个标签
id选择器	id="id名字"	#id名字{属性名：属性值；}	1．所有标签上都有id属性 2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的! 3.一个标签上只能有一个d属性值 4.一个id选择器只能选中一个标签
通配符选择器		*{属性名：属性值；}	1、开发中使用极少，只会在极特殊情况下才会用到 在基础班小页面中可能会用于去除标签默认的margin和padding

id选择器与类选择器的区别

class类名与id属性值的区别
class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

类选择器与id选择器的区别
类选择器以.开头 id选择器以#开头

实际开发的情况
类选择器用的最多
id一般配合js使用，除非特殊情况，否则不要使用id设置样式
实际开发中会遇到冗余代码的抽取(可以将一些公共的代码抽取到一个公共的类中去)

文本及文本样式

字体样式	属性名	取值	注意点
字体大小	font-size	数字+px	谷歌浏览器默认文字大小是16px;单位需要设置，否则无效
字体粗细	font-weight	1、关键字[正常：normal；加粗：bold]； 2、纯数字（100-900取值）[正常：400；加粗：700]	不是所有字体都提供了九种粗细，因此部分取值页面中无变化；实际开发中以:正常、加粗两种取值使用最多。
字体样式	font-style	正常（默认值) : normal；倾斜: italic
字体系列	font-family	具体字体1,具体字体2,具体字体3,具体字体4...字体系列	渲染规则: 1.从左往右按照顶序查找，如果电脑中未安装该字体，则显示下一个字体2.如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体 注意点: 1.如果字体名称中存在多个单词，推荐使用引号包裹2．最后一项字体系列不需要引号包裹3.网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都以正确显示
font连写		font : style weight size family,	只能省略前两个，如果省略了相当于设置了默认值 如果需要同时设置单独和连写形式:要么把单独的样式写在连写的下面;要么把单独的样式写在连写的里面

关于字体系列，做一点扩展

字体系列	特点	场景	常见该样式的字体
无衬线字体(sans-serif)	文字笔画粗细均匀，并且首尾无装饰	网页中大多采用无衬线字体	黑体、Arial
衬线字体(serif)	文字笔画粗细不均，并且首尾有笔锋装饰	报刊书籍中应用广泛	宋体、Times New Roman
等宽字体(monospace)	每个字母或文字的宽度相等	一般用于程序代码编写，有利于代码的阅读和编写	Consolas.fira code

文本样式	属性名	取值	注意点
文本缩进	text-indent	数字+px 数字+em(推荐: 1em =当前标签的font-size的大小)
对齐方式	text-align	left左对齐；center居中对齐；right右对齐；	如果需要让文本水平居中，text-align属性给文本所在标签(文本的父元素)设置
文本修饰	text-decoration	underline下划线〔常用)；line-through除线〔不常用)；owerline上划线〔几乎不用)；none无装饰线〔常用)；	开发中会使用text-decoration : none;清除a标签默认的下划线

关于text-align：center的小知识：
能让1.文本，2.span标签、a标签，input标签、img标签
注意点:如果需要让以上元素水平居中，text-align : center需要给以上元素的父元素设置

line-height

作用	属性名	取值	应用	注意点
作用:控制一行的上下行间距	属性名: line-height	取值:数字+pX；倍数（当前标签font-size的倍数)	应用:1.让单行文本垂直居中可以设置line-height :文字父元素高度2．网页精准布局时，会设置line-height : 1可以取消上下间距	行高与font连写的注意点:如果同时设置了行高和font连写，注意覆盖问题font : style weight size /line-height family;