python之路-----前端之css

時間 2019-11-30

標籤 python 之路前端 css 欄目 Python 简体版

原文原文鏈接

本篇內容css

CSS 語法
css的四種引入方式
css選擇器
css屬性操做
Caution！
後臺管理佈局
css響應式佈局

一.CSS語法html

　　CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。api

  selector {
                  property: value;
                  property: value;
             ...  property: value
         
          }

　　例如：瀏覽器

二.CSS引入方式(4種)dom

　　CSS引入有4種方式:行內式，嵌入式，連接式，導入式ide

　　2.1 行內式佈局

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

<span style="background-color: red">hello world</span>

　　2.2 嵌入式字體

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

    <style>
        p {
            height: 100px;
            width: 100px;
        }
    </style>

　　2.3 連接式

　　　將一個.css文件引入到HTML文件中

<link rel="stylesheet" type="text/css" href="test\domo\css\admin.css" />

　　2.4 導入式

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

<style type="text/css">
 
          @import"mystyle.css"; 此處要注意.css文件的路徑
 
</style>

　　注意：

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

三.CSS選擇器

　　3.1 基本選擇器

　　3.2 組合選擇器

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;}

五.選擇器的優先級

　　5.1 css的繼承

　　　　繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。

　　例如一個BODY定義了的顏色值也會應用到段落的文本中。

body{color:red;}       <p>hello world</p>

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

p{color:green}

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

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

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

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

補充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color:red!important;
        }
        #te{
            color: green;
        }
    </style>
</head>
<body>
    <div>
        <h4>靜夜思</h4>
        <p id="te">牀前明月光</p>   #id的優先級高於元素，因此應該顯示綠色，可是因爲important的存在，因此被強制爲紅色
        <p>疑似地下霜</p>
        <p>舉頭望明月</p>
        <p>低頭思故鄉</p>
    </div>
</body>
</html>

important 示例

六.僞類

　　僞類用於向某些選擇器添加特殊的效果。

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

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

        a:hover（鼠標放在連接上的狀態）,用於產生視覺效果。
        
        a:visited（訪問過的連接）,用於閱讀文章，能清楚的判斷已經訪問過的連接。
        
        a:active（在連接上按下鼠標時的狀態）,用於表現鼠標按下時的連接狀態。
        
        僞類選擇器 : 僞類指的是標籤的不一樣狀態:
        
       

     a 的四種狀態: 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態
=========================================
        
        a:link {color: red} /* 未訪問的連接 */
        
        a:visited {color: green} /* 已訪問的連接 */
        
        a:hover {color: blue} /* 鼠標移動到連接上 */
        
        a:active {color: gray} /* 選定的連接 */ 格式: 標籤:僞類名稱{ css代碼; }

　　6.2 hover

hover示例

　　6.3 before 和 afer 僞類　　

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

　　該僞類能夠應用場景之一是來用解決css 父元素塌陷問題。

.clearfix:after{
  clear:both  
}

　　父元素塌陷：http://www.cnblogs.com/white-small/p/7498993.html

七.CSS屬性操做

　　7.1 文本屬性

　　　　文本顏色:color

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

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

十六進制值 - 如: ＃FF0000
一個RGB值 - 如: RGB(255,0,0)  #(red,green,blud三原色比例)
顏色的名稱 - 如:  red
RGBA值，A爲透明度

　　　　水平對齊方式:text-aline

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> 重置瀏覽器窗口大小查看 &quot;justify&quot; 是如何工做的。</p>
</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 ; 文本轉換，用於全部字句變成大寫或小寫字母，或每一個單詞的首字母大寫

文本其餘屬性

　　經常使用文本屬性有:color,text-aline,,text-decoration.line-height

line-height 能夠用來實現垂直區中的功能

示例代碼：
    <div style="width: 200px;height: 100px;line-height: 100px;border: 1px red solid" >  垂直區中 </div>

#當行高等會標籤的高度時，便可實現水平居中

line-height 應用

　　7.2 背景屬性

background-color  #背景顏色    
background-image    #背景圖片
background-repeat     #背景圖片是否重複，參數有:no-repeat,x,y
background-position    #位置

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

　　　　可縮寫爲:

background:redf url('1.png') no-repeat 20px 40px (right top);

　　　7.3 邊框屬性

border-width  #邊框寬度
border-style (required)   #邊框類型：實線，虛線。。。
border-color    #邊框顏色

border-style: solid;
  
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;

單獨設置各邊框

　　7.4 列表屬性

list-style-type         設置列表項標誌的類型。
list-style-image    將圖象設置爲列表項標誌。
list-style-position 設置列表中列表項標誌的位置。
 
