python CSS

CSS

一. css的四种引入方式

1.行内式

2.嵌入式

3. 链接式

　将一个.css文件引入到HTML文件中　　

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

4.导入式

二. css选择器

1.基本选择器

二.组合选择器

E,F   多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔      :div,p { color:#f00; }
  
E F   后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝
  
E > F   子元素选择器，匹配所有E元素的子元素F            :div > p { color:#f00; }
   
E + F   毗邻元素选择器，匹配所有紧随E元素之后的同级元素F  :div + p { color:#f00; }
  
E ~ F   普通兄弟选择器（以破折号分隔）                 :.div1 ~ p{font-size: 30px; }

注意嵌套规则：

块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
li内可以包含div
块级元素与块级元素并列、内联元素与内联元素并列。

三.属性选择器

E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略)。
                   
E[att=val]      匹配所有att属性等于“val”的E元素  
  
E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
  
E[attr^=val]    匹配属性值以指定值开头的每个元素                   
  
E[attr$=val]    匹配属性值以指定值结尾的每个元素  
  
E[attr*=val]    匹配属性值中包含指定值的每个元素  
 
 
 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 
        [alex]{
            color: red;          #E[att]  
        }
         
        div[alex="sb"]{
            color: red;          #E[att=val]
        }
         
        div[alex~="xx"]{
            color: red;          #E[att~=val] 
        }
         
        div[alex^="sb"]{
            color: red;           #E[attr^=val]
        }
 
        div[alex*="sb"]{
            color: red;           E[attr*=val]
        }
    </style>
 
</head>
<body>
    <div alex="sb">123</div>
    <p alex="sb">123</p>
    <div alex="sb xx">123</div>
</body>
</html>

伪类(Pseudo-classes)

　　CSS伪类是用来给选择器添加一些特殊效果。

a:link（没有接触过的链接）,用于定义了链接的常规状态。
 
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
 
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
 
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
 
伪类选择器 : 伪类指的是标签的不同状态:
 
           a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
 
a:link {color: #FF0000} /* 未访问的链接 */
 
a:visited {color: #00FF00} /* 已访问的链接 */
 
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
 
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

 1 <style type="text/css">
 2     a:link{
 3         color: red;
 4     }
 5     a:visited {
 6         color: blue;
 7     }
 8     a:hover {
 9         color: green;
10     }
11     a:active {
12         color: yellow;
13     }
14 </style>
15 </head>
16 <body>
17     <a href="01-hello-world.html">hello-world</a>
18 </body>
19 </html>
20 
21 例子

列子

 1 <style type="text/css">
 2     .box{
 3         width: 100px;;
 4     }
 5 
 6     .top,.bottom{
 7         width: 100px;
 8         height: 100px;
 9         background-color: chartreuse;
10 
11     }
12 
13     .top:hover{
14         background-color: red;      鼠标移动到top区域，颜色变红色
15     }
16 
17     .box:hover .top{
18         background-color: red;      鼠标移动到box区域，top区域变红色
19     }
20 
21 </style>
22 </head>
23 <body>
24     <div class="box">
25         <div class="top">top</div>
26         <div class="bottom">bottom</div>
27     </div>
28 </body>
29 </html>

:hover 背景黄色鼠标上去红色例子

选择器的优先级　

　　所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

　　样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

　　　　1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；

　　　　2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100

　　　　3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
　　　　4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1

　　按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

1 1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。
2    
3 　　2、有!important声明的规则高于一切。
4 
5 　　3、如果!important声明冲突，则比较优先权。
6 
7 　　4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
8 
9 　　5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

优先级顺序

三 css属性操作

1.css text

a. 颜色属性

<div style="color:blueviolet">ppppp</div>
  
<div style="color:#ffee33">ppppp</div>
  
<div style="color:rgb(255,0,0)">ppppp</div>
  
<div style="color:rgba(255,0,0,0.5)">ppppp</div>

b. 字体属性

font-size: 20px/50%/larger
  
font-family:'Lucida Bright'
  
font-weight: lighter/bold/border/                      #粗细
  
<h1 style="font-style: oblique">老男孩</h1>    #斜体

c. 背景属性

background-color: cornflowerblue
  
background-image: url('1.jpg');
  
background-repeat: no-repeat;(repeat:平铺满)
  
background-position: right top（20px 20px）;
 
----简写----
background: #ffffff url('1.png') no-repeat right top;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .back{
 8             border:1px solid red;
 9             width: 800px;
10             height: 800px;
11             background-image: url("meinv.png");
12             background-repeat: no-repeat;    #不平铺满
13             background-repeat: repeat-x;     #横向平铺满
14         }
15         
16         .back{
17             border:1px solid red;
18             width: 800px;
19             height:800px;
20             background-image: url("meinv.png");
21             background-repeat: no-repeat;
22             background-position: 0 0;
23         }
24     </style>
25 </head>
26 <body>
27     <div class="back">
28 
29     </div>
30 </body>
31 </html>

背景属性示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8 
 9         span{
10             display: inline-block;
11             width: 18px;
12             height: 20px;
13             background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
14             background-position: 0 -100px;
15         }
16     </style>
17 </head>
18 <body>
19 
20 
21     <span></span>
22     <span></span>
23     <span></span>
24     <span></span>
25 
26 </body>
27 </html>

抽屉小图标显示

d.文本属性

font-size:        10px;
 
text-align: center;        横向排列
 
line-height: 200px;        文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
 
vertical-align:－4px       设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
 
text-indent: 150px;        首行缩进
letter-spacing: 10px;      字符于字符之间的距离
word-spacing: 20px;        单词与单词之间的距离
text-transform: capitalize;    单词首字母大写 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>文本</title>
 6     <style>
 7         div{
 8             height:100px;
 9             background-color: aquamarine;
10             text-align: center;   #水平居中
11             line-height:100px;    #文本设置为和div一样的高度，显示居中
12         }
13     </style>
14 
15 </head>
16 <body>
17     <div>文本属性</div>
18 </body>
19 </html>

text-align line-height

e.边框属性

border-style: solid;
   
border-color: chartreuse;
   
border-width: 20px;
 
-----------简写---------------
 
border: 30px rebeccapurple solid;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>文本</title>
 6     <style>
 7         .foo{
 8             width:200px;
 9             height:200px;
10             border:1px solid red;
11         }
12     </style>
13 
14 </head>
15 <body>
16     <div class="foo"></div>
17 </body>
18 </html>

示例

f.列表属性

list-style-type         设置列表项标志的类型。
list-style-image    将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
  
list-style          简写属性。用于把所有用于列表的属性设置于一个声明中
 
 
--------------------------------
 
#使用图像来替换列表项的标记:
 
ul {
     list-style-image: url('');
            }

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>文本</title>
 6     <style>
 7         ul,ol{
 8             list-style: none;   #取消列表前面的小图标
 9         }
10     </style>
11 </head>
12 <body>
13 
14     <ul>
15         <li>123</li>
16         <li>456</li>
17         <li>789</li>
18     </ul>
19 
20     <ol>
21         <li>123</li>
22         <li>456</li>
23         <li>789</li>
24     </ol>
25 </body>
26 </html>

View Code

e.dispaly属性

none
block
inline
inline-block
 
#none(隐藏某标签)  p{display:none;}
 
注意与visibility:hidden的区别：
 
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
 
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
 
 
#block(内联标签设置为块级标签)  span {display:block;}
注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。　
 
 
#inline(块级标签设置为内联标签)  li {display:inline;}
 
 
#inline-block
display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决
    #outer{
            border: 3px dashed;
            word-spacing: -5px;
        }

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         span,a{
 8             width:100px;
 9             height:100px;
10         }
11         span{
12             background-color: yellow;
13             display: inline-block;
14         }
15         a{
16             background-color: firebrick;
17             display: inline-block;
18         }
19         div{
20         word-spacing: -5px;     #取消边距间隔
21         }
22     </style>
23 </head>
24 <body>
25     <div>
26         <span>span</span>
27         <a href="#">a</a>
28     </div>
29 </body>
30 </html>

word-spacing 取消边距间隔

四.外边距(margine)和内边距(padding)

margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding:           用于控制内容与边框之间的距离；  
Border(边框):       围绕在内边距和内容外的边框。
Content(内容):     盒子的内容，显示文本和图像。

margine(外边距)

单边外边距属性：
    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;
 
简写属性:------------------
 
margin:10px 20px 20px 10px；
 
        上边距为10px
        右边距为20px
        下边距为20px
        左边距为10px
 
margin:10px 20px 10px;
 
        上边距为10px
        左右边距为20px
        下边距为10px
 
margin:10px 20px;
 
        上下边距为10px
        左右边距为20px
 
margin:25px;
 
        所有的4个边距都是25px

五. float属性

常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .container:after{
 8             content: ".";
 9             display: block;
10             clear: both;
11             visibility: hidden;
12             line-height: 0;
13             height: 0;
14             font-size:0;
15         }
16         .box1{
17             width: 200px;
18             height: 200px;
19             background-color: red;
20             float: left;
21         }
22         .box2{
23             width: 200px;
24             height: 200px;
25             background-color: blue;
26             float: left;
27         }
28     </style>
29 </head>
30 <body>
31 <div class="container">
32     <div class="box1">box1</div>
33     <div class="box2">box2</div>
34 </div>
35 
36 <div>footer</div>
37 </body>
38 </html>

清除浮动

六.position(定位)

a. static

　　static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

b. position: relative／absolute

　　 position: relative

　　　　1. 参照物是元素之前文档流中的位置

　　　　2. 元素不脱离文档流(之前的空间位置依然存在)

　　position: absolute　　　

　　　　定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素

　　　　那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框

而不论原来它在正常流中生成何种类型的框。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         *{
 9             margin: 0px;
10         }
11 
12 
13         .div1{
14             width: 300px;
15             height: 200px;
16             background-color: red;
17         }
18          /*.div2{*/
19             /*width: 300px;*/
20             /*height: 300px;*/
21             /*background-color: rebeccapurple;        */
22              /*position: relative;*/
23              /*top:100px;*/
24              /*left:100px;*/
25          /*}*/
26 
27          .div2{
28             width: 300px;
29             height: 300px;
30             background-color: rebeccapurple;
31              position: absolute;
32              top:100px;
33              left:100px;
34          }
35 
36          .div3{
37             width: 300px;
38             height: 200px;
39             background-color: green;
40 
41         }
42 
43 
44     </style>
45 </head>
46 <body>
47 
48 <div class="outer">
49     <div class="div1"></div>
50     <div class="div2"></div>
51     <div class="div3"></div>
52     <div class="div4"></div>
53 </div>
54 
55 
56 
57 
58 </body>
59 </html>

relative absolute例子

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         *{
 9             margin: 0px;
10         }
11 
12 
13         .item1{
14             width: 200px;
15             height: 200px;
16             background-color: red;
17         }
18 
19 
20          .item2{
21             width: 200px;
22             height: 200px;
23             background-color: yellow;
24              position: absolute;
25              top:200px;
26              left:200px;
27          }
28 
29          .item3{
30             width: 200px;
31             height: 200px;
32             background-color: green;
33 
34         }
35         .outer{
36             border: 1px solid red ;
37             position: relative;
38         }
39 
40     </style>
41 </head>
42 <body>
43 
44 
45 <div class="item1"></div>
46 
47 <div class="outer">
48     <div class="item2"></div>
49     <div class="item3"></div>
50 </div>
51 
52 
53 
54 
55 </body>
56 </html>

常用设置

c. position:fixed

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .content{
 8             width: 100%;
 9             height: 1200px;
10             background-color: darkgrey;
11         }
12         .return_top{
13             width: 80px;
14             height: 80px;
15             background-color: burlywood;
16             color: white;
17             text-align: center;
18             line-height: 80px;
19             position: fixed;
20             bottom: 20px;
21             right: 20px;
22         }
23     </style>
24 </head>
25 <body>
26 
27     <div class="content"></div>
28     <div class="return_top">返回顶部</div>
29 
30 </body>
31 </html>

fixed 右下角定位

苑昊苑昊

posted @ 2017-06-27 23:40 Meet~ 阅读(295) 评论(0) 收藏举报

刷新页面返回顶部

Loading

不苦不累, 人生无味