Python全棧開發之1三、CSS

時間  2019-12-14
標籤 python 開發 css 欄目 Python 简体版
原文   原文鏈接

1、css簡介

　　CSS 是 Cascading Style Sheets的縮寫，用來設計網頁的樣式佈局，以及大小來適應不一樣的屏幕等，使網頁的樣式和網頁數據分離，css

2、導入css

導入css有4種方式：html

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

2.嵌入式
          嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式以下：api

         <head>瀏覽器

         　　<style type="text/css">佈局

               　　...此處寫CSS樣式字體

        　　</style>url

        </head>spa

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

          <style type="text/css">

                    @import"mystyle.css"; 此處要注意.css文件的路徑

         </style>

4.連接式
            也是將一個.css文件引入到HTML文件中    <link href="mystyle.css" rel="stylesheet" type="text/css"/>

注意：

      導入式會在整個網頁裝載完後再裝載CSS文件，所以這就致使了一個問題，若是網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下以後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用連接式時與導入式不一樣的是它會以網頁文件主體裝載前裝載CSS文件，所以顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，而後再顯示有樣式的網頁，這是連接式的優勢。此外行內的樣式等級最高

3、css選擇器

  1. 標籤選擇器 　　     p { color:green; }
  2. id選擇器              #info { background:#ff0; } 
  3. class屬性選擇器    .info { background:#ff0; }
  4. *通用元素選擇器    匹配全部的標籤

上面4種是基礎的選擇器，都是選擇單一的標籤，若是要選擇多元素的話就要使用組合選擇器下面來看一下經常使用的組合選擇器

  1.  多元素選擇器，同時匹配多個元素，元素之間用逗號分隔      　
  2.  後代元素選擇器，好比 E F 匹配全部屬於E元素後代的F元素，E和F之間用空格分隔
  3. 子元素選擇器，好比 E>F 匹配全部E元素的子元素F
  4. 毗鄰元素選擇器，E+F 匹配全部緊隨E元素以後的同級元素F  

此外還有屬性選擇器，下面來看一下有哪些屬性選擇器

 　　 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[att|=val]    匹配全部att屬性具備多個連字號分隔（hyphen-separated）的值、其中一個值以「val」開頭的E元素，主要用於lang屬性，

                          好比「en」、「en-us」、「en-gb」等等                          p[lang|=en] { 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;}

       p:before         在每一個 <p> 元素的內容以前插入內容                     p:before{content:"hello";color:red}

       p:after           在每一個 <p> 元素的內容以前插入內容                     p:after{ content:"hello"；color:red}

　　　　 .a p{                               後代選擇器，這裏間將全部的p標籤都給選擇出來
            background-color: blue;
            font-size: 40px;
        }
        .a>p {                                子代選擇器，這裏將 <p>hello 3</p> 選擇出來
            background-color: blue;
            font-size: 40px;
        }
        .b+p {                      兄弟選擇器，將同級的標籤選擇出來
            background-color: blue;
            font-size: 40px;
        }
        [class] {                   屬性選擇器，將clas的屬性都選擇出來
            background-color: blue;
        }
        [class='b'] {                將class = 'b'的選擇出來
            background-color: blue;
        }
        [class |='b'] {                匹配具備連字符 - 的以b開頭的class屬性
            background-color: blue;
        }
        [class ^='b'] {                 匹配以b開頭的class屬性
            background-color: blue;
        }
        [class ~= 'c'] {                匹配具備多個空格分隔的值、其中一個值等於'c'的class屬性
            background-color: blue;
        }
        p:before {
            content:'666' ;
            color: blue;
        }

除了上面說的幾種選擇器，還有一種特殊的僞類選擇器，專用於控制連接的顯示效果：

　　a:link（沒有接觸過的連接）,用於定義了連接的常規狀態。

　　a:hover（鼠標放在連接上的狀態）,用於產生視覺效果。

　　a:visited（訪問過的連接）,用於閱讀文章，能清楚的判斷已經訪問過的連接。

　　a:active（在連接上按下鼠標時的狀態）,用於表現鼠標按下時的連接狀態。

注意順序這4個僞類的順序 lvha

4、css經常使用的屬性　 

1  顏色屬性：

     <div style="color:blueviolet">ppppp</div>

     <div style="color:#ffee33">ppppp</div>

     <div style="color:rgb(255,0,0)">ppppp</div> 

     <div style="color:rgba(255,0,0,0.5)">ppppp</div>

 

2  字體屬性：

　　font-size: 20px/50%/larger

　　font-family:'Lucida Bright'

　　font-weight: lighter/bold/border/

　　<h1 style="font-style: oblique">老男孩</h1>

 

3  背景屬性：

background-repeat: no-repeat;(repeat:平鋪滿)

background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom)

      簡寫：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

              <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

 

