持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情
【HTML②】CSS样式表、DIV+CSS
五、CSS样式表(重点熟练使用)
通过HTML的标签可以搭建网页的基本结构，而对网页的修饰使用之前的属性将无法完美的修饰;HTML标签是用来搭建网页结构的，CSS是用来对网页上的各种元素进行美化。 CSS叫层叠样式表
1.CSS的编写规则:
（1）CSS需要写在style标签里面
（2）每个样式表中都存在一系列样式规则，通过这些规则来对指定的元素进行修饰
（3）一个样式规则由样式名和样式规则值组成,名和值中间使用:分割
（4）多个样式规则之间使用；号分割
2.选择器分类:
选择器主要用于匹配待修饰的HTML元素 （1）标签选择器:HTML中存在的标签名做为选择器的名字，则当前页面中同标签的所有元素遵循该样式规则显示。 （2）类选择器:定义一个类选择器，并在其中定义样式规则，在需要时使用标签中的class属性调用类选择器;（类选择器的定义:.类名） （3）ID选择器:将一个HTML标签中的ID属性做为选择器使用，ID选择器只能针对同id的标签起作用，不需要调用(ID选择器的定义:#id{}) （4）结构伪类选择器(位置选择器) <1>first-child:选择属于其父元素的首个子元素 <2>last-child:选择属于其父元素的最后一个元素 <3>nth-child(n):选择属于其父元素的第n个子元素,(n可以是公式，如2n|2n+1) <4>nth-child(odd|even):选择属于其父元素的所有(odd)奇数元素或(even)偶数元素 <5>nth-last-child(n):选择其父元素中第n个子元素，从最后一个元素开始计数 （5）目标选择器 target,当前访问的元素 （6）组合选择器 <1>标签名,.类名{}：p.a{}设置所有使用类a的p标签样式 <2>标签名1，标签名2，标签名3{}:a,div{}同时设置多个标签样式 标签名1，标签名2，类名{}:a,div,.xxx{}同时设置多个标签样式 (7)包含选择器(后代选择器) 标签名 标签名{}:div p{}设置div中的所有p标签 .class 标签名{}：.xxx p{}设置含有类xxx中的所有p标签 可以多级包含…. (8)子元素选择器 标签名>子元素标签名{}:div>p{}设置div下的直接子元素p (9)属性选择器 <1>标签名[attr]:选择标签中存在attr属性的元素 <2>标签名[attr=val]:选择标签中存在attr属性并且值等于val的元素 <3>标签名[attr^=val]:选择标签中存在attr属性并且值以val开头的元素 <4>标签名[attr$=val]:选择标签中存在attr属性并且值以val结尾的元素 <5>标签名[attr*=val]:选择标签中存在attr属性并且值中含有val的元素
10.伪元素选择器 (1)标签名::first-letter{}:选择文本的第一个单词或字 (2)标签名::first-line{}:选择文本的第一行 (3)标签名::selection{}:选择设置当前选中文本的样式 (4)标签名::befor{content:”新内容”}：在元素内部原有内容前面插入新内容 (5)标签名::after{content:”新内容”}:在元素内部原有内容后面插入新内容
3.按照样式表的抒写位置分类:
1.行内样式表:
在HTML标签的style属性中定义的样式表，称为行内样式表;行内样式表只能针对当前标签起作用
2.内嵌样式表: 编写在标签中的样式表统称内嵌样式表，该样式表针对当前页面的所有标签起作用
3.外部样式表:
单独写在css文件中的样式表，外部样式表可以在任何页面使用，只要在页面中引用外部样式表文件就可以了.(xxx.css)
1.连接方式引入外部样式表
2.使用import导入方式引入外部样式表
3.常用样式表:
1.文本样式：
(1)text-indent：文本缩进(首行缩进)
(2)text-align：文本对齐方式
(3)word-spacing：单词间隔
(4)letter-spacing：字母间隔(字间隔)
(5)line-height：设置行高
(6)font-size：设置字体大小
(7)font-family：设置字体类型
(8)color：设置字体颜色
(9)font-style：设置字体样式(斜体)<i>
(10)font-weight：设置文本粗细<b>
(11)text-decoration:underline;/*设置文字下划线*/<u>
2.边框样式(HTML中任何元素都有框)
(1)border-width:设置边框宽度
(2)border- left- width|border-right-width |border-top-width |border-bottom-width:分别设置四周边框宽度
(3)border-style:设置边框样式
(4)border- left-style|border-right-style |border-top-style|border-bottom-style:分别设置四周边框样式
(5)border-color:设置边框颜色
(6)border- left-color|border-right- color|border-top- color|border-bottom- color:分别设置四周边框颜色
(7)border:1px solid red;同时设置边框宽度、样式和颜色
(8)border-collapse: collapse;/*合并边框*/
3.背景样式
(1)background-color:背景颜色
(2)background-image:url(图片地址)背景图片
(3)background-repeat:设置背景图片重复(重复、不重复、横向重复、纵向重复)
(4)background-size:设置背景图片大小(会根据页面大小自动缩放)
4.其他样式
(1)list-style: none;/*去掉列表前面的列表符号*/
(2)list-style-image:将项目符号设置为图片
(3)float: left;/*设置列表项内容左浮动(排成一排)*/
(4)display: inline-block;/**设置显示风格为行块级自动变换显示*/
(5)border-radius: 10px;/*设置圆角矩形*/
(6)margin:设置空白距离(top,left,bottom,right)
(7)padding:设置元素内的填充距离(top,left.bottom.right)
(8)overflow: hidden;/**隐藏浏览器中的滚动条*/
5.超链接样式(伪类)
用于对超链接进行修饰
(1)超链接默认样式(未访问过的超链接):a:link{}
(2)超链接访问过的样式:a:visited{}
(3)鼠标悬浮样式:a:hover{}
(4)超链接活动样式(点击超链接时的样式):a:active{}
4.不同链接使用不同的样式
CSS3样式
1.设置半透明字体:rgba(r,g,b,a);color:rgba(255,0,0,0.5);红绿蓝透明度(0~1之间)
2.字体阴影:text-shadow:水平位置 <必填> 垂直位置<必填> 模糊距离<选填> 阴影颜色<选填>
设置div的阴影
3.设置背景图片坐标位置:
background-position:left|top|right|bottom left|top|right|bottom（方位名词）
background-position:10px 20px:参数1为X轴，参数2位Y轴(精确定位)
background-position:10px center:混合使用
4.背景附着
background-attachment:scroll | fixed
scroll:背景图随滚动条滚动(默认)
fixed：背景固定，不随滚动条滚动
5.背景简写
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景定位
6.背景透明
background:rgba(0,0,0,0.5)
7.背景图片大小
Background-size：宽度 高度；
设置值：
（1）具体值如：400px 500px
（2）百分比如:50% 40%
建议只设置一个值，整个图像大小会同比例缩放
（3）cover,会自动调整缩放比例，保证图片始终填充背景区域，如有溢出部分自动隐藏
（4）contain，自动缩放图片比例到背景区域的局部大小相同，保证图片始终完全显示在背景区域;
8.多背景设置
在一个背景中设置多张不同的图片
背景色在最后一组中添加
background：url(),url(),url();
9.边框阴影
box-shadow:水平位置 垂直位置 模糊距离 阴影颜色
10.过渡效果
transition:过渡属性 过渡时间 过渡速度调整 过渡延迟时间
如:transition:width 2s linear 1s
11.动画效果
animation:动画规则名 动画完整时间 延迟播放时间
@keyframes 动画规则名{
from{样式属性：样式值}/*动画起始设置*/
to{样式属性：样式值}/*动画结束设置*/
}
@keyframes 动画规则名{
0%{样式属性：样式值}/*动画起始设置*/
50%{样式属性：样式值}/*动画过程设置*/
100%{样式属性：样式值}/*动画结束设置*/
}
animation-fill-mode: 规定对象动画时间之外的状态。
设置动画规则:
使用JS动态设置动画效果
六、DIV+CSS
DIV是一个层，DIV是在网页悬浮的一个平面,网页中的容器，该容器中可以摆放任何HTML元素。 DIV默认情况在页面中什么都不显示，DIV搭配CSS一起使用,通过CSS可以对DIV进行内容、样式的调整。 现在web中页面中大量使用了DIV，DIV过于灵活需要我们使用CSS控制。
1.常用的样式:
position: absolute(绝对定位<当前DIV与浏览器边缘的距离>) relative(相对定位<当前DIV相对于自身原有位置做为参考位置的定位方式>fixed（固定定位方式）默认定位<static>)
z-index:指定DIV的显示优先级(值为一个数字，该数字越大优先级越高)
top:距顶端的距离
left:距左端的距离
right:距右端的距离
bottom:距底部距离
2.使用DIV对页面进行布局:
在现在的开发中大量使用DIV进行网页布局 span标签和DIV比较类似，但略有不同，span是行级元素，div是块级元素 span标签，用于设置文本信息 label标签，一般用于设置文本信息