list-style          簡寫屬性。用於把全部用於列表的屬性設置於一個聲明中

　　　　list-style-type屬性指定列表項標記的類型：

ul { list-style-type: square; }

　　　　使用圖像來替換列表項的標記:

ul {
     list-style-image: url('');
            }

　　ps: list-style: none 運用較多，能夠用來作頁碼等。

　　7.5 display屬性

屬性值:
    none   #不顯示
    block   #塊級   注意：一個內聯元素設置爲display:block是不容許有它內部的嵌套塊元素。
    inline   #內聯
    inline-block  #內聯，能夠設置高，寬

　　none：

<span style="display:none "></span>

　　　　注意與visibility:hidden的區別：

　　　　　　visibility:hidden能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

　　　　　　display:none能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中

　　　　消失。

　　inline-block:

　　　　display:inline-block可作列表佈局，其中的相似於圖片間的間隙小bug能夠經過以下設置解決：

#outer{
            border: 3px dashed;
            word-spacing: -5px;
        }

    <div style="border: solid;word-spacing: -5px;">
        <div style="height: 100px;width: 100px;display:inline-block;background-color:red;"></div>
        <div style="height: 100px;width: 100px;display: inline-block;background-color:green;"></div>
    </div>

inline-block 間隙

　　7.6 外邊距和內邊距

　　　　　盒子模型：　　　　　　　

　　　　　　全部HTML元素能夠看做盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。

　　　　　　 CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

　　　　　　盒模型容許咱們在其它元素和周圍元素邊框之間的空間放置元素。

　　　　　　下面的圖片說明了盒子模型(Box Model)：

margin:            用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding:           用於控制內容與邊框之間的距離；   
Border(邊框):     圍繞在內邊距和內容外的邊框。
Content(內容):   盒子的內容，顯示文本和圖像。

　　　　外邊距

　　　　　　外邊距:會逐級向上找擁有border，padding，inlineconten 屬性的祖宗元素，再根據此元素來進行外邊距的位置移動。

單邊設置：
    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;

簡寫設置：
    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>
        .parent{
            width: 300px;
            height: 300px;
            background-color: red;
            /*padding-left: 200px;
            padding-top:200px ;*/  /*設置padding後，父div長變爲500px，寬變爲500px，實現son標籤區中*/
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: green;

        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son">
        </div>
    </div>

</body>

內邊距實例

思考1:body的外邊距
       邊框在默認狀況下會定位於瀏覽器窗口的左上角，可是並無緊貼着瀏覽器的窗口的邊框，這是由於body自己也是一個盒子（外層還有html），在默認狀況下，   body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，因此body中的盒子不會緊貼瀏覽器窗口的邊框了，爲了驗證這一點，加上：
    body{
    border: 1px solid;
    background-color: cadetblue;
}

解決方法；
    *{margin: 0;}

思考2：margin collapse（邊界塌陷或者說邊界重疊）

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

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

解決方法：
    overflow: hidden;

補充

　　7.7 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元素，會爲這個框空出位置，而後按順序排列。

　　脫離文檔流的設置有三個:float,postiton

　　非徹底脫離文檔流（float）

　　　　左右結構div盒子重疊現象，通常是因爲相鄰兩個DIV一個使用浮動一個沒有使用浮動。一個使用浮動一個沒有致使DIV不是在同個「平面」上，但內容不會形成覆蓋現象，只有DIV造成覆蓋現象。

　　　　解決方案：要麼都不使用浮動；要麼都使用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>

　　二、清除浮動(推薦)。

　　clear語法：
　　clear : none | left | right | both

　　取值：
　　　　none : 默認值。容許兩邊均可以有浮動對象
　　　　left : 不容許左邊有浮動對象
　　　　right : 不容許右邊有浮動對象
　　　　both : 不容許有浮動對象

　　可是須要注意的是：clear屬性只會對自身起做用，而不會影響其餘元素。

　　把握住兩點：一、元素是從上到下、從左到右依次加載的。

二、clear: left;對自身起做用，一旦左邊有浮動元素，即切換到下一行來保證左邊元素不是浮動的，依據這一點解決父級塌陷問題。

　　三、overflow:hidden

　　　　overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，可是他是浮動在普通流之上的，能夠把普通流元素+浮動元素想象成

　　一個立方體。若是沒有明確設定包含容器高度的狀況下，它要計算內容的所有高度才能肯定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣

　　包含容器就會被撐開，清除浮動。

　　7.8 postion

　　　　7.8.1 static

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

　　　　7.8.2 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屬性定義。

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

　　7.8.3 fixed

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

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