htmlcss

HTML5

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括汝城網(wǎng)站建設(shè)、汝城網(wǎng)站制作、汝城網(wǎng)頁(yè)制作以及汝城網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，汝城網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到汝城省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

HTML5的發(fā)展路程
(1) 1993年IETF 發(fā)布了HTML1.0版本(internet工程任務(wù)組)
(2) 1995年 W3C(www)接管發(fā)布HTML2.0(頁(yè)面的布局表格布局)
(3) 1996年W3C 發(fā)布了 HTML3.2(很多，很亂)
(4) 1997年W3C發(fā)布了 HTML 4.0(精簡(jiǎn)版本)
(5) 1999年 W3C發(fā)布了 HTML4.01(普通使用版本)這時(shí)開始分路分兩個(gè)線路
(6) 線路1 XHTML 版本
1) 2000年的時(shí)候 W3C 發(fā)布了 XHTML 1.0版本
2) 2001年的時(shí)候 W3C 發(fā)布了 XHTML 1.1 版本
3) XHTML 嚴(yán)格HTML
線路2: HTML5版本(whatwg) 所有的瀏覽器廠商一起研發(fā)
2004年 whatwg 發(fā)布了HTML5草案
2004-2008年W3C 和whatwg合并了
2008年 W3C 和whatwg -> HTML5的正式版本(只是制定沒有推廣和發(fā)布)
HTML5 到底是什么
HTML5≈HTML5的標(biāo)簽+CSS3+JavaScript+api(瀏覽器提供的操作接口)
如何創(chuàng)建HTML文檔
(1) 文檔的命名規(guī)則
① 不允許使用特殊字符@#￥%……&*（）
② 可以以中文命名.但是不推薦使用中文
③ HTML文檔名推薦使用小寫
④ HTML 文件就是以.html結(jié)尾
注意: 如果創(chuàng)建完html文件后面依然是文本文件格式那么就將系統(tǒng)中隱藏已知文件擴(kuò)展名選項(xiàng)勾選掉
win7:打開我的電腦->組織->文件夾選項(xiàng)->查看選項(xiàng)卡->高級(jí)設(shè)置->勾選掉隱藏已知文件類型擴(kuò)展名
HTML標(biāo)簽(重點(diǎn)內(nèi)容)
(1) 標(biāo)簽是HTML 中的最基本單位也是最重要的組成部分，通常用兩個(gè)尖括號(hào)包起來”<” 和”>”;
(2) 標(biāo)簽兩種形式
① 成對(duì)出現(xiàn)標(biāo)簽(雙標(biāo)簽)
<p>內(nèi)容</p>
<body>內(nèi)容</body>
② 不成對(duì)出現(xiàn)標(biāo)簽(單標(biāo)簽)
<hr/>
<meta/>

(3) 關(guān)于標(biāo)簽大小寫問題
① 標(biāo)簽是大小寫無關(guān)系 <body>和<BODY>表示的意思是一樣的但是標(biāo)簽推薦使用小寫

HTML標(biāo)簽屬性
(1) HTML 屬性一般都出現(xiàn)在HTML標(biāo)簽中是html標(biāo)簽的一部分
(2) 標(biāo)簽可以有屬性，他包含了額外信息屬性的值一定要在雙引號(hào)中(規(guī)定)
(3) 標(biāo)簽可以擁有多個(gè)屬性
(4) 屬性由屬性名和屬性值成對(duì)出現(xiàn)
語法:
<標(biāo)簽名屬性名1=”屬性值1 屬性名2=”屬性值2”></標(biāo)簽名 >
<標(biāo)簽名屬性名1=”屬性值1” 屬性名2=”屬性值2”/>
HTML顏色值的設(shè)置
大多數(shù)的瀏覽器都支持顏色名集合顏色值是一個(gè)關(guān)鍵字或者是一個(gè)rgb格式的數(shù)字都可以
主要有一下兩種:
英文單詞作為顏色值: red 紅色 green綠色 blue 藍(lán)色 yellow ××× pink 粉色 purple 紫色...
可以使用6位的十六進(jìn)制的顏色值:
#D6 E3 F1
十進(jìn)制:0 1 2 3 4 5 6 7 8 9 10
十六進(jìn)制: 0 1 2 3 4 5 6 7 8 9 a b c d e f 10 十進(jìn)制的:16
十進(jìn)制顏色值: 紅0-255 綠0-255 藍(lán)0 -255
255 0 0
#FFFF00
91 113 164
#5B71A4
其中前兩位表示紅色中間兩位表示綠色最后面兩位表示藍(lán)色
HTML的注釋
我們經(jīng)常要在代碼旁做注釋這樣的好處有很多，解析你下面的代碼，方便我們查找比如: 方便程序員了解你的代碼，也方便以后自己對(duì)自己的代碼理解和修改
格式:

