css样式
分为三种：内部样式、内联样式、外部样式
内部样式 < style >
- 位置:在本文件内，标签外
- 代码：
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<style>
p{
color:red;
text-align: center;
}
</style>
<body>
<p>样式</p>
</body>
</html>
- 效果：
内联样式 < style >
- 位置：在本文本内，标签内。
- 代码：
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<p style=" color:blue">样式</p>
</body>
</html>
- 效果：
外部样式 < 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=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- <link rel="stylesheet" href="1.css"> -->
<link rel="stylesheet" href="1.css">
<body>
<p>css 样式</p>
</body>
</html>
p{
color: rebeccapurple;
text-align: center;
}
- 效果：
应用范围
样式应用：
- 简单样式：内联样式、内部样式
- 复杂样式：外部样式
css文本属性
1.font-family 字体系列
2.font-size 字体大小 & em/px
- 作用：设置字体大小
- 单位：em、px
- 默认：1em = 16px
- 修改默认值：
原先：
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<!-- <link rel="stylesheet" href="1.css"> -->
<style>
span{
font-size: 2em;
}
</style>
<body>
<p>css 样式</p>
<span>font-size 文字</span>
</body>
</html>
修改：
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<!-- <link rel="stylesheet" href="1.css"> -->
<style>
*{
font-size: 10px;
}
span{
font-size: 2em;
}
</style>
<body>
<p>css 样式</p>
<span>font-size 文字</span>
</body>
</html>
3.font-weight 字体粗细
4.font-style字体样式
5.字体复合样式
6.color 字体颜色
7.text-align 对齐文本
8.text-decoration 装饰文本
9.text-indent 文本缩进
10.line-height 行间距
各种选择器
标签选择器
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<style>
ul li{
color: red;
}
.box{
color:blue;
}
#username{
color:yellow;
}
</style>
<body>
<ul>
<li>语文</li>
<li class="box">英语</li>
<li class="box" id="username">数学</li>
</ul>
</body>
</html>
- 调用各种类型：
- ul li调用对应的无序标签
- ‘ . ‘调用对应的class
- ’ # ‘调用对应的id
- 标签优先级：id选择器>class选择器>标签选择器
邻近选择器
作用：只选择邻近的一个
代码：
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<style>
.box1+.box{
color: red;
}
</style>
<body>
<ul>
<li class="box1">语文</li>
<li class="box">英语</li>
<li class="box" id="username">数学</li>
</ul>
</body>
</html>
.box1+.box：
相对于box1的第一个box类型
效果：
兄弟选择器
作用：选择所有符合条件的
代码：
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<style>
.box1~.box{
color: red;
}
</style>
<body>
<ul>
<li class="box1">语文</li>
<li class="box">英语</li>
<li class="box" id="username">数学</li>
</ul>
</body>
</html>
效果：
伪类选择器
功能：
应用：
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<style>
div :first-of-type{
color:red;
}
</style>
<body>
<div>
<p>数学</p>
<p>英语</p>
<p>语文</p>
<p>物理</p>
</div>
</body>
</html>
nth-of-type()注意点
<!DOCTYPE html>
<html lang="en">
<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>
p:nth-of-type(3){
color:red;
}
</style>
</head>
<body>
<div>
<p>数学</p>
<p>英语</p>
<p>语文</p>
<p>物理</p>
</div>
</body>
</html>
nth-of-type()前面应该改为p盒子,否则无效
盒子模型
概念
分类
常见属性
1.padding
2.margin
3.boder
position定位
补充知识-文档流
position属性
1.static–静态定位
需要使用top、right、left、bottem来进行定位
2.raletive–相对定位
根据自己的左上角顶点进行定位的
3.absolute–绝对定位
根据父元素左上角的顶点来进行定位的
- 注意：当子元素使用绝对定位时，父元素最好使用相对定位
（因为网页的最顶端还有一个空隙）
代码：
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<style>
.static{
position: static;
width:200px;
height:200px;
border:10px solid #000;
}
.relative{
position: relative;
width:200px;
height:200px;
border:10px solid #000;
}
.absolute{
position: absolute;
width:200px;
height:200px;
border:10px solid #000;
}
.item{
position: absolute;
top:150px;
width:50px;
height:50px;
background-color: blue;
}
</style>
<body>
<div class="static">
<div class="item"></div>
</div>
<div class="relative">
<div class="item"></div>
</div>
<div class="absolute">
<div class="item"></div>
</div>
</body>
</html>
应用：
效果：
4.fixed定位
把某个元素固定在一个位置，并且该元素的位置不会随着网页滑动而变化
5.sticky定位
6.相对位置和绝对位置–居中设置
相对位置
绝对位置
背景属性
1.背景颜色
2.背景图片
3.背景平铺
4.背景图片位置
使用iconfont插入图标
- 进入百度搜索“iconfont"
- 注册
- 搜索想要的图标
- 加入购物车后，选择下载代码
- 打开文件夹，点击以下文件，进入图标详解网址
代码：
<!DOCTYPE html>
<html lang="en">
<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>my_incofont</title>
<link rel="stylesheet" href="./iconfont/iconfont.css"/>
</head>
<!-- <style>
div{
display: inline-block;
}
</style> -->
<body>
<span class="iconfont icon-huidaodingbu "></span>
</body>
</html>
效果:
