目录
7、并集选择器并集选择器表示同时设置，用“ ，（逗号） ”隔开 例如：“dic,p,a"
一、概述
1、 css:全称“cascading style sheets”（也称层叠样式表）
cascading：层叠
style：样式
sheets：表
2、作用：Html用来搭建页面结构，承载数据，而css是美化搭建好的页面，修饰标签。
3、分类：
（一）内部样式
内部样式是在head标签中，编写style标签，在style标签内部，编写属性
*前提：通过选择器选中元素，在style标签中才可编写。
（二）外部样式
创建css文件，将写编写的样式或公共样式通过<link>在Html头部中引入进来。
（三）行内样式
在元素标签中，写style属性。
编写样式<元素 属性......>
*样式一般都写在Html框架的头部<head>中
二、文字、文本属性
1、文字的属性
（1）字体配置：font-family：；（隶书、楷书等字体）
（2）调节字体大小：font-size：16px；（px为单位）
（3）设置字体的粗细：font-weight：200（数值小于等于700，不用带单位）
（4）设置字体风格，如：
字体倾斜font-style：italic；
字体正常：font-style：normal
（5）改变字体颜色：color：颜色；
2、文本属性
(1)调整文本位置：text-align：（center 、right、left）；（使文字居中，靠右或靠左）
（2）装饰文本
1、 /* 下划线 */
/*text-decoration: underline;*/
2、/* 删除线 */
text-decoration: line-through;
3、 /* 上划线*/
/*text-decoration: overline;*/
4、 /* 取消a标签的下划线 */
text-decoration: none;
这是原本a标签的样子
去掉a标签的下划线
3、文本缩进：
* 文本第一行 首行的缩进的距离*/ text-indet：2em；
（2em表示缩进两个文字大小距离，em表示单位）
4、 行间距即就是设置行高：line -height : 25px；（ px是单位）
三、选择器
1、标签选择器
输入标签即可：例如：div{} p{}
样式：标签名{属性样式 }
2、ID选择器
<元素 id=“值”> 例如：<p id="body"> 选择id值前面必须加“#” 编写格式：#id值{}
*id在一个页面中不能重复，只能一对一应用
3、类选择器
使用class给元素起类名，哪个元素想用，用类名都能调用，即就是多个类名相同的元素可同时调用
编写格式：<元素 class=“类名”> .类名{}
4、通配符选择器
用“*”表达，匹配选择所有元素
例：*{margin:0；padding:0}
5、子元素选择器
div>a （选择匹配div下的a元素 ，div>p>a（选择匹配div下的p下的a元素）
*：不可以越级
6、后代选择器
想改变“ul”下的“li”，并不影响“ol”下的“li” 为：ul空格li
7、并集选择器
并集选择器表示同时设置，用“ ，（逗号） ”隔开 例如：“dic,p,a"
8、伪类选择器
9、focus伪类选择器
10、css3新增选择器
（一）
（1）<input type="text" value="请输入用户名">
属性选择器：input[value] (选择input 有value属性的元素)
*:必须是input同时具有value属性
*格式：input[某元素的属性] 标签选择器[属性名]
（2）<input type="text" value="值">
例：input[value=值](选择input下的value属性为 ”值“ 的元素)
格式：input[value=”值“]<input[属性=某个元素的值]>
（3）可以选择以某元素属性值为开头的属性元素
例：(^ 表示以什么属性开头)
<style>
div[class^=icon1]{}<选择以icon为开头的元素>
</style>
<div>
<ul>
<li class="icon1" > </li>
<li class="icon2"> </li>
<li class="icon3"> </li>
</ul>
</div>
（4）可以选择以某元素属性值为结尾的属性元素
例：：($ 表示以什么属性结尾)
<style>
div[class$=n1]{}<选择以n1为结尾的元素>
</style>
<div>
<ul>
<li class="icon1" > </li>
<li class="icon2"> </li>
<li class="icon3"> </li>
</ul>
</div>
（二）新增伪类选择器
（1）选择ul下li中的第一个元素;ul li :first-child
（2）选择ul下li中的最后一个元素:ul li :last-child
（3）选择ul下li中的指定的一个元素:ul li :nth-child(数字<数字是第几个，就会选择第几个>)
(三)结构伪类选择器
(1 把ul下所有的偶数（even） 孩子（li）选择出来（按照从上到下的顺序）
例： ul li : nth-child (even) { }
(2) 把ul下所有的奇数（odd） 孩子（li）选择出来（按照从上到下的顺序）
例： ul li : nth-child (even) { }
(3)选择所有偶数的（li）的孩子
*：nth-child(2n)
(4)选择所有奇数的（li）的孩子
* ：nth-child(2n+1)
(5)nth-child(n) 是从0 开始 往后每次加一来计算
*： 这里 必须有n 不能是其他字母
*：选择了所有的li
*:nth-child（n+3）是从第3个元素开始后面的每个内容（涵盖第三个）
*：nth-child（-n+3）是从第3个元素开始前面的每个内容（涵盖第三个）
四、盒子模型
1、边框
(一)/*边框的粗细*/
border-width
（二）/*边框的风格/样式*/
border-style：solid（实线）/double（双实线）/ dashed（虚线）/ dotted（点线）（4种样式）
（三）/*边框的颜色*/
border-color：颜色；
（四）边框的符合写法
border：颜色 风格 粗细 例如：border：red solid 2px;
2、内边距：
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
复合写法：
/* 注意按照：上 右 下 左的顺序*/
padding: 10px 10px 10px 10px;
/* padding：10px*/（表示内边距全部为：10px）
3、外边距：
margin-top：20px
margin-bottom：20px
margin-left：20px
margin-right：20px
复合写法：
margin-right：20px 20px 20px 20px
4、圆角边框：（通俗倒圆角）
两种写法：
border-radius: 50%;
border-radius: 10px 20px 30px 40px;
5、盒子阴影
box-shadow: 10px 10px 10px -4px rgba(0,0,0,0.5) ;
/*box-shadow: h-shadow( x轴偏移量) v-shadow (y轴偏移量) blur(阴影模糊程度) spread (阴影大小) color( 阴影颜色) inset( 内部阴影 );*/
五、背景
1、背景颜色
backgroung-color：；
2、背景图片
（1）背景图片平铺
默认值 即就是 沿着 x y轴平铺 ：background-repeat ：repeat；
背景图片不平铺 ：background-repeat ：no-repeat；
沿着x轴平铺 ：background-repeat ：repeat-x；
沿着 y轴平铺 ：background-repeat ：repeat-y；
3、线性渐变
background-image: linear-gradient(to left,blue,blueviolet,skyblue);
4、径向渐变
半径，圆心x， 圆心y，色标...
/*background-image: radial-gradient(red 30%,blue 5%,skyblue 60%,#ffffff);
5、 将图片设置为标签背景
background-image：url（“图片ip地址”）
六、浮动
1、浮动
float：left/right（向左或向右浮动）
* 浮动 通过float 来实现元素的浮动 */
/* 可以让块级元素 脱离标准文档流 */
/* 可以向左 右移动 在同一行显示 */
/* 如果显示不下 会换行显示 */
2、清除浮动
/* 通过 clear 属性 清除浮动 表示一侧不允许浮动*
clear: both; （清除两侧浮动）
clear: left; （左侧不允许浮动 ）
clear: right; （右侧不允许浮动）
七、溢出
/* 当元素的内容溢出时 */ /* 默认值 显示在元素在可见的 */
1、/*overflow： hidden: 溢出部分不可见 */
2、/* overflow：scroll : 无论是否出现溢出 始终出现滚动条 */
3、/* overflow：auto 溢出时自动出现滚动条 */
八、定位
1、相对定位（/*position:relativ*/）
（不脱离标准文档流）
2、绝对定位
（/*position:absolute*/)
3、固定定位
（/*position:fiex*/）
4、粘性定位
（/*position:sticky*/）
5、z-index：正整数、负数、0 <定位的堆叠顺序 数值越大图片越靠上>
（注意：必须是在盒子重叠的情况下才可使用））