【CSS基础】

一、基础认知

1.1 CSS的介绍

CSS：层叠样式表(Cascading style sheets)

1.2 CSS语法规则

css写在style标签中，style标签一般写在head标签里面，title标签下面

1.3 CSS引入方式

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

二、基础选择器

2.1标签选择器

结构：标签名{css属性名：属性值；}
作用：通过标签名找到页面中所有这类标签，设置样式
注意点：
1.标签选择器选择的是一类标签，而不是单独某一个
2.标签选择器无论嵌套关系有多深，都能找到对应的标签

2.2 类选择器

结构：.类名{css属性名：属性值；}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
1.所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头
3.一个标签可以同时有多个类名，类名之间以空格隔开
4.类名可以重复，一个类选择器可以同时选择多个标签

2.3 id选择器

结构：#id属性值{css属性名：属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
1.所有标签上都有id属性
2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
3.一个标签上只能有一个id属性值
4.一个id选择器只能选中一个标签

2.4 通配符选择器

结构：*{css属性名：属性值；}
作用：找到页面中所有标签，设置样式
注意点：开发中使用极少，只有在其特殊情况下才会用到
一般用法：

/* 去除默认边距 */
	*{
	    margin: 0;
	    padding: 0;
	}

三、字体和文本样式

3.1 字体样式

3.1.1 字体大小

属性名：font-size
取值：数字 + px
注意点：
-谷歌浏览器默认文字大小是16px
-单位需要设置，否则无效

3.1.2 字体粗细

属性名：font-weight
取值：
-关键字：

正常	normal
加粗	bold

-纯数字：100~900的整百数

正常	400
加粗	700

注意点：
-不是所有字体都提供了九种粗细，因此部分取值页面中无变化
-实际开发中以：正常、加粗两种取值使用最多

3.1.3 字体倾斜

属性名：font-style
取值：
-正常（默认值）：normal
-倾斜：italic

3.1.4 字体系列

属性名：font-family
取值：字体名称（黑体、宋体、楷体等）

系统	默认字体
Windows	微软雅黑
macOS	苹方

3.1.5 字体font相关属性的连写

属性名：font（复合属性）
取值：font:style weight size family;
省略要求：前两项可以省略，省略则为默认值
代码：

.font{
        font: italic 700 18px 黑体;
     }

3.2 文本样式

3.2.1 文本缩进

属性名：text-indent
取值：
-数字 + px
-数字 + em（推荐：1em = 当前标签的font-size的大小）

3.2.2 文本水平对齐方式

属性名：text=align
取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

注意点:
如果需要让文本水平居中，text-align标签给文本所在标签（文本的父元素）设置

3.2.3 文本修饰

属性名：text-decoration
取值：

属性值	效果
underline	下滑线（常用）
line-through	删除线（不常用）
overline	上划线（几乎不用）
none	无装饰线（常用）

注意点：
开发中会使用text-decoration:none;清除a标签默认的下划线

3.2.4 行高

作用：控制一行的上下行间距
属性名：line-height
取值：
-数字 + px
-倍数（当前标签font-size的倍数）

行高与font连写的注意点：
-如果同时设置了行高和font连写，注意覆盖问题

font:style weight size/line-height familiy;

3.3 扩展 颜色常见取值

属性名：
如：文字颜色：color
如：背景颜色：background-color
属性值：

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red、green、blue、yellow…
rgb表示法	红绿蓝三原色。每项取值范围0~255	rgb（0，0，0）、rgb（255，255，255）…
rgba表示法	红绿蓝三原色+a表示透明度，取值范围是0~1	rgba（255，255，255，0.1）…
十六进制表示法	#开头，将数字转成十六进制表示	#000000、#ff0000

3.4 扩展 标签水平居中方法

代码：margin：0 auto；
注意点：
1.如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可
2.margin：0 auto；一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度