寫在前面：這是一篇學(xué)習(xí)CSS的筆記铸磅。重點(diǎn)在于羅列CSS的知識(shí)點(diǎn)确徙。
CSS
㈠ CSS入門
-
什么是CSS腮出？
CSS 指層疊樣式表 (Cascading Style Sheets)
作用：
定義如何顯示 HTML 元素城侧，修改和美化網(wǎng)頁(yè)疆偿！-
CSS的書寫形式：內(nèi)聯(lián)樣式咱筛、內(nèi)部樣式表、外鏈樣式表
樣式表的優(yōu)先級(jí)：
一般杆故，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中迅箩，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。
- 1.瀏覽器缺省設(shè)置
- 2.外鏈樣式表
- 3.內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）
- 4.內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
因此处铛，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)饲趋。
4.1 外部加載的形式（最常用）
//新建css文件：style.css
<link rel="stylesheet" type="text/css" href="style.css" />
4.2 頭部形式（寫在HTML頭部區(qū)域）
<style type="text/css">
//CSS樣式語(yǔ)法
p{color: blue; text-align: center;}
h1{color: #999999; font-size: 12px}
</style>
4.3 內(nèi)聯(lián)形式（寫在HTML標(biāo)簽中）
style="color: blue; text-align: center;"
e.g.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" /> //第一種：外部文件加載
<style type="text/css"> //第二種：寫在頭部文件
//CSS樣式語(yǔ)法
p{color: blue; text-align: center;}
h1{color: #999999; font-size: 12px}
</style>
</head>
<body>
<p>頭部CSS樣式</p>
<p style="color: blue; text-align: center;">內(nèi)聯(lián)CSS樣式</p> //第三種：內(nèi)聯(lián)方式 style屬性
<h1>我是標(biāo)題</h1>
</body>
</html>
㈡ CSS語(yǔ)法
CSS的語(yǔ)法結(jié)構(gòu)：
選擇器{屬性：值; 屬性：值; 屬性：值; …}
CSS 基礎(chǔ)語(yǔ)法
花括號(hào)：{}
冒號(hào)：屬性和值被冒號(hào)(:)分開
-
分號(hào)：用分號(hào)(;)將每個(gè)聲明分
?
1. CSS選擇器
常用的9個(gè)選擇器拐揭！
1. 通配選擇器
<style type="text/css">
*{color: red;}
</style>
2. 標(biāo)簽選擇器
//直接用標(biāo)簽名
<style type="text/css">
h1{width: 200px; height: 300px;border: 1px solid red;text-align: center;}
</style>
3. id選擇器
類似于類選擇，但具有唯一性奕塑！
<style type="text/css">
//先給標(biāo)簽起一個(gè)名字:id="tag_01"
#tag_01{color: red;border: 1px solid red;width: 100px;height: 200px;}
</style>
</head>
<body>
<p id="tag_01"></p>
</body>
4. 類選擇器(最常用)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作我的第一個(gè)網(wǎng)頁(yè)</title>
<style type="text/css">
//先給標(biāo)簽起一個(gè)名字:class =“tag01”
.tag01{color: red;border: 1px solid red;width: 100px;height: 200px;}
.tag02{list-style-type: none;}
//結(jié)合標(biāo)簽選擇器
li.tag01 {color:red;}
</style>
</head>
<body>
<p class="tag01"></p> //先給標(biāo)簽起一個(gè)名字:class =“tag01”
<ul>
<li class="tag01 tag02"></li>
<li class="tag01 tag02"></li>
</ul>
</body>
注意：tag命名規(guī)則：必須以字母開頭堂污，字母數(shù)字下劃線組成！
5. 屬性選擇器
<style type="text/css">
<!--屬性-->
[title]{border: 1px solid red;width: 200px;height: 20px;}
<!--指定標(biāo)簽的屬性-->
img[title][id]{color: cyan;}
<!--指定限定條件的標(biāo)簽的屬性-->
img[title][id="tag_01"]{color: cyan;}
</style>
</head>
<body>
<img src="" title="image01" id="tag_01" />
<img src="" title="image02" class="tag01" />
<p>我是段落</p>
</body>
<= === ===== ======= ==========>
6. 后代選擇器<也很常用>
<style type="text/css">
<!--嵌套標(biāo)簽呈現(xiàn)后代關(guān)系-->
table tr th a{text-decoration: none;color: red;font-size: 5cm;}
table a{text-decoration: none;color: red;font-size: 5cm;} //也可以跳躍代數(shù)
</style>
</head>
<body>
<table>
<tr> <!--嵌套標(biāo)簽呈現(xiàn)后代關(guān)系-->
<th></th>
<a href="">刪除下劃線</a>
<td></td>
</tr>
</table>
</body>
7. 子代選擇器
<style type="text/css">
tr > td{color: red;background-color: yellow;}
</style>
</head>
<body>
<table>
<tr>
<td>子代選擇器</td>
</tr>
</table>
</body>
注意：只能兩代爵川。
8. 相鄰兄弟選擇器
<style type="text/css">
td + td{color: red;}
<!--限制范圍-->
.tag01 + .tag02{color: green;}
</style>
</head>
<body>
<table>
<tr>
<td>我是TD1</td>
<td>我是TD2</td> <!--被修改的相鄰兄弟-->
<td>我是TD5</td> <!--被修改的相鄰兄弟-->
</tr>
<tr>
<td>我是TD3</td>
<td>我是TD4</td>
<td>我是TD6</td> <!--被修改的相鄰兄弟-->
</tr>
<tr>
<td class="tag01">我是TD3</td>
<td class="tag02">我是TD4</td> <!--被修改的相鄰兄弟-->
<td>我是TD6</td>
</tr>
</table>
</body>
9. 群組選擇器
<style type="text/css">
//用逗號(hào)隔開
li,td,.tag01,#tag_01{color: red;font-size: 12px;}
</style>
CSS中的偽類
偽類的語(yǔ)法： selector : pseudo-class {property: value}
CSS 類與偽類搭配使用: selector.class : pseudo-class {property: value}
//超鏈接<a></a>的偽類
a:link{} /* 沒(méi)有訪問(wèn)鏈接的表現(xiàn)樣式*/
a:visited{} /* 已經(jīng)訪問(wèn)鏈接的表現(xiàn)樣式*/
a:hover{} /* 鼠標(biāo)懸停鏈接時(shí)的表現(xiàn)的樣式*/
a:active{} /* 鼠標(biāo)點(diǎn)擊鏈接時(shí)的表現(xiàn)的樣式*/
注意：必須按順序?qū)懀?<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS中的偽類</title>
<style type="text/css">
a:link{color: red;} /* 點(diǎn)擊之前表現(xiàn)的樣式*/
a:visited{color: #999999;} /* 點(diǎn)擊之后表現(xiàn)的樣式*/
a:hover{color: green; text-decoration: none;} /* 鼠標(biāo)懸停的表現(xiàn)的樣式*/
a:active{color: yellow;} /* 鼠標(biāo)點(diǎn)擊時(shí)的表現(xiàn)的樣式*/
</style>
</head>
<body>
<a >進(jìn)入網(wǎng)頁(yè)首頁(yè)</a>
</body>
</html>
2. CSS常用屬性
詳細(xì)屬性：參考鏈接：http://wenku.baidu.com/view/f51f5d3710661ed9ad51f336.html
⑴ 樣式屬性
- ?
- CSS 文字
- CSS 文本
- CSS 前景色
- CSS 背景
- CSS 列表
//CSS描述長(zhǎng)度的單位：
cm 厘米
mm 毫米
em 當(dāng)前字體m字母的寬度（代指一個(gè)字母的寬度）
ex 當(dāng)前字體x字母的寬度（代指一個(gè)字母的寬度）
in 英寸敷鸦，1in = 2.54cm
pt 點(diǎn)，1pt = 1/72in
pc 皮卡寝贡，1pc = 12pt
px 像素
百分比(%) 相對(duì)值
//CSS中顏色表示方法：
英文單詞：red blue ...
十六進(jìn)制：#999 #FFF #rrgggbb
RGB格式：rgb(x,y,z) 范圍0~255之間整數(shù)
rgb(x%,y%,z%) 范圍0~100之間的整數(shù)
//字體設(shè)置
*{
font-family: "Arial","宋體"扒披，"黑體"，"楷體"; //瀏覽器會(huì)依次查找字體是否安裝
font-size: 30pt; //5種表示方式：長(zhǎng)度值：30pt圃泡；相對(duì)默認(rèn)的百分比：200%;絕對(duì)大械浮：large;相對(duì)上一元素：larger;增大值：+5pt
font-weight: normal; //值是100~900之間整百數(shù)：normal(400)：正常;blod(700):粗體;border：比上一級(jí)增加100；lighter：比上一級(jí)減少100
font-style: italic; //italic斜體颇蜡；oblique:傾斜; normal正常
font-variant: normal; //normal正常价说；small-caps：小寫字母都變成小型的大寫字母
}
//文本設(shè)置
*{
text-decoration: underline,blink; //（underline:下劃線;overline:上劃線;line-through:刪除線；blink：閃爍风秤；none：無(wú));
text-align: left,center; //水平對(duì)齊：(left | right | center | justify(兩邊對(duì)齊))
vertical-align: middle; //垂直對(duì)齊：(baseline | sub | super | top | text-top | middle | bottom | text-bottom | 百分比)
text-indent: 20pt; //首行縮進(jìn):(20pt | 100%)
text-transform: uppercase; //文本轉(zhuǎn)換:(none | capitalize:首字母大寫 | uppercase 字母大寫 | lowercase 字母小寫;
}
//文字布局：字間距&行間距
*{
letter-spacing: normal; //字符間距：15px
word-spacing: 15px; //字間距
line-height: 20pt; //行高&行間距：20pt | 120% | 2.0
}
//前景色
*{
color: blue; //前景色:(red | #0000FF | rgb(0,0,255) | rgb(0,0,100%) )
}
//背景色
*{
background-color: red; //背景色:(red | #0000FF | rgb(0,0,255) | rgb(0,0,100%) )
background-image: url(images/abc.jpg);
background-attachment: scroll; //圖像的滾動(dòng)方式:(scroll:滾動(dòng) | fixed:固定);
background-repeat: repeat; //設(shè)置圖片重復(fù)方式(repeat | no-repeat | repeat-x | repeat-y)
background-position: left center; //設(shè)置圖片擺放位置
background: red url(images/abc.png) repeat-y; //一次設(shè)置鳖目，必須按照順序
}
//列表屬性
*{
list-style-type: disc; //(none | disc 實(shí)心黑點(diǎn) | circle 空心圓點(diǎn) | square 黑方塊 | decimal 十進(jìn)制123 | lower-roman 小寫羅馬數(shù)字 | upper-roman 大寫羅馬 | lower-alpha 小寫字母 | upper-alpha 大寫字母)
list-style-image: url(); //設(shè)置圖片為項(xiàng)目符號(hào)
list-style-position: inside; //設(shè)置項(xiàng)目符號(hào)的位置（outside | inside）
//一次性設(shè)置
list-style: url() disc outside; //不限順序，image優(yōu)先于type
}
⑵ 盒子模型
- CSS 內(nèi)邊距
- CSS 邊框
- CSS 外邊距
盒子模型：
盒子模型
盒子模型
//邊框
*{
border-color: red yellow blue green; //可以接受1~4個(gè)值:(1個(gè)值：四個(gè)邊框同色缤弦，2個(gè)值：上下 左右领迈；3個(gè)值：上 左右 下；4個(gè)值：上 右 下 左);
border-top-color:red;
border-right-color:red;
border-bottom-color: red;
border-left-color:red;
border-width: 1pt thin 100%; //寬度：可以接受1~4個(gè)長(zhǎng)度值碍沐，還可以接受3個(gè)關(guān)鍵詞(thin | medium | thick)
border-top-width: thick;
border-right-width: 20pt;
border-bottom-width: 100%;
border-left-width: medium;
border-style: none; //邊框樣式:(none: 無(wú)邊框 | dotted：小點(diǎn) | dashed 虛線 | solid 實(shí)線 | double 雙線 | groove 四進(jìn)線 | ridge 凸線 | inset 元素內(nèi)凹 | outset 元素外凹)
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: double;
border-left-style:none;
//縮略設(shè)置方式:順序不限;
border: solid 15px red;
border-top: 5pt red dashed;
border-left: dashed red red;
border-bottom: inset green;
border-left: dashed;
}
//外邊距margin
*{
margin: 1pt auto 200% auto;//接受1~4長(zhǎng)度值和百分?jǐn)?shù) 和 auto
margin-top: auto;
margin-right: 20pt;
margin-bottom: 20%;
margin-right: auto auto;
}
//內(nèi)邊距padding
*{
padding: 3pt; ////接受1~4長(zhǎng)度值和百分?jǐn)?shù)
padding-top: 200%;
padding-right: 3pt 4pt;
padding-bottom: 3pt 3pt 5pt;
padding-left:3pt 3pt 5pt 6pt;
}
⑶ 定位和浮動(dòng)
- CSS 相對(duì)定位
- CSS 絕對(duì)定位
- CSS 浮動(dòng)
內(nèi)聯(lián)元素與塊級(jí)元素
//內(nèi)聯(lián)元素與塊級(jí)元素
區(qū)別：塊級(jí)元素獨(dú)占一行狸捅；可以設(shè)置行高，內(nèi)外邊距等累提；
內(nèi)聯(lián)元素只顯示在一行尘喝！只能設(shè)置左右，不能設(shè)置寬高和上下內(nèi)外邊距斋陪！
塊級(jí)元素：
<body></body>
<div></div>
<h1></h1>...<h6></h6>
<ol></ol>
<ul></ul>
<li></li>
<p></p>
<table></table>
<tr></tr>
<td></td>
內(nèi)聯(lián)元素：
<a href=""></a>
<i></i>
<u></u>
<b></b>
<span></span> //文本標(biāo)簽
<font></font>
相對(duì)定位與絕對(duì)定位
1. 相對(duì)定位
相對(duì)于自己原來(lái)的位置發(fā)生改變朽褪，并且保留原有的位置空間。
<style type="text/css">
.div01{border: 1px solid red;width: 200px;height: 100px;}
.div02{border: 3px dashed cyan;width: 200px;height: 100px;
position: relative; /*相對(duì)定位*/
top: -30px;
left: 50px;}
</style>
2. 絕對(duì)定位
相對(duì)于擁有position屬性的父級(jí)元素的位置發(fā)生改變（如果父級(jí)元素沒(méi)有position屬性无虚，就會(huì)查找父級(jí)的父級(jí)鞍匾，直到body），并釋放原有的位置空間骑科！
<style type="text/css">
.div01{border: 1px solid red;width: 200px;height: 100px;}
.div02{border: 3px dashed cyan;width: 200px;height: 100px;
position: absolute; /*絕對(duì)定位*/
top: 30px;
left: 50px;}
.div03{border: 1px solid green;width: 200px;height: 100px;}
</style>
普通流定位：默認(rèn)定位：
塊級(jí)框從上到下一個(gè)接一個(gè)地排列橡淑，框之間的垂直距離是由框的垂直外邊距計(jì)算出來(lái)。
行內(nèi)框在一行中水平布置咆爽，可以使用水平內(nèi)邊距梁棠、邊框和外邊距調(diào)整它們的間距
CSS 定位屬性
position 設(shè)置定位方式
top 定義了定位元素上外邊距邊界與其包含塊上邊界之間的偏移置森。
right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移符糊。
left 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移凫海。
overflow 設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時(shí)發(fā)生的事情。
z-index 設(shè)置元素的堆疊順序男娄。
//定位
*{
position: relative; //設(shè)置定位方式:(static 常規(guī) | relative 相對(duì)定位 | absolute 絕對(duì)定位)
//元素上下左右的位置
top: 10%;
right: 2pt;
bottom: 200%;
left: 45pt;
//元素所占空間
width: 20%;
height: 30pt;
}
//z-index(Z軸位置)
*{
z-index: -1; //大于-1的自然數(shù)：-1最底層 值越大越靠近瀏覽者
}
//溢出
*{
overflow: scroll; //內(nèi)容大于元素指定空間產(chǎn)生溢出：(visible 溢出可見 | hidden 溢出隱藏 | scroll 滾動(dòng)顯示 | auto 自動(dòng)判斷)
}
浮動(dòng)
浮動(dòng)效果：使豎列的盒子可以橫向排版行贪。
浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?
屬性：float
//浮動(dòng)
*{
float: left; //元素浮動(dòng)到頁(yè)面的左邊緣或右邊緣:(left | right | none)
clear: both; //元素旁邊是否允許其他元素浮動(dòng):(left | right | both | none)
}
浮動(dòng)的負(fù)效果:導(dǎo)致父級(jí)元素?zé)o法撐開模闲。
清除負(fù)效果：(三種方法)
1.添加空盒子：
<style type="text/css">
.box{border: 1px solid red;}
.box01{border: 3px dashed cyan;width: 150px;height: 100px;float: left;}
.box02{border: 2px solid blue;width: 200px;height: 100px;float: left;}
.clear{clear：both;} <!--空盒子類-->
</style>
</head>
<body>
<div class="box">
<div class="box01"> 我是二個(gè)盒子建瘫！</div>
<div class="box02"> 我是三個(gè)盒子！</div>
<div class="clear"></div> <!--添加空盒子：在被浮動(dòng)元素的后面(同級(jí)元素)添加一個(gè)空盒子尸折，并且定義一個(gè)clear類-->
</div>
</body>
優(yōu)點(diǎn)：便捷 代碼量少
缺點(diǎn)：增加很多空盒子
2..clear{display: block;overflow: hidden;}
<style type="text/css">
.box{border: 1px solid red;}
.box01{border: 3px dashed cyan;width: 150px;height: 100px;float: left;}
.box02{border: 2px solid blue;width: 200px;height: 100px;float: left;}
.clear{display: block;overflow: hidden;}
</style>
</head>
<body>
<div class="box clear"> <!--定義一個(gè)clear類,賦給浮動(dòng)元素的父級(jí)元素-->
<div class="box01"> 我是二個(gè)盒子啰脚！</div>
<div class="box02"> 我是三個(gè)盒子！</div>
</div>
</body>
3. 最流行 最常用 兼容所有瀏覽器
缺點(diǎn)：代碼量多
<style type="text/css">
.box{border: 1px solid red;}
.box01{border: 3px dashed cyan;width: 150px;height: 100px;float: left;}
.box02{border: 2px solid blue;width: 200px;height: 100px;float: left;}
.clear.after{display: block;clear: both;content: "." visibility: hidden;height: 0}
.clear{zoom:"1";}
</style>
</head>
<body>
<div class="box clear"> <!--定義一個(gè)clear類,賦給浮動(dòng)元素的父級(jí)元素-->
<div class="box01"> 我是二個(gè)盒子实夹！</div>
<div class="box02"> 我是三個(gè)盒子橄浓！</div>
</div>
</body>
⑷ 其他
//鼠標(biāo)的屬性
*{
cursor: auto; //設(shè)置鼠標(biāo)形狀：(auto | hand 手型 | text 文本I型 | ....)
}
