Python Day15(CSS)

一、CSS概述

1.简介

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

语法：style = 'key1:value1;key2:value2;'

在标签中使用 style='xx:xxx;'
在页面中嵌入 < style type="text/css"> </style > 块
引入外部css文件

必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。

PS：css注释 /* */

2.标签选择器

id选择区:

#i1{
  background-color: #2459a2;
  height: 48px;
  }

class选择器 ******

.名称{
  ...
  }

  <标签 class='名称'> </标签>

标签选择器:

  div{
  ...
  }

  所有div设置上此样式

层级选择器（空格隔开） ******

  .c1 .c2 div{

  }

组合选择器（逗号） ******

#c1,.c2,div{

  }

属性选择器 ******

对选择到的标签再通过属性再进行一次筛选

.c1[n='alex']{ 100px; height:200px; }

PS:

- 优先级，标签上style优先，编写顺序，就近原则

3.补充CSS书写顺序

位置属性(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文字系列(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)

二、CSS各种属性

1.边框：

border: 1px solid red
border-top  # 上
border-bottom  # 下
border-left  # 左
border-right  # 右

2.background：

background-color;                    # 背景颜色
background-image:url('image/4.gif'); # 默认，div大，图片重复放
background-repeat: repeat-y;         # 是否重复
background-position-x:               # 图片x轴位置
background-position-y:               # 图片y轴位置
background: url(icon_18_118.png) 0 -119px no-repeat;  # 简写

3.常用属性：

height;                 # 高度 百分比
width;                  # 宽度 像素，百分比
text-align: center;     # 水平方向居中
line-height;            # 垂直方向根据标签高度居中
color;                  # 字体颜色
font-size;              # 字体大小
font-weight;            # 字体加粗
text-decoration:none;   # 去除超链接的下划线
opcity: 0.6;            # 透明度
z-index: 10;            # 高的在上面
overflow: hidden,auto   # 规定当内容溢出元素框时发生的事情,隐藏或者出现滚动条
hover                   # 选择鼠标指针浮动在其上的元素，并设置其样式 a:hover{background-color:yellow;}
min-width               # 最小宽度
max-width               # 最大宽度

4.float：

让标签浪起来，块级标签也可以堆叠

<div style=" 20%;background-color: red;float: left">1</div>
<div style=" 20%;background-color: black;float: left">2</div>

控制不住加上：<div style="clear: both;"></div>

5.display：

display: none; -- 让标签消失
display: inline;  # 行内
display: block;  # 块级
display: inline-block;
        具有inline,默认自己有多少占多少
        具有block，可以设置高度，宽度，padding  margin
******
行内标签：无法设置高度，宽度，padding  margin
块级标签：设置高度，宽度，padding  margin

6.margin(外边距)可以改变位置

CSS Margin(外边距)属性定义元素周围的空间。

margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的

margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。

PS：margin: 0 auto

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

margin:100px 50px;

ps:缩写如果写全的话，顺序是上右下左，其实就是顺时针方向.

7.padding（填充）改变自身

CSS Padding（填充）属性定义元素边框与元素内容之间的空间。

当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

padding:25px 50px;

8.position：

fiexd (固定在页面的某个位置)

{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

relative + absolute

<div style='position:relative;'>
  <div style='position:absolute;top:0;left:0;'></div>
</div>

三、CSS补充

1.页面布局

主站

<div class='pg-header'>
      <div style='980px;margin:0 auto;'>
          内容自动居中
      </div>
</div>
<div  class='pg-content'></div>
<div  class='pg-footer'></div>

后台管理布局：

position:

fiexd -- 永远固定在窗口的某个位置
relative -- 单独无意义
absolute -- 第一次定位，可以在指定位置，但是随着滚动条的滚动则会发生变化

第一种布局:

左侧菜单跟随滚动条

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>Title</title>
 8     <style>
 9         body{
10             margin: 0;
11         }
12 
13         .pg-header{
14             height: 48px;
15             background-color: #2459a2;
16             line-height: 48px;
17         }
18 
19         .pg-nav{
20             position: absolute;
21             top: 48px;
22             bottom: 0;
23             left: 0;
24             width: 200px;
25             background-color: #dddddd;
26         }
27 
28         .pg-body{
29             position: absolute;
30             top: 48px;
31             right: 0;
32             bottom: 0;
33             left: 200px;
34             background-color: pink;
35         }
36     </style>
37 </head>
38 <body>
39     <div class="pg-header"></div>
40     <div class="pg-nav"></div>
41     <div class="pg-body">
42         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
43         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
44         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
45         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
46         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
47         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
48         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
49         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
50     </div>
51 </body>
52 </html>

View Code

第二种布局:

左侧以及上不不动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>Title</title>
 8     <style>
 9         body{
10             margin: 0;
11         }
12 
13         .pg-header{
14             height: 48px;
15             background-color: #2459a2;
16             line-height: 48px;
17         }
18 
19         .pg-nav{
20             position: absolute;
21             top: 48px;
22             bottom: 0;
23             left: 0;
24             width: 200px;
25             background-color: #dddddd;
26             overflow: auto;
27         }
28 
29         .pg-body{
30             position: absolute;
31             top: 48px;
32             right: 0;
33             bottom: 0;
34             left: 200px;
35             background-color: pink;
36             overflow: auto;
37         }
38     </style>
39 </head>
40 <body>
41     <div class="pg-header"></div>
42     <div class="pg-nav">
43         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
44         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
45         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
46         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
47     </div>
48     <div class="pg-body">
49         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
50         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
51         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
52         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
53     </div>
54 </body>
55 </html>

View Code

2.hover高级用法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
 8     <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 9     <title>Title</title>
10     <style>
11         body{
12             margin: 0;
13         }
14         .c1{
15             height: 48px;
16             line-height: 48px;
17             background-color: #1c5a9c;
18         }
19         .c2{
20             width: 1100px;
21             height: 48px;
22             margin: 0 auto;
23         }
24         .c3{
25             position: relative;
26             width: 50px;
27             height: 48px;
28             line-height: 48px;
29             text-align: center;
30         }
31         .c3:hover {
32             background-color: #5956dc;
33         }
34         .c3:hover .c4 {
35             display: block;
36         }
37         .c4 {
38             display: none;
39             position: absolute;
40             width: 100px;
41             top: 48px;
42             left: -25px;
43             background-color: #f1f2f7;
44         }
45         .c4 a{
46             display: block;
47         }
48     </style>
49 </head>
50 <body>
51     <div class="c1">
52         <div class="c2">
53             <div class="c3">
54                 <a href="#"><i class="fa fa-user-o" aria-hidden="true"></i></a>
55                 <div class="c4">
56                     <a href="">我的资料</a>
57                     <a href="">注销</a>
58                 </div>
59             </div>
60         </div>
61     </div>
62 </body>
63 </html>

View Code