4   文本屬性：

　　font-size: 10px;

　　text-align: center;橫向排列

　　line-height: 200px;文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比

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

　　letter-spacing: 10px;

　　word-spacing: 20px;

　　direction: rtl;從右向左，默認從左向右

　　text-transform: capitalize;

　

5   邊框屬性：

　　border-style: solid;

　　border-color: chartreuse;

　　border-width: 20px;

簡寫：border: 30px rebeccapurple solid;

 

6   列表屬性

ul,ol{

　　    list-style: decimal-leading-zero; 0開頭的數字標記。(01, 02, 03, 等。)

         list-style: none;　　　　　　　

　　　 list-style: circle;　　　　　　　  標記是空心圓

         list-style: upper-alpha;　　　   大寫字母

         list-style: disc;　　　　　　　　默認。標記是實心圓

}

7  dispaly屬性

  • none
  • block
  • inline

 

8  盒子模型

　　  padding:用於控制內容與邊框之間的距離；

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

 內邊距會影響盒子的大小，外邊距不會影響盒子的大小,須要設置 練習： 300px*300px的盒子裝着100px*100px的盒子，分別經過margin和padding設置將小盒子移到大盒子的中間

注意1、     

　　邊框在默認狀況下會定位於瀏覽器窗口的左上角，可是並無緊貼着瀏覽器的窗口的邊框，這是由於body自己也是一個盒子（外層還有html），在默認狀況下，body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，因此body中的盒子不會緊貼瀏覽器窗口的邊框了。

注意2、

　　margin collapse（邊界塌陷或者說邊界重疊）

     外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當咱們上下排列一系列規則的塊級元素（如段 落P）時，那麼塊元素之間由於外邊距重疊的存在，段落之間就不會產生雙倍的距離。 

     一、兄弟div：

　　　　上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下二者margin裏最大值做爲顯示值

     二、父子div  ：  

     　　若是父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個標籤包括　　　border，padding，inline content 中的其中一個，而後按此div進行margin ；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="1.css">-->
    <style>
        /*div {*/
            /*height: 800px;*/
            /*width: 800px;*/
            /*background-color: bisque;*/
            /*background-image: url('1.jpg');*/
            /*background-repeat:no-repeat ;*/
            /*background-position: right;*/

            /*background: no-repeat url('1.jpg') bisque bottom;*/
            /*background: no-repeat url('1.jpg') bisque;*/
            /*color: rgba(0,0,0,0.5);*/


            /*font-size: 60px;*/
            /*font-family: Arial;*/
            /*font-weight: lighter;*/

            /*letter-spacing: 10px;*/
            /*!*text-align: center;*!*/
            /*text-transform: capitalize;*/
            /*direction: rtl;*/

            /*border: 30px black solid;*/
        /*}*/
        /*ul {*/
            /*list-style: disc;*/
        /*}*/
        body {
            /*border: 1px solid black; 注意效果*/
            /*background-color: crimson;*/
            margin: 0px;
        }
        #outer {
            height: 300px;
            width: 300px;
            border: 1px solid;
            /*padding: 1px;*/
            background-color: blue;
            margin: 50px;
        }
        #outer1 {
            height: 300px;
            width: 300px;
            border: 1px solid;
            background-color: aquamarine;
            margin: 50px;
        }
        #inner {
            height: 100px;
            width: 100px;
            background-color: gold;
            margin-left: 100px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div id="outer">
        <!--<p>hello</p>   注意這種效果爲何-->
        <div id="inner">
        </div>
    </div>
    <div id="outer1">

    </div>

</body>
</html>

6、float　　

　　浮動能夠理解爲讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次，會覆蓋標準流的東西。