注意: HTML注釋不能進(jìn)行嵌套使用會(huì)影響注釋內(nèi)容也會(huì)影響代碼
HTML代碼格式
任何回車或者空格在源代碼中都不起作用所以在編寫HTML代碼時(shí)，可以使用空格或者回車進(jìn)行代碼的排版這樣可以使代碼清晰便于團(tuán)隊(duì)開發(fā)合作,而且必須保持嚴(yán)格的規(guī)范以 tab鍵為準(zhǔn)
HTML字符實(shí)體
< <
>>
空格
HTML文檔的主體結(jié)構(gòu)
(1) 最頂部聲明<!DOCTYPE html>
告訴瀏覽器以什么樣的標(biāo)準(zhǔn)解析這個(gè)網(wǎng)頁(yè)，HTML5的標(biāo)準(zhǔn) 老瀏覽器都兼容的標(biāo)準(zhǔn)
聲明時(shí)文檔的第一個(gè)成分位于最頂部該標(biāo)簽告訴瀏覽器文檔所使用的的HTML規(guī)范
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html 4.01
<!DOCTYPE html> HTML5

(2) 以<html> 開始以</html>結(jié)束中間包含頭部標(biāo)簽<head></head>和主體標(biāo)簽<body></body>
(3) HTML文檔的頭部元素 <head></head>
head標(biāo)簽代表html文檔的頭部信息以<head></head>結(jié)束
頭部包含了當(dāng)前文檔的一些信息比如: 標(biāo)題信息 meta信息正常情況下面的不會(huì)顯示的一些HTML文檔信息
<title></title> 設(shè)置網(wǎng)頁(yè)標(biāo)題
<meta charset="utf-8"/> 設(shè)置頁(yè)面字符集(推薦使用)
http-equiv 告知瀏覽器的行為
<meta http-equiv="refresh" content="5"/> 5s后刷新

<meta http-equiv="refresh" content="5;url= "/>

什么是物理標(biāo)記
b是bold的簡(jiǎn)寫傳遞的意思是加粗 html
什么是邏輯標(biāo)記
strong 是強(qiáng)調(diào)的意思強(qiáng)調(diào)某段文字 Xhtml
<i></i> 斜體標(biāo)簽
<em></em> 強(qiáng)調(diào)文本效果是斜體
<br/> 換行
<hr/> 水平線
<u></u> 下劃線
<del></del> 刪除線
<hn></hn> n代表數(shù)字 6 -1 只有h2到h7 h2為最大 h7為最小定義標(biāo)題
<sub></sub>定義下標(biāo)文本
<sup></sup>定義上標(biāo)文本
<details></details> 定義元素細(xì)節(jié) 用戶點(diǎn)擊查看點(diǎn)擊隱藏
<summary><summary> 為details標(biāo)簽定義標(biāo)題

了解級(jí)別：
<center></center> 居中標(biāo)簽 H5中已舍棄
<font></font> 字體標(biāo)簽 H5中已舍棄
屬性:
size 設(shè)置字體的大小最大支持7 最小是1
color 設(shè)置字體的顏色
face 設(shè)置字體的族科就是你是什么樣的字體如宋體黑體等...
注意:face 屬性設(shè)置的值必須在用戶的電腦中存在才能使用

