Python3学习之路~15 css基础
一 css概述
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
存在方式有三种：元素内联（标签的style属性）、页面嵌入（写在head里面，style标签中写样式）和外部引入（写在单独文件中，提高代码重用性），比较三种方式的优缺点。
语法：style = 'key1:value1;key2:value2;'
- 在标签中使用 style='xx:xxx;'
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件
必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。
二 css选择器
1.标签选择器
div{ background-color:red; }
<div > </div>
所有div标签设置上此样式
2.class选择器（推荐使用）
.bd{ background-color:red; }
<div class='bd'> </div>
3.id选择器（不推荐使用）
#idselect{ background-color:red; }
<div id='idselect' > </div>
4.关联选择器
#idselect p{ background-color:red; }
<div id='idselect' > <p> </p> </div>
空格关联，所有id为idselect的标签下的p标签应用此样式
5.组合选择器
#i1,.c1,input,div,p{ background-color:red; }
6.属性选择器
input[type="text"]{width: 100px;height: 200px;}
input[name="Alex"]{width: 100px;height: 200px;}
.c1[name="Alex"]{width: 100px;height: 200px;}
对选择到的标签通过属性再进行一次筛选。
三 css常用属性
1.常用样式
height - 高度，单位像素
width - 宽度，单位像素/百分比
text-align: center; - 水平方向居中
line-height:100px;（与height相同值） - 垂直方向根据标签高度居中
color - 字体颜色
font-size - 字体大小
font-weight:bold; - 字体加粗
background-color - 背景色
border:1px solid red; - 边框
2.float
1.让标签飘起来，使块级标签也可以堆叠
2.子标签加float飘起来，父标签管不住，则在子标签最后加入<div style="clear:both;"></div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--同一行：先20%红色区域，再80%蓝色区域--> <div style="width: 20%;background-color: red;float: left;">1</div> <div style="width: 80%;background-color: blue;float: left;">2</div> <br><br><br> <!--同一行：先20%红色区域，再20%蓝色区域--> <div style="width: 20%;background-color: red;float: left;">1</div> <div style="width: 20%;background-color: blue;float: left;">2</div> <br><br><br> <!--不同行：只要宽度之和>100%，div就会另起一行--> <div style="width: 20%;background-color: red;float: left;">1</div> <div style="width: 90%;background-color: blue;float: left;">2</div> <br><br><br> <!--同一行：先20%红色区域靠左，中间60%空白，再20%蓝色区域靠右--> <div style="width: 20%;background-color: red;float: left;">1</div> <div style="width: 20%;background-color: blue;float: right;">2</div> <br><br><br> <!--clear:both;使父div圈住所有的子div--> <div style="width: 300px;border:1px solid red"> <div style="width: 96px;height:30px;border: 1px solid blue;float: left"></div> <div style="width: 96px;height:30px;border: 1px solid blue;float: left"></div> <div style="width: 96px;height:30px;border: 1px solid blue;float: left"></div> <div style="width: 96px;height:30px;border: 1px solid blue;float: left"></div> <div style="width: 96px;height:30px;border: 1px solid blue;float: left"></div> <div style="width: 96px;height:30px;border: 1px solid blue;float: left"></div> <div style="width: 96px;height:30px;border: 1px solid blue;float: left"></div> <div style="clear:both;"></div> </div> </body> </html>
3.display：块级标签<->内联标签
（1）display:inline - 将块级标签转化为内联标签
（2）display:block - 将内联标签转化为块级标签
（3）display:inline-block - 不独占一行的块级标签
行内标签：无法设置高度、宽度、padding、margin
块级标签：可以设置高度、宽度、padding、margin
那么如何给行内标签设置宽高呢？只需要display:inline-block使标签既有inline属性（默认自己有多少占多少），又有block属性（可以设置高度、宽度、padding、margin）
（4）display:none - 让标签消失，应用：有些网站的某些字段你看不见，但是点击按钮后，这些字段就会显示，就是应用了这个属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--1.display:inline - 将块级标签转化为内联标签--> <div style="background-color: red;display: inline">aaaa</div> <br /><br /><br /> <!--2.display:block - 将内联标签转化为块级标签--> <span style="background-color: red;display: block">aaaa</span> <br /><br /><br /> <!--3.display:inline-block - 不独占一行的块级标签，对比下面代码后发现加入此属性后内联标签可以修改高度和宽度了--> <span style="background-color: red;height: 100px;width: 100px">aaaa</span> <a style="background-color: red;height: 100px;width: 100px">aaaa</a> <br /><br /><br /> <span style="background-color: red;height: 100px;width: 100px;display: inline-block">aaaa</span> <a style="background-color: red;height: 100px;width: 100px;display: inline-block">aaaa</a> <!--4.display:none - 让标签消失--> <div style="display: none">aaaa</div> </body> </html>
4.内边距padding &外边距margin
body标签的默认外边距margin:8px;
若想去掉，可以手动设置margin:0px;
margin:0 auto;表示上下边距为0，左右自动居中。
5.优先级
标签上style优先，然后查看样式在head或者css文件中的编写顺序，顺序越靠后越优先。
如图可查看优先级
6.查看喜欢网站的颜色代码
7.注释：/* */ ，与HTML注释不同哦
8.更多 http://www.w3school.com.cn/css/index.asp
