標籤：highlight 資訊隱藏 映像 注意 source margin 陰影 www border
1. 概述css是英文Cascading Style Sheets的縮寫,稱為層疊樣式表，用於對頁面進行美化。
存在方式有三種：元素內聯、頁面嵌入和外部引入，比較三種方式的優缺點。
文法：style = ‘key1:value1;key2:value2;‘
在標籤中使用 style=‘xx:xxx;‘單獨加在某個標籤上，style增加其他屬性需要以分號分隔；
<div style="background-color:darkgrey;height: 100px;width:100px">我是div</div>
在頁面中嵌入 < style type="text/css"> </style >塊
<head><meta charset="UTF-8"><title>Title</title><style>div{background-color:darkgrey;height: 100px;width:100px;}</style></head>
將.css檔案引入到HTML檔案中，建立一個.css檔案，將css檔案放入link標籤中
<head><meta charset="UTF-8"><title>Title</title><link href="mystyle.css" rel="stylesheet" type="text/css"/></head>
將一個獨立的.css檔案引入HTML檔案中，匯入式使用CSS規則引入外部CSS檔案，<style>標記也是寫在<head>標記中
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">@import"mystyle.css"; #此處要注意.css檔案的路徑</style></head>
注意：import 會先解析頁面所有資訊，先不會渲染頁面，等待所有資訊載入後再渲染頁面，如果載入慢會出現無渲染頁面，導致使用者體驗不好，推薦使用嵌入式和連結式
2. CSS選取器2.1 基礎選取器2.1.1 通用元素選取器通用元素選取器，匹配任何元素
*{color: darkgrey;}
2.1.2 標籤選取器
匹配所有使用XX標籤的元素；
例如，需要選擇所有標籤為div的元素設定樣式
div{color: grey;background-color: antiquewhite;}
2.1.3 class選取器
.info 或E.info ：class屬性選取器，匹配所有class屬性中包含info的元素，class屬性可以重複，即多個class屬性相同的元素；
.cs1{color: grey;background-color: antiquewhite;}<div class="cs1">我是div1標籤</div><div class="cs1">我是div2標籤</div><p class="cs1">我是p標籤</p> <!-- 以上三個標籤都會變成.cs1的樣式 -->
2.1.4 id選取器
#info或E#info :id屬性選取器，匹配所有id屬性等於info的元素
#cs1{color: grey;background-color: antiquewhite;}<div id="cs1">我是div1標籤</div><div class="cs1">我是div2標籤</div> <!-- 以上標籤，只有id=cs1的標籤會變成#cs1的樣式-->
2.2 組合選取器2.2.1 多元素選取器
E,F：多元素選取器，同時匹配所有E標籤元素或F標籤元素，E和F之間用逗號分隔
div,p{color: grey;background-color: antiquewhite;}<div id="cs1">我是div1標籤</div><p class="cs1">我是p標籤</p><span>我是span</span> <!-- 以上標籤，除span標籤，即div和p標籤都會變成設定的樣式-->
2.2.2 後代元素選取器
E F：後代元素選取器，匹配所有屬於E標籤元素後代的F標籤元素，即所有類似形式的所有後代，子子孫孫，E和F之間用空格分隔;
div p{color: grey;background-color: antiquewhite;}<div id="cs1"> <p class="cs1">我是p1標籤</p> <div class="cs3"> <p class="cs1">我是p2標籤</p> <div class="cs2"> <p id="cs1">我是p3標籤</p> </div> </div></div> <!-- 以上標籤，p1、p2、p3均會變成設定的樣式 --><!-- 擴充：可以結合基礎選取器使用，例如div #cs1，div .cs1等 -->
2.2.3 子項目選取器
E > F ：子項目選取器，匹配所有E元素的子項目F，只匹配到子項目，子項目的子項目匹配不到;
<style>#outer>.c1{color: aqua;}</style><div id="outer"> <p class="c1">p1.....</p> <div class="c2"> <p class="c1">p2....</p> </div></div> <!-- 以上標籤，p1會變成設定的樣式，p2不會變，即兒子輩的會變，兒子輩的後代不會變-->
2.2.4 毗鄰元素選取器
E + F:毗鄰元素選取器，匹配所有緊隨E元素之後的同級元素F ，即只匹配挨著的下一個F元素，如不相鄰也不起作用;
<style>#outer+.c1{color: aqua;}</style><p class="c1">p1....</p><div id="outer"></div><p class="c1">p2.....</p><div class="c1">div1...</div> <!-- 以上標籤，p1不會變更樣式，p2為挨著的下一個class=c1的元素，所以p2會變更樣式，div1的class屬性也滿足但並未挨著id=outer的元素，故不起作用 -->
2.3 屬性選取器
根據屬性進行篩選匹配，只有第一個input標籤匹配上對應的樣式
<head> <meta charset="UTF-8"> <title>Title</title> <style> input[name="James"]{width: 20px;height: 20px;} </style></head><body> <input type="text" name="James"> <input type="text"> <input type="password"></body>
3. 常用屬性3.1 顏色屬性
color：
①英文單詞形式，例如：red，yellow
②編碼形式，例如：#cc3399，如雙重可簡寫#c39
③基調顏色透明度設定，例如：rgb（255,255,255,0.5），red、green、blue三色透明度設定,最後一個值設定透明度
3.2 字型屬性font-size: 20px/50%/larger 設定字型大小；
font-family:‘Lucida Bright‘ 文本的字型系列；
font-weight: lighter/bold/border/ 字型的粗細；
font-style:normal/oblique/italic 文本的字型樣式；
3.3 背景屬性font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(238, 238, 238);">background-image: 背景圖片；
background-repeat：平鋪方式，no-repeat 不平鋪，repeat 平鋪滿；
background-size: 圖片大小設定，auto；
background-position：center 上下左右置中；left center左側上下置中；top，bottom，right類似；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div style="height: 100px;"></div> <div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red;"></div></body></html>
3.4 文字屬性
text-align：center 文本置中
line-height：xxpx；行高 ，針對文本處理
width：xxpx；寬 %50
height：xxpx；高 %50
text-indent：xxpx 首行縮排，基於父元素
letter-spacing：xxpx；字母與字母之間距離
word-spacing：xxpx ；單詞之間距離
direction：rt1
text-transform：capitalize；將單字首大寫
min-height:設定預設最小高度
height：auto！important 以此樣式為準
vertical-align：xxpx;垂直置中
opacity：0.3 透明度
3.5 CSS樣式邊框border-style：solid；邊框樣式
border-color：red；邊框顏色
border-width：1px；邊框寬度
border-radius：20%；邊框變成圓角
|
border |
在一個聲明中設定所有的邊框屬性。 |
|
border-bottom |
在一個聲明中設定所有的下邊框屬性。 |
|
border-bottom-color |
設定下邊框的顏色。 |
|
border-bottom-style |
設定下邊框的樣式。 |
|
border-bottom-width |
設定下邊框的寬度。 |
|
border-color |
設定四條邊框的顏色。 |
|
border-left |
在一個聲明中設定所有的左邊框屬性。 |
|
border-left-color |
設定左邊框的顏色。 |
|
border-left-style |
設定左邊框的樣式。 |
|
border-left-width |
設定左邊框的寬度。 |
|
border-right |
在一個聲明中設定所有的右邊框屬性。 |
|
border-right-color |
設定右邊框的顏色。 |
|
border-right-style |
設定右邊框的樣式。 |
|
border-right-width |
設定右邊框的寬度。 |
|
border-style |
設定四條邊框的樣式。 |
|
border-top |
在一個聲明中設定所有的上邊框屬性。 |
|
border-top-color |
設定上邊框的顏色。 |
|
border-top-style |
設定上邊框的樣式。 |
|
border-top-width |
設定上邊框的寬度。 |
|
border-width |
設定四條邊框的寬度。 |
|
outline |
在一個聲明中設定所有的輪廓屬性。 |
|
outline-color |
設定輪廓的顏色。 |
|
outline-style |
設定輪廓的樣式。 |
|
outline-width |
設定輪廓的寬度。 |
|
border-bottom-left-radius |
定義邊框左下角的形狀。 |
|
border-bottom-right-radius |
定義邊框右下角的形狀。 |
|
border-image |
簡寫屬性，設定所有 border-image-* 屬性。 |
|
border-image-outset |
規定邊框映像地區超出邊框的量。 |
|
border-image-repeat |
映像邊框是否應平鋪(repeated)、鋪滿(rounded)或展開(stretched)。 |
|
border-image-slice |
規定映像邊框的向內位移。 |
|
border-image-source |
規定用作邊框的圖片。 |
|
border-image-width |
規定圖片邊框的寬度。 |
|
border-radius |
簡寫屬性，設定所有四個 border-*-radius屬性。 |
|
border-top-left-radius |
定義邊框左上方的形狀。 |
|
border-top-right-radius |
定義邊框右下角的形狀。 |
|
box-decoration-break |
|
|
box-shadow |
向方框添加一個或多個陰影。
|
3.6 CSS樣式浮動
正常文檔流：將元素（標籤）在進行排版布局時按照從上到下、從左至右的順序分布排版的流；
脫離文檔流：將元素從文檔流中取出，進行覆蓋，其他元素會按文檔流中不存在該元素重新布局；
float 浮動標籤屬性（非完全脫離）：
假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(如果一行放不下這兩個元素，那麼A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。
注意：當初float被設計的時候就是用來完成文本環繞的效果，所以文本不會被擋住，這是float的特性，即float是一種不徹底的脫離文檔流方式。
float：left，right，both
清除浮動： clear : none | left | right | both
none : 預設值。允許兩邊都可以有浮動物件
left : 不允許左邊有浮動物件
right : 不允許右邊有浮動物件
both : 不允許有浮動物件
<style> #div4{ border:solid 1px lavender; background-color: rebeccapurple; height: 100px; } #div1{ background-color: darkolivegreen; height: 100px; width: 980px; margin: auto; } #div2{ border-left: solid 1px lavender; height: 100px; width: 100px; background-color: darkgray; float: left; } #div3{ border-left: solid 1px lavender; height: 100px; width: 100px; background-color: darkgray; float: left; } #clear{ clear:both; }</style><div id="div4"> <div id="div1"> <div id="div2">div2</div> <div id="div3">div3</div> </div> <div id="clear"></div></div>
註：div2和div3使用float浮動起來，如想將div4的樣式顯示出來，需增加一個clear標籤將架子撐起來，清除浮動
清除浮動第二種方法，overflow：hidden 將溢出的資訊隱藏
overflow：auto;不光隱藏並出現捲軸
python css基本操作
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