HTML5
1.<dialog></dialog> 配合open=“true”
Eg: <dialog open=”true”>
<dt>在？</dt>
<dd>嗯！</dd>
</dialog>
2.<ul></ul> 定義無序列表
3.<ol></ol> 定義無序列表
4.<li></li> 定義列表項(xiàng)
5.<dl></dl> 定義一個(gè)定義列表
6.<dt></dt> 定義類額標(biāo)準(zhǔn)的項(xiàng)目，以及dialog標(biāo)簽中定義一個(gè)角色
7.<dd></dd> 定義一個(gè)項(xiàng)目的描述
8.<pre></pre> 原格式輸出(用來調(diào)試代碼)
9.<a></a> 超鏈接標(biāo)簽
常用屬性
1）href 定義a標(biāo)簽要跳轉(zhuǎn)的地址

1.1）相對(duì)路徑：   （如果是當(dāng)前目錄，不使用./也代表當(dāng)前）
                ./  當(dāng)前目錄
                ../ 上級(jí)目錄
1.2）絕對(duì)路徑：   從根開始查找，在使用絕對(duì)路徑時(shí)要加上對(duì)應(yīng)的協(xié)議
                http://     +網(wǎng)址
                    eg: http://www.baidu.com
                File:///        +絕對(duì)路徑
                    Eg: file:/// E:\wamp\www\PHP09\20170925

2）target 打開鏈接地址的方式
i. _self 默認(rèn)值在當(dāng)前窗口打開
ii. _blank 在新窗口打開
10.錨點(diǎn)的應(yīng)用
1）作用：快速定位頁(yè)面中需要定位的位置
聲明錨點(diǎn)：在需要的地方定義一個(gè)標(biāo)簽a標(biāo)簽屬性定義一個(gè)name或id屬性任意值
Eg: <a name=”one”></a>
使用錨點(diǎn)：在查詢的a標(biāo)簽中寫#后面跟id或者name的值
Eg:<a href=”#one”></a>
11.發(fā)送郵件跳轉(zhuǎn)
Mailto: 表示郵件給誰
？開始傳參
參數(shù)名CC 代表抄送
參數(shù)名BCC 代表密送
參數(shù)名Subjec 代表郵件的主題
參數(shù)名body 代表郵件的主體
12.進(jìn)度條標(biāo)簽
1）<progress></progress> IE不支持此標(biāo)簽
屬性：
Min: 設(shè)置最小值
Max: 設(shè)置最大值
Value: 設(shè)置當(dāng)前值
Eg: <progress min=”0” max=”100” value=”60%”></progress>
2）<meter></meter>定義范圍內(nèi)的度量
屬性：
Min: 設(shè)置最小值
Max: 設(shè)置最大值
Value: 設(shè)置當(dāng)前值
Low: 優(yōu)化最小值
High: 優(yōu)化最大值
Optimum: 良好值
Eg:<meter min=”0” max=”100” value=”60%” low=”30” high=”100” optimum=”100”></meter>
13.<img/>定義圖像
屬性：
Src 定義圖片地址
Width 設(shè)置圖片寬度
Height 設(shè)置圖片高度
Alt 提示信息（圖片不存在時(shí)）
Title 提示信息（鼠標(biāo)移動(dòng)到圖片上時(shí)）
Usemap 定義為圖片客戶端映射，帶有可點(diǎn)擊區(qū)域的圖片(寫法相當(dāng)于使用錨點(diǎn))
Eg:<img src=”./1.jpg” width=”300” height=”300” title=”鼠標(biāo)移動(dòng)到圖片的時(shí)候顯示的字” alt=”圖片不存在時(shí)顯示的內(nèi)容” usemap=”#wre”>
14.<map></map>定義客戶端圖像映射（相當(dāng)于聲明錨點(diǎn)）
Name/id 用來關(guān)聯(lián)
<area/> 定義圖像映射區(qū)域
Shape 定義區(qū)域的形狀
Rect 矩形
Circle 圓
Poly 多邊形
Default 默認(rèn)值整張圖
Cords 坐標(biāo)值
1) 在map標(biāo)簽中添加name或id屬性，屬性值任意
2) 在usemap屬性后面使用#后面跟name或id的屬性值即可實(shí)現(xiàn)
Eg:<map name=”wre”>
<area
</map>
15.多媒體標(biāo)簽
1）<audio></audio> 定義聲音
屬性：
Src 聲音的地址
Controls 播放控件
Loop 單曲循環(huán)
Autopray 自動(dòng)播放
Eg:<audio src=”” controls ></audio>
2）<source></source>定義資源
<source src=””></source>備用
3）<video></video> 視頻標(biāo)簽
屬性：
Src 聲音的地址
Controls 播放控件
Loop 單曲循環(huán)
Autopray 自動(dòng)播放
Poster 定義視頻在點(diǎn)擊播放前顯示的圖像
Width
height
16.<embed/>加載多媒體一般用來加載flash
屬性:
Src
Width
height
eg: <embed src=””>
注意：以上所有的多媒體都有type屬性，執(zhí)行媒介的類型，如果不知道可以不寫

