Python自動化開發課堂筆記【Day12】 - 前端（CSS）

時間 2019-12-07

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

原文原文鏈接

CSS語法css

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

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

CSS的四種引入方式api

1.行內式

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

<p style="background-color: rebeccapurple">hello yuan</p>


2.嵌入式

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>


3 連接式

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

<link href="mystyle.css" rel="stylesheet" type="text/css"/>


4.導入式

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

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

注意：

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

CSS選擇器佈局

組合選擇器

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


屬性選擇器 
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;}

CSS屬性操做字體

　　1. css textspa

文本顏色：color

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

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

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

p { color: rebeccapurple;  }


文本顏色：color

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

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

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

p { color: rebeccapurple;  }


文本其它屬性

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. 外邊距(margine)和內邊距(padding)code

盒子模型

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


margine(外邊距)

單邊外邊距屬性：

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；

3. float屬性orm

基本浮動規則

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


<!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>