- HTML创造世界，CSS让世界更美丽
①：CSS与HTML结合方式
- 三种样式表优先级服从 就近原则
1.内联样式
-
<h1 style="color: #b3d4fc;">i like you</h1>
2.内部样式表
-
<style> h2{ color: aqua; <!-- 属性:属性值; --> } </style>
3.外部样式表
-
外部单独的css文件。
-
<!--在<head>中使用<link>引入外部的css文件 --> <link href="css/task01.css" rel="stylesheet"> <!--使用此方式，会先加载样式表（直接看到修饰后的页面）--> -
<!--在<style>便签导入 --> <style> @import "css/task01.css"; </style> <!-- 使用此方式，会先加载html再加载css，网不好时会先看到未使用css的页面 不支持js动态修改，link支持 -->
②：CSS的使用
1.选择器
1.元素选择器
- 对页面相同标签的统一描述。
2.类选择器与D选择器
-
使用class修饰；使用.来描述
-
使用id修饰；#描述。更具唯一性
<style>
.h31{}
#h32{}
</style>
……
<h3 class="h31">i like you</h3>
<h3 id="h32">i like you too</h3>
3.选择器组(,)
<style>
.h31,#h32{ color: #b3d4fc}
</style>
4.派生选择器
- 子代选择：空格隔开（只选子代）
- 后代选择器：>隔开（全选）
div p{color: #b3d4fc} <!--忽略层级-->
div>p{color: #b3d4fc} /* 只选取一级 */
5.css中的伪类
-
css中伪类可以对选择器加一些效果
- :link 未被访问
- :visited 已被访问
- :hover 鼠标悬浮时添加样式
- :active 鼠标选中时
- :first-child 向元素的第一个子元素添加样式
-
超链接中要遵循LVHA(爱恨原则)顺序。
<style> a:link{color: aqua} /*未被访问*/ a:visited{color: blueviolet}/*已被访问*/ a:hover{font-size: 20px}/*鼠标悬浮时添加样式*/ a:active{font-size: 50px}/*鼠标选中时*/ </style>
2.CSS中的基本属性
1.文本属性
<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>
2.背景属性
<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>
3.列表属性
-
无序列表(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>
4.边框属性(border)
<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>
5.轮廓属性(outline)
-
轮廓位于边框之外。边框是围绕元素绘制、轮廓围绕边框绘制
![](https://img.imgdb.cn/item/600be6dd3ffa7d37b3b2a283.jpg title="边框与轮廓")
6.盒子属性
3.CSS定位
1.默认定位
- 块级元素：h、p、div等，自动换行（垂直排列）。可以设定宽高
- 行内元素：a、b、span。不会换行（水平排列）。不可改变宽高
- 行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高
- 加：display: inline-block;可变为行内块元素
2.浮动定位(float)
- 让元素“飞”起来，并可以消除“块级”的霸道属性（独占一行）
<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="浮动")
3.相对定位(relative)
- 和原来的位置进行比较，进行偏移
![](https://img.imgdb.cn/item/600ce8173ffa7d37b3252818.jpg title="相对定位")
4.绝对定位(absolute)
-
本元素与已定位的祖先元素的距离。一级一级的往上找，如果最终的没找到就以body为最终选择
![](https://img.imgdb.cn/item/600cef533ffa7d37b327e0f2.jpg title="a与父元素的绝对定位")
5.固定定位(fixed)
-
<style> postion:fixed;/*固定于页面，不随页面滚动*/ </style>
6.z-index
- 定义重叠元素的优先级，要配合定位使用。
③：CSS3新特性
1.圆角与盒子阴影
- border-radius：左上 右上 右下 左下;
- box-shadow: 水平偏移、垂直偏移、模糊半径、扩张半径、颜色;
<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>
2.渐变属性
-
线性渐变：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>
4.背景
-
背景的位置与大小
-
位置：background-origin(border、padding、content)
-
大小：background-size(cover完全覆盖、contain完全适应)
-
![](https://img.imgdb.cn/item/600d07233ffa7d37b33371ec.jpg title="大小使用的contain")
- 背景的裁切
- background-clip:(border-box 、padding-box、content-box)
4.过渡动画
-
过渡：从一个状态到另一个状态的缓慢过程(中间不可控制)
-
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="运行效果图")
-