django学习入门系列之第三点《快速了解 CSS》

2024/12/1 10:25:14 来源：https://blog.csdn.net/qq_62548908/article/details/139750674 浏览: 次关键词：django学习入门系列之第三点《快速了解 CSS》

文章目录

CSS
快速了解
CSS应用方式
- 在标签上
- 在head标签中
- 写到文件中
- 问题：用Flask框架开发不方便
往期回顾

CSS

CSS 专门用来"美化"标签

基础CSS,写简单的界面 &能看懂 &会改就行
模块，调整和修改

快速了解

style 这种就叫css样式

<img src"..." style="height: 100px" />
<div style="color:red;">内容
</div>

CSS应用方式

在标签上

<img src"..." style="height: 100px" /><div style="color:red;">内容
</div>

在head标签中

注意一定是有个【点+名字】，例如 .c1,这相当于给这个类取名字，这样后面如果谁使用的话直接用名字就可以进行操作了

在标签上使用的时候要注意是class="内容"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户登记</title><style>.c1{color:red;}</style></head>
<body><h1 class='c1'>用户登录</h1><h1 class='c1'>用户登录</h1><h1 class='c1'>用户登录</h1></body>
</html>

写到文件中

css文件中的代码

.c1{height:100px;
}.c2{color:red; 
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户登记</title>#在static目录下新建的common.css文件<link rel="stylesheet" href="/static/common.css"> </head>
<body><h1 class='c1'>用户登录</h1><h1 class='c2'>用户登录</h1><h1 class='c1'>用户登录</h1>    
</body>
</html>