一瓷马、使用CSS樣式的方式
1. HTML <!DOCTYPE> 聲明標(biāo)簽
1） 定義和用法
- <!DOCTYPE> 聲明必須是HTML 文檔的第一行，位于<html> 標(biāo)簽之前。
- <!DOCTYPE> 聲明不是HTML 標(biāo)簽；它是指示web 瀏覽器關(guān)于頁(yè)面使用哪個(gè)HTML 版本進(jìn)行編寫的指令。
- 在HTML 4.01 中服赎，<!DOCTYPE> 聲明引用DTD，因?yàn)镠TML 4.01 基于SGML交播。DTD 規(guī)定了標(biāo)記語(yǔ)言的規(guī)則重虑，這樣瀏覽器才能正確地呈現(xiàn)內(nèi)容。
- HTML5 不基于SGML堪侯，所以不需要引用DTD嚎尤。
2）各版本的聲明
HTML5
<!DOCTYPE html>
<meta charset="utf-8">
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[http://www.w3.org/TR/html4/loose.dtd](http://www.w3.org/TR/html4/loose.dtd)">
該DTD 包含所有HTML 元素和屬性，包括展示性的和棄用的元素（比如font）伍宦。不允許框架集（Framesets）芽死。
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
注意的規(guī)則
- 單標(biāo)記必須閉合
比如<br>必須寫為<br /> <input /> - 單屬性必須添加屬性值
<input typr="radio" checked >必須寫為<input typr="radio" checked="checked" /> - 標(biāo)記和屬性必須使用小寫
<Body><BODY>是錯(cuò)的必須寫為<body> - 屬性的屬性值必須使用""
在HTML4.01之前可以使用<body bgcolor=red>,HTML4.01必須寫為<body bgcolor="red">
2. 內(nèi)鏈樣式表
<body style="background-color:green; margin:0; padding:0;"></body>
3. 嵌入式樣式表
<style type="text/css"></style>需要將樣式放在<head></head>中
4. 引入式樣式表
<link rel="StyleSheet" type="text/css" href="style.css">
二、定義樣式表
1. HTML標(biāo)記定義
<p>...</p>
p { 屬性:屬性值 次洼；屬性1:屬性值1 }
p可以叫做選擇器关贵，定義那個(gè)標(biāo)記中的內(nèi)容執(zhí)行其中的樣式
一個(gè)選擇器可以控制若干個(gè)樣式屬性，他們之間需要用英語(yǔ)的“;”隔開卖毁，最后一個(gè)可以不加“;”
2. Class定義
<p class="p">...</p>
class定義是以“.”開始
.p { 屬性:屬性值 揖曾；屬性1:屬性值1 }
3. ID定義
<p id="p">...</p>
ID定義是“#”開始的
#p { 屬性:屬性值 ；屬性1:屬性值1 }
4. 優(yōu)先級(jí)問(wèn)題
- *** ID>Class>HTML***
-
同級(jí)時(shí)選擇離元素最近的一個(gè)的
#p { color: red }
#p { color: #f60 }
執(zhí)行顏色為#f60的
5. 組合選擇器（同時(shí)控制多個(gè)元素）
h1,h2,h3 { font-size: 14px; color: red; }
選擇器組合可以使用“,”隔開
6. 偽元素選擇器
a) a:link 正常連接的樣式
b) a:hover 鼠標(biāo)放上去的樣式
c) a:active 選擇鏈接時(shí)的樣式
d) a:visited 已經(jīng)訪問(wèn)過(guò)的鏈接的樣式
三亥啦、常見(jiàn)屬性
1.顏色屬性
color屬性定義文本的顏色
- color：green
- color：#ff6600
- color：#f60 簡(jiǎn)寫式
- color：rgb（255,255,255） 紅(R)炭剪、綠(G)、藍(lán)(B) 每個(gè)的取值范圍0~255
- color：rgba（255,255,255,1）
RGBA是代表Red（紅色） Green（綠色） Blue（藍(lán)色）和 Alpha的(色彩空間)透明度
2.字體屬性
1) font-size 字體大小
a. px：設(shè)置一個(gè)固定的值
b. %：父元素的百分比
c. smaller：比父元素更小
d. larger：比父元素更大
e. inherit：繼承父元素
2) font-family 定義字體
font-family：微軟雅黑翔脱，serif奴拦；
可以使用“，”隔開届吁，以確保當(dāng)字體不存在的時(shí)候直接使用下一個(gè)
3) font-weight 字體加粗
normal(默認(rèn)值)错妖、bold(粗)绿鸣、bolder(更粗)、lighter(更細(xì))
100暂氯、200潮模、300~900
400 = normal，而 700 = bold
4) font-style 字體樣式
- normal 正常（標(biāo)準(zhǔn)）
- italic 斜體
- oblique 傾斜
- inherit 繼承
5) font-variant 小型大寫字母顯示文本
- normal 標(biāo)準(zhǔn)
- small-caps 小型大寫字母顯示文本
- inherit 繼承
3.背景屬性
1) 背景顏色 background-color
2) 背景圖片 background-image
background-image:url(圖片路徑)
background-image:none
3) 背景重復(fù) background-repeat
- repeat 重復(fù)平鋪滿
- repeat-x 向X軸重復(fù)
- repeat-y 向Y軸重復(fù)
- no-repeat 不重復(fù)
4) 背景位置 background-position
- 橫向（left,center,right）
- 縱向（top,center,bottom）
用數(shù)值來(lái)表示位置：background-position：20px 20px;
background-position：X軸 Y軸;
*left center 左居中
簡(jiǎn)寫方式
background:背景顏色 url(圖像) 重復(fù) 位置
background:#f60 url(images/bg,jpg) no-repeat top center
4.文本屬性
1. text-align 橫向排列
left痴施，center擎厢，right
2) line-height 文本行高
- %基于字體大小的百分比行高
- 數(shù)值 來(lái)設(shè)置固定值
3) text-indent 首行縮進(jìn)
- %父元素的百分比
- px固定值，默認(rèn)0
- inherit繼承
4) letter-spacing 字符間距
- normal 默認(rèn)
- length設(shè)置具體的數(shù)值（可以設(shè)置負(fù)值）
- inherit 繼承
5) word spacing 單詞間距
- normal標(biāo)準(zhǔn)間距
- px固定值
- inherit繼承
6) direction 文本方向
靠左對(duì)齊辣吃？靠右對(duì)齊锉矢？
- ltr從左到右 默認(rèn)值
- rtl從右到左
- inherit繼承
7) text-transform 文本大小寫
- capitalize
每個(gè)單詞以大寫字母開頭 - uppercase
定義僅有大寫字母 - lowercase
定義無(wú)大寫字母，僅有小寫字母 - inherit
規(guī)定應(yīng)該從父元素繼承text-transform 屬性的值
5.邊框?qū)傩?/h3>
1) 邊框風(fēng)格 border-style
a. 統(tǒng)一風(fēng)格（簡(jiǎn)寫風(fēng)格）
border-style
b. 單獨(dú)定義某一方向的邊框樣式
- border-bottom-style 下邊邊框樣式
- border-top-style 上邊邊框樣式
- border-left-style 左邊邊框樣式
- border-right-style 右邊邊框樣式
c. 邊框風(fēng)格樣式的屬性值
- none 無(wú)邊框
- solid 直線邊框
- dashed 虛線邊框
- dotted 點(diǎn)狀邊框
- double 雙線邊框
- groove 凸槽邊框
- ridge 壟狀邊框
- inset inset邊框
- outset outset邊框
- inherit繼承
依托border-color的屬性值
2) 邊框?qū)挾?border-width
a. 統(tǒng)一風(fēng)格
border-width：
b. 單獨(dú)風(fēng)格
- border-top-width 上邊邊框?qū)挾?/li>
- border-bottom-width 下邊邊框?qū)挾?/li>
- border-left-width 左邊邊框?qū)挾?/li>
- border-right-width 右邊邊框?qū)挾?/li>
c. 邊框?qū)挾鹊膶傩灾担?/h5>
- thin 細(xì)邊框
- medium 中等邊框
- thick 粗邊框
- px 固定值的邊框
- inherit繼承
3) 邊框顏色 border-color
a. 統(tǒng)一風(fēng)格
border-color
b. 單獨(dú)風(fēng)格
- border-top-color 上邊邊框顏色
- border-bottom-color 下邊邊框顏色
- border-left-color 左邊邊框顏色
- border-right-color 右邊邊框顏色
c. 屬性值
- 顏色值的名稱 red齿尽、green、blue
- RGB rgb(255,255,0)
- RGBA rgba(255,255,0,0.1)
- 十六位進(jìn)制 #ff0灯节、#ff0000
- 繼承inherit
d. 屬性值的四種情況
- 一個(gè)值：border-color：（上循头、下、左炎疆、右）卡骂；
- 兩個(gè)值：border-color：（上下） （左右）；
- 三個(gè)值：border-color:（上） （左形入、右） （下）;
- 四個(gè)值：border-color：（上）（右）（下）（左）;
簡(jiǎn)寫方式
border：solid 2px #f60
6.列表屬性
1.標(biāo)記的類型
list-style-type
- none 無(wú)標(biāo)記
- disc 默認(rèn) 標(biāo)記是實(shí)心圓
- circle 標(biāo)記是空心圓
- square 標(biāo)記是實(shí)心方塊
- decimal 標(biāo)記是數(shù)字
- decimal-leading-zero 0開頭的數(shù)字標(biāo)記全跨。(01, 02, 03, 等)
- lower-roman 小寫羅馬數(shù)字(i, ii, iii, iv, v, 等)
- upper-roman 大寫羅馬數(shù)字(I, II, III, IV, V, 等)
- lower-alpha 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等)
- upper-alpha 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等)
- lower-greek 小寫希臘字母(alpha, beta, gamma, 等)
- lower-latin 小寫拉丁字母(a, b, c, d, e, 等)
- upper-latin 大寫拉丁字母(A, B, C, D, E, 等)
- hebrew 傳統(tǒng)的希伯來(lái)編號(hào)方式
- armenian 傳統(tǒng)的亞美尼亞編號(hào)方式
- georgian 傳統(tǒng)的喬治亞編號(hào)方式(an, ban, gan, 等)
- cjk-ideographic 簡(jiǎn)單的表意數(shù)字
- hiragana 標(biāo)記是：a, i, u, e, o, ka, ki, 等。（日文片假名）
- katakana 標(biāo)記是：A, I, U, E, O, KA, KI, 等亿遂。（日文片假名）
- hiragana-iroha 標(biāo)記是：i, ro, ha, ni, ho, he, to, 等浓若。（日文片假名）
- katakana-iroha 標(biāo)記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
2.標(biāo)記的位置
list-style-position
- inside 列表項(xiàng)目標(biāo)記放置在文本以內(nèi)蛇数，且環(huán)繞文本根據(jù)標(biāo)記對(duì)齊挪钓。
- outside 默認(rèn)值。保持標(biāo)記位于文本的左側(cè)耳舅。列表項(xiàng)目標(biāo)記放置在文本以外碌上，且環(huán)繞文本不根據(jù)標(biāo)記對(duì)齊。
- inherit 規(guī)定應(yīng)該從父元素繼承 list-style-position 屬性的值浦徊。
3.設(shè)置圖像列表標(biāo)記
list-style-image
- URL 圖像的路徑
- none 默認(rèn)馏予。無(wú)圖形被顯示
- inherit 規(guī)定應(yīng)該從父元素繼承 list-style-image 屬性的值
4.簡(jiǎn)寫方式
list-style:類型 位置 圖像
list-style:square inside url('/i/arrow.jpg');
四、DIV+CSS布局
1.div和span
DIV和SPAN在整個(gè)HTML標(biāo)記中盔性，沒(méi)有任何意義霞丧，他們的存在就是為了應(yīng)用CSS樣式
DIV和span的區(qū)別在與，span是內(nèi)聯(lián)元素纯出，div是塊級(jí)元素
* DIV占據(jù)整個(gè)一行蚯妇；span只占用一小部分敷燎，內(nèi)容多少占用位置多少
2.盒模型
- margin 盒子外邊距
- padding 盒子內(nèi)邊距
- border 盒子邊框?qū)挾?/li>
- width 盒子寬度
- height 盒子高度
3.布局相關(guān)的屬性
1) position 定位方式
- 正常定位 relative
- 根據(jù)父元素進(jìn)行定位 absolute
- 根據(jù)瀏覽器窗口進(jìn)行定位 fixed
* 滾動(dòng)頁(yè)面其位置不變，如部分網(wǎng)頁(yè)中的客服 - 沒(méi)有定位 static
- 繼承inherit
2) 定位
left（左）箩言，right（右）硬贯，top（上），bottom（下）離頁(yè)面頂點(diǎn)的距離
3) z-index 層覆蓋先后順序（優(yōu)先級(jí)）
z-index:1
1 2 3 4 5 6...表示優(yōu)先級(jí)
4) display 顯示屬性
display:none 層不顯示
display:block 塊狀顯示陨收，在元素后面換行饭豹，顯示下一個(gè)塊元素
display:inline 內(nèi)聯(lián)顯示，多個(gè)塊可以顯示在一行內(nèi)
5) float 浮動(dòng)屬性
- left 左浮動(dòng)
- right 右浮動(dòng)
6) clear 清除浮動(dòng)
clear：both
7) overflow 溢出處理
- hidden 隱藏超出層大小的內(nèi)容
- scroll無(wú)論內(nèi)容是否超出層大小都添加滾動(dòng)條
- auto 超出時(shí)自動(dòng)添加滾動(dòng)條
4.兼容問(wèn)題及高效開發(fā)工具
1) 兼容性測(cè)試工具
- IE Tester
- Multibrowser
2) 常用的瀏覽器
- Google chrome
- Firefox
- opera
3) 高效的開發(fā)工具
根據(jù)自己的需要來(lái)選擇
輕量級(jí)的： Notepad++务漩、sbulime Text拄衰、記事本
重量級(jí)的：WebStorm、 Dreamweaver
4) 網(wǎng)頁(yè)設(shè)計(jì)工具
- fireworks
- photoshop
5.判斷IE的方法
條件判斷格式
<! --[if 條件 版本]> 那么顯示 <![endif]-->
- 不等于
[if !IE 8]除了IE8都可以顯示 - 小于
[if lt IE 5.5]如果IE瀏覽器版本小于5.5的顯示 - 大于
[if gt IE 5]如果IE瀏覽器版本大于5的顯示 - 小于或者等于
[if lte IE 6]如果IE瀏覽器版本小于6的顯示 - 大于或等于
[if gte IE 7]如果IE瀏覽器版本小于7的顯示 - 大于和小于之間
[if (gt IE 5)&(lt IE 7)]如果IE瀏覽器版本大于IE5小于7的顯示 - 或
[if (IE 6)|(IE 7)]如果是IE6或者IE7顯示 - 僅
<! --[if IE 8]>如果是IE8
注意??：條件注釋只有在IE瀏覽器下才能執(zhí)行饵骨，這樣就達(dá)到了我們的效果翘悉！
6.《DIV+CSS網(wǎng)頁(yè)布局實(shí)戰(zhàn)》
分析+切圖+搭建框架
循序漸進(jìn)>解決兼容>大功告成
