1.层叠样式表
层叠样式表：Cascading Style Sheet :CSS
主要用于标签的样式修饰：修饰内容、位置、颜色等等
操作过程中，主要注意如下环节
(1)css的基本语法
(2)css代码的位置
(3)css选择器
(4)常见样式
1.1CSS基本语法
语法：
样式名称：样式的值
如：
color:red 内容中文本的颜色：红色
background-color:orange 某个标签的背景颜色：橙色
font-size:22px 标签中文本字体的大小：22像素
font-family:"宋体" 标签中文本的字体：宋体
1.2CSS代码的位置
在一个标准网页中，CSS代码的位置一般有三个位置
(1)标签style属性中；用于修饰当前标签
(2) 当前网页中，将样式包含在一对标签中【入门推荐】
/修饰当前网页中所有input标签，宽度120像素，高度30像素/
input{width:120px;height:30px;}
(3)外部CSS文件中专门用于定义CSS样式，引入到当前网页中使用【正式开发推荐】
index.css 样式表文件
index.html 网页文件
网页文件中，通过标签将一个样式表文件引入当前网页中操作
1.标签内嵌样式【不推荐】
2.页面内嵌样式【少量样式使用该方式操作】
3.外部样式【大量样式操作店家推荐】
1.3CSS选择器
选择器：CSS代码中，用于选择/选中标签的语法
修饰标签的样式：首先要选中某个/多个标签
常见CSS选择器：
选择器名称 描述
*{样式} 选中当前网页中所有标签
#id id选择器，选中网页中id属性为之定点杆值得某个标签，只能选中一个标签【规范】
。class class选择器：选中网页中class属性为指定值的多个标签；任意标签的class可以重复
tag 标签选择器：使用标签名称，直接选中当前网页中所有的该名称的标签
selector > selector2 子类选择器：字标签选择器 ，选中selector选择器选中的标签中，直接子标签selector选中的标签
selector selector2 包含选择器，选中selector选中你的标签中，所有的selector2选中的标签
selector：nth-of-type(num) 序号选择器|序列选择器，选中第几个标签
2常见样式
2.1内容修饰样式
(1)——字体样式
字体 font-family:"楷体。。。。"
颜色 color：颜色代码
字号 font-size：12px
加粗 p{font-weight:bolder;}
斜体 li:nth-of-type(2){font-style:italic;}
实例如下
image.png
image.png
(2)——背景样式
ch1{width:200px;height:200px;
背景颜色 background-color: 颜色代码
背景图片 background-image:url("图片的相对路径")
背景位置 background-position： 宽度，高度；
边框 border:solid 2px red;
圆角边框 border-radius：5px 边框圆化五个像素 border-radius：50%； 圆形边框的设置
边框颜色 border：solid 2px 颜色代码
边框粗细 border：solid 你想要的线条粗细px 颜色代码
字体居中： text-align：center；
溢出标签的内容：隐藏 overflow：hidden；
实际案例:
image.png
image.png
2.2定位样式
标签宽度
标签高度
/*任意标签，包含默认的边距*/
/*这样默认的边距，会影响网页元素的定位，一般都会置空。*/
*{margin：0；
padding：0；
}
页面窗口中离窗口左边的距离——外边距
页面窗口中离窗口顶部的距离——外边距
margin-left：220px； #左边距
margin-top：20px； #上边距
标签内容和标签之间的留白距离——内边距
padding-left：50px；
padding-top：20px；
元素/标签一旦定位：说明元素可以设置宽度和高度，对标签就需要进一步的标签分类：
行标签：标签前后不换行，标签不能设置宽度和高度
行内块标签，标签前后不换行，标签可以设置宽度和高度
块标签：标签前后自动换行，标签可以设置宽度和高度
实际操作过程中，对于标签的控制，通常使用样式进行处理：display
display:inline; 表示修饰的标签为行标签
diaplay:inline-block; 表示修饰的标签为行内块标签
display:block; 表示修饰的标签为块标签
标签元素的定位：样
式：position
四种定位方式：
默认：position：static
相对于父元素左上角的坐标进行定位
margin-left:0;
margin-top:0
相对：position：relative
当前元素相对浏览器|父元素定位;所有的子元素相对自己定位
【margin定位】
绝对：position：absolute
默认情况下~父元素左上角显示 left：0；top：0；父元素默认定位，当前元素相对于浏览器进行定位
top：0；
left：0；
固定：position：fixed
position:fixed;
一种独立的定位方式【top|left定位】 相对于浏览器固定位置
width:200px;
height:500px;
top:200px;
background-color:darkblue;
margin-left:1200px;
color:white;
所谓的定位：就是确定哪里是(0,0)原点
案例
image.png
image.png
2.3C3动画
语法：
通过关键词@keyframes自定义动画前后效果
案例：
image.png
image.png
2.4动画变换
语法
主要通过transfrom完成元素标签的变化
image.png
image.png
