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,左4
padding內邊距
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>