Web前端之HTML+CSS基礎（二）
CSS
Cascading Style Sheets 疊層樣式表
隨著HTML的成長，為了滿足頁面設計者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。於是CSS便誕生了。
CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。
CSS 能夠對網頁中元素位置的排版進行畫素級精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力。
css樣式的寫法
行內樣式
<div style="width:200px;height:300px;border:1px solid "></div>
內嵌樣式
寫在head裡
<head>
<style type="text/css"> 定義css樣式
</style>
</head>示例
<head> <style type="text/css"> /*2.class類名選擇器*/ .block { width: 500px; height: 500px; background: deeppink; } /*3.id選擇器*/ #di { width: 100px; height: 100px; background: orange; } /*4.屬性選擇器*/ div[class="b"][id="bb"]{ width: 300px; height: 500px; background: black;} /*5.子父元素選擇器*/ #ulmenu{ border: 1px solid silver; list-style: none; } #ulmenu li{ color: red; } </style> </head> <body> <div class="block"></div> <div id="di"></div> <div class="b" id="bb"></div> <ul id="ulmenu" > <li>1 <ul> <li>2</li> <li>2</li> <li>2</li> <li>2</li> </ul> </li> <li>2</li> <li>3</li> <li>4</li> </ul>
外部樣式
寫在head裡
<head>
<link rel="stylesheet " href="index.css ">
</head>示例：
<head> <link rel="stylesheet " href="index.css "> </head> <body> <div id="b_3"></div> <div id="centerBlock" style="width:800px"></div> </body> /*index.css 檔案內的程式碼：*/ #b_3{ width: 200px; height: 200px; border: 1px solid red; } #centerBlock{ border: 1px solid green; height: 400px; }
三種寫法的特點
- 行內樣式：作用範圍僅限於當前標籤，範圍小，結構表現混在一起。
- 內嵌樣式：樣式只作用於當前檔案，沒有真正實現結構分離。
- 外部樣式：作用範圍是當前站點，誰呼叫誰生效，範圍廣，真正實現結構樣式相分離。
基本寫法
選擇器：{
屬性：值；
屬性：值
}
選擇器
- 標籤選擇器
寫法：標籤{屬性：值；}
div{
width: 100px;
height: 300px;
border: 1px solid black;
}特點：標籤選擇器定義以後，會將頁面所有的元素都執行這個標籤樣式。
- class選擇器
寫法：自定義類名{屬性：值；}
.block {
width: 500px;
height: 500px;
background: deeppink;
}特點：
1）誰呼叫，誰生效
2）一個標籤可以有多個類選擇器
3）多個標籤可以呼叫同一個類選擇器
類選擇器命名規則：
1）不能用純數字或者數字開頭來定義類名。
2）不能使用特殊符號(_ 除外)來定義類名。
3）不推薦使用漢字來定義類名。
4）不推薦使用標籤名、屬性、屬性值來定義類名。
- id選擇器
寫法：#自定義名{屬性：值；}
#di {
width: 100px;
height: 100px;
background: orange;
}特點：
1）誰呼叫，誰生效
2）一個標籤只能呼叫一個id選擇器
3）一個id選擇器在一個頁面智慧呼叫一次
- 屬性選擇器
寫法：
div[class="b"][id="bb"]{
width: 300px;
height: 500px;
background: black;
}-
字父元素選擇器
#ulmenu{
border: 1px solid silver;
list-style: none;
}
#ulmenu li{
color: red;
}權重和優先順序
優先順序：! important>行間樣式>id>class>標籤選擇器>萬用字元
優先順序一樣，後面覆蓋前面 class和屬性一級
css權重（可疊加，256進位制不是十進位制）
！important infinity 正無窮
行間樣式 1000
Id 100
Class|屬性|偽類 10
標籤選擇器|偽元素 1
萬用字元 0相對定位
通常情況下，元素的position屬性的值預設static，也就是說沒有定位。無法給元素設定top，bottom，left，right，Z-index屬性。
- 格式 position：relative；
- 設定相對定位以後，元素相對於它在文件流中位置的起始點進行移動
- 元素可以設定left等屬性，在偏移以後，仍佔據著未偏移前的空間
- 該元素的偏移不會影響其他元素的位置，如果有重疊的部分，它會重疊在其他元素之上（浮起來），而不是擠開。可以用Z-index屬性設定堆疊順序。
絕對定位
- 格式 position：absolute；
- 元素可設定left等屬性，在偏移後不佔據原來的空間
- 絕對定位的元素需要一個參照物，參照父元素（逐漸向上），若無父元素沒有定位，則會相對於文件body來定位。
盒子模型
width和height指內容區域的寬度和高度
元素實際寬度=左右外邊距+左右邊框+左右內邊框+width；
元素實際高度=上下外邊距+上下邊框+上下內邊距+height；
margin外邊距
1.圍繞在元素邊框周圍的空白區域
2.語法：margin：value；
屬性：
margin：value 四個方向的外邊距
margin-left： 左外邊距
margin-right： 右外邊距
margin-top： 上外邊距
margin-bottom： 下外邊距取值：1）具體數值（px）
2）% 百分比
3）值為auto，由瀏覽器自動計算 左右外邊距，上下無效
允許讓塊級元素 ， 呈現出水平居中的表現效果，前提：塊級元素必須設定寬度
3.舉例
margin：0； 取消預設外邊距
margin：10px 20px ； 上下各10畫素外邊距，左右各20畫素外邊距
margin：5px 10px 15px； 上外邊距：5畫素，左右外邊距：10，下外邊距：15
margin：1px 2px 3px 4px ； 上 1，右 2，下 3，左4padding內邊距
1.內容區域與邊框之間的區域
2.語法：
屬性：
padding：value 四個方向的內邊距
padding-left：1px； 左內邊距
padding-right：2px； 右外邊距
padding-top：3px； 上內邊距
padding-bottom：4px； 下內邊距取值：數值，%
用法與margin相似
border邊框
定義四條邊框的格式： 寬度，樣式，顏色
border: width style color;
- width:寬度
- style:邊框線條樣式
solid ：實線 dotted ：虛線 dashed ：虛線 - color:顏色 ，還可以取值為透明 transparent
偽類
常用偽類的狀態有
:link 選擇未訪問的連結
：visited 選擇已訪問的連結
：hover 選擇滑鼠指標浮動在其上的元素
：active 選擇活動的連結
：focus 選擇獲取焦點的輸入欄位示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
/*未訪問時是黑色*/
color: black
}
a:visited{
/*瀏覽過後是紅色*/
color: red;
}
a:hover{
/*滑鼠移入是綠色*/
color: green;
}
</style>
</head>
<body>
<a href="#">超連結1</a>
<a href="#">超連結2</a>
</body>
</html>