css样式层叠表
css是给页面中的结构添加样式的
css写在style标签中，style标签一般写在head标签里面，title标签下面
css引入方式
内嵌式
CSS 写在style标签中
提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
<style>
/* CSS 标点符号都是英文状态下的,每一个样式键值对写完之后，最后需要写分号 */
div {
color: red;
}
/* css的三种引入方式 第一种内嵌式 */
/* 内嵌式 在style中 作用于整个页面 */
</style>
外联式
CSS 写在一个单独的.css文件中
提示：需要通过link标签在网页中引入
<link rel="stylesheet" href="./css外链 .css">
<!-- 外链式 link表示 -->
行内式
CSS 写在标签的style属性中 ，不推荐使用 ，一般配合js使用
<div>
<span style="color: blue;">这是一个行内标签</span>
<!-- 行内式引入方式 优先级最高-->
</div>
基础选择器
选择器作用：选中页面中对应的标签，方便后续设置样式
标签选择器
div {
color: blue;
}
/* 标签选择器 直接写标签*/
/* 标签选择器选择的是一类标签，而不是单独某一个，标签选择器无论嵌套关系有多深，都能找到对应的标签 */
类选择器
命名尽量语义化
.box1 {
color: green;
}
/* 类名选择器 相当于人的名字 类名选择器 .类名 */
/* 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头 */
/* 一个标签可以同时有多个类名，类名之间以空格隔开，类名可以重复，一个类选择器可以同时选中多个标签 */
id选择器
#box2 {
color: yellow;
}
/* id选择器 相当于人的身份证号 是唯一的*/
/* 所有标签上都有id属性 */
/* id选择器 #id值 */
通配符选择器
* {
color: red;
}
/* 通配符，作用于整个页面 */
/* 通配符以*表示 */
字体和文本样式
字体样式
字体大小：font-size
数字+px
谷歌浏览器默认文字大小是16px
单位需要设置，否则无效
字体粗细：font-weight
字体样式：font-style
字体类型：font-family
如果字体类型有多个，推荐使用引号包裹
最后一项不需要引号包裹
如果同一个字体的属性写了多个，后面的会覆盖前面的
字体font属性连写
只能省略样式和粗细，如果省略相当于设置了默认值
如果需要同时设置单独和连写形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
font-size: 30px;
/* 字体大小 */
font-weight: 700;
/* 字体粗细 normar/400/正常 bold/700/加粗 100~900共九种从细到粗*/
font-style: italic;
/* 字体样式 normar/正常 italic/倾斜*/
font-family: 宋体;
/* 字体系列 */
/* 如果字体名称中存在多个单词，推荐使用引号包裹 */
/* 最后一项字体系列不需要引号包裹 */
/* font连写 style/weight 前面两个可以不分先后 size/family */
/* 同一个标签相同属性 后来者居上 */
/* swsf 稍微舒服 样式粗细字体类型*/
文本样式
文本缩进：text-indent
数字+px
数字+em（推荐：1em = 当前标签的font-size的大小，也就是一个中文字）
text-indent: 50px;
/* 文本缩进 50px/2em 两种写法*/
文本水平对齐方式：text-align
三种对齐方式 ：left 居左 right 居右 center 居中
如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
如果要让div p h 等块级元素水平居中使用margin : 0 auto 直接给当前标签设置即可
如果要让文本 span img 等元素居中，则要给其父元素设置text- align ： center
text-align: center;
/* 文本对齐方式 left/center/right*/
/* 元素水平居中， text-align : center 需要给以上元素的 父元素 设置 */
margin: 0 auto;
/* 块级居中 如果需要让 div、p、h（大盒子） 水平居中，直接给 当前元素本身 设置即可*/
/* margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度 */
文本修饰：text-decoration
开发中会使用 text-decoration : none ; 清除a标签默认的下划线
text-decoration: line-through;
/* 文本修饰 none/无修饰 清除a标签默认的下划线 */
/* underline/下划线 line-throgh/删除线 overline/上划线 */
行高
控制一行的上下行间距
取值：
数字+px
倍数（当前标签font-size的倍数）
应用：
让单行文本垂直居中可以设置 line-height : 文字父元素高度
网页精准布局时，会设置 line-height : 1 可以取消上下间距
如果同时设置了行高和font连写，注意覆盖问题
font : style weight size/line-height family ;
line-height: 400px;
/* 行高 谷歌浏览器默认文字大小是16px*/
/* 网页精准布局时，会设置 line-height : 1 可以取消上下间距 */
/* 如果同时设置了行高和font连写，注意覆盖问题,font : style weight size/line-height family ; */
常见颜色
文字颜色：color
关键字 属性值为 red green blue 等
rgb表示法 红绿蓝三原色 每项取值范围为0~255 例 ： rgb（255，255，255）
rgba表示法 三原色+a表示透明度 a的取值范围为0~1 例 ： rgba（255，255，255，0）0表示完全透明
省略写法： rgba ( 0 , 0 , 0 , 0.5 ) 可以省略写成 rgba ( 0 , 0 , 0 , .5 )
十六进制表示法 #号开头 将数字转换成十六进制表示 例：#000000 #ffffff 相同的可以简写 例：#000
两个数字为一组，每个数字的取值范围：0~9 , a , b , c , d , e , f
\#ffaabc 不能改写成 #fabc
背景颜色：background-color
取值同颜色一样，只是赋值对象不一样