HTML表格標(biāo)簽
1．<table></table>
常用屬性：
1) Border
2) Width
3) Height
4) Align left(默認(rèn)值) right center
5) Cellspacing
6) Cellpadding
7) Background
8) Bgcolor
2 .<tr></tr>
1) Align
2) Valign top middle bottom
3) Bgcolor
4) Background
5) Height
注意：tr標(biāo)簽沒有width屬性

<td></td>
1) Align
2) Vlign
<th></th>
<caption></caption>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
HTML中的表單
<form></form>
常用屬性：
1) Action
2) Methot
(1) GET
(2) POST
3)
<input/>
常用屬性：
1) Name
2) Type
(1) Text
(2) Submit
(3) Password
(4) Radio
(5) Checkbox []
(6) File
(7) Reset
(8) Hidden
(9) Button
(10) Image alt
(11) Button

3) Checked
4) Value

<label></label>
<input type=”submit” value=”提交”/>
= <button type=”submit”>提交</button>
= <button>提交</button>
<select></select>
常用屬性：
1) Name
<option></option>
常用屬性：
1) Value
注意：value定義列表項(xiàng)的默認(rèn)值, 如果列表項(xiàng)中設(shè)置默認(rèn)值提交時(shí)則拿默認(rèn)值如果沒有設(shè)置默認(rèn)值，提交是獲取的option標(biāo)簽中間的內(nèi)容

2) Selected

<textarea></textarea>
常用屬性：
1) Name
2) Rows
3) Cols
注意：多行文本域沒有value屬性，默認(rèn)值寫在標(biāo)簽texrarea中間
H5新增表單標(biāo)簽
<datalist></datalist> 可選數(shù)據(jù)列表
<option></option> 列表項(xiàng)
如何實(shí)現(xiàn)可選數(shù)據(jù)列表和普通文本域進(jìn)行關(guān)聯(lián)
在datalist標(biāo)簽中定義id屬性屬性值任意
在普通文本域中定義list屬性屬性值為id的值即可實(shí)現(xiàn)關(guān)聯(lián)
新增的表單類型 type值為:
email 設(shè)定當(dāng)前表單的驗(yàn)證方式是email方式驗(yàn)證
url 設(shè)定當(dāng)前表單的驗(yàn)證方式是URL驗(yàn)證方式
number 設(shè)定當(dāng)前表單的驗(yàn)證方式是數(shù)值驗(yàn)證
range 設(shè)定當(dāng)前表單的驗(yàn)證方式必須在指定的范圍
search 設(shè)定當(dāng)前表單為搜索表單
color 設(shè)定當(dāng)前表單為顏色選取表單
tel 設(shè)定當(dāng)前表單為電話號(hào)碼表單
知道: 谷歌瀏覽器支持
data 日期選取表單
time 時(shí)間選取表單
week 周選取表單
month 月份選取表單
datetime-local 完整日期選取表單
新表單的用法:
HTML5中為了排版方便表單中允許跳出表單之外但是要實(shí)現(xiàn)提交功能需要做2件事
為form標(biāo)簽添加唯一id屬性屬性值任意
需要提交的元素填寫form屬性屬性值為form標(biāo)簽的id屬性值即可實(shí)現(xiàn)關(guān)聯(lián)
<fieldset></fieldset> 將表單內(nèi)的相關(guān)元素進(jìn)行分組
<legend></legend> 為fieldset定義標(biāo)題
<optgroup></optgroup>為下拉列表定義分組
配合屬性label 定義分組的標(biāo)題
form表單中的屬性
readonly -- 只讀輸入域可以選擇但是無法修改
disabled -- 禁用，輸入域無法使用無法獲取焦點(diǎn) 無法選擇以灰色顯示
autofocus -- 自動(dòng)獲取焦點(diǎn)
placeholder 表單信息提示
用于代替表單中顯示默認(rèn)值使用 value的情況 placeholder取代了value屬性的顯示提示信息的功能并不會(huì)隨著提交而去
required 用于強(qiáng)制用戶必須填寫該表單賦值否則有提示信息
min 用于設(shè)定表單的最小值
max 用于設(shè)定表單的最大值
step 設(shè)定跳過的數(shù)值或者設(shè)定2個(gè)數(shù)值之間的間隔
multiple 設(shè)定當(dāng)前表單允許同時(shí)選擇多個(gè)文件使用于 input type=file
pattern: 用戶自定義驗(yàn)證規(guī)則(需要配合正則的語法)[A-Z] 表示大寫字母A到Z 之前任意一個(gè)字母
novalidate 取消表單的驗(yàn)證適用于form標(biāo)簽
tabindex tab鍵切換索引屬性

