一破婆、CSS（Cascading Style Sheet）層疊樣式表
CSS優(yōu)點
- 批量控制網(wǎng)頁的外觀
- 精確控制網(wǎng)頁的外觀（到像素級別）
css的基本語法形式：
選擇器 { css屬性名1：值1；css屬性名2：值2； ………… }
eg：font{color:red; font-weight:bold; font-size:18px;}
HTML屬性和css屬性的區(qū)別
- HTML屬性：
寫在標(biāo)簽中 形式為：屬性名="屬性值"
- css屬性：
寫下選擇器的大括號里 形式為 屬性名：屬性值
二裙戏、選擇器分類
標(biāo)簽選擇器：指代（對應(yīng)）網(wǎng)頁中的所有該標(biāo)簽都應(yīng)用其中的屬性設(shè)置
標(biāo)簽名{……}
類選擇器：指代（對應(yīng)）網(wǎng)頁中的class的值為該類名的所有標(biāo)簽都應(yīng)用該屬性設(shè)置
.類名{……}
id選擇器：指代（對應(yīng)）網(wǎng)頁中的id的值為該名稱的該標(biāo)簽都應(yīng)用該屬性設(shè)置
#id 名{……}
通用選擇器：其自動指代“所有標(biāo)簽”拗小，即所有標(biāo)簽都應(yīng)用該屬性設(shè)置
*{ ….. }
注意： 通用選擇器慎用，通常只用于設(shè)置基本的幾個屬性谴咸，比如文字顏色旁钧，文字大小，padding师枣，margin
偽類選擇器
:偽類名{……}
偽類名其實只有系統(tǒng)內(nèi)部規(guī)定的不多的幾個怪瓶，不是我們自己定義的,他們的含義也是特定的。
eg:
a:link{ …… } ：表示一個a鏈接標(biāo)簽在網(wǎng)頁初始打開的時候的狀態(tài)（初始鏈接狀態(tài)）
a:visited{…..} ：表示一個a鏈接標(biāo)簽在點擊（訪問）過之后的時候的狀態(tài)（訪問后狀態(tài)）
a:hover{….} ：表示一個a鏈接標(biāo)簽在鼠標(biāo)放上去的時候的狀態(tài)（懸停狀態(tài)）
a:active{….} ：表示一個a鏈接標(biāo)簽在鼠標(biāo)摁住但還沒有抬起的狀態(tài)（活動狀態(tài)）践美。
復(fù)合選擇器：
- 層級選擇器：
選擇器1 選擇器2 { ……… }
在選擇器1所對應(yīng)的標(biāo)簽中由選擇器2所對應(yīng)的那些標(biāo)簽.
其中洗贰，選擇器1和選擇器2可以是前面所學(xué)的任意某種選擇器，而且這種層級關(guān)系還可以多層次
eg:
#d1 div{…}
.cc1 p span{…..}
p .cc2 img{…..}
#d1 p a:hover{….
舉個栗子：
- 分組選擇器:指這兩個選擇器都使用同樣的屬性設(shè)置
選擇器1拨脉，選擇器2 { ……… }
也就是說：
.a {color:red; font-size:15px;}
.b{ color:red; font-size:15px;}
可以簡寫為：
.a, .b{ color:red; font-size:15px;}
- 其他復(fù)合類型
div.cc1{…}:代表具有class值為cc1的div標(biāo)簽
css的文字段落樣式屬性
| 屬性 | 作用 | 應(yīng)用 |
|---|---|---|
| color | 設(shè)定一個標(biāo)簽中的文字的顏色 | 顏色值用英文單詞或16進制語法和rgb語法 |
| font-size | 設(shè)置文字大小 | 單位通常為像素（px） |
| font-weight | 設(shè)置文字粗體 | 粗體（bold）或非粗體（normal） |
| font-style | 設(shè)置文字斜體 | 斜體（italic）或非斜體（normal） |
| font-family | 設(shè)置文字的字體名字 | 可以使用多個字體名哆姻，中間用逗號分開 |
| line-height | 設(shè)置文字所占據(jù)的空間高度 | 單位通常為像素（px） |
| letter-spacing | 設(shè)置字符（或字母）之間的間隔距離 | |
| word-spacing | 設(shè)置單詞之間的間隔距離 | 通常只對西方拉丁語系的字符有效 |
| text-align | 設(shè)定文字的水平對齊方式 | 功能是相當(dāng)于標(biāo)簽屬性中的align屬性 |
| text-indent | 設(shè)置一個段落的首行縮進距離 | 單位通常為像素（px） |
| text-decoration | 設(shè)置文字的"修飾線" | 下劃線（underline）,中劃線(line-through)，上劃線（overline）,none(無) |
| vertical-align | 設(shè)定文字在一個表格的垂直對其方式 | top（頂對齊）玫膀，middle(中對齊)矛缨，bottom(底對齊) |
舉個css應(yīng)用的大栗子：
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
*{
font-size:12px;
color:black;
}
#table1{
width:300px;
height:300px;
//如果一個標(biāo)簽的某方面特性既受html屬性影響，又受css屬性影響帖旨，則：css設(shè)置優(yōu)先
border:solid 1px black;
}
.head{
color:white;
line-height:36px;
font-size:16px;
font-weight:bold;
height:36px;
background:#2678BF;
}
.head img{
vertical-align:middle;
}
.main{
width:282px;
height:230px;
}
.t1{
font-weight:bold;
}
.t2{
color:#6666ff;
border-bottom: dashed 1px gray;
}
.t3{
color:blue;
font-weight:bold;
text-align:right;
border-bottom: dashed 1px gray;
}
.t4{
color:red;
font-weight:bold;
text-align:right;
border-bottom: dashed 1px gray;
}
.main tr{
border-bottom: dashed 1px gray;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<table id="table1" width="600" height="600" cellspacing="0" cellpadding="0" >
<tr>
<td class="head"> PHP開班信息</td>
</tr>
<tr>
<td>
<table class="main" align="center">
<tr>
<td class="t1">PHP基礎(chǔ)班</td>
<td></td>
</tr>
<tr>
<td class="t2">北京 - 08月10號</td>
<td class="t3">爆滿已開班</td>
</tr>
<tr>
<td class="t2">北京 - 09月12號</td>
<td class="t4">預(yù)約報名</td>
</tr>
<tr>
<td class="t1">PHP基礎(chǔ)班</td>
<td></td>
</tr>
<tr>
<td class="t2">北京 - 08月10號</td>
<td class="t3">爆滿已開班</td>
</tr>
<tr>
<td class="t2">北京 - 09月12號</td>
<td class="t4">預(yù)約報名</td>
</tr>
<tr>
<td class="t1">PHP基礎(chǔ)班</td>
<td></td>
</tr>
<tr>
<td class="t2">北京 - 08月10號</td>
<td class="t3">爆滿已開班</td>
</tr>
<tr>
<td class="t2">北京 - 09月12號</td>
<td class="t4">預(yù)約報名</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
二箕昭、盒子：css中最重要的概念
網(wǎng)頁，就是一個盒子套一個盒子
1解阅、盒子的區(qū)域構(gòu)成
邊框（border）：一個線型的區(qū)域落竹，可以是實線或虛線或其他形狀。
外邊距（margin）：也叫“邊界”货抄，邊框線之外的一塊空白區(qū)域述召，其含義是“不能放置物體”
內(nèi)邊距（padding）：也叫“補白”，邊框線之內(nèi)的一塊空白區(qū)域蟹地，其含義也是“不能放置物體”
內(nèi)容區(qū)（沒有對應(yīng)的css屬性名）：指一個盒子中可以放置“物體”的區(qū)域——也就是盒子的主要區(qū)域积暖。
2、網(wǎng)頁設(shè)計中的“內(nèi)容與表現(xiàn)分離”思想
HTML中怪与，標(biāo)簽具有“表形表意”的作用夺刑，也就說內(nèi)容和表現(xiàn)混在一起
而css是將網(wǎng)頁中各個標(biāo)簽的表現(xiàn)都提出來，放到一個專門的地方（eg：style標(biāo)簽中）剩余部分被整體上稱為“結(jié)構(gòu)/內(nèi)容”分别。這就是內(nèi)容和表現(xiàn)分離思想遍愿。
3、布局原理
布局：指將網(wǎng)頁內(nèi)容以一定的方式放到適合的位置上
上下結(jié)構(gòu)：使用若干個盒子耘斩，自然就是上下結(jié)構(gòu)
左右結(jié)構(gòu)：使用若干個盒子沼填，并進行相應(yīng)的浮動，通常的模式：
i. 2個盒子：一左一右
ii. 3個盒子：兩左一右或兩右一左括授，或一邊倒倾哺。
iii. 更多盒子：通常一邊倒轧邪。
浮動：形象比喻就是氣泡，“向上浮”（float：left/right）
父盒子包住子盒子
①給父盒子設(shè)置一個固定高度
②給父盒子的內(nèi)部最末尾加一個清除浮動的空盒子 <div style="clear:both"></div>
③給父盒子設(shè)置一個css屬性：overflow:hidden總得來說就是：布局需要左右排列羞海，左右排列需要浮動，浮動需要修正其破壞效果——讓父盒子合理包住其子盒子曲管。
舉個盒子的大栗子
用盒子做出以下布局：
<style type="text/css">
.toubu{
height:100px; background:red;
}
.zhongjian{
height:300px; background:blue;
}
.zhongjian .zuo{
background:yellow;
float:left;
width:150px; height:250px;
margin-left:15px;
}
.zhongjian .you{
background:purple; float:right;
width:800px; height:290px;
}
.weibu{
background:#00FFFF;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div class="toubu"></div>
<div class="zhongjian">
<div class="zuo">a</div>
<div class="you">b</div>
</div>
<div class="weibu">
</div>
</body>
哈哈却邓！是不是很簡單啊院水！
4腊徙、盒子的尺寸構(gòu)成：
一個盒子的寬度構(gòu)成：
左外邊距 + 左邊框?qū)?+ 左內(nèi)邊距 + width值 + 右內(nèi)邊距 + 右邊框?qū)?+ 右外邊距
一個盒子的高度構(gòu)成：
上外邊距 + 上邊框?qū)?+ 上內(nèi)邊距 + height值 + 下內(nèi)邊距 + 下邊框?qū)?+ 下外邊距
5、盒子元素
margin外邊距檬某；分為4個方向撬腾，每個方向都可以單獨控制
margin-top: 上外邊距
margin-right: 右外邊距
margin-bottom:下外邊距
margin-left: 左外邊距
margin-auto: 上下左右邊距相等margin其實是表示上述4個屬性的一個“綜合屬性”：其實它代表的就是指“一下子設(shè)置了4個方向的margin”，其詳細(xì)使用形式和含義如下：
margin: 一個值恢恼；——設(shè)置上民傻，右，下场斑，左4個方向均為該值漓踢；
margin：值1 值2； ——設(shè)置上下margin為值1漏隐，左右margin為值2喧半；
margin：值1 值2 值3；——設(shè)置上margin為值1青责，左右margin為值2挺据， 下margin為值3；
margin：值1 值2 值3 值4脖隶；——分別設(shè)置上扁耐，右，下浩村，左4個方向的值做葵；
padding內(nèi)邊距和margin是一樣的
border邊框,邊框指的是邊框線。
線有3個方面的特性：線型心墅，線寬酿矢，線色，每個特性都可以單獨控制怎燥。
邊框也有4個方向瘫筐，每個方向都可以單獨控制。（top right left bottom）border-top-style: 頂部邊框的線型铐姚。常見線型：solid , dashed, dotted
border-top-width: 頂部邊框的線寬策肝；
border-top-color: 頂部邊框的線色肛捍；
border-right-style:
border-right-width:
border-right-color:
……等12個
3個設(shè)置線的特性
border-style: 可以使用1-4個值，用來設(shè)置4個方向的線的線型之众，其規(guī)則同margin值的設(shè)置拙毫。
eg：border-style:solid dashed; 表示上下邊框為實線，左右邊框為虛線棺禾；
border-width: 同理缀蹄，可以設(shè)置1-4個值，表示4個方向的線寬膘婶。
border-color：同理缺前。
4個方向邊框?qū)傩裕?/strong>
border-top: 線型 線寬 線顏色；
border-right: 線型 線寬 線顏色悬襟；
border-bottom: 線型 線寬 線顏色衅码；
border-left: 線型 線寬 線顏色；
最大的綜合屬性：一次性設(shè)置4個方向的3個特性：
border: 線型 線寬 線顏色脊岳；
盒子還有背景屬性逝段。
6、盒子背景：
背景分兩種：
背景顏色：只能是純色逸绎，全平鋪——css3里面已經(jīng)可以設(shè)置過度色惹恃。background-color:顏色值；背景圖片：需要設(shè)置圖片路徑棺牧，還可以設(shè)置是否重復(fù)（平鋪）巫糙，怎么重復(fù)，怎么定位颊乘。
background-image:url(圖片路徑); background-repeat: repeat // no-repeat // repeat-x // repeat-y; 重復(fù) // 不重復(fù) // 僅x方向重復(fù)//僅y方向重復(fù) background-position: 水平定位方式 垂直定位方式参淹； 水平定位方式有： left // center // right // 離左邊的像素值； 垂直定位方式有： top // center // bottom // 離頂部的像素值乏悄；背景綜合屬性：可以一次性設(shè)置有關(guān)背景的多個數(shù)據(jù)值：
background：背景色值 背景圖值 背景圖重復(fù)性值 背景圖定位值浙值； 以上4個值，幾乎可以任意省略（也就是任意使用其中某些）檩小。
7开呐、塊盒子和行內(nèi)盒子
對塊盒子，其display屬性的值默認(rèn)是block
對行內(nèi)盒子规求，其display屬性的值默認(rèn)是inline筐付；
實際上，我們完全可以將html盒子的初始表現(xiàn)使用該屬性來設(shè)置其其它值——即塊盒子和行內(nèi)盒子可以相互轉(zhuǎn)換阻肿。
div{ display: inline;} ——此時div就跟span一樣瓦戚。
span{ display: block;} ——此時span就跟div一樣。
display: inline // block // none: 顯示為：行內(nèi)盒子//塊盒子//不顯示
三丛塌、樣式分類
1较解、行內(nèi)樣式：
<標(biāo)簽名 其他標(biāo)簽屬性……. style=”css屬性1：值1畜疾；css屬性2：值2； …… ” >內(nèi)容部分</標(biāo)簽名>
只對當(dāng)前標(biāo)簽有效：通常不推薦使用印衔，或偶爾臨時使用啡捶。
2、頁內(nèi)樣式：
<style>
選擇器1{ ….. }
選擇器2{ ….. }
……
</style>
只對當(dāng)前網(wǎng)頁有效：常見奸焙。
3届慈、外部樣式：
css文件中：
選擇器1{ ….. }
選擇器2{ ….. }
……網(wǎng)頁文件中：
<link rel="stylesheet" type="text/css" href="css文件路徑url" />對所有引入該css的網(wǎng)頁有效：常見。
