Python学习-day14-CSS-白红宇

Python学习-day14-CSS

阅读量：5298 次

发布时间：2019-06-14

本文共 4282 字，大约阅读时间需要 14 分钟。

CSS：

一：介绍：学名层叠样式表(Cading Style Sheets)是一种用来表现HTML或者XML等文件的样式的计算机语言。让HTML和XML看起来更加美观。

语法：<style>标签内定义css样式。内容是{key:value}形式。

css位置：

为了提高样式的重用。css样式一般推荐在html <head>标签的位置以及单独文件引用（head里的<link>标签）。

<head>标签内只能是当前html文件引用，而文件引用可以被多个文件引用该样式。

不推荐在标签内进行定义样式。

引用优先级：

标签内部一定样式 > <head>标签内部引用 >单个文件引用。

code：

1  2  3  4 
        5 
        6 test 7  13  14 15  16 
       
        哈哈
       
 17 
       
        嘿嘿
       
 18 
       
        嘿嘿
       
 19 
       
        嘿嘿
       
 20  21

css 文件：

1 div{2     background-color: burlywood;3 color: deeppink; 4 }

效果：

二：Css选择器：

class属性值可以重复。

1）标签选择器，不常用。缺点：对所有匹配的标签都应用该样式。

语法：

code：

1  2  3  4 
        5 test 6  11  12  13 
       
        COME
       
 14 
       
        BACK
       
 15 
       
        OK
       
 16  17

效果：

2）id选择器：通过id属性值进行匹配。不常用。缺点：因为id值得唯一性，导致只能应用在匹配的一个标签内。

语法：

code：

1  2  3  4 
        5 test 6  11  12  13 
       
        COME
       
 14 
       
        BACK
       
 15 
       
        OK
       
 16  17

效果：

3)class选择器：根据class属性值进行匹配样式。这个比较常用。

语法：

code：

1  2  3  4 
        5 test 6  11  12  13 
       
        COME
       
 14 
       
        BACK
       
 15 
       
        OK
       
 16  17

效果：

4）层级选择器：注意用空格来表示层级。比较常用。

场景：当一个标签内嵌套标签。对内层标签的进行样式定义的时候。

语法：

code：

1  2  3  4 
        5 test 6  11  12  13 
       
         14 
        
          15 
         OK 16 
         FUCK 17 
        
 18 
       
 19  20

5）组合选择器。当多个标签要要应用同一个样式的时候可以使用组合选择器。比较常用。

语法：通过逗号来表示多个class。

code：

1  2  3  4 
        5 test 6  11  12  13 
       
        aa
       
 14 
       
        bbb
       
 15  16

效果：

三：样式

1  2  3  4 
        5 test 6  15  16  17 
       
        欢迎来到美德商城
       
 18 
       
        "> 19 
        
         ">欢迎
        
 20 
        
         ">再见
        
 21 
       
 22  23

效果：

注意：html有宽度，可以是100%也是20%等。chid <div>可以占有parent <div>的宽度比。因为内容多少高度就多少，是由内容来确定。所以没有高度的百分比(height).

背景颜色可以是由具体的英文和rgb18进制来代替也可以用rgb(三个数字参数)来表示。

code：

1  2  3  4 
        5 test 6  7  8 
       
        ">cccc
       
 9  10

效果：

1）background_img 北京图片。需要规定长度和宽度，默认是图片是铺满整个屏幕。

code：

1  2  3  4 
        5 background 6  14  15  16 
       
 17  18

效果：

background_postion确定图片位置：

1  2  3  4 
        5 background 6  15  16  17 
       
 18  19

效果：

通过移动图片的位置来呈现图片的那个部位。而不是移动页面。默认显示的图片左上部分。

简单写法：

code：

2）边框（border）：

code：

1      6  7  8 username 9

效果：

可以只加左边、右边、上边、下边：border-left border-right border-top border-bottem

3）display：非常重要!!!display:none 隐藏标题栏。

code:

1      10  11  12 username 13 pasword 14

code:

1      10  11  12 username 13 pasword 14

display:none 隐藏标签，并把标签占有位置去掉。

display:block：让内联标签可以像块级标签一样占一行。

code：

1      11  12  13 
       
        块级
       
 14 内联 15

效果：

display:

code:

1      9  10  11 内联

效果：

默认内联标签不具有宽度和高度。

最常用的用途：1：弹窗（默认是隐藏-display:none 显示的是去掉。）2：菜单显示二级菜单。

4）伪造超链接、等待等。

code：

1      23  24  25 伪造超链接 26 ddd 27 ddd 28 ddd 29 ddd 30

5）内边距和外边距：

区别：内外边距的概念是相对于标签是否增长得区别.

应用：京东登录：

margin 外边距：本身标签不增长。而是标签部分移动。默认是

code：

1      16  17 18  19 
       
         20 
        
          username: 
          
        
 21

效果：

和上面、左面、右面各有边距。实际上用margin的时候就自动个上下左右进行边距。

code：

1      14  15 16  17 
       
         18 
        
          username: 
          
        
 19

效果：

padding 内边距：嵌套标签边长，同样也有左边距、右边距、上、下：

1  2  3  4 
        5 OK 6  20  21 22  23 
       
         24 
        
         username:
          
        
 25 
       
 26  27

效果：

同样也有padding直接包含上下左右做内边距。

6）float漂浮：

表示子标签漂浮。如果子标签的超过100%将不会漂浮成功。

code：

1  2  3  4 
        5 test 6  25  26  27 
       
         28 
        
         OK
        
 29 
        
         KO
        
 30 
        
 
         31 
       
 32 33  34

效果：

7）postion：位置。

1、fixed：固定到窗口的位置，页面滚动也不变化位置。

2、absolute：可以固定到一个位置，但是页面滚动，他的位置也变化。

3、relative：和absolute一起使用。可以固定到父标签的框内的相对位置，而不是窗口的相对位置。

code：

1  2  3  4 
        5 test 6  18  19  20 
       
         21 
        
         返回顶部
        
 22 
       
 23  24

效果：

absolute：

code：

1  2  3  4 
        5 test 6  18  19  20 
       
         21 
        
         返回顶部
        
 22 
       
 23  24

随着网页的滚动而移动。

relative：

code：

1  2  3  4 
        5 test 6  20  21  22 
       
         23 
        
         111
        
 24 
       
 25  26

效果：

注意：absolute和relative:一起使用，无论他们之间套了多少层标签，都是从内往外找。直到匹配。

code：

1  2  3  4 
        5 test 6  25  26  27 
       
         28 
        
          29 
         
          111
         
 30 
        
 31 
       
 32