python/CSS運用

本文轉載自查看原文 2017-05-17 16:37 2500

python/CSS運用

CSS稱為層疊樣式表

主要對所有的html文件進行渲染

CSS規則由兩個主要的部分構成：選擇器，以及一條或多條聲明（1，屬性選擇器（通過選擇器查找標簽）2，操作標簽（屬性標簽））

例如：

1 h1{color：red；font-size：20px；}

CSS的四種引入方式

（1）.行內式

行內式是在標記的style屬性中設定SS樣式。這種方式沒有體現出CSS的優勢，不推薦使用

例如：

1 <p style="color: red;background-color:gold;">heelo</p>

（2）.嵌入式

嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽中格式

例如：

1 <style>
2    
3    p{background-color: red;color: gold;}
4 </style>

（3）.鏈接式

將一個.css文件引入到HTML文件中

例如：

1 <link rel="stylesheet" href="css1.css">

（4）.導入式（導入式有數量限制）

將一個獨立的.CSS文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法如下：

1 <style>
2     @import "css1.css";
3    
4 </style>

注意：導入式會在整個網頁加載完畢后再加載CSS文件，因此就導致一個問題，如果網頁比較大或者延遲有點高，就會給用戶帶來體驗不完美，和渲染缺陷。

CSS選擇器

基本選擇器分為（標簽選擇器、ID選擇器、class選擇器、通配選擇器）

標簽選擇器：

1 <style>
2 p{color：red;}
3 </style>

ID選擇器：

1 <style>
2 #p1{color: brown}
3 </style>

class選擇器：

1 <style>
2 .pp{color:green}
3 </style>

通配選擇器：

1 <style>
2 *{color:yellow}
3 </style>

組合選擇器：

1.（outer,okl）多元素選擇器，同時匹配所有outer元素或okl元素，E和F之間用逗號分隔

例如：

1 <style>
2 .outer,.okl{color:aquamarine;}
3 </style>

2.(outer,okl)后代元素選擇器，匹配所有屬於outer后代的okl，outer和okl之間用空格分隔

例如：

1 <style>
2 .outer okl{color:red;} 
3 </style>

3.子元素選擇器（子級元素），匹配所有E元素的子元素

例如：

1 <style>
2 .outer>okl{color:red;}
3 </style>

4.毗鄰元素選擇器(必須是緊鄰着，如果中間有別的元素就沒有執行成功，向下緊挨着)，匹配所有緊隨outer元素之后的統計元素okl

例如：

1 <style>
2 .outer+okl{color;red;}
3 </style>

5.普通兄弟選擇器（以破折號分隔）這個查找就不是緊挨着進行查找的

例如：

<style>
.outer~p{color:red;}
</style>

注意：關於標簽套嵌，一般，塊級標簽可以包含內聯標簽和塊級標簽，但是內倆標簽只能包含內倆標簽（例外<p>不能包含塊級標簽）

屬性選擇器：

1、E[att]匹配所有具有att屬性的E元素，不考慮它的值。

例如：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         [class]{color:red;}
 8  
 9     </style>
10 </head>
11 <body>
12 <div class="d1">ppp</div>
13 
14 </body>
15 </html>

2、E[att=value] 匹配所有att屬性等於value的E元素

例如：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         div[class='d2']{
 9             color:green;
10         }
11 
12     </style>
13 </head>
14 <body>
15 <div class="d2">php</div>
16 </body>
17 </html>

3、E[att~=vlaue]匹配所有att具有多個空格分隔的值、其中一個值等於value的E元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         div[class~='qq']{
 9             color:blue;
10         }
11 
12     </style>
13 </head>
14 <body>
15 <div class="d3 qq">ppp</div>
16 
17 </body>
18 </html>

4、E[att^=vlaue]匹配屬性值以指定開頭的每個元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         div[class^='ww']{
 9             color:lightblue;
10         }
11 
12     </style>
13 </head>
14 <body>
15 
16 <div class="wwffwefwer">pph</div>
17 
18 </body>
19 </html>

5、E[att$=vlaue]匹配屬性值以指定結尾的每個元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         div[class$='rr']{
 9             color:darkviolet;
10         }
11        
12     </style>
13 </head>
14 <body>
15 
16 <div class="wwffwefwerr">hph</div>
17 
18 </body>
19 </html>

6、E[att*=vlaue]匹配屬性值中包含指定值的每個元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         div[class*='l']{color: darkgoldenrod;}
 9     </style>
10 </head>
11 <body>
12 
13 <div class="wffwlefwer">hph</div>
14 </body>
15 </html>

CSS繼承：

繼承試試CSS的一個主要特征，它是依賴於祖先后代的關系的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的后代。例如一個BODY定義了顏色值也會應用到段落的文本中。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             color: green;
 9         }
10         p{color:yellow;}
11     </style>
12 </head>
13 <body>
14 
15 <p>hello</p>
16 </body>
17 </html>

