Python-Django学习笔记3-前端开发（CSS）
CSS
3. CSS样式
- 专门用来美化标签
- 基础CSS，写简单页面 & 看懂 & 改
- 模块，调整和修改
3.1 快速了解
<img src="..." style="height:100px" />
<div style="color:red">中国联通</div>
3.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>
<form method="post", action="/login">
用户名：<input type="text" name="user"/>
密码：<input type="password" name="pwd">
<input type="submit" value="submit按钮提交">
</form>
</body>
</html>
3.将样式写入CSS文件(head标签中需要导入css文件地址)*
.c1{
height:100px;
}
.c2{
color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="common.css" />
</head>
<body>
<h1 class='c1'>用户注册</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c1'>验证码登录</h1>
<h1 class='c2'>微信登录</h1>
</body>
</html>
案例：flask中的应用（登录注册）
- 见示例（head标签中写样式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: red;
}
.c2{
height: 50px;
}
</style>
</head>
<body>
<h1 class="c1">用户注册</h1>
<form method="post", action="/login">
<div class="c2">
用户名：<input type="text" name="user"/>
</div>
<div class="c2">
密码：<input type="password" name="pwd">
</div>
<input type="submit" value="submit按钮提交">
</form>
</body>
</html>
- 见示例（导入css文件）
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<link rel="stylesheet" href="/static/commons.css" />
</head>
<body>
<h1 class="xx">用户注册</h1>
.xx{
color: green;
}
- 问题：如果用Flask框架开发不方便
- 每次都需要重启
- 规定有些文件必须要放在特定的文件夹
- 新创建一个页面时需要写一个函数和一个HTML文件
3.3 CSS选择器
- ID选择器
#c2{
color: blue;
}
<div id="c2">广西</div>
- 类选择器（最多）
.c1{
color: red;
}
<div class="c1">中国</div>
- 标签选择器
li{
color: pink;
}
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
</ul>
- 属性选择
input[type='text']{
border: 1px solid red;
}
.v1[xx="456"]{
color: gold;
}
<input type="text">
<input type="password">
<div class="v1" xx="123">d</div>
<div class="v1" xx="456">f</div>
<div class="v1" xx="789">s</div>
- 后代选择器
.yy li{
color: pink;
}
.yy > a{
color: dodgerblue;
}
<div class="yy">
<a>百度</a>
<div>
<a>谷歌</a>
</div>
<ul>
<li>美国</li>
<li>日本</li>
<li>韩国</li>
</ul>
</div>
关于选择器：
- 使用最多：类选择器、标签选择器、后代选择器
- 多个样式和覆盖的问题：下面的重复样式会覆盖上面的样式
<!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="c2 c1">中国联通</div>
</body>
</html>
补充：下面的样式不要覆盖上面的样式
.c1{
color: red !important;
border: 1px solid red;
}
.c2{
font-size: 28px;
color: green;
}
3.4 样式
1. 高度和宽度
.c1{
height: 300px;
width: 500px;
}
.c1{
height: 300px;
width: 50%;
}
--->宽度还支持百分比，但高度不支持
--->宽高样式默认对行内标签无效；对块级标签默认有效（但右侧区域空白，也不给你用 -- 有解）
2. 块级和行内标签
- 块级
- 行内
- css样式：标签 ->
display:inline-block（既具备块级标签特性，又具备行内标签特性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
display: inline-block;
height: 100px;
width: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<span class="c1">中国联通</span>
</body>
</html>
- 块级标签和行内标签的转换设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
display: inline-block;
height: 100px;
width: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="display: inline;">中国广电</div>
<span style="display: block;">中国联通</span>
<span class="c1">中国移动</span>
<span class="c1">中国电信</span>
</body>
</html>
注意：块级 + 块级&行内 使用较多
3. 字体和颜色
- 颜色
- 大小
- 加粗
- 字体格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: #8B3A3A;
font-size: 38px;
font-weight: 800;
font-family: cursive;
}
</style>
</head>
<body>
<div class="c1">中国联通</div>
<div>中国移动</div>
</body>
</html>
4. 文字对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 59px;
width: 300px;
border: 1px solid red;
text-align: center; /* 水平方向居中 */
line-height: 59px; /* 垂直方向居中 */
}
</style>
</head>
<body>
<div class="c1">中国联通</div>
</body>
</html>
5. 浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<span>左边</span>
<span style="float: right;">右边</span>
</div>
</body>
</html>
- div默认是块级标签；如果浮动起来，就不一样了。
- 如果标签浮动起来之后，就会脱离文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
float: left;
width: 280px;
height: 170px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<span>左边</span>
<span style="float: right;">右边</span>
</div>
<div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
- 如果需要处理这个问题，需要至少最后一个子标签内加如下代码：
<div style="background-color: dodgerblue;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div style="clear: both;"></div> /* clear：both */
</div>
6. 内边距
- 标签内部设定的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
border: 1px solid red;
height: 200px;
width: 200px;
padding-top: 20px; /* 顶部内边距 */
padding-left: 20px; /* 左侧内边距 */
padding-right: 20px; /* 右侧内边距 */
}
</style>
</head>
<body>
<div class="outer">
<div style="background-color: dodgerblue;">听妈妈的话</div>
<div>小朋友，你是否有很多问号</div>
</div>
</body>
</html>
padding: 20px 10px 5px 20px; -上 右 下 左分别设置
padding: 20px; - 上下左右全部设置
7. 外边距
- 标签设定外部的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px; background-color: dodgerblue;"></div>
<div style="background-color: red; height: 200px; margin-top: 50px; margin-left: 100px;"></div>
</body>
</html>
8. 区域居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.c1{
width: 980px;
background-color: pink;
height: 1000px;
margin: 0 auto; ---> 上下为0 左右自适应标签宽度
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
案例：小米商城
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.header{
/* height: 38px; */
background-color: #333;
color: #b0b0b0;
/* width: 980px;
margin-left: auto;
margin-right: auto; */
}
.container{
width: 1226px;
margin: 0 auto;
}
.header .menu{
float: left;
/* color: white; */
}
.header .account{
float: right;
/* color: white; */
}
.header a{
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a>小米官网</a>
<a>小米商城</a>
<a>MIUI</a>
<a>loT</a>
<a>云服务</a>
<a>天星数科</a>
<a>有品</a>
<a>小爱开放平台</a>
</div>
<div class="account">
<a>登录</a>
<a>注册</a>
<a>消息通知</a>
</div>
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>
总结
- body标签默认有一个边距，造成页面四边都有一个小的白色间隙；需要在style中加以下样式处理
body{
margin: 0;
}
内容区域居中
文本居中
text-align: center;区域居中：自己要有宽度+margin-left: auto;margin-right: auto;
margin: 0 auto;
父级没有高度或宽度，被子级支撑起来
如果存在浮动，需要在兄弟子级底部加入
<div style="clear: both;"></div>
- 关于布局不止如何下手；
