python自動化開發-[第十二天]-前端Css
CSS基本語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。css
selector {
property: value;
property: value;
... property: value
}
例如:html
.c2{color:rebeccapurple;}
CSS的四種引入方式
一、行內式python
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優點，不推薦使用。api
<p style="background-color: rebeccapurple">hello world</p>
二、嵌入式瀏覽器
嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式以下：bash
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
三、連接式ide
將一個.css文件引入到HTML文件中佈局
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
四、導入式字體
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法以下：spa
<style type="text/css">
@import"mystyle.css"; 此處要注意.css文件的路徑
</style>
注意：
導入式會在整個網頁裝載完後再裝載CSS文件，所以這就致使了一個問題，若是網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下以後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用連接式時與導入式不一樣的是它會以網頁文件主體裝載前裝載CSS文件，所以顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，而後再顯示有樣式的網頁，這是連接式的優勢。
CSS的選擇器
一、基本選擇器
二、組合選擇器
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; }
注意，關於標籤嵌套：
通常，塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。須要注意的是，p標籤不能包含塊級標籤。
三、屬性選擇器
E[att] 匹配全部具備att屬性的E元素，不考慮它的值。（注意：E在此處能夠省略。 好比「[cheacked]」。如下同。） p[title] { color:#f00; } E[att=val] 匹配全部att屬性等於「val」的E元素 div[class=」error」] { color:#f00; } E[att~=val] 匹配全部att屬性具備多個空格分隔的值、其中一個值等於「val」的E元素 td[class~=」name」] { color:#f00; } E[attr^=val] 匹配屬性值以指定值開頭的每一個元素 div[class^="test"]{background:#ffff00;} E[attr$=val] 匹配屬性值以指定值結尾的每一個元素 div[class$="test"]{background:#ffff00;} E[attr*=val] 匹配屬性值中包含指定值的每一個元素 div[class*="test"]{background:#ffff00;}
四、選擇器的優先級
繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中。
body{color:red;} <p>hello world</p>
這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的。
p{color:green}
發現只須要給加個顏色值就能覆蓋掉它繼承的樣式顏色。因而可知：任何顯示申明的規則均可以覆蓋其繼承樣式。
此外，繼承是CSS重要的一部分，咱們甚至不用去考慮它爲何可以這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。
div{
border:1px solid #222
}
<div>hello <p>yuan</p> </div>
五、Css的優先級
所謂CSS優先級，便是指CSS樣式在瀏覽器中被解析的前後順序。樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則是：
1 內聯樣式表的權值最高 style=""－－－－－－－－－－－－1000；
2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－－100
3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10
4 統計選擇符中的HTML標籤名個數。 p －－－－－－－－－－－－－-－1
按這些規則將數字符串逐位相加，就獲得最終的權重，而後在比較取捨時按照從左到右的順序逐位比較。
一、文內的樣式優先級爲1,0,0,0，因此始終高於外部定義。 二、有!important聲明的規則高於一切。 三、若是!important聲明衝突，則比較優先權。 四、若是優先權同樣，則按照在源碼中出現的順序決定，後來者居上。 五、由繼承而獲得的樣式沒有specificity的計算，它低於一切其它規則(好比全局選擇符*定義的規則)。
CSS屬性操做
一、文本顏色color
顏色屬性被用來設置文字的顏色。
顏色是經過CSS最常常的指定：
-
- 十六進制值 - 如: ＃FF0000
- 一個RGB值 - 如: RGB(255,0,0)
- 顏色的名稱 - 如: red
p { color: red; }
二、水平對其方式
text-align 屬性規定元素中的文本的水平對齊方式。
-
- left 把文本排列到左邊。默認值：由瀏覽器決定。
- right 把文本排列到右邊。
- center 把文本排列到中間。
- justify 實現兩端對齊文本效果。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
h2 {text-align:center;}
p.publish_time {text-align:right;}
p.content {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align 水平居中</h1>
<p class="publish_time">2017 年 5 月 17 號</p>
<p class="content">
有個落拓不得志的中年人每隔三兩天就到教堂祈禱，並且他的禱告詞幾乎每次都相同。第一次他到教堂時，
跪在聖壇前，虔誠地低語：「上帝啊，請念在我多年來敬畏您的份上。讓我中一次彩票吧！阿門。」
幾天後，他又垂頭喪氣回到教堂，一樣跪着祈禱：「上帝啊，爲什麼不讓我中彩票？我願意更謙卑地來
服侍你，求您讓我中一次彩票吧！阿門。」又過了幾天，他再次出如今教堂，一樣重複他的祈禱。如此周而
復始，不間斷地祈求着。到了最後一次，他跪着：「個人上帝，爲什麼您不垂聽個人祈求？讓我中一次彩票吧！
只要一次，讓我解決全部困難，我願終身奉獻，專心侍奉您……」就在這時，聖壇上發出一陣宏偉莊嚴的聲
音：「我一直垂聽你的禱告。但是最起碼？你也該先去買一張彩票吧!」</p>
<p><b>注意：</b> 重置瀏覽器窗口大小查看 "justify" 是如何工做的。</p>
</body>
</html>
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 800px; height: 300px; background-color: wheat; line-height: 300px; text-align: right; } .btn{ width: 40px; height: 60px; background-color: darkgray; text-align: center; line-height: 60px; font-size: 30px; color: white; } </style> </head> <body> <div>HELLOHELLOHELLOHELLOHELLOHE</div> <div class="btn"> > </div> </body> </html>
/* font-size: 10px; line-height: 200px; 文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比 vertical-align:－4px 設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效 text-decoration:none text-decoration 屬性用來設置或刪除文本的裝飾。主要是用來刪除連接的下劃線 font-family: 'Lucida Bright' font-weight: lighter/bold/border/ font-style: oblique text-indent: 150px; 首行縮進150px letter-spacing: 10px; 字母間距 word-spacing: 20px; 單詞間距 text-transform: capitalize/uppercase/lowercase ; 文本轉換，用於全部字句變成大寫或小寫字母，或每一個單詞的首字母大寫 */
外邊距margine和內邊距padding
一、盒子模型
- margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
- padding: 用於控制內容與邊框之間的距離；
- Border(邊框): 圍繞在內邊距和內容外的邊框。
- Content(內容): 盒子的內容，顯示文本和圖像。
二、margin外邊距
margin-top:100px; #距離上邊距100像素
margin
-
bottom:
100px
; #距離下邊距100像素
margin
-
right:
50px
; #距離右邊距50像素
margin
-
left:
50px
; #距離左邊距50像素
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
***居中應用
margin : 0 ; auto
三、padding內邊距
單獨使用填充屬性能夠改變上下左右的填充。縮寫填充屬性也可使用，一旦改變一切都改變。
設置同margine；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ margin: 0 auto; width: 80%; } .content{ background-color: darkgrey; height: 500px; } a{ text-decoration: none; } .page-area{ text-align: center; padding-top: 30px; padding-bottom: 30px; background-color: #f0ad4e; } .page-area ul li{ display: inline-block; } .page-area ul li a ,.page-area ul li span{ display: inline-block; color: #369; height: 25px; width: 25px; text-align: center; line-height: 25px; padding: 8px; margin-left: 8px; border: 1px solid #e1e1e1; border-radius: 15%; } .page-area ul li .page-next{ width: 70px; border-radius:0 } .page-area ul li span.current_page{ border: none; color: black; font-weight:900; } .page-area ul li a:hover{ color: #fff; background-color: #2459a2; } </style> </head> <body> <div class="outer"> <div class="content"></div> <div class="page-area"> <ul> <li><span class="current_page">1</span></li> <li><a href="#" class="page-a">2</a></li> <li><a href="#" class="page-a">3</a></li> <li><a href="#" class="page-a">4</a></li> <li><a href="#" class="page-a">5</a></li> <li><a href="#" class="page-a">6</a></li> <li><a href="#" class="page-a">7</a></li> <li><a href="#" class="page-a">8</a></li> <li><a href="#" class="page-a">9</a></li> <li><a href="#" class="page-a">10</a></li> <li><a href="#" class="page-a page-next">下一頁</a></li> </ul> </div> </div> </body> </html>
邊框在默認狀況下會定位於瀏覽器窗口的左上角，可是並無緊貼着瀏覽器的窗口的邊框，這是由於body自己也是一個盒子（外層還有html），在默認狀況下， body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，因此body中的盒子不會緊貼瀏覽器窗口的邊框了，爲了驗證這一點，加上：
body{
border: 1px solid;
background-color: cadetblue;
}
解決方法：
body{
margin: 0;
}
思考2：margin collapse（邊界塌陷或者說邊界重疊）
一、兄弟div：
上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下二者margin裏最大值做爲顯示值
二、父子div：
if 父級div中沒有border，padding，inlinecontent，子級div的margin會一直向上找，直到找到某個標籤包括border，padding，inline content中的其中一個，而後按此div 進行margin；
<!DOCTYPE html> <html lang="en" style="padding: 0px"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0px; } .div1{ background-color: rebeccapurple; width: 300px; height: 300px; overflow: hidden; } .div2{ background-color: green; width: 100px; height: 100px; margin-bottom: 40px; margin-top: 20px; } .div3{ background-color:teal; width: 100px; height: 100px; margin-top: 20px; } </style> </head> <body> <div style="background-color: bisque;width: 300px;height: 300px"></div> <div class="div1"> <div class="div2"></div> <div class="div3"></div> </div> </body> </html>
解決方法：
overflow: hidden;
四、製做引導條兩種方法
1、經過padding將一個小的元素,向外擴充到指定大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } body{ font-size: 12px; } .btn{ width: 15px; height: 26px; background-color: darkgray; font-size: 25px; color: white; padding: 20px 15px ; border: 5px solid red; } </style> </head> <body> <div class="btn"> > </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } body{ font-size: 12px; } .btn{ width: 40px; height: 60px; background-color: grey; text-align: center; line-height: 60px; font-size: 25px; color: white; } </style> </head> <body> <div class="btn"> > </div> </body> </html>
Float屬性
先來了解一下block元素和inline元素在文檔流中的排列方式。
block元素一般被現實爲獨立的一塊，獨佔一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素能夠設置width、height、margin、padding屬性；
inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效
-
- 常見的塊級元素有 div、form、table、p、pre、h1～h五、dl、ol、ul 等。
- 常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
所謂的文檔流，指的是元素排版佈局過程當中，元素會自動從左往右，從上往下的流式排列。
脫離文檔流，也就是將元素從普通的佈局排版中拿走，其餘盒子在定位的時候，會當作脫離文檔流的元素不存在而進行定位。
假如某個div元素A是浮動的，若是A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(若是一行放不下這兩個元素，那麼A元素會被擠到下一行)；若是A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部老是和上一個元素的底部對齊。此外，浮動的框以後的block元素元素會認爲這個框不存在，但其中的文本依然會爲這個元素讓出位置。 浮動的框以後的inline元素，會爲這個框空出位置，而後按順序排列。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .r1{ width: 300px; height: 100px; background-color: #7A77C8; float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; /*float: left;*/ } .r3{ width: 100px; height: 200px; background-color: darkgreen; float: left; } </style> </head> <body> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div> </body> </html>
非徹底脫離文檔流(float半脫離文檔流)
左右結構div盒子重疊現象，通常是因爲相鄰兩個DIV一個使用浮動一個沒有使用浮動。一個使用浮動一個沒有致使DIV不是在同個「平面」上，但內容不會形成覆蓋現象，只有DIV造成覆蓋現象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .r1{ width: 100px; height: 100px; background-color: #7A77C8; float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; } </style> </head> <body> <div class="r1"></div> <div class="r2">region2</div> </body> </html>
>>>>解決方法：要麼都不使用浮動；要麼都使用float浮動；要麼對沒有使用float浮動的DIV設置margin樣式。
父級坍塌現象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin:0;padding:0; } .container{ border:1px solid red;width:300px; } #box1{ background-color:green;float:left;width:100px;height:100px; } #box2{ background-color:deeppink; float:right;width:100px;height:100px; } #box3{ background-color:pink;height:40px; } </style> </head> <body> <div class="container"> <div id="box1">box1 向左浮動</div> <div id="box2">box2 向右浮動</div> </div> <div id="box3">box3</div> </body> </body> </html>
例子如上：.container和box3的佈局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文本內容沒有發生覆蓋，只有div發生覆蓋現象。這個緣由是由於第一個大盒子裏的子元素使用了浮動，脫離了文檔流，致使.container沒有被撐開。box3認爲.container沒有高度（未被撐開），所以跑上去了。
>>>>解決方法：
一、固定高度
給.container設置固定高度，通常狀況下文字內容不肯定多少就不能設置固定高度，因此通常不能設置「.container」高度(固然能肯定內容多高，這種狀況下「.container是能夠設置一個高度便可解決覆蓋問題。
或者給.container加一個固定高度的子div：
<div class="container">
<div id="box1">box1 向左浮動</div>
<div id="box2">box2 向右浮動</div>
<div id="empty" style="height: 100px"></div>
</div>
<div id="box3">box3</div>
二、經過父級將飄起來的兒子拉下來,也能夠解決父級坍塌
<div class="container">
<div id="box1">box1 向左浮動</div>
<div id="box2">box2 向右浮動</div>
<div style="clear: both"></div>
</div>
<div id="box3">box3</div>
二、清除浮動(推薦)。
clear語法：
clear : none | left | right | both
取值：
none : 默認值。容許兩邊均可以有浮動對象
left : 不容許左邊有浮動對象
right : 不容許右邊有浮動對象
both : 不容許有浮動對象
可是須要注意的是：clear屬性只會對自身起做用，而不會影響其餘元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .r1{ width: 300px; height: 100px; background-color: #7A77C8; float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; float: left; clear: left; } .r3{ width: 100px; height: 200px; background-color: darkgreen; float: left; } </style> </head> <body> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div> </body> </html>
把握住兩點：一、元素是從上到下、從左到右依次加載的。
二、clear: left;對自身起做用，一旦左邊有浮動元素，即切換到下一行來保證左邊元素不是浮動的，依據這一點解決父級塌陷問題。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ border: 1px solid red; } .c1{ width: 100px; height: 100px; background-color: gold; float: left; } .c2{ width: 100px; height: 100px; background-color: green; float: left; } .footer{ background-color: #7fff0c; height: 50px; } /*.c3{*/ /*clear: both;*/ /*}*/ /*經過after方法添加clear*/ .clearfix:after{ content: ""; display: block; clear: both; } </style> </head> <body> <div class="box clearfix"> <div class="c1"></div> <div class="c2"></div> </div> <div class="footer"></div> </body> </html>
解決父級塌陷:
''' .clearfix:after { <----在類名爲「clearfix」的元素內最後面加入內容； content: "."; <----內容爲「.」就是一個英文的句號而已。也能夠不寫。 display: block; <----加入的這個元素轉換爲塊級元素。 clear: both; <----清除左右兩邊浮動。 visibility: hidden; <----可見度設爲隱藏。注意它和display:none;是有區別的。 visibility:hidden;仍然佔據空間，只是看不到而已； line-height: 0; <----行高爲0； height: 0; <----高度爲0； font-size:0; <----字體大小爲0； } .clearfix { *zoom:1;} <----這是針對於IE6的，由於IE6不支持:after僞類，這個神 奇的zoom:1讓IE6的元素能夠清除浮動來包裹內部元素。 整段代碼就至關於在浮動元素後面跟了個寬高爲0的空div，而後設定它clear:both來達到清除浮動的效果。 之因此用它，是由於，你沒必要在html文件中寫入大量無心義的空標籤，又能清除浮動。 <div class="head clearfix"></div> '''
三、overflow:hidden
overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，可是他是浮動在普通流之上的，能夠把普通流元素+浮動元素想象成一個立方體。若是沒有明確設定包含容器高度的狀況下，它要計算內容的所有高度才能肯定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。
- 1. python自動化開發-[第十二天]-前端html
- 2. python自動化開發-[第二十三天]-初識爬蟲
- 3. python自動開發之（算法）第二十七天
- 4. Python自動化開發課堂筆記【Day12】 - 前端（CSS）
- 5. python自動化開發-[第十天]-線程、協程、socketserver
- 6. python自動化開發-[第十六天]-bootstrap和django
- 7. python自動化開發-[第二十四天]-高性能相關與初識scrapy
- 8. python自動化開發-[第二十五天]-scrapy進階與flask使用
- 9. web前端學習-第二十二天
- 10. 前端自動化 模塊化開發
- 更多相關文章...
- • Maven 自動化部署 - Maven教程
- • W3C CSS 活動 - W3C 教程
- • PHP開發工具
- • RxJava操作符（十）自定義操作符
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. python自動化開發-[第十二天]-前端html
- 2. python自動化開發-[第二十三天]-初識爬蟲
- 3. python自動開發之（算法）第二十七天
- 4. Python自動化開發課堂筆記【Day12】 - 前端（CSS）
- 5. python自動化開發-[第十天]-線程、協程、socketserver
- 6. python自動化開發-[第十六天]-bootstrap和django
- 7. python自動化開發-[第二十四天]-高性能相關與初識scrapy
- 8. python自動化開發-[第二十五天]-scrapy進階與flask使用
- 9. web前端學習-第二十二天
- 10. 前端自動化 模塊化開發