body{color：green；} 設置了顏色

<p> hello </p> 這時文本的顏色就繼承了body顏色

這段文字都繼承了由body{color：red；}樣式定義的顏色，然而CSS繼承性的權重是非常低的，是比普通的元素的權重還要低的0

p{color:green;} 現在給文本加個顏色就直接覆蓋的繼承下來的顏色

繼承也是有限制的，有一些屬性不能被繼承（border、margin、padding、background）等

CSS優先級：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .h1 .w1{color:red;}
 8         .h2 .w1{color:green;}
 9         /*同樣是class標簽，那個在最后那個優先級高*/
10         #h .w1{color:blue;}
11         /*ID 的優先級高於標簽，就執行ID的顏色設置*/
12         .w1{color: darkgoldenrod;}
13         /*標簽的優先級最低，所以不執行*/
14         .w1{color: darkgoldenrod!important;}
15         /*這個！important 不管你什么優先級就執行我*/
16     </style>
17 
18 </head>
19 <body>
20 
21 <div class="h1 h2" id="h">
22     hello
23     <p class="m1">Meet</p>
24     <div class="w1">
25         world
26         <p class="m2">Ken</p>
27         <div class="t3">tt</div>
28     </div>
29 </div>
30 <div>alex</div>
31 
32 </body>
33 </html>

所謂優先級，就是指CSS樣式在瀏覽器中被解析的先后順序

樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：

特殊：!importan 不管什么優先級就執行我

1.內聯樣式表的權值最高 style---------------1000

2.統計選擇符中的ID屬性個數 #id-----------------100

3.統計選擇符CLASS屬性個數 .class---------------10

4.統計選擇符中的HTML標簽名個數p---------------1

按這些規則將數字逐位相加，就得到最終的權重，然后在比較取舍是按照左到右的順序逐位比較

!importan、style、ID、class、標簽

CSS屬性操作：

css text

文本顏色

顏色屬性被用來設置文字的顏色

顏色是通過CSS最經常的指定

十六進制值--------#FF1FFFFF

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{color: #FF1FFF;}   
 8     </style>
 9 </head>
10 <body>
11 <p>hello</p>
12 </body>
13 </html>

一個RGB值--------RGB(212,121,212)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{color:RGB(212,121,212);}
 8     </style>
 9 </head>
10 <body>
11 <p>hello</p>
12 </body>
13 </html>

標簽{color：red；}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{color:red;}
 8     </style>
 9 </head>
10 <body>
11 <p>hello</p>
12 </body>
13 </html>

文本水平對齊方式：

text-align 屬性規定元素中的文本的水平對齊方

left 把文本排列到左邊。默認值：游瀏覽器決定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{text-align: left}
 8     </style>
 9 </head>
10 <body>
11 <p>hello</p>
12 </body>
13 </html>

right 把文本排列到右邊

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{text-align: right}
 8     </style>
 9 </head>
10 <body>
11 <p>hello</p>
12 </body>
13 </html>

center 把文本排列到中間

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{text-align: center}
 8     </style>
 9 </head>
10 <body>
11 <p>hello</p>
12 </body>
13 </html>

justify 實現倆端對齊文本效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{text-align: justify}
 8     </style>
 9 </head>
10 <body>
11 <p>
12    hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
13     hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
14     hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
15     hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
16     hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
17     hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
18     hellohellohellohellohellohellohello
19 </p>
20 </body>
21 </html>

背景屬性

屬性介紹

簡寫：

background:#ffffff url('hello.jpg') no-repeat right top;

background-color 設置背景顏色

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{background-color: red}
 8     </style>
 9 </head>
10 <body>
11 <p>hello</p>
12 </body>
13 </html>

backgrou-image：url （‘hello.jpg’）設置背景圖片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{  width: 640px;
 8             height: 413px;
 9             background-image: url("hello.jpg")}
10     </style>
11 </head>
12 <body>
13 <p>hello</p>
14 </body>
15 </html>

background-repeat （平鋪）no-repeat（不平鋪）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{  width: 100%;
 8             height: 100%;
 9             background-image: url("hello.jpg");
10             background-repeat:repeat;
11 
12         }
13 
14     </style>
15 </head>
16 <body>
17 <p>hello</p>
18 </body>
19 </html>

background-position：right top（20px 20px）設置背景圖左對齊聚左邊邊框和頂部邊框個 20px

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{  width: 100%;
 8             height: 100%;
 9             background-image: url("hello.jpg");
10             background-repeat:no-repeat;
11             background-position:right 20px,20px;
12 
13         }
14 
15     </style>
16 </head>
17 <body>
18 <p>hello</p>
19 </body>
20 </html>

邊框屬性

簡寫：

border：30px rebeccapurple solid；

border-width 設置框的寬度

border-style（solid）設置框體為（實體）

border-color 設置顏色

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

邊框單獨設置各邊

border-top-style：dotted；設置頂邊框

border-right-style：solid；設置左邊框

border-bottom-style：dotted；設置底部框

border-left-style：none；設置右邊框不顯示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7        div{
 8            width: 80px;
 9            height: 80px;
10            border-width: 3px;
11            border-color: red;
12            border-top-style: dotted;
13            border-right-style: solid;
14            border-bottom-style: dotted;
15            border-left-style: none;
16        }
17     </style>
18 </head>
19 <body>
20 <div>hello</div>
21 </body>
22 </html>

列表屬性

list-style-type 設置列表項標志的類型

list-style-image 將圖像設置為列表項標志

list-style-position 設置列表中列表項標志的位置

list-style 簡寫屬性。用於把所有用於列表的屬性設置一個聲明中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         ul{list-style-type:square}   設置 列表項標志的類型
 8         ul{list-style-image: url("hello.jpg")}  將圖像設置為列表項標志
 9         ul{list-style-position: inside}  設置列表中列表項標志的位置
10         ul{list-style: url("hello.jpg")}  簡寫屬性。用於把所有用於列表的屬性設置一個聲明中
11     </style>
12 </head>
13 <body>
14       <ul>
15           <li>11</li>
16           <li>22</li>
17           <li>33</li>
18       </ul>
19 </body>
20 </html>

屬性指定列表項標記的類型

ul{list-style-type：square；}

使用圖像來替換列表項的標記

ul{list-style-imge：url（‘hello.jpg’）}

dispaly屬性：

none 不顯示（隱藏某標簽）

block 塊級

inline 內聯

inline-block 擁有塊級的屬性（可以設置寬，高）也不是單獨占一行

注意與visibility：hidden的區別

visibility：hidden是隱藏內容並且占着網頁空間

display：none 是隱藏內容還不占網頁空間（隱藏的內容下邊會替補上來）

block（內聯標簽設置為塊級標簽）

a{dispaly:block}

inline（塊級標簽設置為內聯標簽）

div{dispaly：inline}

inline-block（有着塊級標簽的屬性（可以設置寬，高）也有着內聯標簽的屬性（不獨占一行））

內聯標簽不能設長寬

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             background-color: red;
 9             display: inline;}
