Python開發【前端】：CSS，python前端css
css樣式選取器
標籤上設定style屬性：
<body> <div>直接在div裡寫相對應的樣式
id選取器
<head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ background-color: #2459a2; height: 48px; } </style></head><body> <div id="i1">第一層</div></body>把樣式寫到head裡面，以#開頭命名，調用對應樣式在div裡用id屬性指定相應的id名
class選取器（最常用）
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: #2459a2; height: 48px; } </style></head><body> <div class="c1">第一層</div> <div class="c1">第二層</div> <div class="c1">第三層</div></body>把樣式寫到head裡面，以.開頭命名，調用對應樣式在div裡用class屬性指定相應的類名，可以多個div調用
標籤選取器
<head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: #2459a2; height: 48px; } </style></head><body> <div >第一層</div> <div >第二層</div> <div >第三層</div></body>標籤選取器，設定div樣式，則body裡所有的div標籤內的內容都會應用此內容
關聯選取器（層級選取器）
<head> <meta charset="UTF-8"> <title>Title</title> <style> span div{ background-color: #2459a2; height: 48px; } </style></head><body> <div >第一層</div> <span> <div >span裡的div</div> </span> <div >第三層</div></body>只讓span裡面的div標籤應用樣式，可多層嵌套
組合選取器
<head> <meta charset="UTF-8"> <title>Title</title> <style> #i1,#i2,#i3{ background-color: #2459a2; height: 48px; } </style></head><body> <div id="i1">第一層</div> <div id="i2">第一層</div> <div id="i3">第一層</div></body>組合選取器，加,號，相同樣式多命名
屬性選取器
<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>根據屬性進行篩選匹配，只有第一個input標籤匹配上對應的樣式
css樣式引用
css樣式優先順序
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; color: white; } .c2{ background-color:black; } </style></head><body> <div class="c2 c1">如果樣式不衝突，則樣式都應用，如果樣式有衝突，style樣式優先順序最大，其次其他的安裝編寫的順序，越靠近越優先檔案方式引用樣式
定義樣式並儲存到commons.css檔案
.c1{background-color: red;color: white;}.c2{background-color:black;}引用commons.css檔案
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="commons.css"></head><body> <div class="c2 c1">css樣式邊框基本邊框
<body> <div>邊框其他樣式<body> <div>-》》點擊顯示效果
CSS樣式浮動
初識float
<body> <div>-》》點擊顯示效果float測試頁
<head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 38px; background-color: #dddddd; line-height: 38px; } </style></head><body>-》》點擊顯示效果註：<body><div>CSS樣式display
塊級標籤和行內標籤相互轉換
<body> <div>-》》點擊顯示效果註：display:inline 轉換為行內標籤；display：block轉換為塊級標籤；另還有display：none不顯示
行內標籤：無法設定高度，寬度，padding margin
塊級標籤：設定高度，寬度，padding margin<body> <span>-》》點擊顯示效果註：display:inline-block 既有inline的屬性（預設自己有多少佔多少）又有block的屬性（可以設定高度、寬度、padding、margin）
CSS樣式邊距
外邊距margin
<body> <div>-》》點擊顯示效果註：margin-top：25px表示外邊距，子邊框與父邊框top之間的距離為25px
內邊距padding
<body> <div>-》》點擊顯示效果註：padding-top：25px表示內邊距，子邊框內自己與top之間的距離為25px
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
