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、分析页面布局
根据你看到的页面把他们划分为很多小的区域，再自己去填充样式。