级联样式表，修饰网页内容语法的集合
级联：关联：两个事物之间具有的关系
作用：修饰网页内容的外观，文本，背景，列表，定位。。。。。。
css是一种样式表语言，用于为HTML文档控制外观，定义布局。
将网页和样式分离，可以重复利用样式，重复的样式只需要定义一次。
HTML：网页内容
css：网页外观/样式
行级(行内)样式表：
又称内联样式表，行间样式，内嵌样式，是通过标签的style属性设置的，style = “”
描述css语法，只能作用于当前标签。
内嵌样式表：
< style type = “text/css”>
< /style>
eg：p{}匹配程序中的p标签
外部样式表:
新建css文件(在css文档里创建)
在< head>里导入外部样式表，<link href = “”,rel = “stylesheet”/>
标签选择器： p{ }
类选择器： class .p1{ }使用最为广泛的
id选择器： id #p2{ }值不重复
选择器组合： .p1,.p2,#p,h1{公共样式} 用于将公共样式抽取
通配选择器： *{ }匹配网页上所有的标签
选择器的优先级(由高到低)： id 类选择器 标签选择器 通配选择器
后代选择器： 祖先 后代{ }找指定祖先下指定的后代标签
子标签选择器： 找指定父级下指定的儿子级别标签 p>b{ }
相邻兄弟选择器： 选择紧邻的(指定相邻的)p+b{ }
兄弟选择器： 选择兄弟标签(指定的)p~b{ }
样式的继承： 子标签会从父标签继承样式
父标签：直接包含子标签的标签
子标签：直接被父标签包含的标签
祖先标签：直接或间接包含子标签的标签
兄弟标签：拥有相同父标签的叫做兄弟标签
color：颜色
font-size：文字大小
font-family：字体
text-align：文本对齐方式(水平)
text-decoration：line through 穿过文本的一条线
underline：给文字添加下划线
none：去掉下划线
text-indent：文本首行缩进 单位：em等于当前字体尺寸
font- style：italic 斜体字
font-weight：bold加粗
letter-spacing：设置字体间距，适用于中文
word-spacing：设置单词间距，适用于英文
line-height：设置行间距(行高)
uppercase：小写转大写
lowercase：大写转小写
capitazile：首字母大写
background-color：背景颜色
background-image：背景图片
背景图片优先级高于背景颜色，不占标签空间
background-repeat：控制背景图片的重复
值：repeat重复
no-repeat不重复
x-repeat x轴重复
y-repeat y轴重复
background-size：背景图片大小(宽在前。高在后)
background-position：背景位置
list-style-type：设置列表前端图标
list-style-image：url+图标路径
list-style-position：inside/outside控制列表项图标位置
简写：list-style：none url+路径 图标位置
border-collapse：collapse：边框收缩，使用单一边框
用来表示标签的一种特殊状态，为这些特殊状态下的标签设置样式时，就可以使用伪类
eg：鼠标移动到标签上，鼠标器点击时
：link 表示普通链接(未被访问过的链接)
：visited 表示访问过的链接(只能设置字体的颜色)
访问历史记录来判断是否访问过
a:link{ }a表示选择器
：hover 表示鼠标移动到标签上的状态
属性：text-decoration：underline
a:active 鼠标点击时的状态
：focus 向拥有输入焦点的标签设置样式(输入标签)
opacity
块级标签：无论内容多少，都会占据一行
默认宽度与父级标签一致
默认高：0或者与内容高度一致
还可以通过width和height社会标签的宽高
eg：p，h1~h6，ul，ol，hr等
行级标签：只占自身大小，不会占一行，即使设置宽高，也没有效果
eg：font，b，i，a
行级块标签：可以设置大小，但不会占一行
eg：input，img
通过display样式可以修改标签类型
赋值：inline：设置标签为行级标签
block：设置标签为块级标签
inline-block：设置标签为行级块标签
none：隐藏标签，不占用网页空间
div：纯净版块级标签
块级标签，可放置任何标签，没有任何附加功能，给了什么实行就是什么属性，主要用于网页布局
span：纯净版行级标签
用来选中文档中的文字
css处理网页时，它认为每个标签都包含在一个不可兼得盒子里，网页布局——摆放盒子
盒子(标签)：内容区(content)
内边距(padding)
边框(border)
外边距(margin)
内容区：标签中的内容存储在内容区中(eg：文字，子标签)
width，height只设置了内容区的大小
width，height只使用于块级标签和行级块标签
内边距：标签内容区域边框以外的空间，会影响标签大小
用padding设置内边距
padding-left/right/bottom/top
简写：padding：上，右，下，左
标签实际大小=内容区+内边距+边框
边框：边框是标签可见框的最外部，也是计算在标签大小内的
eg：border-bottom:1px，red，solid；
border：1px，red，solid(实心线)
外边距：是标签与周围标签之间的距离
影响盒子在网页的位置，不影响大小，
margin(可重叠) 大小不变，位置变化。
上下必须给具体值，左右给auto
*{
margin:0px
padding:0px
}
文档中的标签在排列时所占用的位置
指的是标签在网页中默认的排放顺序
使标签脱离原来的文档流，在父标签中浮动起来
浮动使用float属性
none：不浮动
left：向左浮动
right：向右浮动
块级标签和行级标签都可以浮动，当一个行级标签浮动以后自动变成一个块级标签
当一个块级标签浮动以后，宽度会默认为内容的宽度，所以当漂浮一个块级标签时，我们都会为其制定一个宽度
一个标签浮动以后，下方标签会上移
浮动问题：高度塌陷，浮动元素没有将父级标签撑开
解决：1：设置高度撑开父标签
2：清除浮动影响，会自动将父标签撑开为浮动标签的高度
eg：
相对定位：relative
1、相对起点进行移动
2、移动后原来的位置被占用，其他标签无法使用该位置(没有脱离文档流)
3、开启定位：position：relative；
left/right/top/bottom该属性设置偏移量
4、开启了相对定位，但没有设置偏移量，标签位置不动
5、与其他标签位置重叠时，会提升一个层级
6、相对定位不会改变标签的性质
绝对定位：absolute
1、不占空间，会使标签脱离原来的文档流
2、开启绝对定位，如果没有设置偏移量，位置不变
3、相对于离它最近的开启了定位的祖先标签进行定位，没有的话相对于浏览器进行定位
4、一般情况下开启了子标签的绝对定位同时开启父标签的相对定位
5、改变了标签性质
设置标签的堆叠顺序，设置定位标签的层级，Z轴(值为整数，数字大的在上面)
eg：<style = “position:fixed;right:20px;bottom：20px”>
