Python自動化開發課堂筆記【Day13】 - 前端補充（HTML & CSS）

時間 2019-12-07

標籤 python 自動化開發課堂筆記 Day13 前端補充 html css 欄目 Python 简体版

原文原文鏈接

僞類css

1. anchor僞類：專用於控制連接的顯示效果html

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僞類python

:before    p:before       在每一個<p>元素以前插入內容     
:after     p:after        在每一個<p>元素以後插入內容     

例：p:before{content:"hello";color:red;display: block;}

選擇器的優先級api

1. CSS的繼承瀏覽器

繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中。佈局

body{color:red;}       <p>helloyuan</p>

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

p{color:green}

發現只須要給加個顏色值就能覆蓋掉它繼承的樣式顏色。因而可知：任何顯示申明的規則均可以覆蓋其繼承樣式。網站

此外，繼承是CSS重要的一部分，咱們甚至不用去考慮它爲何可以這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。ui

div{
  border:1px solid #222
}

<div>hello <p>yuan</p> </div>

2. CSS的優先級url

所謂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、若是優先權同樣，則按照在源碼中出現的順序決定，後來者居上。

五、由繼承而獲得的樣式沒有specificity的計算，它低於一切其它規則(好比全局選擇符*定義的規則)。

CSS屬性操做

1. CSS文本屬性

1. 文本顏色：color

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

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

- 十六進制值 - 如: ＃FF0000
- 一個RGB值 - 如: RGB(255,0,0)
- 顏色的名稱 - 如: red

p { color: rebeccapurple;  }

　　2. 水平對齊方式

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">Hello World</p>
　　<p><b>test justify</b></p>
</body>
</html>

　　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: oblique

text-indent: 150px;      首行縮進150px

letter-spacing: 10px;  字母間距

word-spacing: 20px;  單詞間距

text-transform: capitalize/uppercase/lowercase ; 文本轉換，用於全部字句變成大寫或小寫字母，或每一個單詞的首字母大寫

2. 背景屬性

　　1. 屬性介紹

- background-color
- background-image
- background-repeat
- background-position

background-color: cornflowerblue
 
background-image: url('1.jpg');
 
background-repeat: no-repeat;(repeat:平鋪滿)
 
background-position: right top（20px 20px）;

2. 簡寫

background:#ffffff url('1.png') no-repeat right top;

3. 邊框屬性

　　1. 屬性介紹

- border-width
- border-style (required)
- border-color

border-style: solid;
  
border-color: chartreuse;
  
border-width: 20px;

　　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>