css概念
cascading style sheets 层叠样式表，又叫级联样式表。文件后缀为.css
css唯一目的就是让网页具有美观一致的页面
css的引用方式
内部样式，在html文件的<head>里面写<style>
示例如下：
<style>
p{ color : red;
}
</style>
外部样式，html的<head>里面添加<link> + 单独的css文件
当样式需要应用到多个页面时，外部样式表将是理想的选择，使用外部样式，可以通过改变一个文件改变整个站点的外观，每个页面使用<link>标签链接到样式表，<link>标签在文档的头部，即head里面加入。
示例如下：Home.html文件的<head>里面添加<link>,如
<link rel="stylesheet" href="./public.css">
然后在html单独写css文件，命名为public.css,写如下句子，之后Home.html文件里面的p元素都会编程红色字体，字体大小变为50px
p{
color: red;
font-size: 50px;
}
css语法
css语法规则由两部分组成：选择器 以及一条或者多条声明（样式，比如字体颜色，字体大小等）
选择器
全局选择器
可以与任何元素匹配，优先级最低，一般做初始化样式，以*{}添加全局选择器，例如：
*{
margin:0;
padding:0;
}
元素选择器
比如p，b，div，img，a，body等标签，示例如下，p标签作为选择器：
<style>
p{
color: red;
font-size: 50px;
}
</style> 类选择器
规定用圆点 . 来定义，. + class的值，class的值可以重复，不能以数字开头
示例如下：.content{color: red; }
附：示例中<p class="content size">我emol了</p>，content size是两个类选择器，不是一个，同一个标签下可以有一个或者多个类选择器，主要记住写法(用空格隔开)
<head>
<style>
.content{
color: red;
}
</style>
</head>
<body>
<p>大家好</p>
<p>我很好</p>
<p class="content size">我emol了</p>
</body>
ID选择器
通过 # 索引，# + id的值，id的值不能重复
<style>
#text{
font-size: 30px;
}
</style>
<body>
<p>大家好</p>
<p>我很好</p>
<p id="text">我emol了</p>
</body>合并选择器
语法：选择器1，选择器2...{}
<style>
p,.header, .footer{
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<p>woshippp</p>
<p class="header">我是p标签</p>
<h3 class="footer">我标题标签</h3>
</body>内联选择器，<style></style>
示例如下<p style="font-size: 50px;color: blue;">我是内联选择器</style>：
<body>
<p style="font-size: 50px;color: blue;">我是内联选择器</p>
</body>选择器的优先级
元素选择器的权重1，class选择器的权重10，id选择器权重100，内联选择器权重1000
优先级：行内选择器>id选择器>类选择器>元素选择器
关系选择器
后代选择器 E F{} 选择所有被E包含的F元素，中间用空格隔开
子代选择器 E>F{} 选择所有E元素的直接子元素，用>隔开
相邻兄弟选择器E+F{} 选择紧跟E元素的F元素，用+表示，只能向下选择
通用选择器 E~F{} 选择E元素之后的所有兄弟元素F，作用于多个元素，用~表示，只能向下选择
CSS的盒子模型
在设计和布局时使用
content-内容，显示文本和图像
padding-内边距 内容周围的区域，padding:50px 10px 两个值，上下都是50px，左右都是10px
border-边框 边框
margin-外边距 边框周围的内容，加留白 margin-left/right/top/bottom 分辨是距离左边/右边/上边/下边长度
弹性盒子模型
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成，CSS3的一种新特性，是一种当页面需要适应不同屏幕大小以及设备类型时，确保元素有恰当的行为的布局方式
通过设置display的属性值为flex，定义为弹性容器
弹性容器包含一个或多个弹性子元素
display:flex
容器的属性有以下几种：
flex-direction-摆放方向 ： row row-reverse column column-reverse 水平/水平翻转/垂直/垂直翻转 ，默认是横向摆放，示例如下，垂直摆放
<style>
.container{
width: 500px;
height: 500px;
background-color: #555;
display: flex;
flex-direction: column;
}
</style>justify-content属性
justify-content-垂直方向上摆放方式，内容对齐属性，沿着弹性容器对齐
justify-content： flex-start flex-end center 靠上/靠下/靠中
align-items属性：
align-items:水平方向上摆放方式
align-items：flex-start flex-end center 靠上/靠下/靠中
示例如下：
<style>
.container{
width: 500px;
height: 500px;
background-color: #555;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
</style>子元素属性：
flex ：根据弹性盒子所设置的扩展因子作为比率来分配剩余空间，默认为0，权重
格式： flex:3 ，示例如下，总共分成5份，box1占3，box2占1，box3占1
<style>
.box1{
height: 100px;
background-color: aqua;
flex: 3;
}
.box2{
height: 100px;
background-color: red;
flex: 1;
}
.box3{
height: 100px;
background-color: green;
flex: 1;
</style>字体属性
字体属性用于定义字体，颜色，大小，加粗，文字样式等
color，字体颜色
div{color:red;}
div{color:#fff;} 十六进制
div{color:rgb(255,0,0);}
div{color:rgb(255,0,0,0.5);} 最后一位值透明度，0全透明，0.5半透明，1不透明
font-size，字体大小
h1{font-size:40px;}，chrome接受最小字体为12px
font-weight，字体粗细，100~900，默认400，700等同于blod
bold:粗字体
bolder：更粗字体
lighter：更细字体
h1{font-weight:900;}
font-style，字体样式
normal：正常字体
italic：斜体
font-family，字体的类型
指微软雅黑，宋体等，示例：font-family:"微软雅黑"
背景属性
背景属性有以下几个：
background-color：设置背景颜色
background-image：设置背景图片
background-position：设置背景图片显示位置
background-repeat：设置背景图片如何填充
background-size：设置背景图片大小属性
cover：保持图片纵横比并将图片缩放成完全覆盖背景区的最小大小
文本属性
text-align：指定文本的对齐方式，left/right/center 居左/居右/居中， 默认居左
text-decoration：添加文本的修饰，underline/overline/line-through 下划线/上划线/删除线
text-transform：控制文本的大小写，captialize/uppercase/lowercase 单词首字母大写/全部字母大写/全部字母小写
text-indent ：控制首行缩进
表格属性
表格边框，border属性 border: 1px solid（实线）red(#f00); 表格线的粗细，边框线的样式实线虚线，边框线的颜色
border-collapse: collapse 折叠边框，单边框
width height 设置表格的宽度和高度
text-align vertical-align 设置表格的文本水平对齐方式（左中右） 表格中文本的垂直对齐方式
padding 表格的填充，单元格中文字和边框的间距中间设置填充，此时不用设置width height
文档流
浮动：float属性 ，脱离文档流
定义元素向哪个方向浮动，任何元素都可以浮动，当容器不足横向摆放时，会下一行摆放
left：元素向左浮动 right：元素向右浮动
用法：float:left
定位
通过position的属性指定元素的定位类型
relative absolute fixed 相对定位/绝对定位（随着页面的滚动而滚动）/固定定位（不随页面的滚动而滚动）
绝对定位/固定定位会有压盖现象，脱离文档流
相对于父级定位，父级有定位的话，相对定位/绝对定位位置是相对于父级容器移动，父级容器有设置定位的话，父级容器移动相对定位/绝对定位也会移动，父级容器没有设置定位的话，相对定位/绝对定位是相对于页面来移动
Z-index
值越大元素越靠上，不会脱离文档流
css3新特性
圆角：border-radius
border-radius：20px ，值越大，圆的越厉害，写100%时，直接画个圆
一个值的时候，四个圆角值相同，border-radius：20px
两个值的时候，第一个值是左上角和右下角 第二个值是右上和左下角
四个值的时候，第一个值左上角，第二个值是右上角，第三个值是右下角，第四个值是左下角
阴影：box-shadow，向一个框添加一个或者多个阴影，有四个值
box-shadow：h-shadow v-shadow blur color 水平阴影位置 垂直阴影位置 模糊距离 阴影的颜色
<style>
.box3{
height: 400px;
width: 400px;
background-color: green;
margin: 0 auto;
top: 100;
box-shadow: 10px 20px 20px rgba(0,0,0,0.5);
}
</style>动画
动画是使元素从一种样式变换到另外一种样式的效果，
@keyframes创建动画
用百分比规定变化发生的时间，从0%到100%
animation执行动画
animation:name duration timing-function delay iteration-count direction
name 动画的名称
duration 动画的持续时间
timing-function 动画效果的速率 ease（默认）/linear/ease-in/ease-out/ease-in-out 分别代表
逐渐变慢/匀速/加速/减速/先加速后减速
delay 动画的开始时间（延时执行）
iteration-count 动画循环的次数，infinite为无限次循环
direction 动画播放的方向 ，正向执行，反向执行 normal/alternate 正常播放（默认）/偶数次向前播放奇数次反向播放
animation-paly-state 控制动画播放状态 ，running代表播放，pause代表停止播放
示例如下：
<style>
.box{
width: 500px;
height: 400px;
margin: 40px auto;
background-color: #2b92d4;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0, 0, 0.3);
animation: breath 2.7s ease-in-out infinite alternate;
}
@keyframes breath {
0%{
opacity: 0.2;
box-shadow: 0 1px 2px rgba(255,255, 255, 0.1);
}
50%{
opacity: 0.5;
box-shadow: 0 1px 2px rgba(18,190, 184, 0.76);
}
100%{
opacity: 1;
box-shadow: 0 1px 30px rgba(59,255, 255, 1);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>媒体查询
媒体查询可以使页面在不同终端设备下达到不同效果，根据设备大小自动识别加载不同样式
@media screen，用法示例如下：
<style>
.box{
width: 300px;
height: 300px;
}
@media screen and (max-width:768px){
.box{
background-color: green;
}
}
@media screen and (min-width:768px) and (max-width:996px){
.box{
background-color: brown;
}
}
@media screen and (min-width:996px){
.box{
background-color: pink;
}
}
</style>雪碧图
CSS sprite叫CSS精灵图，或者雪碧图，一种网页处理图片处理方式，允许将一个页面涉及到的所有零星图片都包含到一张大图上去，比如表情包
较少图片字节，减少网页的http请求，大大提高网页性能
原理：
background-image引入一张背景图片
background-position把背景图片移动到自己需要的位置，background-position:10px 20px; 其中10px/20px分别代表X轴向右移动10px Y轴向下移动20px
示例如下，代码中设置display:block是因为，span是内联元素，设置成block块元素，其设置的width和height才生效：
<style>
span{
display: block;
width: 610px;
height: 610px;
background-image: url(./3.webp);
border: 1px solid red;
background-position:0px 0px;
}
</style>
</head>
<body>
<span class="icon"></span>
</body>字体图标
常用到一些图标，使用图标时经常碰到失真的现象，图片数量很多的话加载速度就会变得很慢，所以我们使用字体图标的方式显示图标
https://www.iconfont.cn/
网址下载图标库后，解压粘贴到项目的.html同级目录下，里面会有一个demo_index.html文件，双击打开后，可以查看使用方法
6298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
