#CSS 裝飾器引入
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小米商城標題欄</title> <style> /*去除邊距*/ body{ margin: 0; padding: 0; } body{ color: red; } #title { background-color:rgb(0,30,50); width:%100; height: 40px; } #title a{ color:white; text-decoration:none; margin-left:8px; front-size:14px; } #title span{ color:red; margin-left:6px } #title a:hover{ color:lawngreen; } .div1{ width: 700px; height: 40px; line-height: 40px; float:left; text-align: center; } .div2{ width: 300px; height: 40px; line-height: 40px; float:right; text-align: center; font-size: 14px; } </style> </head> <body> <div id="title"> <!-- 前一段 --> <div class="div1"> <a href="https://www.mi.com/index.html">小米商城</a><span>|</span> <a href="https://www.miui.com/">MIUI</a> <span>|</span> <a href="https://iot.mi.com/index.html">loT</a> <span>|</span> <a href="https://i.mi.com/">金融</a> <span>|</span> <a href="https://i.mi.com/#/">雲服務</a> <span>|</span> <a href="https://youpin.mi.com/">有品位</a> <span>|</span> <a href="https://shuidi.mi.com/">小愛開放平台</a> <span>|</span> <a href="https://b.mi.com/?client_id=180100031058&masid=17409.0358">企業服務</a> <span>|</span> <a href="https://www.mi.com/appdownload/">下載app</a> <!-- <span>|</span> --> <!-- <a href="https://i.mi.com/">Select Region</a> <span>|</span> --> </div> <!-- 后一段 --> <div class="div2"> <a href="https://account.xiaomi.com/pass/serviceLogin?callback=https%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252F%253Fclient_id%253D180100041086%26sign%3DMzU2MGI1MjBiZWJhOTQyYTdmZmRhZDViM2NkMTFiMWQwZDAyMjE4ZQ%2C%2C&sid=mi_eshop&_bannerBiz=mistore&_qrsize=180">登錄</a> <a href="https://cn.account.xiaomi.com/pass/register">注冊</a> <a href="https://account.xiaomi.com/pass/serviceLogin?callback=https%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Forder.mi.com%252Fmessage%252Flist%26sign%3DMjEyY2NkOTg5NjAzZmMyNWUyMDBhNzE2MDczNWJkYzFkMTg1Yjc0MQ%2C%2C&sid=mi_eshop&_bannerBiz=mistore&_qrsize=180">通知消息</a> <a href="https://account.xiaomi.com/pass/serviceLogin?callback=https%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Forder.mi.com%252Fmessage%252Flist%26sign%3DMjEyY2NkOTg5NjAzZmMyNWUyMDBhNzE2MDczNWJkYzFkMTg1Yjc0MQ%2C%2C&sid=mi_eshop&_bannerBiz=mistore&_qrsize=180">購物車</a> </div> </div> </body> </html>
效果展示:
一、CSS簡介
CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素，給HTML設置樣式，讓它更加美觀。
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。
二、css語法
（1）選擇器 {聲明} ;聲明包含：屬性+屬性值
（2）注釋 （ctrl + /）
/*這是注釋*/
三、CSS的三種引入方式
1、行內樣式
<p style="color: red">Hello world.</p>
2、內部樣式
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>
3、外部樣式
<head> <meta charset="UTF-8"> <title>Title</title> #現在寫的這個.css文件是和你的html是一個目錄下，如果不是一個目錄，href里面記得寫上這個.css文件的路徑 <link href="mystyle.css" rel="stylesheet" type="text/css"/> </head>
四、四種選擇器（元素（標簽），id,class，*）
1、元素選擇器
格式：
標簽名 {屬性1:屬性值1;屬性2:屬性值3...}
如： p{color:red}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素選擇器</title> <style type="text/css"> 標簽名 {屬性1:屬性值1;屬性2:屬性值3...} p{ color:red; } </style> </head> <body> <p> 我是標簽</p> </body> </html>
2、id選擇器
格式
# 對應的value值{屬性1:屬性值1;屬性2:屬性值3... }
如：#div{color:green;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id選擇器</title> <style type="text/css"> #div{ color:green; } </style> </head> <body> <p> 我是標簽</p> <div id="div">我被id選擇器選中了就變色</div> </body> </html>
3、class（類）選擇器
格式：
. class對應的值{屬性1:屬性值1;屬性2:屬性值3...}
如：.c1{color:#DB5D7BFF; }
4、通用選擇器（*表示選指責所有的標簽）
* {
color: white;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通用選擇器</title> <style type="text/css"> *{ color:orange; } </style> </head> <body> <p>我是p</p> <div>我是div</div> <br> <span>我是span</span> <div>fd <p>我是內部的p</p> fd</div> </body> </html>
五、組合選擇器
1、子孫選擇器( )[空格]
格式：
初始定位（P） 進一步定位(P2){屬性1:屬性值1;屬性2:屬性值3... } 其中p2屬於P內部元素
如：#div{color:green;}
#div1 p{
color:blue;
}
<!DOCTYPE html> <html lang="en"> <head> <meta harset="UTF-8"> <title>后代(子孫)選擇器</title> <style type="text/css"> #div1 p{ color:blue; } </style> </head> <body> <div id="div1"> <div >我是兒子div <div><p>我是孫子p</p></div> </div> <span>我是兒子span</span> <p>我是孫子p</p> </div> </body> </html>
2、兒子選擇器（>）
/*選擇所有緊接着<div>元素之后的<p>元素*/ div+p { color:red }
<!DOCTYPE html> <html lang="en"> <head> <meta harset="UTF-8"> <title>兒子選擇器</title> <style type="text/css"> #div1 > p{ color:blue; } </style> </head> <body> <div id="div1"> <div >我是兒子div <div><p>我是孫子p</p></div> </div> <span>我是兒子span</span> <p>我是孫子p</p> </div> </body> </html>
3、毗鄰選擇器(選擇臨近的下面一個標簽，隔有其他標簽，不被選擇)
格式;
div+p {
margin: 5px;
}
<!DOCTYPE html> <html lang="en"> <head> <meta harset="UTF-8"> <title>兒子選擇器</title> <style type="text/css"> #div1 + p{ color:blue; } </style> </head> <body> <p>我是上面的p</p> <div id="div1"> <div >我是兒子div <div><p>我是孫子p</p></div> </div> <span>我是兒子span</span> <p>我是孫子p</p> </div> <p>我是下面的p</p> <p>我是下面的第二p</p> </body> </html>
4、弟弟選擇器
/*i1后面所有的兄弟p標簽*/
#i1~p {
border: 2px solid royalblue;
}
<!DOCTYPE html> <html lang="en"> <head> <meta harset="UTF-8"> <title>選擇器</title> <style type="text/css"> #c1 ~p{ color:blue; } </style> </head> <body> <p>我是的p1</p> <p id=c1>我是的p2</p> <p>我是的p3</p> <p>我是的p4</p> </body> </html>
5、屬性選擇器（了解）
/*用於選取帶有指定屬性的元素。*/
p[title] {
color: red;
}
/*用於選取帶有指定屬性和值的元素。*/
p[title="213"] {
color: green;
}
6、title 模糊匹配
每個標簽里面都可以可一個title屬性，這個屬性就是鼠標移動到這個標簽上，就顯示出一個title屬性的值
還有下面這些不太常用的，正則的寫法，屬性值以什么開頭，以什么結尾等
/*找到所有title屬性以hello開頭的元素*/
[title^="hello"] {
color: red;
}
/*找到所有title屬性以hello結尾的元素*/
[title$="hello"] {
color: yellow;
}
/*找到所有title屬性中包含（字符串包含）hello的元素*/
[title*="hello"] {
color: red;
}
/*找到所有title屬性(有多個值或值以空格分割)中有一個值為hello的元素：*/
[title~="hello"] {
color: green;
}
六、選擇器分組和嵌套
1、分組
2、嵌套
七、特殊選擇器
1、偽類選擇器
2、偽元素選擇器
八、選擇器的優先級