标签：入门 color 标签 li red 快速 选择器 CSS
1、CSS基础知识
- CSS：专门用来美化HTML"标签"
- CSS应用方式：
- ①直接在标签上应用
<img src="..." style="height:100px">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color:red
}
</style>
</head>
<body>
<h1 class='c1'>你好</h1>
</body>
</html>
# CSS需要放到static目录下
.c2{
height: 100px;
}
.c3{
color: aquamarine;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/style.css">#href：存储文件地址
</head>
<body>
<div>
<h1 class = c3> 你好</h1>
</div>
</body>
</html>
2、Flask框架不是很方便
- 每次都需要重启
- 规定有些文件必须要放在特定的文件夹
- 创建一个新页面
- 函数
- HTML文件
pycharm可以快速查看：
3、CSS的选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*.:类选择器--*/
.c1{
color: chartreuse;
}
/*# 对应id，叫id选择器*/
#c2{
color: cornflowerblue;
}
/*标签选择器给所有li标签添加样式*/
li{
color: red;
}
/* 属性选择器 */
input[type="text"]{
border: 1px solid red;
}
/* 后代选择器，先找到属性为yy的，然后找标签为li的,会让子子孙孙变成粉色*/
.yy li{
color: pink;
}
/* 后代选择器，先找到属性为yy的，然后找标签为li的,只让儿子变成粉色*/
.yy > li{
color: pink;
}
</style>
</head>
<body>
<div>
<h1 class = "c1"> hello</h1>
<h1 id = "c2">world</h1>
<ul>
<li>python</li>
<li>java</li>
</ul>
<input type="text">
<input type="password">
</div>
<div class ="yy">
<ul>
<li>数据结构</li>
<li>操作系统</li>
</ul>
</div>
</body>
</html>
4、关于多个样式和覆盖的问题
- 当样式一致的时候，后边覆盖前边
- 当样式不一致时，样式组合在一起使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: pink;
}
.c2{
color: red;
}
</style>
</head>
<body>
<!--最后显示的，会是靠后的那个-->
<div class ="c1 c2">数据结构</div>
</body>
</html>
<style>
.c1{
color: pink !important;
}
.c2{
color: red;
}
</style>
标签：入门,
color,
标签,
li,
red,
快速,
选择器,
CSS
From： https://www.cnblogs.com/N-lim/p/17014167.html