Python自动化开发课堂笔记【Day13】 - 前端补充（HTML CSS）
偽類
1.?anchor偽類：專用于控制鏈接的顯示效果
?
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代碼; }?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.top{background-color: rebeccapurple;width: 100px;height: 100px;}.bottom{background-color: green;width: 100px;height: 100px;}.outer:hover .bottom{background-color: yellow;}注意:一定是.outer:hover 控制outer里某一個標簽,否則無效.top:hover .bottom{background-color: yellow;}</style> </head><body><div class="outer"><div class="top">top</div><div class="bottom">bottom</div></div> </body> </html>
?
2.?before after偽類
?
:before p:before 在每個<p>元素之前插入內容 :after p:after 在每個<p>元素之后插入內容 例：p:before{content:"hello";color:red;display: block;}?
選擇器的優先級
1. CSS的繼承
繼承是CSS的一個主要特征，它是依賴于祖先-后代的關系的。繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它的后代。例如一個BODY定義了的顏色值也會應用到段落的文本中。
body{color:red;} <p>helloyuan</p>這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。
p{color:green}發現只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。由此可見：任何顯示申明的規則都可以覆蓋其繼承樣式。
此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。
div{border:1px solid #222 }<div>hello <p>yuan</p> </div>2. CSS的優先級
所謂CSS優先級，即是指CSS樣式在瀏覽器中被解析的先后順序。
樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：
1 內聯樣式表的權值最高 ? ? ? ? ? ? ? style=""－－－－－－－－－－－－1000；
2 統計選擇符中的ID屬性個數。 ? ? ? #id －－－－－－－－－－－－－－100
3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10
4 統計選擇符中的HTML標簽名個數。 p －－－－－－－－－－－－－-－1
按這些規則將數字符串逐位相加，就得到最終的權重，然后在比較取舍時按照從左到右的順序逐位比較。
1、文內的樣式優先級為1,0,0,0，所以始終高于外部定義。2、有!important聲明的規則高于一切。3、如果!important聲明沖突，則比較優先權。4、如果優先權一樣，則按照在源碼中出現的順序決定，后來者居上。5、由繼承而得到的樣式沒有specificity的計算，它低于一切其它規則(比如全局選擇符*定義的規則)。CSS屬性操作
1. CSS文本屬性
1.?文本顏色：color
顏色屬性被用來設置文字的顏色。
顏色是通過CSS最經常的指定：
-
- 十六進制值 - 如:?＃FF0000
- 一個RGB值 - 如:?RGB(255,0,0)
- 顏色的名稱 - 如: ?red
2. 水平對齊方式
text-align 屬性規定元素中的文本的水平對齊方式。
-
- left ? ? ?把文本排列到左邊。默認值：由瀏覽器決定。
- right ? ?把文本排列到右邊。
- center 把文本排列到中間。
- justify 實現兩端對齊文本效果。
3. 文本其他屬性
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: obliquetext-indent: 150px; 首行縮進150pxletter-spacing: 10px; 字母間距word-spacing: 20px; 單詞間距text-transform: capitalize/uppercase/lowercase ; 文本轉換，用于所有字句變成大寫或小寫字母，或每個單詞的首字母大寫2. 背景屬性
1. 屬性介紹
-
- background-color
- background-image
- background-repeat
- background-position
2. 簡寫
background:#ffffff url('1.png') no-repeat right top;3. 邊框屬性
1. 屬性介紹
-
- border-width
- border-style (required)
- border-color
2. 簡寫
border: 30px rebeccapurple solid;3.?邊框-單獨設置各邊
border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:none;4. 列表屬性
list-style-type 設置列表項標志的類型。list-style-image 將圖象設置為列表項標志。list-style-position 設置列表中列表項標志的位置。list-style 簡寫屬性。用于把所有用于列表的屬性設置于一個聲明中ist-style-type屬性指定列表項標記的類型：ul { list-style-type: square; }使用圖像來替換列表項的標記:ul {list-style-image: url('');}5. display屬性
-
- none
- block
- inline
- inline-block
1.none(隱藏某標簽)
p{display:none;}注意與visibility:hidden的區別：
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
2. block(內聯標簽設置為塊級標簽)
span {display:block;}注意：一個內聯元素設置為display:block是不允許有它內部的嵌套塊元素。
3. inline(塊級標簽設置為內聯標簽)
li {display:inline;}4.?inline-block
display:inline-block可做列表布局，其中的類似于圖片間的間隙小bug可以通過如下設置解決：
#outer{ border: 3px dashed;word-spacing: -5px;}6. float屬性
所謂的文檔流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。
1.?脫離文檔流
就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。
假如某個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>2. 非完全脫離文檔流
左右結構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>3. 父級坍塌現象
<!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>解決方案：清除浮動
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>7. Position定位
1. static
static 默認值，無定位，不能當作絕對定位的參照物，并且設置標簽對象的left、top等值是不起作用的的。
2.?position: relative／absolute
relative: 相對定位。
相對定位是相對于該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著原來的位置，即占據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。
absolute:?絕對定位。
定義：設置為絕對定位的元素框從文檔流完全刪除，并相對于最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。
另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;}.outet{/*position: relative;*/}.item{width: 200px;height:200px ;}.r1{background-color: #7A77C8; }.r2{background-color: wheat;/*position: relative;*/position: absolute;top: 200px;left: 200px;}.r3{background-color: darkgreen;}</style> </head> <body><div class="item r1"></div> <div class="outet"><div class="item r2"></div><div class="item r3"></div> </div></body> </html>3.?position:fixed
?
?fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性 定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
?
? ? ? ?在理論上，被設置為fixed的元素會被定位于瀏覽器窗口的一個指定坐標，不論窗口是否滾動，它都會固定在這個位置。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;}.back{background-color: wheat;width: 100%;height: 1200px;}span{display: inline-block;width: 80px;height: 50px;position: fixed;bottom: 20px;right: 20px;background-color: rebeccapurple;color: white;text-align: center;line-height: 50px;}</style> </head> <body><div class="back"><span>返回頂部</span> </div> </body> </html>?
轉載于:https://www.cnblogs.com/paodanke/p/7245087.html
總結
以上是生活随笔為你收集整理的Python自动化开发课堂笔记【Day13】 - 前端补充（HTML CSS）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 看看C# 6.0中那些语法糖都干了些什么
- 下一篇： HTML框架标签的使用-lt;frame