formaction：用于在提交按鈕中修改當(dāng)前表單的提交頁(yè)面
formmethod 用于在提交按鈕中修改當(dāng)前表單的提交方式
formnovalidate 用于在提交按鈕中修改當(dāng)前表單的不驗(yàn)證
formenctype: 用于在提交按鈕中修改當(dāng)前表單提交數(shù)據(jù)編碼類型(一般不用) 文件上傳的在php上傳文件的時(shí)候我們講

HTML中全局屬性 name id class style
contentEditable 內(nèi)容可編輯屬性
設(shè)定改屬性的元素內(nèi)容允許在頁(yè)面中直接編輯
designMode 頁(yè)面可編輯屬性(標(biāo)簽無法使用只能js用)
注意: 當(dāng)前屬性不是任何標(biāo)簽的屬性而是文檔的屬性如果文檔設(shè)置該屬性為on 那么頁(yè)面中所有元素均可修改
注意:以上兩個(gè)屬性在頁(yè)面中修改只是臨時(shí)修改，如果需要長(zhǎng)期修改需要以后學(xué)習(xí)JS和AJAX等技術(shù)配合使用
hidden 隱藏屬性
在html5中允許對(duì)任何標(biāo)簽使用hidden屬性，用于隱藏該標(biāo)簽的顯示
HTML框架標(biāo)簽
<frameset></frameset> 代替body標(biāo)簽定義框架頁(yè)面并且定義框架頁(yè)面分多少行與多少列
常用屬性
cols 定義框架頁(yè)含有多少列與列的大小
rows 定義框架頁(yè)含多少行與行的大小(每個(gè)值使用逗號(hào)分隔，值可以是像素或者百分比 * 代表匹配所有大小)
<frame/> 定義frameset標(biāo)簽中每個(gè)框架頁(yè)的內(nèi)容
src - 定義了內(nèi)容頁(yè)URL
name 在一個(gè)框架頁(yè)連接到另一個(gè)頁(yè)面的時(shí)候使用定義名稱
Iframe
<iframe></iframe> 在頁(yè)面中開一塊空間鏈接的子頁(yè)面
常用屬性：src
Width
height
frameborder
CSS3
CSS cascading style sheet
CSS的基本語法
1) CSS定義：由選擇器、屬性、屬性值組成
格式：選擇器{屬性名：屬性值; 屬性名：屬性值;}
2) CSS中的注釋：/注釋內(nèi)容/
在HTML中放置css樣式的幾種方式
1) 內(nèi)聯(lián)樣式表行內(nèi)引用
<p style=”color:yellow”>內(nèi)容</p>
2) 內(nèi)嵌樣式表內(nèi)部引用寫在head頭的style標(biāo)簽里
<style> P{color:red;} </style>
3) 外部連接樣式表外部引用
<link rel=”stylesheet” type=”text/css” href=””/>
Css文件以.css結(jié)尾
4) 引入方式<style>
@import”css文件路徑”;
br/><style>
@import”css文件路徑”;
注意：如果style樣式表引入css文件就不要在style標(biāo)簽中再寫其他樣式
5) 多重樣式表疊加，依照優(yōu)先級(jí)。
內(nèi)聯(lián)優(yōu)先級(jí)最高,內(nèi)部和外部連接之間是最后定義的優(yōu)先
選擇器
1) 基本選擇器
(1) 類選擇器 class屬性css: .class屬性名{}
可以在class屬性值中通過空格分隔起多個(gè)屬性值
(2) 唯一選擇器 id屬性css: #id屬性名{}
在當(dāng)前id只能寫一個(gè)屬性值
(3) 標(biāo)簽選擇器tagname 標(biāo)簽名{}
(4) 通用選擇器匹配所有標(biāo)簽
2) 層級(jí)選擇器
(1) 組合選擇器 div,p多個(gè)選擇器之間用逗號(hào)隔開
(2) 包含選擇器 div p 只要p標(biāo)簽被div包含
(3) Div>p 選擇所有作為div元素的子元素(父子)
(4) Div+p 選擇緊貼著div元素之后的p元素(同級(jí))
(5) Div~p 選擇div元素之后的所有兄弟元素p(同級(jí))
3) 屬性選擇器
(1) 根據(jù)屬性名或?qū)傩灾祦碚业皆?br/>E element 元素標(biāo)簽
ATT attribute 屬性
VAL value 值
E[ATT] 匹配所有具有ATT屬性事物E元素
E[ATT=val] 匹配所有att屬性等于val的E元素
E[ATT~=val]匹配所有att屬性具有多個(gè)空格分隔的值
E[ATT^=val]屬性att的值以val開頭的E元素
E[ATT$=val] 屬性att的值以val結(jié)尾的E元素
E[ATT=val]屬性att的值包含val的E元素
CSS3 結(jié)構(gòu)性偽類選擇器
偽元素選擇器
(1) 不是對(duì)真正的元素進(jìn)行選擇
E:first-line E元素的第一行內(nèi)容
E:first-letter E元素的第一個(gè)字母
E:before 在E元素內(nèi)容之前
E:before{content:寫要添加的內(nèi)容}
E:after 在E元素內(nèi)容之后
E:after{content:寫要添加的內(nèi)容}
結(jié)構(gòu)性偽類選擇器
(1) 四個(gè)最基本的結(jié)構(gòu)上偽類選擇器
① :root 將樣式綁定到頁(yè)面的跟元素
所謂的根就是位于文檔數(shù)中最頂層結(jié)構(gòu)元素在HTML頁(yè)面中可就是只包含整個(gè)頁(yè)面的<html>部分
② E:not() 除了某一個(gè)元素
對(duì)某個(gè)元素使用樣式但是想拍出這個(gè)元素下的某個(gè)子元素
③ E:empty 所有為空的E元素
④ :target 連接到目標(biāo)時(shí)
(2) 其他的偽類選擇器
E:first-child 對(duì)一個(gè)父元素中的第一個(gè)子元素E設(shè)置樣式
E:last-child 對(duì)一個(gè)父元素中的最后一個(gè)子元素E設(shè)置樣式
E:nth-child() 對(duì)指定需要的子元素E設(shè)置樣式(正序)
(odd) 所有正序下來的奇數(shù)個(gè)子元素
(even) 所有正序下來的偶數(shù)個(gè)子元素
E:nth-last-child() 對(duì)指定需要的子元素 E設(shè)置樣式(倒序)
(odd) 所有倒序上去的第奇數(shù)個(gè)子元素
(even) 所有倒序上去的第偶數(shù)個(gè)子元素
E:nth-child(an+b) 循環(huán)樣式
a 表示循環(huán)間隔的次數(shù)
b 表示循環(huán)開始樣式
E:nth-of-type() 與nth-child作用類似但是他僅匹配使用同種標(biāo)簽的元素
E:nth-last-of-type() 與nth-last-child 作用類似但是他僅匹配使用同種標(biāo)簽的元素
E:fist-of-type 和filst-child 作用類似但是他僅匹配使用同種標(biāo)簽的元素
E:last-of-type和 last-child 作用類似但是他僅匹配使用同種標(biāo)簽的元素
E:only-child 匹配父元素下僅有一個(gè)子元素的并且這個(gè)子元素為E
E:only-of-type 匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素E
(父元素下可以有多個(gè)元素但是只能有一個(gè)元素為E的)
E:enabled 匹配表單中激活元素
E:disabled 匹配表單中禁用元素
E:checked 匹配表單中被選中的radio或者checkbox元素
E:selection 在實(shí)現(xiàn)選中文本的時(shí)候在火狐瀏覽器中為實(shí)驗(yàn)性質(zhì),要想測(cè)試需要在該瀏覽器前面加上火狐瀏覽器私有前綴-moz- 私有前綴
私有前綴的作用: 測(cè)試某個(gè)屬性是實(shí)驗(yàn)性質(zhì)時(shí)使用
火狐兼容
::-moz-selection{}
偽類選擇器
定義好的不能隨便起名，是為固定的某個(gè)元素在不同狀態(tài)上的定義目前a標(biāo)簽有幾種不同的狀態(tài)
:link 設(shè)置超級(jí)鏈接a在未被訪問前的樣式
:visited 設(shè)置超級(jí)鏈接a在其他鏈接地址被訪問的渦陽(yáng)
:active 設(shè)置元素被用戶激活(鼠標(biāo)點(diǎn)擊與釋放之間)時(shí)的樣式
:hover 設(shè)置元素在鼠標(biāo)懸停時(shí)的樣式（所有標(biāo)簽都可以使用）
:focus 設(shè)置元素在其獲取鼠標(biāo)焦點(diǎn)的樣式
CSS 常用屬性
1.字體屬性:
font-size: 設(shè)置字體大小
常見的單位:
px 像素屏幕中一個(gè)點(diǎn)就是一個(gè)像素
(相對(duì)單位)
em 相當(dāng)于一個(gè)漢字的大小
font-style：設(shè)置字體樣式正常和斜體
normal 正常字體
italic 斜體
font-family 用于設(shè)置字體的類型
注意: 頁(yè)面中該屬性設(shè)置的字體必須存在與客戶端電腦中才可以使用
font-weight : 設(shè)置字體的粗細(xì)
屬性值:
bold 粗體
默認(rèn)值:normal
font-variant 設(shè)置字體為小型的大寫字母
取值:
normal 默認(rèn)值
small-caps 將小寫字母變?yōu)樾⌒痛髮懽帜?br/>font 字體樣式統(tǒng)一設(shè)置標(biāo)簽
但是主要注意:使用該屬性時(shí) 值具有順序關(guān)系必須依照順序來寫不存在的可以省略
font 屬性順序 :<{斜體小型大寫字母粗體}> <字體/行高><類型>
2.文本屬性
text-indent 首行縮進(jìn)
常用單位: em 一個(gè)漢字的大小
line-height:用于設(shè)置當(dāng)前文本的行高就是一行的高度
設(shè)置行高美化效果
用于單行文本的垂直居中設(shè)置(行高設(shè)置為元素的高度即可)
text-align:設(shè)置元素內(nèi)容的水平對(duì)齊方式
取值 :left center right;
text-decoration 設(shè)置文本修飾
取值:
none 不修飾
underline 下劃線
line-through 刪除線
word-spacing 設(shè)置單詞之間的距離（對(duì)于中文需要加上每個(gè)字加上空格才有效果）
letter-spacing 設(shè)置字母之間的間距的
背景屬性:
尺寸屬性：
列表屬性：
盒子模型
背景屬性
Background-color
Background-image
Background-repeat
Background-position
Background-attachment
尺寸屬性
Width
Height
Min-height
Max-height
列表屬性
List-style-type：設(shè)置列表的符號(hào)樣式
List-style-image：使用指定的圖片來代替列表的序號(hào)
格式：list-style-image：URL（圖片地址）
List-style-position
字體顏色屬性
Color
定位屬性
Position：設(shè)置元素的定位方式
Static
Absolute
Relative
Fixed
布局屬性
<div></div>
<span></span>
布局屬性
Display
1) None
2) Inline
3) Block
4) Inline-block
Visibility
1) Visible
2) Hidden
注：visibility和display隱藏的區(qū)別，visibility占位隱藏，display不占位隱藏
Overflow
1) Hidden
2) Scroll
3) Visible
4) auto
float
1) left
2) right
clear
1) left
2) right
3) both
盒子模型
1) 外邊距 margin
(1) Margin-top
(2) Margin-right
(3) Margin-bottom
(4) Margin-left
簡(jiǎn)寫屬性：
Margin:10px
Margin:10px(上下) 50px(左右)
Margin:10px(上) 50px(左右) 80px（下）
Margin:10px(上) 50px(右) 80px(下) 100px(左)

