Python学习-day14-CSS
CSS：
一：介绍：学名层叠样式表(Cading Style Sheets)是一种用来表现HTML或者XML等文件的样式的计算机语言。让HTML和XML看起来更加美观。
语法：<style>标签内定义css样式。内容是{key:value}形式。
css位置：
为了提高样式的重用。css样式一般推荐在html <head>标签的位置以及单独文件引用（head里的<link>标签）。
<head>标签内只能是当前html文件引用，而文件引用可以被多个文件引用该样式。
不推荐在标签内进行定义样式。
引用优先级：
标签内部一定样式 > <head>标签内部引用 >单个文件引用。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <link rel="stylesheet" href="s1.css"/>
5 <meta charset="UTF-8">
6 <title>test</title>
7 <style>
8 div{
9 background-color: blue;
10 /*color: red;*/
11 }
12 </style>
13 </head>
14
15 <body>
16 <div style="color: darkmagenta">哈哈</div>
17 <div>嘿嘿</div>
18 <div>嘿嘿</div>
19 <div>嘿嘿</div>
20 </body>
21 </html>
css 文件：
1 div{
2 background-color: burlywood;
3 color: deeppink;
4 }
效果：
二：Css选择器：
class属性值可以重复。
1）标签选择器，不常用。缺点：对所有匹配的标签都应用该样式。
语法：
1 <style>
2 标签名字{
3 样式：xx;
4 }
5 <style/>
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 div{
8 background-color: aqua;
9 }
10 </style>
11 </head>
12 <body>
13 <div>COME</div>
14 <div>BACK</div>
15 <div>OK</div>
16 </body>
17 </html>
效果：
2）id选择器：通过id属性值进行匹配。不常用。缺点：因为id值得唯一性，导致只能应用在匹配的一个标签内。
语法：
1 <style>
2 #id值{
3 样式：xx;
4 }
5 <style/>
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 #li{
8 color: blue;
9 }
10 </style>
11 </head>
12 <body>
13 <div id="li">COME</div>
14 <div>BACK</div>
15 <div>OK</div>
16 </body>
17 </html>
效果：
3)class选择器： 根据class属性值进行匹配样式。这个比较常用。
语法：
1 <style>
2 .class属性值{
3 样式：xx;
4 }
5 <style/>
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .li{
8 color: deeppink;
9 }
10 </style>
11 </head>
12 <body>
13 <div id="li">COME</div>
14 <div class="li">BACK</div>
15 <div class="li">OK</div>
16 </body>
17 </html>
效果：
4）层级选择器：注意用空格来表示层级。比较常用。
场景：当一个标签内嵌套标签。对内层标签的进行样式定义的时候。
语法：
1 <style>
2 标签名 标签名 标签名{
3 样式: 值;
4 }
5 </style>
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 div div span{/*也可以写成这样div div .a*/
8 color: darkmagenta;
9 }
10 </style>
11 </head>
12 <body>
13 <div>
14 <div>
15 <span class="a">OK</span>
16 <a class="b">FUCK</a>
17 </div>
18 </div>
19 </body>
20 </html>
5）组合选择器。当多个标签要要应用同一个样式的时候可以使用组合选择器。比较常用。
语法：通过逗号来表示多个class。
1 <style>
2 .class值,.clas值{
3 样式: 值;
4 }
5 </style>
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .a,.b{
8 color: darkmagenta;
9 }
10 </style>
11 </head>
12 <body>
13 <div class="a">aa</div>
14 <div class="b">bbb</div>
15 </body>
16 </html>
效果：
三：样式
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .c1{
8 /*背景色*/
9 color: blue;/*字体颜色*/
10 font-family: "楷体";/*字体设置*/
11 font-size: 35px;/*字体大小*/
12 width: 500px;/*宽度*/
13 }
14 </style>
15 </head>
16 <body>
17 <div class="c1">欢迎来到美德商城</div>
18 <div style="width: 500px;">">
19 <div style="width: 20%;">">欢迎</div>
20 <div style="width: 40%;">">再见</div>
21 </div>
22 </body>
23 </html
效果：
注意：html有宽度，可以是100%也是20%等。chid <div>可以占有parent <div>的宽度比。因为内容多少高度就多少，是由内容来确定。所以没有高度的百分比(height).
背景颜色可以是由具体的英文和rgb18进制来代替 也可以用rgb(三个数字参数)来表示。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 </head>
7 <body>
8 <div style="">">cccc</div>
9 </body>
10 </html>
效果：
1）background_img 北京图片。需要规定长度和宽度，默认是图片是铺满整个屏幕。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>background</title>
6 <style>
7 .c1{
8 background-image: url("2.jpg");
9 width: 300px;
10 height: 300px;
11
12 }
13 </style>
14 </head>
15 <body>
16 <div class="c1"></div>
17 </body>
18 </html>
效果：
background_postion确定图片位置：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>background</title>
6 <style>
7 .c1{
8 background-image: url("2.jpg");
9 width: 70px;
10 height: 70px;
11 background-repeat: no-repeat;/*图片不重复*/
12 background-position: -157px -85px;/*图片位置*/
13 }
14 </style>
15 </head>
16 <body>
17 <div class="c1"></div>
18 </body>
19 </html>
效果：
通过移动图片的位置来呈现图片的那个部位。而不是移动页面。默认显示的图片左上部分。
简单写法：
code：
1 <style>
2 .c1{
3 background:url("2.jpg") -140px -64px no-repeat;
4 width: 90px;
5 height: 90px;
6
7 }
8 </style>
2）边框（border）：
code：
1 <style>
2 .c1{
3 border: 1px solid red;
4 }
5 </style>
6 </head>
7 <body>
8 <span class="c1">username</span>
9 </body>
效果：
可以只加左边、右边、上边、下边：border-left border-right border-top border-bottem
3）display：非常重要!!!display:none 隐藏标题栏。
code:
1 <style>
2 .c1{
3 border: 1px solid red;
4 /*display: none;*/
5 }
6 .c2{
7 border: 1px solid red;
8 }
9 </style>
10 </head>
11 <body>
12 <span class="c1">username</span>
13 <span class="c2">pasword</span>
14 </body>
code:
1 <style>
2 .c1{
3 border: 1px solid red;
4 display: none;
5 }
6 .c2{
7 border: 1px solid red;
8 }
9 </style>
10 </head>
11 <body>
12 <span class="c1">username</span>
13 <span class="c2">pasword</span>
14 </body>
display:none 隐藏标签，并把标签占有位置去掉。
display:block：让内联标签可以像块级标签一样占一行。
code：
1 <style>
2 .c1{
3 border: 1px solid red;
4 display: inline;
5 }
6 .c2{
7 border: 1px solid red;
8 display: block;
9 }
10 </style>
11 </head>
12 <body>
13 <div class="c1">块级</div>
14 <span class="c2">内联</span>
15 </body
效果：
display:
code:
1 <style>
2 .c2{
3 border: 1px solid red;
4 display: inline-block;/*让内联标签也具有块级标签的作用 高度和宽度*/
5 width: 70px;
6 height: 70px;
7 }
8 </style>
9 </head>
10 <body>
11 <span class="c2">内联</span>
效果：
默认内联标签不具有宽度和高度。
最常用的用途：1：弹窗（默认是隐藏-display:none 显示的是去掉。）2：菜单显示二级菜单。
4）伪造超链接、等待等。
code：
1 <style>
2 .c1{
3 cursor: pointer;
4 color: blue;
5 }
6 .c2{
7 cursor: help;
8 color: blue;
9 }
10 .c3{
11 cursor: move;
12 color: blue;
13 }
14 .c4{
15 cursor: crosshair;
16 color: blue;
17 }
18 .c5{
19 cursor: wait;
20 color: blue;
21 }
22 </style>
23 </head>
24 <body>
25 <span class="c1">伪造超链接</span>
26 <span class="c2">ddd</span>
27 <span class="c3">ddd</span>
28 <span class="c4">ddd</span>
29 <span class="c5">ddd</span>
30 </body>
5）内边距和外边距：
区别：内外边距的概念是相对于标签是否增长得区别.
应用：京东登录：
margin 外边距：本身标签不增长。而是标签部分移动。默认是
code：
1 <style>
2 .c1{
3 border: 1px solid red;
4 width: 700px;
5 height: 700px;
6 background-color: beige;
7 }
8
9 .c2{
10 background-color: #EEEE00;
11 margin-top: 20px;
12 margin-left: 20px;
13 margin-right: 20px;
14 }
15 </style>
16 </head>
17
18 <body>
19 <div class="c1">
20 <div class="c2"> username: <input type="text"/> </div>
21 </div>
效果：
和上面、左面、右面各有边距。实际上用margin的时候就自动个上下左右进行边距。
code：
1 <style>
2 .c1{
3 border: 1px solid red;
4 width: 700px;
5 height: 700px;
6 background-color: beige;
7 }
8
9 .c2{
10 background-color: #EEEE00;
11 margin: 30px;
12 }
13 </style>
14 </head>
15
16 <body>
17 <div class="c1">
18 <div class="c2"> username: <input type="text"/> </div>
19 </div>
效果：
padding 内边距：嵌套标签边长，同样也有左边距、右边距、上、下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>OK</title>
6 <style>
7 .c1{
8 background-color: darkseagreen;
9 border: 1px solid red;
10 width: 390px;
11 height: 370px;
12 }
13 .c2{
14 padding-left: 30px;
15 padding-right: 20px;
16 padding-top: 10px;
17 background-color: aquamarine;
18 }
19 </style>
20 </head>
21
22 <body>
23 <div class="c1">
24 <div class="c2">username:<input type="text"/> </div>
25 </div>
26 </body>
27 </html>
效果：
同样也有padding直接包含上下左右做内边距。
6）float漂浮：
表示子标签漂浮。如果子标签的超过100%将不会漂浮成功。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .c1{
8 background-color: #EEEE00;
9 float: left;
10 width: 20%;
11
12 }
13 .c2{
14 background-color: beige;
15 /*height: 100px;*/ /*同样父div定义高度的时候就不会出现子div飘出去*/
16 width: 100px;
17 border: 1px solid black;
18 }
19 .c3{
20 background-color: darkorchid;
21 width: 50%;
22 float: left;
23 }
24 </style>
25 </head>
26 <body>
27 <div class="c2">
28 <div class="c1">OK</div>
29 <div class="c3">KO</div>
30 <div style="clear: both;"></div> <!-- 表示当父div没定义高度的是保证子div漂的时候不出父div的框-->
31 </div>
32
33 </body>
34 </html>
效果：
7）postion：位置。
1、fixed：固定到窗口的位置，页面滚动 也不变化位置。
2、absolute：可以固定到一个位置，但是页面滚动，他的位置也变化。
3、relative：和absolute一起使用。可以固定到父标签的框内的相对位置，而不是窗口的相对位置。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .c1{
8 background-color: darkkhaki;
9 height: 2000px;
10 }
11 .c2{
12 background-color: chartreuse;
13 position: fixed;
14 bottom: 0;/*表示右下角固定*/
15 right: 0;
16 }
17 </style>
18 </head>
19 <body>
20 <div class="c1">
21 <div class="c2">返回顶部</div>
22 </div>
23 </body>
24 </html>
效果：
absolute：
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .c1{
8 background-color: darkkhaki;
9 height: 2000px;
10 }
11 .c2{
12 background-color: chartreuse;
13 position: absolute;
14 bottom: 0;
15 right: 0;
16 }
17 </style>
18 </head>
19 <body>
20 <div class="c1">
21 <div class="c2">返回顶部</div>
22 </div>
23 </body>
24 </html>
随着网页的滚动而移动。
relative：
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .c1{
8 border: 1px solid red;
9 height: 200px;
10 width: 100px;
11 position: relative;
12 }
13 .c3{
14 position: absolute;
15 color: red;
16 bottom: 0;
17 right: 0;
18 }
19 </style>
20 </head>
21 <body>
22 <div class="c1">
23 <div class="c3">111</div>
24 </div>
25 </body>
26 </html>
效果：
注意：absolute和relative:一起使用，无论他们之间套了多少层标签，都是从内往外找。直到匹配。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .c1{
8 border: 1px solid red;
9 height: 200px;
10 width: 100px;
11 position: relative;
12 }
13 .c3{
14 position: absolute;
15 color: red;
16 bottom: 0;
17 right: 0;
18 }
19 .c2{
20 background-color: #EEEE00;
21 width: 100%;
22 height: 100px;
23 }
24 </style>
25 </head>
26 <body>
27 <div class="c1">
28 <div class="c2">
29 <div class="c3">111</div>
30 </div>
31 </div>
32 </body>
效果：
