CSS簡單使用
標籤 ： 前端技術
CSS(Cascading Style Sheet : 層疊樣式表單)用來定義網頁顯示效果. 可以解決HTML代碼對樣式定義的重複,提高後期樣式代碼的可維護性,並增強網頁的顯示效果. 即:CSS將網頁內容與顯示樣式分離,增強了顯示功能.
CSS與HTML結合
CSS與HTML結合的方式有四種:
- style屬性:
在每個HTML標籤上均有一個style屬性, 將樣式直接寫入標籤:
<div style="background-color:red;color:green;"><style/>標籤:
使用HTML的<style/>標籤,將CSS代碼在<head/>內:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IFS</title>
<style type="text/css">
div {
background-color: coral;
color: crimson;
}
</style>
</head>@import引入:
在<style/>內用@import "CSS-path";引入CSS文件:
<style type="text/css">
@import "style.css";
</style>注意: 這種方式的瀏覽器兼容性較差, 不推薦.
<link/>引入:
使用頭標籤<link/>引入CSS是最常用的結合方式:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IFS</title>
<link rel="stylesheet" href="style.css">
</head>注: 結合優先級:
根據書寫順序<由上到下,由外到內>,優先級<由低到高>,即:後加載優先級更高.
代碼規範
選擇器名稱 { 屬性名：屬性值；屬性名：屬性值；…….}
- 屬性與屬性間用
;隔開; - 屬性名與值間用
:連接; - 一個屬性的多個值用空格
隔開;
- 屬性與屬性間用
CSS選擇器
選擇器是CSS的核心,從最初的元素/class/id選擇器,演進到僞元素/僞類,以及CSS3中提供的更豐富的選擇器… 定位頁面上的任意元素開始變得愈發簡單.
基本選擇器
CSS提供的基本選擇器有三種:
- 標籤選擇器:
使用標籤名作爲選擇對象:
div {
background-color: aquamarine;
color: coral;
}- class選擇器:
可爲每個HTML標籤添加class屬性以標識該元素:
<div class="form-class">
...
</div>.form-class {
background-color: beige;
color: crimson;
}注: class可以選用多個style:
<p class="div-class div-width-class">百度/阿里/騰訊</p>
- ID選擇器
可爲每個HTML標籤添加id屬性以標識該元素:
<dl id="dl-id">
<dt>Head</dt>
<dd>Sub</dd>
</dl>#dl-id {
background-color: coral;
color: crimson;
}注:基本選擇器優先級:
style屬性 > ID選擇器 > class選擇器 > 標籤選擇器
擴展選擇器
- 關聯選擇器:
<div><p>關聯選擇器</p></div>
<p>不關聯</p>HTML代碼如上, 可以僅設置<div><p>元素內的樣式而忽略單<p>元素內樣式:
div p{
color: crimson;
}- 組合選擇器:
組合選擇器可將不同的標籤設置成相同的樣式:
div, p {
color: darkblue;
}- 僞元素選擇器
僞元素選擇器是CSS中已經提供一些樣式,可直接引用,如超鏈接狀態:
| 原始狀態 | 鼠標懸停 | 點擊 | 點擊之後 |
|---|---|---|---|
| :link | :hover | :active | :visited |
<a href="http://www.taobao.com" target="_blank">淘寶</a>/* 初始狀態 */
a:link {
background-color: blueviolet;
}
/* 懸停 */
a:hover {
background-color: aqua;
}
/* 點擊 */
a:active {
background-color: crimson;
}
/*點擊之後*/
a:visited {
background-color: yellowgreen;
}注意: 僞元素選擇器瀏覽器兼容性較差.
CSS盒子模型
Box Model:盒子模型(又叫框模型),Box Model規定了元素框處理元素內容(element content)、內邊距(padding)、邊框(border)和外邊距(margin)的方式.在HTML文檔中,每個元素（element）都有盒子模型,所以在Web世界中(特別是頁面佈局中),Box Model無處不在:
![]()
注意在進行佈局前需要將數據封裝到一塊DIV區域內.
邊框 border
border[-*] : border-width || border-style || border-color
| 邊框 | 描述 |
|---|---|
| border | 統一設置 |
| border-top | 上 |
| border-bottom | 下 |
| border-left | 左 |
| border-right | 右 |
<div class="box-div-class">
百度/阿里/騰訊
</div>
<div class="box-div-class box-right-class">
百度/阿里/騰訊
</div><style type="text/css">
.box-div-class {
width: 400px;
height: 300px;
/*盒子模型*/
border: 5px solid brown;
}
.box-right-class {
border-right: 3px dashed green;
}
</style>內邊距 padding
padding[-*] : length
同border,使用padding可以統一設置,也可上下左右分別設置:
.box-padding-class {
padding-left: 50px;
}內邊距padding又翻譯成補白.
外邊距 margin
margin[-*] : auto | length
同border,使用margin可以統一設置,也可上下左右分別設置:
.box-margin-class {
margin-top: 50px;
}外邊距margin又翻譯成邊界.
CSS佈局
佈局漂浮
float : none | left | right
| 屬性 | 作用 |
|---|---|
| left | 文本流向對象的右邊 |
| right | 文本流向對象的左邊 |
.float-left-class{
float: left;
}注意: 佈局漂浮瀏覽器兼容性較差,不推薦使用.
佈局定位
position : static | absolute | relative
| 屬性 | 說明 |
|---|---|
| static | 默認值,無特殊定位,對象遵循HTML定位規則 |
| absolute | 將對象從文檔流中拖出: 可以使用left/right/top/bottom等屬性相對於其最接近的一個具有定位設置的父對象進行絕對定位,如果不存在這樣的父對象,則依據body對象,而其層疊通過z-index屬性定義 |
| relative | 對象不可層疊(不會把對象從文檔流中拖出),與absolute一樣可以使用left/right/top/bottom數據進行相對定位. |
- absolute
.position-class{
position: absolute;
left: 50px;
top: 50px;
}- relative
.position-class{
position: relative;
left: 50px;
top: 50px;
}