10         a{
11             background-color:green;
12             display: block;
13         }
14         span{
15             background-color: aqua;
16             display: inline-block;
17         }
18     </style>
19 </head>
20 <body>
21   <div>tt</div>
22   <a>bb</a>
23   <span>dd</span>
24 </body>
25 </html>

外邊框和內邊框：

ｍａｒｇｉｎ　用於控制元素與元素之間的距離；ｍａｒｇｉｎ的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的的目的

ｐａｄｄｉｎｇ　用於控制內容與邊框之間的距離

Ｂｏｒｄｅｒ（邊框）　圍繞在內邊距和內容外的邊框

Ｃｏｎｔｅｎｔ（內容）　盒子的內容，顯示文本和圖像

ｍａｒｇｉｎ（外邊距）

單邊外邊距屬性：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{background-color: #2459a2;
 8             width: 500px;
 9             height: 300px;
10             margin-top:100px;
11             margin-bottom: 100px;
12             margin-left: 50px;
13             margin-right: 100px;
14         }
15     </style>
16 </head>
17 <body>
18 
19   <div class="c1">guo</div>
20 
21 </body>
22 </html>

padding（內邊距）

單獨使用填充屬性可以改變上下左右的填充，縮寫填充屬性也可以使用，一旦改變都改變

float屬性

浮動標准：

會判斷上一個元素是否浮動，如果浮動緊貼着漂浮，

否則，與上一個元素保持垂直顯示

所謂的文檔流，指的是元素排版布局過程中，元素會自動從左到右，從上往下的流式排列

脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位

清除浮動（clear）

none 默認值。允許兩邊都可以有浮動對象

left 不允許左邊有浮動對象

right 不允許右邊有浮動對象

both 不允許有浮動對象

注意：clear 是清除浮動，清除的是自己本身

position 定位

static 默認值，無定位，不能當做絕對定位的參照物，並且設置標簽對象的left、top等值是不起作用的

psoition：relastive

參照物是元素之前文檔流的位置

元素不脫離文檔流（之前的空間位置依然存在）

psoition：absolute

參照物是元素之前文檔流的位置

元素不脫離文檔流（之前的空間位置依然存在）

psoition：

定位使用

父元素：psoition：relastive

子元素：psoition：absolute

脫離文檔流的屬性：

float（部分脫離）

position：absolute

position：fixed

詳細請查看http://www.cnblogs.com/yuanchenqi/articles/6856399.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Html之CSS的簡單運用運用Python計算Π的多少（大致計算） python函數名的運用 css中clip-path屬性的運用運用python繪制小豬佩奇 Python中for循環語句的運用 PYTHON REQUESTS的安裝與簡單運用酷酷的CSS3三角形運用 Python 運用Paramiko實現批量巡檢 Python的Cookie如何正確操作運用呢？案例詳解