flask_知识点3_css
flask_知识点3_css
- 样式
-
- 1高度和宽度
- 2行内和块级
- 3字体和颜色
- 4文字对齐方式
- 5浮动
- 6 内边距
- 6 外边距
- ！css重点
-
- 1、css样式
- 2、分析页面布局
- 3、参考别人的成果
css引用方式
1 在标签上（不建议使用）
// An highlighted block
var foo = 'bar';
2 在head标签中写style标签（针对一个页面建议使用）
// An highlighted block
var foo = 'bar';
3 写在文件中（针对多个页面建议使用）
// An highlighted block
var foo = 'bar';
选择器：类选择器 (用的多)、标签选择器、后代选择器、
1 ID选择器
#c1{
color:red;
}
<div id='c1'></div>
2 类选择器 (用的多)
.c1{
color:gold;
}
<div class='c1'></div>
3 标签选择器
div{
color:gold;
}
<div>xx</div>
4 属性选择器
5 后代选择器
.yy li{
color:gold;
}
.yy >a{
color:gold;
}
<div calss="yy">
<a>百度</a>
<li>a</li>
<li>b</li>
</div>
多个样式和覆盖
样式
1高度和宽度
<style>
.c1{
height:300px;
width:300px;
}
</style>
#宽度支持百分比
#行内标签 不行，块级标签可以
2行内和块级
<style>
.c1{
display: inline-block;
height: 100px;
width: 300px;
border: 1px solid red;
}
</style>
3字体和颜色
<style>
.c1{
cokor:red;
font-size:58px;
font-weight:200;
font-family: Georgia, serif;
}
</style>
4文字对齐方式
<style>
.c1{
display: inline-block;
height: 100px;
width: 300px;
border: 1px solid red;
text-align:center;/*水平方向居中*/
line-height:59px;/*垂直方向居中*/
}
</style>
5浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
float:left;
height: 170px;
width: 280px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<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> //删除了后面的东西会出去
</div>
<div> 你好呀</div>
</body>
</html>
6 内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
float:left;
height: 400px;
width: 280px;
border: 1px solid red;
padding:20px 10px 30px 40px;
padding-top:20px;
padding-left:20px;
padding-right:20px;
}
</style>
</head>
<body>
<div class="outer">
<div style="background-color: gold">听妈妈的话</div>
<div>胜多负少</div>
</div>
</body>
</html>
6 外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div style="height:200px;background-color: gold">听妈妈的话</div>
<div style="height:100px;background-color: red;margin-top:20px">听妈妈的话</div>
</div>
</body>
</html>
！css重点
1、css样式
高度、宽度、块级/行内/块级行内、浮动、字体、文字对齐方式、内边距、外边距
关于边距：
-body
-区域居中
消去body标签的默认边距
body{
margin: 0;
}
文本居中
<div style="width:200px; background-color:pink; text-align:center">文本局中</div>
区域居中：
自己要有宽度+margin-left:auto;margin-right:auto;
.c1{
width:980px;
background-color:pink;
height:100px;
margin: 0 auto; <!-- 居中对齐 auto：左右自动居中 -->
}
<div class="c1">左边</div>
父亲没有高度、宽度，被孩子支撑起来
如果浮动存在，一定记得加入（浮动兄弟结点的最后）
<div style="clear:both"></div> //删除了后面的东西会出去
2、分析页面布局
根据你看到的页面把他们划分为很多小的区域，再自己去填充样式。