2) 內(nèi)邊距 padding
(1) Padding-top
(2) Padding-left
(3) Padding-bottom
(4) Padding-right
3) 邊框 border

Cursor
1) Text
2) Crosshair
3) Help
4) Wait
5) pointer
border
1) border-color
2) border-width
3) border-style
(1) dotted 點(diǎn)線
(2) dashed
(3) solid
(4) double 雙實(shí)線
(5) groove 槽狀線
(6) ridge 脊線
(7) inset 內(nèi)嵌效果
(8) outset
4) border-top
(1) border-top-width
(2) border-top-color
(3) border-top-style

5) border-left
6) border-right
7) border-bottom

兼容性
*{margin:0px;padding:0px;}
img{border:0px;}
a{text-decoration:none;}
ul li{list-style:none;}
body,h2,h3,h4,h5,h6,h7{
font:15px 微軟雅黑;
}
布局
div+css布局
三列浮動(dòng)布局
二列浮動(dòng)布局
html5 布局

結(jié)構(gòu)標(biāo)簽(重點(diǎn))
header 表示頁(yè)面中的一個(gè)內(nèi)容區(qū)域或者整體內(nèi)容的標(biāo)題
<header></header>
nav 表示連接導(dǎo)航部分
<nav></nav>
footer 表示整個(gè)頁(yè)面或者頁(yè)面中的一個(gè)內(nèi)容區(qū)域的腳注一般用來他會(huì)包含作者姓名文章創(chuàng)建的時(shí)間或者是作者的聯(lián)系方式
<footer></footer>
section 定義文檔或者應(yīng)用程序的一區(qū)段文章章節(jié) 頁(yè)眉
article 文檔中的一塊獨(dú)立內(nèi)容寫文章寫新聞
aside 側(cè)邊欄制作滾動(dòng)廣告
css3新屬性
顏色單位
rgb(255,255,255) rgb(100%,100%,100%)
rgba(255,255,255,); a代表透明度(0-1)
hsl
H:hue(色調(diào)) 0-360 0 和360表示紅色 120表示綠色 240表示藍(lán)色其他的數(shù)值就是指定顏色取值0-360
S:saturation 飽和度取值為 0,0%-100% 0% 黑色 100% 全彩色
L:lightness 亮度取值范圍 0.0%-100% 0.0%黑色-100% 白色
hsla a 代表透明度
邊框?qū)傩?br/>border -color
border-width
border-style
border-image
border-radius 圓弧
一個(gè)值四個(gè)角
二個(gè)值第一個(gè) 左上右下第二個(gè) 右上左下
三個(gè)值第一個(gè)值左上第二個(gè) 右上左下第三個(gè)值右下
四個(gè)值左上右上右下左下
背景圖片
background-size: 設(shè)置圖片大小的
background-size :100px 100px
background-size :100% 100%
background-size :cover 等比例縮放超出部分不顯示
background-size :contain 等比例縮放缺少部分白色補(bǔ)全
文本屬性(重點(diǎn))
text-overflow
ellipsis 顯示省略號(hào)
white-space
nowrap 不換行
以上內(nèi)容是讓你的中文超出部分以省略號(hào)顯示
text-shadow 文字陰影
第一個(gè)參數(shù) 必須寫水平偏移值可以是負(fù)值
第二個(gè)參數(shù) 必須寫垂直偏移值可以是負(fù)值
第三個(gè)參數(shù) 可選寫模糊距離
第四個(gè)參數(shù) 可選寫顏色
每個(gè)參數(shù)之間都有空格隔開

名稱欄目：htmlcss
鏈接分享：http://aaarwkj.com/article18/pchpdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、靜態(tài)網(wǎng)站、網(wǎng)站制作、營(yíng)銷型網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、品牌網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

htmlcss