　　假如某個div元素A是浮動的，若是A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(若是一行放不下這兩個元素，那麼A元素會被擠到下一行)；若是A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部老是和上一個元素的底部對齊。

div的順序是HTML代碼中div的順序決定的。靠近頁面邊緣的一端是前，遠離頁面邊緣的一端是後。

　　元素浮動以前，也就是在標準流中，是豎向排列的，而浮動以後能夠理解爲橫向排列。

　　有浮動固然有清除浮動，清除浮動用clear，對於CSS的清除浮動(clear)，必定要牢記只能影響使用清除的元素自己，不能影響其餘元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>

    <style>
        body{
            /*border: 1px solid;*/
            margin: 0px;
        }
        #a{
            height: 100px;
            width: 100px;
            background-color: darkorange;
            /*float: left;*/
            /*float: right;*/
        }
         #b{
            height: 200px;
            width: 200px;
            background-color: red;
             float: right;
             /*clear: both;*/
        }
         #c{
            height: 100px;
            width: 300px;
            background-color: blue;
             float: left;
        }
         /*#d{*/
            /*height: 100px;*/
            /*width: 300px;*/
            /*background-color: black;*/
        /*}*/
    </style>
</head>


<body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
</body>
</html>

7、position　

1 static

　　默認值 static：無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不 會被應用。 說到這裏咱們不得不提一下一個定義——文檔流，文檔流其實就是文檔的輸出順序， 也就是咱們一般看到的由左      到右、由上而下的輸出形式，在網頁中每一個元素都是按照這個順序進行排序和顯示的，而float和position兩個屬性能夠將元素從文檔流脫離出來顯示。 默認值就是讓元素繼續按照文檔流顯示，不做出任何改變。

2 fixed

   在理論上，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，它都會固定在這個位置。

   fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊經過z-index屬性定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，由於這是兩個不一樣的流，一個是浮動流，另外一個是「定位流」。可是 relative 卻能夠。由於它本來所佔的空間仍然佔據文檔流。

3 relative

　　對象遵循正常文檔流，不脫離文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊經過z-index屬性定義。

若是設定 position:relative，就可使用 top,bottom,left和 right 來相對於元素在文檔中應該出現的位置來移動這個元素。[意思是元素實際上依然佔據文檔 中的原有位置，只是視覺上相對於它在文檔中的原有位置移動了] 

4 absolute

　　absolute：對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊經過z-index屬性定義。 當指定 position:absolute 時，元素就脫離了文檔[即在文檔中已經不佔據位置了]，能夠準確的按照設置的 top,bottom,left 和 right 來定位了。 若是一個元素絕對定位後，其參照物是以離自身最近元素是否設置了相對定位，若是有設置將以離本身最近元素定位，若是沒有將往其祖先元素尋找相對定位元素，一直找到html爲止。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>

    <style>
        body{
            /*border: 1px solid;*/
            margin: 0px;
        }
        #father{
            position: relative;
            left: 100px;
            top: 100px;
            height:800px;
            width: 600px;
            background-color: maroon;
        }
        #a{
            height: 100px;
            width: 100px;
            background-color: darkorange;
            /*position: relative;*/
            /*position: fixed;*/
        }
         #b{
            height: 200px;
            width: 200px;
            background-color: red;
             position: absolute;
             left: 100px;
             top: 100px;
             /*position: relative;*/
             /*left: 100px;*/
             /*top: 100px;*/
        }
         #c{
            height: 100px;
            width: 300px;
            background-color: blue;
             /*float: left;*/
        }
         #d{
            height: 300px;
            width: 400px;
            background-color: black;
        }
    </style>
</head>


<body>
<div id="father">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
</div>

</body>
</html>　

雜項

一、css文檔從上到下執行，以最後一個爲準

a {
    font-size: 10px;
}

b {
    font-size: 40px;
}

<p class = "a b"> ddd </p>

二、有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt 切記

三、父div裏面的子div都float,

　　方法一、在最後加一個div而後添上屬性 clear：both　

　　方法二、定義一個通用屬性，

　　　　　clearfix:afte{

   　　　　 content: '111';    　　　　display: block;    　　　　clear: both;    　　　　/* visibility 隱藏佔高度*/    　　　　visibility: hidden;    　　　　height: 0;    　　　　/*display: none;隱藏不佔高度*/}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程