人与人之间总是渐渐疏离
——陳長生.
❀主页：陳長生.-CSDN博客❀
1.CSS
1.1.介绍
如果说HTML是前端的骨架，那么CSS就是前端的外表
可以做到美化网页的效果
1.2.语法
<style>
p{
}
</style>
style：用于定义元素的外观与格式
p：被改变的元素
style一般在head中设置
2.CSS选择器
2.1.标签选择器
css中自带的标签，将它原本的样式改变
<html lang="en">
<head>
<title>CSS</title>
<style>
p{
color: aqua;
}
</style>
</head>
<body>
<p>我是自带的p标签</p>
</body>
</html>
将p标签中添加一个颜色为青色的数值
结果：
2.2.class选择器
自定义变量，用于标签中的class类
创建时，变量前面要有个“.”
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<style>
.ccs{
color: aqua;
}
</style>
</head>
<body>
<p class="ccs">我是自定义的class变量</p>
</body>
</html>将p标签中类中给一个自定义变量，该变量为一个颜色为青色的数值
结果:
2.3.id选择器
自定义变量，用于标签中的id属性
创建时，变量前面要有个“#”
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<style>
#ccs{
color: aquamarine;
}
</style>
</head>
<body>
<p id="ccs">我是自定义的id变量</p>
</body>
</html>将p标签中类中给一个自定义变量，该变量为一个颜色为青色的数值
结果：
2.4.复合选择器
适用于表格标签，用于找寻列级别标签并设置样式
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<style>
ul li{
color: aquamarine;
}
ul li a{
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<ul>
<li>第一行第一列</li>
<li>第一行第二列</li>
</ul>
<ul>
<li>第二行第一列</li>
<li> <a href="#">第二行第二列</a> </li>
<li>第二行第三列</li>
</ul>
</body>
</html>将ul行li列的元素都赋为青色
将ul行li列a链接的元素赋为红色
2.5.通配符选择器
上述列举的都是给单个属性才能使用的，例如class选择器只能在class中使用，id选择器只能在id中使用，而通配符可以给全局使用
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<style>
*{
color: aqua;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
</html>将全局的颜色都赋为青色
3.CSS样式
3.1.color
设置字体颜色
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<style>
.color{
color: aqua;
}
</style>
</head>
<body>
<p class="color">颜色</p>
</body>
</html>将颜色设置为青色
结果：
3.2.font-size
设置字体大小
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<style>
.font{
font-size: 100px;
}
</style>
</head>
<body>
<p class="font">字体</p>
</body>
</html>将字体设置为100像素大小
结果：
3.3.border
设置边框
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<style>
.border{
border-width: 10px;
border-style: solid;
border-color:aquamarine
}
</style>
</head>
<body>
<p class="border">边框</p>
</body>
</html>border-width：边框粗细
border-style：边框样式
border-color：边框颜色
结果：
也可以单独为边框的一遍设置粗细
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<style>
.border{
border-top: 10px;
border-bottom: 20px;
border-left: 30px;
border-right: 40px;
border-style: solid;
border-color: aquamarine;
}
</style>
</head>
<body>
<p class="border">边框</p>
</body>
</html>
结果：
3.4.width/height
设置宽和高
只适用于块级引用（“div” “h1-h6” “p”）
不适用于行级引用（“a” "span"）
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<style>
.ccs{
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<p class="ccs">1</p>
</body>
</html>结果（按F12并移动到对应语句即可出现如图中效果）：
3.5.margin
设置外边距
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<style>
.ccs{
margin: 10px;
}
</style>
</head>
<body>
<p class="ccs">外边距</p>
</body>
</html>设置外边距为10像素
同理，外边距也可以像边框一样，单个给上下左右设置像素大小
结果（F12）
3.6.padding
设置内边距
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS</title>
<style>
.ccs{
padding: 10px;
}
</style>
</head>
<body>
<p class="ccs">内边距</p>
</body>
</html>
设置外边距为10像素
同理，外边距也可以像边框一样，单个给上下左右设置像素大小
结果：
