css是专门用来“美化”标签。
- 基础CSS，写简单页面&看懂&学会改。
- 模块，调整和修改。
1.快速了解
<img src="..." style="height:100px" />
<div style="color:red;">中国联通</div>
2.CSS应用方式
- 1.在标签上
<img src="..." style="height:100px"/>
<div style="color:red;">中国联通</div>
- 2.在head标签中写style标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color:red；
}
</style>
</head>
<body>
<h1 class='c1'>查看更多</h1>
<h1 class='c1'>查看更多</h1>
<h1 class='c1'>查看更多</h1>
</body>
</html>
- 3.写到文件中（上面是css文件，下面是html文件，将css文件导入到html文件中）
.c1{
color:red；
}
.c2{
height:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--下面语句是将css文件导入到html文件中-->
<link rel="stylesheet" href="common.css" />
</head>
<body>
<h1 class='c1'>查看更多</h1>
<h1 class='c2'>查看更多</h1>
<h1 class='c1'>查看更多</h1>
</body>
</html>
3.选择器
用的多：类选择器、标签选择器、后代选择器
用得少：属性选择器、ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器，和class关联（常用）*/
.c1{
color:red;
}
/*id选择器，和id关联*/
#c2{
color:gold;
}
/*标签选择器，和标签关联*/
li{
color:pink;
}
/*属性选择器*/
input[type='text']{
border:1px solid red;
}
/*后代选择器*/
.yy li{
color:pink;
}
</style>
</head>
<body>
<div class="c1">中国</div>
<div id="c2">广西</div>
<ul>
<li>beijing</li>
<li>shanghai</li>
<li>shenzhen</li>
</ul>
<input type="text">
<input type="password">
<div class="yy">
<ul>美国</ul>
<ul>中国</ul>
<ul>日本</ul>
</div>
</body>
</html>
多个样式存在覆盖问题(如果不想被覆盖 后面加一个 !import）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*如果有重复的，下面的样式会把上面覆盖掉*/
.c1{
color:red;
border:1px solid red;
}
.c2{
font-size:28px;
color:green;
}
</style>
</head>
<body>
<div class="c1 c2">中国联通</div>
</body>
</html>
参考内容：
最新Python的web开发全家桶（django+前端+数据库）