<h1 style="color: #b3d4fc;">i like you</h1>
<style>
h2{
color: aqua;
<!-- 属性:属性值; -->
}
</style>
外部单独的css文件。
<!--在<head>中使用<link>引入外部的css文件 -->
<link href="css/task01.css" rel="stylesheet">
<!--使用此方式，会先加载样式表（直接看到修饰后的页面）-->
<!--在<style>便签导入 -->
<style>
@import "css/task01.css";
</style>
<!--
使用此方式，会先加载html再加载css，网不好时会先看到未使用css的页面
不支持js动态修改，link支持
-->
使用class修饰；使用.来描述
使用id修饰；#描述。更具唯一性
<style>
.h31{}
#h32{}
</style>
……
<h3 class="h31">i like you</h3>
<h3 id="h32">i like you too</h3>
<style>
.h31,#h32{ color: #b3d4fc}
</style>
div p{color: #b3d4fc} <!--忽略层级-->
div>p{color: #b3d4fc} /* 只选取一级 */
css中伪类可以对选择器加一些效果
超链接中要遵循LVHA(爱恨原则)顺序。
<style>
a:link{color: aqua} /*未被访问*/
a:visited{color: blueviolet}/*已被访问*/
a:hover{font-size: 20px}/*鼠标悬浮时添加样式*/
a:active{font-size: 50px}/*鼠标选中时*/
</style>
<style>
p {
font-family: "隶书"; /*指定字体*/
font-size: 2em; /*字体大小*/
font-weight: bold; /*字体加粗*/
color: #b3d4fc; /*文本颜色*/
text-align: center; /*文本排列： left/right/center*/
text-decoration: underline; /*文字修饰 下划线*/
line-height: 50px; /*行高*/
text-indent : value （2em）; /*首行文本缩进 这里未用上*/
}
</style> ……
<p>i like you 你好</p>
<style>
div{
width: 100%;
height: 800px;
background-color: pink;
background-image: url("../imgs/zoe.jpg");/*背景图*/
background-repeat:no-repeat;/*设置平铺方式（x or y）*/
background-position: 0 200px;/*设置背景图像的起始位置*/
background-attachment: fixed; /*设置背景图相较于页面固定*/
}
</style>
无序列表(ul)可以标记特殊图型
有序列表(ol)可以标记数字或字母
可设置为图像
<style>
.u1{list-style-type: circle}/*设置无序项为圆形（none、square）*/
/*设置有序列表项为大写字母（罗马大写：upper-roman）*/
.o1{list-style-type: upper-alpha}
/*设为图像*/
u3{list-style-image: url("../imgs/list-img-1.gif")}
</style>
<style>
div {
/*border: 10px red solid;/*实线*/
border: 10px blue dashed; /*虚线*/
/*border: 10px red none; /*无边框*/
/*border-bottom: dashed #b3d4fc 10px; /*设置底边框的样式*/
/* border-left: red solid; /*设置右边框的样式*/
outline: red 2px solid;/*轮廓*/
}
</style>
轮廓位于边框之外。边框是围绕元素绘制、轮廓围绕边框绘制
![](https://img.imgdb.cn/item/600be6dd3ffa7d37b3b2a283.jpg title="边框与轮廓")
<style>
.a{
width: 100px;
height: 100px;
background: #b3d4fc;
float: left;
/*display: inline-block; 方式二：变成行内块元素消除独占一行属性*/
}
.b{
width: 100px;
height: 100px;
background: pink;
float:right;
/*相对定位
position: relative;
right: 200px;
*/
}
</style>
![](https://img.imgdb.cn/item/600ce8423ffa7d37b3253413.jpg title="浮动")
![](https://img.imgdb.cn/item/600ce8173ffa7d37b3252818.jpg title="相对定位")
本元素与已定位的祖先元素的距离。一级一级的往上找，如果最终的没找到就以body为最终选择
![](https://img.imgdb.cn/item/600cef533ffa7d37b327e0f2.jpg title="a与父元素的绝对定位")
<style>
postion:fixed;/*固定于页面，不随页面滚动*/
</style>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
/* border-radius: 1px 20px 30px 50px;/*左上、右上、右下、左下（顺时针）*/
border-radius: 50px; /*圆角*/
/*盒子阴影：依次代表：水平偏移、垂直偏移、模糊半径、扩张半径、颜色*/
box-shadow: 20px 20px 50px 10px gray;
}
</style>
线性渐变：background:linear-gradient([方向/角度]，颜色列表)；
径向渐变：radial-gradient(颜色列表);
<style>
/*线性渐变*/
background: linear-gradient(red, yellow);
background: linear-gradient(to right bottom, black, white);
background: linear-gradient(30deg, black, white); /*角度*/
/*径向渐变*/
background: radial-gradient(black, white);
border-radius: 50px;
background: radial-gradient(black, white);
</style>
背景的位置与大小
位置：background-origin(border、padding、content)
大小：background-size(cover完全覆盖、contain完全适应)
![](https://img.imgdb.cn/item/600d07233ffa7d37b33371ec.jpg title="大小使用的contain")
过渡：从一个状态到另一个状态的缓慢过程(中间不可控制)
transition｛过渡的属性 完成时间 过度函数 开始时间｝
<style>
div{
width: 200px;
height: 50px;
border: black solid 1px;
transition:font-size 4s linear ,width 4s linear;
}
div:hover{width: 400px;font-size: 30px}
</style>
![](https://img.imgdb.cn/item/600d0d6c3ffa7d37b3367e55.gif title="效果图")
动画：可控制每个时间。
动画属性：animation{ 动画帧 , 执行时间 , 过渡函数 , 动画执行的延迟（可省略）, 动画执行的次数 }
<style>
.b{
width: 200px;
height: 100px;
background: pink;
animation: x 5s linear infinite alternate;/*动画属性*/
}
@keyframes x {/*动画帧*/
0%{ margin-left: 0px;}
25%{background-color: grey}
50%{ background-color:red}
75%{ background-color: black}
100%{ margin-left: 600px}
}
</style>
![](https://img.imgdb.cn/item/600d19f33ffa7d37b33be69f.gif title="运行效果图")
原文：https://www.cnblogs.com/zoezza/p/14321279.html