檔案管理和使用者組許可權
CSS選擇器
1、id選擇器
2、class選擇器
3、標籤選擇器
4、層級選擇器（空格）
5、組合選擇器（逗號）
6、屬性選擇器（中括號）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/ id選擇器 --> /
i1{
height: 48px;
background-color: red;
}
/ class選擇器 最常用 /
.div{
height: 48px
background-color: aqua;
}
/ 標籤選擇器 /
span{
color: red;
background-color: blue;
}
/ 層級選擇器 組合選擇器 span標籤下面所有div標籤顏色改變 層級通過空格/
span div{
color: aqua;
background-color: red;
}
/ class 層級選擇器 層級通過空格/
.c1 div{
background-color: #336699;
height: 48px;
}
/ id 層級選擇器 層級通過空格/
i2 div{
background-color:
height: 48px;
}
/ 組合選擇器 id z1 z2 z3 共用一套css樣式 組合 通過逗號/
z1,#z2,#z3{
background-color: chocolate;
height: 48px;
}
/ 組合選擇器 class s1 s2 s3 共用一套css樣式 組合 通過逗號/
.s1,.s2,.s3{
background-color: darkmagenta;
height:48px;
}
/ 屬性選擇器 對選擇到的標籤 在通過屬性進行篩選 可以和層級選擇器連用/
div[s='dsx']{
background-color
height: 48px;
}
</style>
</head>
<body>
<!-- css style: 裡面的寫的就叫做css 每一個樣式的間隔用； 全部相同的時候引用class-->
<div style="height: 48px;</div>
<div style="height: 48px;background-color: #6699CC"></div>
<div style="height: 48px;background-color: #6699CC"></div>
<!-- css class引用-->
<div id="i1"></div>
<div class="div"></div>
<div class="div"></div>
<!-- 全域性標籤選擇器 -->
<span>標籤選擇器</span>
<!-- 層級選擇器 組合標籤選擇器 -->
<span>
<div>組合標籤選擇器</div>
</span>
<!--層級選擇器 class選擇器下的div標籤 -->
<div class="c1">
<div></div>
</div>
<!--層級選擇器 id選擇器下的div標籤-->
<div id="i2">
<div></div>
</div>
<!-- id組合選擇器 -->
<div id="z1"></div>
<div id="z2"></div>
<div id="z3"></div>
<!-- class組合選擇器 -->
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<!-- 屬性選擇器 -->
<div s="csf"></div>
<div name="nn"></div>
</body>
</html>
CSS優先順序
標籤中style優先順序最高，其次在程式碼中就近找，也就是重下往上找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* css 優先順序 */
.c1{
background-color: darkred;
height: 48px;
}
.c2{
background-color: black;
height: 48px;
}
</style>
</head>
<body>
<div class="c1 c2" style="</div>
</body>
</html>
/* 引入CSS檔案 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入css樣式 -->
<link rel="stylesheet" href="tmp.css">
</head>
<body>
<div class="c1 c2" style="background-color: aqua"></div>
</body>
</html>
CSS屬性
height、width、font-size、font-weight、text-align、line-height、float、display、margin、padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin: 0;">
<!-- 邊框 border：寬度 實線還是虛線 顏色-->
<div style="height: 48px;border: 1px solid red"></div>
<!-- 邊框 border 上下左右邊框 都可單獨配置 -->
<div style="height: 48px;border-left: 1px dotted red"></div>
<!-- height：高 width：寬 -->
<div style="height: 48px;width: 48px;border: 1px solid red"></div>
<!-- 寬高的設定可以是指定的畫素 也可以百分比 -->
<div style="height: 48px;width: 80%;border: 1px solid red"></div>
<!-- 字型大小 font-size: 14px font-weight: 字型加粗 bold-->
<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;font-weight: bold"></div>
<!-- 平行方向左右居中 text-align: center -->
<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;text-align: center">塵世風</div>
<!-- 垂直方向居中 line-height：垂直方向要根據標籤高度-->
<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;text-align: center;line-height: 48px">塵世風</div>
<!-- float 浮動 塊級標籤浮動後 相當於分層 都像左浮動 塊級標籤會便在一行 如果超過寬度超過100則會換行-->
<div style="width: 20%;float: left">1</div>
<div style="background-color: red;width: 20%;float:left;">2</div>
<div style="background-color: black;width: 20%;float:right;">3</div>
<!-- 塊及標籤的佔滿100%是相對來說，相對與他外層的div -->
<div style="width: 400px;height: 400px;border: 1px solid black;">
<div style="width: 100px;height: 40px;background-color: red;float:left;"></div>
<div style="width: 100px;height: 40px;background-color: blue;float:left;"></div>
<div style="width: 100px;height: 40px;background-color: red;float:left;"></div>
<div style="width: 100px;height: 40px;background-color: blue;float:left;"></div>
<div style="width: 100px;height: 40px;background-color: red;float:left;"></div>
</div>
<!-- display 屬性 展示屬性 塊級標籤和行內標籤之間切換的屬性 display:inline 塊級標籤轉換為行內標籤-->
<div style="height: 100px;background-color: black;display: inline">外聯標籤</div>
<!-- display：block 內聯標籤轉換為塊及標籤-->
<span style="height: 100px;background-color: red;display: block;">內聯標籤</span>
<!-- 行內標籤：無法設定高度、寬度、padding、margin-->
<span style="background-color: blue;width: 100px;height: 100px;">塵世風</span>
<!-- 通過display:inline-block 可以完美的解決這個問題 他既有行內標籤的自己多大就佔多大的特性 又有塊級標籤使用 寬、高、內外邊距的特性-->
<span style="background-color: blue;width: 100px;height: 100px;display: inline-block;">塵世風</span>
<!-- 讓標籤消失 display：none-->
<span style="background-color: #336699;display: none">我不顯示的</span>
<!-- 外邊距 margin 內邊距 padding-->
<!-- margin 外邊距 自己針對外圍的div產生變化 外邊距撐大外層 -->
<div style="border: 1px solid red;height: 100px">
<div style="background-color: blue;height: 70px;margin-top: 30px"></div>
</div>
<!-- padding 內邊距 自身的邊距增加 從上到下增加 內邊距擴大自身 -->
<div style="border: 1px solid red;height: 100px">
<div style="background-color: blue;height: 70px;padding: 10px">內邊距增加</div>
</div>
</body>
</html>
例子
各個網站的header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin: 0;">
<div class="p-header" style="width: 100%;">
<div style="width: 980px;margin: 0 auto">
<div style="height: 48px;line-height: 48px;float: left">收藏本站</div>
<div style="height: 48px;line-height: 48px;float: right">登入</div>
<div style="height: 48px;line-height: 48px;float: right">註冊</div>
<!-- clear:both 清除浮動，將內層div拉下來從而撐開外層div-->
<div style="clear: both"></div>
</div>
</div>
</body>
</html>