python自動化開發-[第十三天]-前端Css續

時間  2019-12-02
標籤 python 自動化 開發 第十 三天 3天 前端 css 欄目 Python 简体版
原文   原文鏈接

今日概要:css

　　一、僞類選擇器html

　　二、選擇器優先級python

　　三、vertical-align屬性css3

　　四、backgroud屬性瀏覽器

　　五、邊框border屬性bash

　　六、display屬性ide

　　七、padding,margine(見12節css)佈局

　　八、float半脫離文檔流(見12節css)post

　　九、clear清除浮動測試

　　十、postion定位

　　十一、列表屬性

 一、僞類選擇器

 　　anchor僞類：專用於控制連接的顯示效果(hover重點)  

　　　　　　hover操做標籤必須是懸浮標籤的子元素:    .box:hover .div1{}

'''
        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>
        /*鼠標放在的狀態*/
        a:hover{
            color: red;
        }
        /*沒有接觸過的連接*/
        a:link{
            color: gold;
        }
        /*在連接上按下鼠標時的狀態*/
        a:active{
            color: greenyellow;
        }
        /*訪問過的連接*/
        a:visited{
            color: deeppink;
        }
    </style>
</head>
<body>
        <a href="#" >超連接</a>


</body>
</html>
anchor例子 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            border: 1px solid red;
            width: 500px;
            height: 500px;

        }
        .d2{
            background-color: greenyellow;
            width: 200px;
            height: 500px;
        }

        .d3{
            background-color: red;
            width: 200px;
            height: 150px;
            display: none;

        }
        .d4{
            background-color: #9a9a9a;
            width: 200px;
            height: 150px;
        }
        .d2:hover .d3{
            display: block;

        }
    </style>
</head>
<body>


    <div class="d1">

        <div class="d2">
            <div class="d3">123</div>
            <div class="d4">456</div>

        </div>


    </div>
</body>
</html>
例子2

 

　　before after僞類 : 測試階段經過css在一個標籤前或者後面添加一段內容

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

例：p:before{content:"hello";color:red;display: block;}　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        
        #c1:after{
            content: "hello";
            display: block;
            color: red;
        }
    </style>
</head>
<body>

<div id="c1">

    <p>PPP</p>

</div>
</body>
</html>
例子

 

　　效果:　　　
　　　　

 二、選擇器優先級續

　　　css的繼承：

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

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

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

p{color:green}

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

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

　　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的計算，它低於一切其它規則(好比全局選擇符*定義的規則)。
優先級  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*

        標籤選擇器：1；
        class選擇器：10；
        id選擇器：100；
        內嵌：1000

        */

      p{
          color: red;
      }
       #id1{
           color: green;
       }
      .p1{
            color: yellow;
        }


        #d2{
            color: red;
        }
        .outer .div2{
            color: blue;
        }

       .outer .div2 p{
           color: darkgreen;
       }
       .div2 .p1{
           color: yellow;
       }

        .new{
            color: darkolivegreen;
        }

        body{
            color: gold;
        }


        /*相同優先級按順序*/

       .div2 .p1{
            color: green;
        }

       .outer .p1{
           color: red;
       }

       .new p{
           color: green!important;
       }
    </style>
</head>
<body>

    <p class="p1" id="id1">I am P</p>


    <div class="outer">
        <div class="div1" id="d1">DIV1</div>

        <div class="div2" id="d2">
            <p class="p1" id="p1">PPP</p>
        </div>
    </div>

    <div class="new">
        newDIV
        <p style="color: aqua">new P</p>
    </div>




</body>
</html>
優先級示例

 

 三、vertical-align屬性

　　vertical-align是垂直方向移動,當水平居中以後，能夠用vertical-align進行垂直方向上的微調　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration:none ;
        }

        /*負數向上調,正數向下調*/
        a img{
            vertical-align: -5px;
        }
    </style>
</head>
<body>


<a href="">
    <img src="http://dig.chouti.com/images/logo.png" alt="">
    <span>XYZW3</span>
</a>
</body>
</html>
例子

　　top 對內容進行上對齊

　　middle 對內容進行居中對齊（默認）

 　   bottom  對內容進行下對齊

　　baseline 與基線對齊

　　

 四、backgroud屬性

　　屬性介紹:　　　

    • 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）;

　放一塊兒寫,在css3中不強調順序　

background: url("meinv.png") no-repeat 100px 200px;

 五、border邊框屬性

　　屬性介紹:　　　　

    • border-width
    • border-style (required)
    • border-color
border-style: solid;   線的格式,solid爲實線,dashed爲虛線
   
border-color: chartreuse;  線的顏色
  
border-width: 20px;        線的寬度

 　　簡寫：

簡寫：border: 30px rebeccapurple solid;

 　　邊框-單獨設置邊框

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;

 六、display屬性　

    • 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能夠經過以下設置解決：

　　內聯標籤設置display=inline-block就具備塊標籤的屬性(設置長寬),同時具有內聯標籤(不獨佔一行)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color: wheat;
            /*display: none;*/
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: green;
            /*display: none;*/
        }

        .block1{
            display: inline;
            background-color: gold;

        }

        .inline1{
            display: block;
            background-color: aqua;
        }

        .head{
             width: 100%;
            height: 40px;
            background-color: gold;
        }

        .head a{
            width: 40px;
            height: 30px;
            background-color: red;
            display: inline-block;

        }

          .head span{
            width: 40px;
            height: 30px;
            background-color: green;
            display: inline-block;
            margin-left: -8px;

        }
    </style>
</head>
<body>


<div class="c1"></div>
<div class="c2"></div>


<div class="block1">BLOCK</div>
<span class="inline1">INLINE</span>
<span>111</span>

<div class="head">
    <a href="">333</a>
    <span>111</span>
    <span>222</span>
</div>
</body>
</html>
練習

 七、position(定位)

 　　一、static

　　static 默認值，無定位，不能看成絕對定位的參照物，而且設置標籤對象的left、top等值是不起做用的的。

　　二、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;
        }
        .item1{
            width: 100px;
            height: 100px;
            background-color: wheat;
        }
        .item2{
            width: 100px;
            height: 100px;
            background-color: green;
            /*position: relative;*/
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .item3{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box{
            border: red 1px solid;
            /*position: relative;*/
        }
    </style>
</head>
<body>


<div class="item1"></div>

<div class="box">
     <div class="item2"></div>
     <div class="item3"></div>
</div>







</body>
</html>
練習

 

　　總結：參照物用相對定位，子元素用絕對定位，而且保證相對定位參照物不會偏移便可。

　　三、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;
        }
        .c1{
            background-color: #7cbe56;
            height: 2000px;
            width: 100%;
        }
        .c2{
            width: 150px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: #DDDDDD;
            color: black;
            position: fixed;
            bottom: 20px;
            right: 10px;
        }

    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2">返回頂部</div>
</body>
</html>
fix應用返回頂部

 八、補充　　

<!DOCTYPE html>
<html>
<head>
    <title>fortest</title>
    <style>
        div.parent{
            width: 500px;
            height: 300px;
            background: #ccc;
        }
        div.son{
            width: 100%;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>
View Code=　　

　　這時，子元素設置爲了父元素width的100%，那麼子元素的寬度也是500px；

　　可是若是咱們把子元素的width去掉以後，就會發現子元素仍是等於父元素的width。也就是說，對於塊級元素，子元素的寬度默認爲父元素的100%。

當咱們給子元素添加padding和margin時，能夠發現寬度width是父元素的寬度減去子元素的margin值和padding值。

 

　　毫無疑問，若是去掉子元素的height，就會發先子元素的高度爲0，故height是不會爲100%的，通常咱們都是經過添加內容（子元素）將父元素撐起來。　

　　（2）父：塊級元素  子：內聯元素

　　若是內聯元素是不可替換元素（除img，input之外的通常元素），元素是沒有辦法設置寬度的，也就談不上100%的問題了。 即內聯元素必須依靠其內部的內容才能撐開。

　　若是內聯元素是可替換元素（img，input，自己能夠設置長和寬），無論怎麼設置父元素的寬度和高度，而不設置img的寬和高時，img老是表現爲其原始的寬和高。

<!DOCTYPE html>
<html>
<head>
    <title>...</title>
    <style>
        div.parent{
            width: 500px;
            height: 300px;
            background: #ccc;
        }
        img{
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="parent">
        <img class="son" src="s1.jpg"></img>
    </div>
</body>
</html>

 　　由此咱們能夠發現，雖然沒有設置寬度，可是表如今瀏覽器上爲160px，它並無繼承父元素的100%獲得500px，而是根據既定的高度來等比例縮小寬度。  一樣， 若是隻設置width，那麼height也會等比例改變。   若是咱們把img的width設置爲100%，就能夠發現其寬度這時就和父元素的寬度一致了。而咱們通常的作法時，首先肯定img的父元素的寬度和高度，而後再將img的寬度和高度設置位100%，這樣，圖片就能鋪滿父元素了。　　

 <a style="overflow: hidden;"><img src="mv.png" alt="美女" style="width: 100%;height: 100%;border-radius:50% "></a>

    經過子標籤將父標籤內容鋪滿
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程