css样式/选择器
<style>
h3{
color:blue;
font-size: 20px;
}
</style>
</head>
<body>
<h3>标题内容</h3>
</body>
CSS引入方式
内联样式（行内样式）
提示：缺乏整体性和规划性，不利于维护，维护成本高
<body>
<p style="color:red;font-size:30px;">我是内联样式的方案</p>
</body>
内部样式
提示：单个页面内的css代码具有统一性和规划性，便于维护但是多个页面之间容易混乱
<style>
p{
color:red;
font-size: 30px;
}
</style>
</head>
<body>
<p>我是内联样式的方案</p>
<p>我是第二个p标签</p>
</body>
外部样式
当样式需要应用于很多页面时，外部样式将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=h1, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./auc.css">
</head>
<body>
<p>首页</p>
<a href="./auc.html">产品</a>
</body>
</html>
选择器一
全局选择器
可用与任何元素匹配，优先级最低，一般做样式初始化
<style>
*{
font-size: 30px;
color: blueviolet;
}
</style>
</head>
<body>
<p>Hellow</p>
<h3>World</h3>
</body>
元素选择器
HTML文档中的元素，p,b,div,a,img,body等。
描述“共性”，无法描述某一个元素的“个性”
<style>
p{
font-size: 40px;
}
</style>
</head>
<body>
<p>我是第一个</p>
<h3>标题</h3>
<p>我是第二个</p>
</body>
提示：所有的标签都可以是选择器。比如：ul,li,label,dt,dl,input,div等
无论这个标签藏的有多深，一定能够被选上
选择的所有，而不是一个
类选择器
规定使用.来定义，针对你想要的所有标签使用
<style>
.content{
color:red;
}
</style>
</head>
<body>
<p>大家好</p>
<p>我很好</p>
<p class="content">我emo了</p>
</body>
选择器二
ID选择器
针对某一个特定的标签来使用，只能使用一次。css中的Id选择器以#来定义
<style>
#text{
color:red;
font-size: 30px;
}
</style>
</head>
<body>
<p id="text">Hellow</p>
</body>
</html>
特别强调
ID是唯一的且不能以数字开头
合并选择器
语法：选择器1，选择器2...{}
作用：提取共同样式，减少重复代码
<style>
p,h3{
font-size: 30px;
color: aqua;
}
</style>
</head>
<body>
<p>我是p标签</p>
<h3>我是标题标签</h3>
</body>
选择器优先级
CSS中，权重用数字衡量
元素选择器的权重为：1
class选择器的权重为：10
id选择器的权重为：100
内联样式的权重为：1000
优先级从高到低：行内样式>ID选择器>类选择器>元素选择器
字体属性
color
规定文本的颜色
<style>
p{
color:red;
color:#ff0000;
color:rgb(255, 0, 0);
color:rgba(243, 12, 12, 0);
}
</style>
</head>
<body>
<p>我来学习字体属性</p>
</body>font-size
设置文本的大小
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者标题看上去像段落。
h1{font-size:40px;}提示:chrome浏览器接受最小字体是12px
font-weight
设置文本的粗细
bold 定义粗体字符
bolder 定义更粗的字符
lighter 定义更细的字符
100-900 定义由细到粗 400等同默认，而700等同于bold
<style>
p{
font-weight: bolder;
}
</style>
</head>
<body>
<p>我来学习字体属性</p>
</body>
font-style
指定文本的字体样式
normal 默认值；italic：定义斜体字
font-family
指定一个元素的字体
p{
font-weight: bolder;
font-family: 'Courier New', Courier, monospace;
}提示：每个值用逗号隔开，如果字体名称包含空格，它必须加上引号
背景属性
background-color 设置背景颜色；
background-image 设置背景图片；
background-position 设置背景图片显示位置；
background-repeat 设置背景图片如何填充；（repeat：默认值；repeat-x:只向水平方向平铺；repeat-y：只向垂直方向平铺；no-repeat：不平铺）
background-size 设置背景图片大小属性；（length 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto；percentage 计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto；cover 保持图片纵横比并将图片缩放成完全覆盖背景区域最小大小；contain 保持图片纵横比并将图片缩放成完全覆盖背景区域最大大小）
.box2{
width: 1200px;
height: 1200px;
background-image: url(1.webp.jpg);
background-repeat: no-repeat;
background-size:cover;
}
background-position属性
设置图片起始位置，其默认值是0% 0%
left top 左上角 left center 左 中 left bottom 左下 right top 右上角 right center 右 中
right bottom 右 下 center top 中 上 center center 中 中 center bottom 中 下
.box2{
width: 1200px;
height: 1200px;
background-image: url(1.webp.jpg);
background-position: center center;
}文本属性
text-align
指定元素文本的水平对齐方式
left：文本居左排列，默认值；righjt 把文本排列到右边；center：把文本排列到中间
<style>
h3{
text-align: center;
}
</style>
</head>
<body>
<h3>我是一个标题内容</h3>
</body>
text-decoration
规定添加到文本的修饰，下划线，上划线，删除线等
underline 定义下划线；overline 定义上划线；line-through：定义删除线
<style>
h3{
text-align: center;
text-decoration: underline;
}
</style>
</head>
<body>
<h3>我是一个标题内容</h3>
</body>
text-transform
控制文本大小写
captialize：定义每个单词开头大写；uppercase：定义全部大写字母；lowercase：定义全部小写字母
p{
font-size: 30px;
text-align: center;
text-transform: uppercase;
}
</style>
</head>
<body>
<p>helloWorld</p>
text-indent
规定文本块中首行文本的缩进（提示：负值是允许的，如果之是负数，将第一行左缩进
p{
text-indent: 30px;
}表格属性
表格边框
table,td{
border: 1px solid red;
}折叠边框
table{
border-collapse: collapse;
}表格宽度高度
table{
border-collapse: collapse;
width:500px;
height: 300px;
}表格文字对齐
td{
text-align: center;
vertical-align: center;
}表格填充
padding: 20px;表格颜色
background-color: #555555;
color: #ffffff;综合所上
<style>
table,td{
border: 3px solid blue;
}
table{
border-collapse: collapse;
}
td{
text-align: center;
vertical-align: center;
padding: 20px;
background-color: #555555;
color: #ffffff;
}
</style>
</head>
<body>
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
关系选择器
后代选择器（定义：选择所有被E元素包含的F元素，中间用空格隔开）
<style>
ul li{
color: red;
}
</style>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<div>
<ol>
<li>列表4</li>
<li>列表5</li>
</ol>
</div>
</ul>
</body>
子代选择器（选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示
<style>
div>p{
color: red;
}
</style>
</head>
<body>
<div>
<p>大家好</p>
<ul>
<li>
<p>我很好</p>
</li>
</ul>
</div>
</body>
相邻兄弟选择器（选择紧跟E元素，用加号表示，选择相邻的第一个兄弟元素
<style>
h3+p{
color: red;
}
</style>
</head>
<body>
<h3>我是标题</h3>
<p>我是内容1</p>
<p>我是内容2</p>
</body>
通用兄弟选择器（选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开
<style>
h3~p{
color: red;
}
</style>
</head>
<body>
<h3>我是标题</h3>
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>
</body>
CSS盒子模型（Box Model）
Margin（外边距)-清除边框外的区域，外边距是透明的（两个值：第一个值上下，第二个值左右）
Border（边框）-围绕在内边距和内容外的边框
Padding（内边距）-清楚内容周围的区域（两个值：第一个值上下，第二个值左右）
Content（内容）-盒子的内容，显示文本和图像
<style>
div{
width: 100px;
height: 100px;
background-color: green;
padding: 50px 10px;
border: 5px solid blue;
margin: 50px 10px;
}
</style>
</head>
<body>
<div>
我是内容
</div>
<p>我是p标签</p>
</body>
弹性盒子模型（flex box）
父级元素属性
flex-direction属性
row：横向从左到右排列（左对齐），默认的排列方式
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在前面）
column：纵向排列
column-reverse：反转纵向排列，从后往前排，最后一项排在前面
justify-content属性（垂直方向）
flex-start靠上；flex-end靠下；center中间
align-intems属性（水平）
flex-start居左；flex-end居右；center居中
子元素上的属性
flex-grow/flex 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间
<style>
.container{
width:500px;
height: 500px;
background-color: #555;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
flex: 1;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
flex:2;
}
.box3{
width: 100px;
height: 100px;
background-color: blue;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
文档流
文档流指文档中可显示对象在排列时所占用的位置/空间
文档流产生的问题
高矮不齐，底边对齐
<style>
img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<span>大家好</span>
<img src="1.webp.jpg" alt="">
</body>
空格折叠
<style>
img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<span>大家好</span>
<img src="1.webp.jpg" alt="">
<p>我是P标 签</p>
</body>
元素无间隙
<style>
img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<span>大家好</span>
<img src="1.webp.jpg" alt="">
<p>我是P标 签</p>
<img src="1.webp.jpg" alt="">
<img src="1.webp.jpg" alt="">
</body>
脱离文档流
使一个元素脱离标准文档流有三种方式
浮动
绝对定位
固定定位
浮动
浮动的定义
float属性定义元素哪个方向浮动，任何元素都可以浮动
left：元素向左浮动 right：元素向右浮动
浮动的原理
浮动以后使元素脱离了文档流
浮动只有左右浮动，没有上下浮动
元素向左浮动
<style>
.box{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
.container{
width: 400px;
height: 400px;
background-color: blueviolet;
}
img{
width: 300px;
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="container"></div>
<div>
<img src="./1.webp.jpg" alt="">
<img src="./1.webp.jpg" alt="">
</div>
</body>
元素向右浮动
<style>
.box{
width: 200px;
height: 200px;
background-color: aqua;
float: right;
}
.container{
width: 400px;
height: 400px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="container"></div>
</body>
所有元素向左浮动
<style>
div{
width: 300px;
height: 300px;
float: left;
}
.box1{
background-color: red;
}
.box2{
background-color: blue;
}
.box3{
background-color: green;
}
ul li{
float: left;
margin: 0 40px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>
</body>
当容器不足时
<style>
.container{
width: 700px;
height: 700px;
background-color: #666;
}
div{
width: 300px;
height: 300px;
float: left;
}
.box1{
background-color: red;
}
.box2{
background-color: blue;
}
.box3{
background-color: green;
}
ul li{
float: left;
margin: 0 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>
</body>
清除浮动
浮动副作用
当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动
浮动元素会造成父元素高度塌陷
后续元素会受到影响
<style>
.container{
width: 500px;
height: 500px;
background-color: #888;
}
.box{
width: 100px;
height: 100px;
background-color: aqua;
margin: 5px;
float: left;
}
.text{
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="text"></div>
</div>
</body>
清除浮动
当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用
父元素设置高度
受影响的元素增加clear属性
overflow清除浮动
伪对象方式
父元素设置高度
.text{
width: 100px;
height: 100px;
background-color: blueviolet;
clear: both;
}overflow清除浮动
.container{
width: 500px;
background-color: #888;
overflow: both;
}伪对象方式
.container::after{
content: "";
display: block;
clear: both;
}
定位
定义：position属性指定了元素的定位类型
relative 相对定位 absolute 绝对定位 fixed 固定定位
其中，绝对定位和固定定位会脱离文档流
设置定位之后：可以使用四个方向值进行调整位置：left、top、right、bottom
相对定位
<style>
div{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 200px;
top: 100px;
}
</style>
</head>
<body>
<div></div>
</div>
</body>
绝对定位
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 100px;
top: 200px;
}
.box2{
width: 200px;
height: 300px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
固定定位
.box1{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
left: 100px;
top: 100px;
}
.box2{
width: 400px;
height: 400px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
提示：设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档
Z-index
设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是处于堆叠顺序较低的元素的前面
z-index: 100;CSS3新特性
圆角
border-radius属性，可以使用以下规则
四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角
两个值：第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角相同
<style>
div{
width: 56px;
height: 56px;
background-color: blueviolet;
border-radius: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
阴影
h-shadow 必选，水平阴影的位置；v-shadow 必选，垂直阴影的位置；blur 可选，模糊距离；color 可选，阴影的颜色
<style>
.box{
width: 400px;
height: 400px;
background-color: blue;
margin: 0 auto;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
动画
0%是动画的开始，100%是动画的完成
@keyfames创建动画
@keyframes myAnim{
0%{
background-color: red;
}
50%{
background-color: green;
}
100%{
background-color: red;
}
}name：动画名称，开发人员自己命名；
precent：为百分比值，可以添加多个百分比值；
animation执行动画
name 设置动画的名称；
duration 设置动画的持续时间；
timing-function 设置动画效果的速率；
delay 设置动画的开始时间（延时执行）
iteration-count 设置动画循环次数，infinite为无限次数的循环
direction 设置动画播放方向
animation-play-state 控制动画的播放状态：running代表播放，而paused代表停止播放
timing-function值
ease 逐级变慢；
linear 匀速；
ease-in 加速；
ease-out 减速；
ease-in-out 先加速后减速
direction值
normal 默认值为normal表示向前播放；
alternate 动画播放在第偶数次向前播放，第奇数次向反方向播放
div{
width: 200px;
height: 200px;
background-color: red;
animation: myAnim 3s linear 0s infinite;
}
div:hover{
animation-play-state:paused;
}
@keyframes myAnim{
0%{
background-color: red;
}
50%{
background-color: green;
}
100%{
background-color: red;
}
}
</style>
</head>
<body>
<div></div>
</body>呼吸灯效果
<style>
.box{
width: 200px;
height: 200px;
margin: 40px auto;
background-color: aqua;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
animation: breathe 2.7s ease-in-out infinite alternate;
}
@keyframes breathe{
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, 84, 0.76);
}
100%{
opacity: 1;
box-shadow: 0 1px 2px rgb(255, 59, 157);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>媒体查询
媒体识别查询会根据设备的大小自动识别加载不同的样式
设置meta标签
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
媒体查询语法
<style>
.box{
width: 300px;
height: 300px;
}
@media screen and (max-width:768px) {
.box{
background-color: aqua;
}
}
@media screen and (min-width:768px) and (max-width:996px) {
.box{
background-color: chartreuse;
}
}
@media screen and (min-width:996px) {
.box{
background-color: red;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
雪碧图
优点
减少图片的字节
减少网页的http请求，从而大大的提高页面的性能
原理
通过background-image引入背景图片
通过background-position把背景图片移动到自己需要的位置
<style>
span{
display: block;
width: 45px;
height: 70px;
background-image: ur1(1.png);
border: 1px solid red;
background-position: -301px 84px;
}
</style>
</head>
<body>
<span class="icon"></span>
</body>字体图标
常用字体图片库：阿里巴巴图标库
优点
轻量性：加载速度快，减少http请求
灵活性：可以利用css设置大小颜色
兼容性：网页字体支持所有现代浏览器，包括IE低版本
使用字体图标
注册账号并登录
选取图标或搜索图标
添加购物车
下载代码
选择font-class引用
本章是学会制作第一个程序II（CSS），往后还会继续更新！