VII html+css
VII html+css
?
掌握html全部語法，主體結構，超鏈接，常用標記的使用；
掌握css的三種選擇器的使用，使用DIV+CSS進行網頁布局，搞清浮動問題；
?
1、語法：語法格式，文檔注釋，代碼格式；
2、基本結構：標記<html>,<head>,<title>,<body>；
3&4、文檔設置標記：
格式標記：<br>,<p>,<center>,<pre>,<li>,<ul>,<ol>,<dl>,<dt>,<dd>,<hr>,<div>；
文本標記：<hn>,<font>,<b>,<i>,<sub>,<sup>,<tt>,<cite>,<em>,<strong>,<small>,<big>,<u>；
5、圖像標記：<img>；
6、超鏈接的使用：<a>；
7、表格：<table>,<caption>,<tr>,<th>,<td>；
8、框架：<frameset>,<frame>；
9、表單設計：<form>,<input>,<select>；
10、使用css樣式的方法：引用css的方式；
11、定義css樣式表：標簽選擇器、class選擇器、ID選擇器、組合選擇器、偽裝選擇器、優先級問題；
12、CSS屬性：網頁中常用的顏色屬性、字符屬性、背景屬性、文本屬性、邊框屬性；
13、DIV+CSS布局：盒模型、布局相關屬性（定位、浮動、顯示、溢出）；
14&15、企業網站首頁：設計圖的切圖、網頁的整體框架、項目網站的內容樣式；
?
注：
單標記：<meta/>,<hr/>,<img/>,<frame/>,<input/>,<link/>；
?
1、HTML語法：
HTML標記語言，表示網頁信息的符號和標記語言；
?
特點：
可設置文本的格式，如標題、字號、文本顏色、段落等；
可創建列表；
可插入圖像和媒體；
可建立表格；
超鏈接，點擊可跳轉；
?
HTML的標記和屬性：
標記：
HTML文檔的保存格式：.html|.htm|.xhtml；
標記和被標記的內容構建出HTML文檔，格式為：
<標記>
內容
</標記>
標記的屬性：就是用來控制內容（圖像、文本等）如何顯示；格式為：
<標記 屬性1=屬性值 屬性2=屬性值 ...>內容</標記>，如：
<body bgcolor="red">內容</body>
?
語法不區分字母大小寫，如<html>,<HTML>,<Html>，建議都用小寫；
?
文檔注釋：
用<!--example comment-->；
?
代碼格式：
空格和回車在網頁中不起作用，為讓代碼清晰易讀，可使用空格和回車進行編排；
縮進時保持嚴格的規則，用tab；
?
字符實體：
如想在網頁中顯示<（<符號在HTML中是文檔標記的開始語言），要用實體名來代替；
常見的字符實體有：
實體名稱 | 描述 | 實體編號 |
| 空格 |   |
< | <小于號 | < |
> | >大于號 | > |
& | &和號 | & |
" | "引號 | " |
' | '撇號，IE不支持 | ' |
¢ | ￠分 | ¢ |
£ | ￡鎊 | £ |
¥ | ￥日元 | ¥ |
€ | 歐元 | € |
§ | §小節 | § |
© | 版權 | © |
® | 注冊商標 | ® |
™ | TM商標 | ™ |
× | X乘號 | × |
÷ | ÷除號 | ÷ |
?
?
2、HTML的基本結構：
<html>內容</html>
解釋：HTML文檔的文檔標記，也稱為HTML開始標記；
功能：分別位于網頁的最前端和最后端；
注：
在HTML中，任意個空格或任意個回車只被當作是一個空格；
若用<pre></pre>則內容中的多個空格或多個回車會完全顯示；
?
<head>內容</head>
解釋：HTML文件頭標記，也稱為HTML頭信息開始標記；
功能：用來包含文件的基本信息，如網頁的標題、關鍵字、在<head></head>內可放<title></title>,<meta>,<style></style>等標記；
?
<title>內容</title>
解釋：HTML文件標題標記；
功能：網頁的主題，顯示在browser的窗口的左上邊；
注意：網頁的標題不能太長，要矮小精悍，能具體反映頁面的內容，<title></title>標記中不能包含其它標記，<title></title>在<head></head>中；
?
<body>內容</body>
解釋：HTML文檔的主體標記；
功能：<body></body>是網頁的主體部分，在此標記之間可包含<p></p>,<h1></h1>,<br>,<hr>等標記，正是由這些內容組成了我們所看見的網頁；
body標記的常見屬性：
bgcolor，設置背景顏色，如<bodybgcolor="red"></body>；
text，設置文本顏色，<bodytext="green"></body>；
link，設置鏈接顏色，<bodylink="blue"></body>；
vlink，已經訪問了的鏈接顏色，<bodyvlink="yellow"></body>；
alink，正在被點擊的鏈接顏色，<bodyalink="red"></body>；
?
<meta>
解釋：頁面的元信息，meta-information，<meta>是單標記，且必須要放在<head></head>標記里；
功能：提供有關頁面的元信息，如針對搜索引擎和更新頻度的描述和關鍵詞；
必須的屬性：content="some_text"，定義name屬性相關的元信息；
常用的name屬性：author,keywords,description,others，把content屬性關聯到一個名稱，如描繪出網頁的關鍵詞：<meta name="keywords" content="maizi學院IT在線培訓">；
?
舉例：
<html>
???????? <head>
?????????????????? <title>this is test.html</title>
?????????????????? <!--要與開發工具notepad++上"格式"中的字符集保持一致-->??????????????????
?????????????????? <metacharset='utf-8'>
?????????????????? <!--兩個關鍵字-->
?????????????????? <metaname='keywords' content='maizi學院,在線IT培訓'>
???????? </head>
???????? <body bgcolor='green',text='blue' link='red' vlink='blue' alink='yellow'>
?????????????????? <h1>this is a context title</h1>
?????????????????? <ahref='http://www.baidu.com'>百度</a>
???????? </body>
</html>
?
?
3、文檔設置標記：
一、格式標記：
<br/>，強制換行標記，讓后面的文字、圖片、表格等等，顯示在下一行；
?
<p></p>，換段落標記，由于多個空格和回車在HTML中會被等效為一個空格，所以HTML中要換段落用<p>，<p>段落中也可包含<p>段落；
?
<center></center>，居中對齊標記，讓段落或文字相對于父標記居中顯示；
?
<pre></pre>，預格式化標記，保留預先編排好的格式；
?
<li></li>，列表項目標記，每一個列表使用一個<li></li>標記；
?
<ul></ul>，無序列表標記，需<li>配合；
?
<ol></ol>，有序列表標記，可以顯示特定的一些順序，格式：
<ol type="符號類型">
???????? <litype="符號類型"></li>
???????? <litype="符號類型"></li>
</ol>
有序列表里type屬性值：1，阿拉伯數字123等，是默認type屬性值；A，大寫字母ABC等；a，小寫字母abc等；I，大寫羅馬數字I，II，III等；i，小寫羅馬數字，i,ii,iii等；
value，指定一個新的序列數字起始值；
列表可以進行嵌套；
?
<dl></dl>,<dt></dt>,<dd></dd>，定義型列表：
使用場合：對列表條目進行簡短的說明；
格式：
<dl>
???????? <dt>軟件說明：</dt>
???????? <dd>簡單介紹軟件的功能及基本應用</dd>
???????? <dt>軟件界面</dt>
???????? <dd>用于選擇軟件的外觀</dd>
</dl>
?
<hr/>，水平分割標記，段落之間的分割線，<hr/>是單標記，如：
<body>
???????? maizi
???????? <hr/>
???????? maizi
</body>
?
<div></div>，分區顯示標記，也稱為層標記，常用來編排一大段的HTML段落，也可用于格式化表，和<p>類似，層可以多層嵌套使用，如：
<body>
???????? <div>
?????????????????? maizi
?????????????????? <hr>
?????????????????? maizi
???????? </div>
</body>
?
3&4、文檔設置標記：
二、文本標記：
hn，標題標記，共有6個級別，n的范圍1-6，不同級別對應顯示大小不同的標題，h1最大，h6最小；
?
font，字體設置標記，設置字體的格式，三個常用屬性：
size，<fontsize='3'>，取值范圍1-7，browser默認3，XHTML1.0中不支持size屬性；
color，<fontcolor='red'>；
face，<font face='微軟雅黑'>；
注：css字體中英文對照表
中文名 | 英文名 | Unicode | Unicode 2 |
Mac OS | |||
華文細黑 | STHeiti Light [STXihei] | \534E\6587\7EC6\9ED1 | 華文細黑 |
華文黑體 | STHeiti | \534E\6587\9ED1\4F53 | 華文黑體 |
華文楷體 | STKaiti | \534E\6587\6977\4F53 | 華文楷體 |
華文宋體 | STSong | \534E\6587\5B8B\4F53 | 華文宋體 |
華文仿宋 | STFangsong | \534E\6587\4EFF\5B8B | 華文仿宋 |
麗黑 Pro | LiHei Pro Medium | \4E3D\9ED1 Pro | 麗黑 Pro |
麗宋 Pro | LiSong Pro Light | \4E3D\5B8B Pro | 麗宋 Pro |
標楷體 | BiauKai | \6807\6977\4F53 | 標楷體 |
蘋果麗中黑 | Apple LiGothic Medium | \82F9\679C\4E3D\4E2D\9ED1 | 蘋果麗中黑 |
蘋果麗細宋 | Apple LiSung Light | \82F9\679C\4E3D\7EC6\5B8B | 蘋果麗細宋 |
Windows | |||
新細明體 | PMingLiU | \65B0\7EC6\660E\4F53 | 新細明體 |
細明體 | MingLiU | \7EC6\660E\4F53 | 細明體 |
標楷體 | DFKai-SB | \6807\6977\4F53 | 標楷體 |
黑體 | SimHei | \9ED1\4F53 | 黑體 |
宋體 | SimSun | \5B8B\4F53 | 宋體 |
新宋體 | NSimSun | \65B0\5B8B\4F53 | 新宋體 |
仿宋 | FangSong | \4EFF\5B8B | 仿宋 |
楷體 | KaiTi | \6977\4F53 | 楷體 |
仿宋_GB2312 | FangSong_GB2312 | \4EFF\5B8B_GB2312 | 仿宋_GB2312 |
楷體_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 | 楷體_GB2312 |
微軟正黑體 | Microsoft JhengHei | \5FAE\x8F6F\6B63\9ED1\4F53 | 微軟正黑體 |
微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 | 微軟雅黑 |
Office | |||
隸書 | LiSu | \96B6\4E66 | 隸書 |
幼圓 | YouYuan | \5E7C\5706 | 幼圓 |
華文細黑 | STXihei | \534E\6587\7EC6\9ED1 | 華文細黑 |
華文楷體 | STKaiti | \534E\6587\6977\4F53 | 華文楷體 |
華文宋體 | STSong | \534E\6587\5B8B\4F53 | 華文宋體 |
華文中宋 | STZhongsong | \534E\6587\4E2D\5B8B | 華文中宋 |
華文仿宋 | STFangsong | \534E\6587\4EFF\5B8B | 華文仿宋 |
方正舒體 | FZShuTi | \65B9\6B63\8212\4F53 | 方正舒體 |
方正姚體 | FZYaoti | \65B9\6B63\59DA\4F53 | 方正姚體 |
華文彩云 | STCaiyun | \534E\6587\5F69\4E91 | 華文彩云 |
華文琥珀 | STHupo | \534E\6587\7425\73C0 | 華文琥珀 |
華文隸書 | STLiti | \534E\6587\96B6\4E66 | 華文隸書 |
華文行楷 | STXingkai | \534E\6587\884C\6977 | 華文行楷 |
華文新魏 | STXinwei | \534E\6587\65B0\9B4F | 華文新魏 |
?
?
b，粗字體標記；
?
i，斜體字標記；
?
sub，文字下標字體標記；
?
sup，文字上標字體標記；
?
tt，打印機字體標記；
?
cite，引用方式的字體，通常是斜體；
?
em，表示強調，通常顯示為斜體字；
?
strong，表示強調，通常顯示為粗體字；
?
small，小型字體標記，可多級嵌套；
?
big，大型字體標記，可多級嵌套；
?
u，下劃線字體標記，字體會多出下劃線；
?
?
5、<img>圖像標記：
使用方法：<img src='/path/to/file' width='屬性值' height='屬性值' border='屬性值' alt='屬性值'>
注意：<img>為單標記；在加載圖像文件的時候，文件的路徑或文件名或文件格式錯誤，將無法加載圖片；
<img>標記屬性：
src，指定加載圖片的路徑、圖片名稱、圖片格式；
width，寬度，單位px像素、em、cm、mm；
height，高度，單位px、em、cm、mm；
border，圖片的邊框寬度，單位px、em、cm、mm；
alt，當網頁上的圖片被加載完成后，鼠標移動到上面，顯示的指定的屬性文字；如果圖像沒有下載或者加載失敗，會用文字來代替圖像顯示；搜索引擎可通過這個局長的文字來抓取圖片；
?
?
6、超鏈接的使用：
語法：<a href='' target='打開方式' name='頁面錨點名稱'>鏈接文字或圖片</a>
屬性：
href屬性，鏈接的地址，鏈接的地址可以是一個網頁，也可以是一個視頻、圖片、音樂等；
例：
<a href='http://www.baidu.com'>百度</a>?? #站外鏈接
<a href='test2.html'>test2</a>?? #站內鏈接
?
target屬性：
作用：定義超鏈接的打開方式；
屬性值：
_blank，在一個新的窗口中打開鏈接；
_self，默認值，在當前窗口中打開鏈接；
_parent，在父窗口中打開頁面（框架中使用較多）；
_top，在頂層窗口中打開文件（框架中使用較多）；
?
name屬性：
指定頁面的錨點名稱；
例：
<body>
???????? <ahref='#dibu'>到頁面底部</a>
???????? <ahref='#zhongbu'>到頁面中部</a>
???????? <aname='dingbu'></a>
???????? <div>
???????? ???????? <p>
???????? ???????? ……
???????? ???????? <a name='zhongbu'></a>
???????? ???????? <h1>這是中部</h1>
???????? ???????? ……
???????? ???????? </p>
???????? <div>
???????? <aname='dibu'></a>
???????? <h1>這是底部</h1>
???????? <ahref='#dingbu'></a>
</body>
?
?
7、表格：
<table></table>標記：
基本格式：<table 屬性1='屬性值1' 屬性2='屬性值2'...>表格內容</table>
table標記屬性：
width，表格的寬度，值可以是px，也可以是父級元素的百分比%；
height，高度，px；
border，外邊框的寬度；
align，表格的顯示位置，left居左顯示默認值，center居中顯示，right居右顯示；
cellspacing，單元格之間的間距，默認2px，單位px；
cellpadding，單元格內容與單元格邊框的顯示距離；
frame，控制表格邊框最外層的四條線框，void默認值表示無邊框，above僅頂部有邊框，below底部有邊框，hsides僅有頂部邊框和底部邊框，lhs僅有左側邊框，rhs僅有右側邊框，vsides僅有左右側邊框，box包含全部4個邊框，border包含全部4個邊框；
rules，控制是否顯示及如何顯示單元格之間的分割線，none默認值表示無分割線，all包括所有分割線，rows僅有行分割線，clos僅有列分割線，groups僅在行組和列組之間有分割線；
?
<caption></caption>標記：
如果表格需要使用標題，用caption標記；
caption屬性的插入位置直接位于<table>屬性之后<tr></tr>表格行之前；
align屬性：
top，標題放在表格的上部；
bottom，標題放在表格的下部；
left，標題放在表格的左部；
right，標題放在表格的右部；
?
<tr>標記：
定義表格的一行，對于每一個表格行，都是由<tr>...</tr>標記表示，每一行tr標記內可嵌套多個<td></td>或<th></th>標記；
屬性：
bgcolor，背景顏色，格式：bgcolor='顏色值'；
align，設置水平方向對齊方式，格式：align='值'，值有top靠頂端對齊，bottom靠底部對齊，middle居中對齊；
valign，設置垂直方向對齊方式，格式：valign='值'，值有left左對齊，right右對齊，center居中對齊；
?
<td></td>和<th></th>：
都是單元格的標記，必須嵌套在<tr>標簽內，是成對出現；
兩者區別：
th是表頭標記，通常位于首行或首列，th的文字默認會被加粗，而td不會；
td是數據標記，表示該單元各的具體數據；
共同之處：
兩者標記屬性都是一樣的；
屬性：
bgcolor；
align，設置單元格水平對齊方式；
valign，設置單元格垂直對齊方式；
width；
height；
rowspan，設置單元格所占行數；
colspan，設置單元格所占列數；
?
?
舉例（網頁布局）：
使用表格實現：
???????? <body topmargin='0' leftmargin='0'>
?????????????????? <table border='1' width='960' cellspacing='0' cellpadding='0'>
??????????????????????????? <tr height='90' bgcolor='red'>
???????????????????????????????????? <td>
?????????????????????????????????????????????? <fontsize='5'>
?????????????????????????????????????????????? <b>網頁頭部</b>
?????????????????????????????????????????????? </font>
???????????????????????????????????? </td>
??????????????????????????? </tr>
???????????????????????????
??????????????????????????? <tr>
???????????????????????????????????? <td>
?????????????????????????????????????????????? <table height='500' width='30%' bgcolor='yellow'>
??????????????????????????????????????????????????????? <tr align='center'>
???????????????????????????????????????????????????????????????? <td>
?????????????????????????????????????????????????????????????????????????? <fontsize='5'>
?????????????????????????????????????????????????????????????????????????? <b>網頁左部</b>
?????????????????????????????????????????????????????????????????????????? </font>
???????????????????????????????????????????????????????????????? </td>
??????????????????????????????????????????????????????? </tr>
?????????????????????????????????????????????? </table>
?????????????????????????????????????????????? <table height='500' width='70%' bgcolor='green'>
??????????????????????????????????????????????????????? <tr align='center'>
???????????????????????????????????????????????????????????????? <td>
?????????????????????????????????????????????? ??????????????????????????? <fontsize='5'>
?????????????????????????????????????????????????????????????????????????? <b>網頁右部</b>
?????????????????????????????????????????????????????????????????????????? </font>
???????????????????????????????????????????????????????????????? </td>
??????????????????????????????????????????????????????? </tr>
?????????????????????????????????????????????? </table>
???????????????????????????????????? </td>
??????????????????????????? </tr>
???????????????????????????
??????????????????????????? <tr height='90' bgcolor='red'>
???????????????????????????????????? <td>
?????????????????????????????????????????????? <fontsize='5'>
?????????????????????????????????????????????? <b>網頁底部</b>
?????????????????????????????????????????????? </font>
???????????????????????????????????? </td>
??????????????????????????? </tr>
?????????????????? </table>
???????? </body>
?
?
8、HTML框架：
框架將browser劃分成不同的部分，每一部分加載不同的網頁，實現在同一browser窗口中加載多個頁面的效果；
<frameset></frameset>劃分框架標記：
屬性：
cols，使用px或%分割左右窗口，*表示剩余部分；如果使用*,*表示框架平均分成2個，如果使用*,*,*表示框架平均分成3個；
rows，使用px或%分割上下窗口，*表示剩余部分；
framebox，指定是否顯示邊框，0不顯示，1顯示；
border，設置邊框的大小，默認5px；
?
<frame>子窗口標記，是單標記，必須放在<frameset></frameset>中使用，在frameset中設置了幾個窗口，就必須對應使用幾個frame，而且還必須使用src屬性指定一個網頁；
屬性：
src，加載網頁文件的url地址；
name，框架名稱，是鏈接標記的target所要參數；
noresize，表示不能調整框架大小，沒有設置此項時是可調整狀態；
scolling，是否需要滾動條，值有：auto根據需要自動出現，yes有，no沒有；
frameborder，是否需要邊框，值有：(1)顯示邊框，(0)不顯示邊框；
?
?
9、表單設計：
表單標記：
<form></form>，定義表單的開始位置和結束位置，表單提交時的內容就是form表單中的內容；
格式：<form action='服務器地址' name='表單名稱' method='post|get'>...</form>；
屬性：
name，表單名稱；
method，傳送數據的方式（get（默認，用此方式提交時，會將表單的內容附加在url地址的后面，所以限制了提交的內容的長度，不能超過8192個字符，且不具備保密性）；post（方式提交時，將表單中的數據一并包含在表單主體中，一起傳送到服務器中處理，沒有數據大小限制，且具備保密性））；
action，表單數據程序程序的url地址，如果為空則使用當前文檔的url地址，如果表單中不需要使用action屬性也要指定其屬性為no；
enctype，設置表單資料的編碼方式；
target，與超鏈接類似，用來指定目標窗口；
?
文本域和密碼：
<input/>，單標記；
語法：<input type='' name='' value='' size='' maxlength=''/>
屬性：
type，兩個值：type='text'表示一個文本輸入域，type='password'表示一個密碼輸入域；
name，定義插件的名稱；
value，初始化值，打開browser時文本框中的內容；
size，設置控件的長度；
maxlength，輸入框中最大允許輸入的字符數；
?
提交、重置、普通按鈕：
<input type='submit'/>，提交按鈕；
<input type='reset'/>，重置按鈕；
<input type='button'/>，普通按鈕；
?
單選框、復選框：
<input type='radio'/>，單選框，例如實現男女只選一個：<form>性別：<input type='radio' name='sex' checked='checked'/>男 <inputtype='radio' name='sex'/>女</form>；
<input type='checkbox'/>，復選框，例如：<form>愛好：<inputtype='checkbox' name='sport' checked='checked'/>體育 <inputtype='checkbox' name='sing'/>唱歌</form>；
注意：單選框和復選框都可使用checked屬性來設置默認選中項；
?
隱藏域：
<input type='hidden'/>
?
多行文本域：
語法：<textarea name='name' rows='value' cols='value'value='value'>...</textarea>
rows屬性和cols屬性分別用來指定，顯示的行數和列數，單位是字符個數；
?
菜單下拉列表域：
語法：
<select name='' size='value' multiple>
???????? <optionvalue='value' selected>選項1</option>
???????? <optionvalue='value'>選項2</option>
???????? <optionvalue='value'>選項3</option>
</select>
?
舉例（會員登錄表單）；
?
?
?
?
10、css層疊樣式表：
一、使用css樣式的方式：
1)HTML的<!DOCTYPE>聲明標簽：不是HTML標簽，是指示browser關于頁面使用哪個HTML版本進行編寫的指令；
定義和用法：
<!DOCTYPE>聲明必須是HTML文檔的第一行，位于<html>之前；
在HTML4.01中，<!DOCTYPE>聲明引用DTD，因為HTML4.01基于SGML，DTD規定了標記語言的規則，這樣browser才能正確的呈現內容；
HTML5不基于SGML，所以不需引用DTD；
?
注：
各版本的聲明：
HTML5，HTML5向下兼容HTML4.01和XHTML：
<!DOCTYPE html>
???????? <meta charset='utf-8'>
HTML4.01：
<!DOCTYPE HTML PUBLIC "-//w3c//DTDHTML 4.01 Transitional //EN""http://www.w3.org/TR/html4/loose.dtd">
該DTD包含所有HTML元素和屬性，包括展示性的和棄用的元素（如font），不允許框架集（framesets）
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
注意的規則：
單標記必須閉合，如<br>必須寫為<br/>；
單屬性必須添加屬性值：如<input type='radio' checked>必須寫為<inputtype='radio' checked='checked'/>；
標記和屬性必須使用小寫，如<body></body>；
屬性的屬性值必須使用""，在HTML4.01之前可用<body bgcolor=red>，HTML4.01必須寫為<bodybgcolor='red'>；
?
2)內鏈式樣式表：
格式：<body style='background-color:green;margin:0;padding:0;*></body>
屬性與屬性值間用冒號分隔；
屬性與屬性之間用分號分隔；
?
3)嵌入式樣式表：
格式：<style type='text/css'></style>
例：
<head>
???????? <style type='text/css'>
?????????????????? body{
??????????????????????????? background-color:green;
??????????????????????????? color:red;
?????????????????? }
?????????????????? p{
??????????????????????????? background-color:red;
??????????????????????????? color:green;
?????????????????? }
???????? </style>
</head>
注：
<style type='text/css'>
???????? .p{color:green;font-size:28px;}
???????? .pp{color:red;}?? #或寫為.pp{color:red}
</style>
?
4)引入式樣式表：
格式：<link rel='StyleSheet' type='text/css' href='style.css'/>
<link/>是單標記，<link/>在<head></head>中定義，href中要定義.css文件；
例：
<html>
???????? <head>
?????????????????? <title>this is test.html</title>
?????????????????? <meta charset='utf-8'/>
?????????????????? <meta name='keywords' content='maizi學院,在線IT培訓'>
?????????????????? <link rel='StyleSheet' type='text/css' href='style.css'/>
???????? </head>
???????? <body>
?????????????????? <h1>maizi</h1>
???????? </body>
</html>
?
二、定義樣式表（CSS選擇器）：
注：在CSS的定義中，注釋要用/*content*/；
1)HTML標記定義：
<p>…</P>
p{屬性:屬性值;屬性1:屬性1值}
p可以叫選擇器，定義哪個標記中的內容執行其中的樣式；
一個選擇器可以控制若干個樣式屬性，多個屬性間用分號分隔，最后一個可以不加分號；
?
2)class定義：
<p>…</p>
class定義是以點.開始；
.p{屬性:屬性值;屬性1:屬性1值}
?
3)id定義：
<p id='p'>…</p>
#p{屬性:屬性值;屬性1:屬性1值}
id定義是以#開始的，是唯一選擇器，一個頁面上只允許出現一次；
?
4)優先級問題：
id > class > HTML；
同級時選擇離元素最近的一個（即，后面的會覆蓋掉前面定義的）；
例：
<head>
???????? <style type='text/css'>
???????? ???????? div {color:black;}
???????? ???????? .p {color:green;}
???????? ???????? #pp {color:yellow;}
???????? </style>
</head>
<body>
???????? <div id='pp'>
?????????????????? maizi
???????? </div>
</body>
?
5)組合選擇器（同時控制多個元素）：
格式：h1,h2,h3{font-size:28px;color:red;}
?
6)偽元素選擇器：
a:link，正常連接的樣式；
a:hover，鼠標放上去的樣式；
a:active，選擇鏈接時的樣式；
a:visited，已訪問過的鏈接的樣式；
例：
<head>
<style type='text/css'>
???????? a:link{color:black;}
???????? a:hover{color:green;}
???????? a:active{color:yellow;}
???????? a:visited{color:blue;}
</style>
</head>
<body>
???????? <a href='http://www.baidu.com' target='_blank'>百度</a>
</body>
?
三、常見屬性：
1)顏色屬性：
用color定義文本的顏色，格式：
color:green;
color:#ff6600;?? #16進制，可簡寫為#f60分別代表RGB的取值范圍；
color:rgb(255,255,255)?? #每個取值范圍0-255；
color:rgba(255,255,255,1)?? #rgb和alpha（色彩空間）透明度，a取值范圍0-1，0為完全透明，1為不透明；
例：
???????? <head>
???????? ????????????<style type='text/css'>
??????????????????????????? .ha{color:rgba(182,22,206,1);}
??????????????????????????? .hb{color:rgba(182,22,206,0.8);}
??????????????????????????? .hc{color:rgba(182,22,206,0.6);}
??????????????????????????? .hd{color:rgba(182,22,206,0.4);}
??????????????????????????? .he{color:rgba(182,22,206,0.2);}
??????????????????????????? .hf{color:rgba(182,22,206,0);}
?????????????????? </style>
???????? </head>
???????? <body>
?????????????????? <p>
??????????????????????????? <h1 class='ha'>maizi</h1>
??????????????????????????? <h2 class='hb'>maizi</h2>
??????????????????????????? <h3 class='hc'>maizi</h3>
??????????????????????????? <h4 class='hd'>maizi</h4>
??????????????????????????? <h5 class='he'>maizi</h5>
??????????????????????????? <h6 class='hf'>maizi</h6>
?????????????????? </p>
???????? </body>
?
2)字體屬性：
font-size，字體大小，單位：
px，設置一個固定的值；
%，父元素的百分比；
smaller，比父元素更小；
larger，比父元素更大；
inherit，繼承父元素的；
例：
???????? <head>
?????????????????? <style type='text/css'>
??????????????????????????? body{
???????????????????????????????????? font-size:20px;
??????????????????????????? }
??????????????????????????? .ha{
???????????????????????????????????? font-size:smaller;
???????????????????????????????????? font-family:'微軟雅黑','宋體';
??????????????????????????? }
??????????????????????????? .h1{
???????????????????????????????????? font-size:100%;
??????????????????????????? }
??????????????????????????? .hb{
???????????????????????????????????? font-size:larger;
??????????????????????????? }
?????????????????? </style>
???????? </head>
???????? <body>
?????????????????? <h1 class='ha'>maizi</h1>
?????????????????? <h1>maizi</h1>
?????????????????? <h1 class='hb'>maizi</h1>
???????? </body>
?
font-family，定義字體，例：font-family:'微軟雅黑','serif';，多個字體用逗號分隔，以確保當前面的字體不可用時，使用下個字體；
注：每個字體都有其對應的英文名稱，最好用英文，如微軟雅黑為Microsoft YaHei；
?
font-weight，字體加粗，
normal，默認；
bold，粗；
bolder，更粗；
lighter，更細；
100-900的整百數，400為normal，700為bold；
例：
???????? <head>
?????????????????? <style type='text/css'>
??????????????????????????? .ha{font-weight:normal;}
??????????????????????????? .hb{font-weight:bold;}
??????????????????????????? .hc{font-weight:bolder;}
??????????????????????????? .hd{font-weight:lighter;}
?????????????????? </style>
???????? </head>
???????? <body>
?????????????????? <p>
??????????????????????????? <h1 class='ha'>maizi</h1>
??????????????????????????? <h2 class='hb'>maizi</h2>
??????????????????????????? <h3 class='hc'>maizi</h3>
??????????????????????????? <h4 class='hd'>maizi</h4>
?????????????????? </p>
???????? </body>
?
font-style，字體樣式，
normal，標準；
italic，斜體；
oblique，傾斜；
inherit，繼承；
例：
???????? <head>
???????? <styletype='text/css'>
??????????????????????????? .ha{font-style:normal;}
??????????????????????????? .hb{font-style:italic;}
??????????????????????????? .hc{font-style:oblique;}
??????????????????????????? .hd{font-style:inherit;}
?????????????????? </style>
???????? </head>
???????? <body>
?????????????????? <p>
??????????????????????????? <h1 class='ha'>maizi</h1>
??????????????????????????? <h2 class='hb'>maizi</h2>
??????????????????????????? <h3 class='hc'>maizi</h3>
??????????????????????????? <h4 class='hd'>maizi</h4>
?????????????????? </p>
???????? </body>
?
font-variant，小型大寫字母顯示文本（小寫字母變大寫），
normal，標準；
small-caps，小寫字母變大寫；
inherit，繼承；
例：
???????? <head>
?????????????????? <style type='text/css'>
??????????????????????????? .pa{
???????????????????????????????????? font-variant:normal;
??????????????????????????? }
??????????????????????????? .pb{
???????????????????????????????????? font-variant:small-caps;
??????????????????????????? }
??????????????????????????? .pc{
???????????????????????????????????? font-variant:inherit;
??????????????????????????? }
?????????????????? </style>
???????? </head>
???????? <body>
?????????????????? <h1 class='pa'>maizi</h1>
?????????????????? <h1 class='pb'>maizi</h1>
?????????????????? <h1 class='pc'>maizi</h1>
???????? </body>
?
3)背景屬性：
background-color，背景顏色，顏色取值與顏色屬性color:green;一樣；
background-p_w_picpath，背景圖片，格式：background-p_w_picpath:url(/path/to/file.jpg);
background-repeat，背景重復，repeat重復平鋪滿，repeat-x向X軸重復，repeat-y向y軸重復，no-repeat不重復；
background-position，背景位置，橫向有left,center,right，縱向有top,center,bottom，格式：background-position:x軸方向 y軸方向;，此處x軸方向和y軸方向可用數值20px表示，例：background-position:leftcenter可簡寫為background-position:left;
簡寫方式：
background:背景顏色url(/path/to/file.jpg) 重復位置;
例：
???????? <head>
?????????????????? <style type='text/css'>
??????????????????????????? body{
???????????????????????????????????? background-color:green;
??????????????????????????? }
?????????????????? </style>
???????? </head>
???????? <body>
?????????????????? test
???????? </body>
例：
???????? <head>
?????????????????? <style type='text/css'>
??????????????????????????? body{
???????????????????????????????????? background-p_w_picpath:url(p_w_picpaths/bg.jpg);
???????????????????????????????????? background-repeat:repeat;
???????????????????????????????????? background-position:center;
??????????????????????????? }
?????????????????? </style>
???????? </head>
???????? <body>
?????????????????? test
???????? </body>
例：
???????? <head>
?????????????????? <style type='text/css'>
??????????????????????????? body{
???????????????????????????????????? background:#f60url(p_w_picpaths/bg.jpg) repeat top center;
??????????????????????????? }
?????????????????? </style>
???????? </head>
???????? <body>
?????????????????? test
???????? </body>
?
4)文本屬性：
text-align，left,center,right；
line-height，文本行高，%基于字體大小的百分比，NUM用數值來設置固定值；
text-indent，首行縮進，%父元素的百分比，px固定值默認0，inherit繼承；
letter-spacing，字符間距，normal默認，length設置具體的數值（可以是負數，負數的效果即重疊），inherit；
word-spacing，單詞間距，normal標準間距，px固定值，inherit；
direction，文本方向，ltr默認值從左到右即leftto right，rtl從右到左，inherit；
text-transform，文本大小寫，capitalize每個單詞以大寫字母開頭，uppercase，定義全大寫，lowercase定義全小寫，inherit；
例：
???????? <head>
?????????????????? <style type='text/css'>
?????????????????? ???????? p {
???????????????????????????????????? letter-spacing:0px;
???????????????????????????????????? word-spacing:0px;
???????????????????????????????????? text-indent:40px;
???????????????????????????????????? line-height:100%;
???????????????????????????????????? text-align:left;
???????????????????????????????????? font-size:20px;
??????????????????????????? }
??????????????????????????? div{
???????????????????????????????????? width:1000px;
???????????????????????????????????? height:500px;
??????????????????????????? }
?????????????????? </style>
???????? </head>
???????? <body>
?????????????????? <div>
??????????????????????????? <p>基于Springmvc 和 maven 如果你在本地測試需要首先自己安裝好zookeeper因為注冊中心是zookeeper 采用測試用例測試的時候需要兩臺不同ip的機器去啟動job 因為ElasticJob默認的分片機制是根據ip來分片的如果ip相同它會默認為一臺服務器</p>
?????????????????? </div>
???????? </body>
例：
???????? <head>
?????????????????? <style type='text/css'>
??????????????????????????? p{
???????????????????????????????????? direction:ltr;
???????????????????????????????????? text-transform:uppercase;
??????????????????????????? }
?????????????????? </style>
???????? </head>
???????? <body>
?????????????????? <div>
??????????????????????????? <p>基于Springmvc 和 maven 如果你在本地測試需要首先自己安裝好zookeeper因為注冊中心是zookeeper 采用測試用例測試的時候需要兩臺不同ip的機器去啟動job 因為ElasticJob默認的分片機制是根據ip來分片的如果ip相同它會默認為一臺服務器</p>
?????????????????? </div>
???????? </body>
?
5)邊框屬性：
i邊框風格：
border-style，統一風格（簡寫風格）；
可單獨定義某一方向的邊框樣式：border-top-style上邊框樣式，border-bottom-style下邊框樣式，border-left-style左邊框樣式，border-right-style右邊框樣式；
屬性：
none，無邊框；
solid，直線邊框；
dashed，虛擬邊框；
dotted，點狀邊框；
double，雙線邊框；
groove，凸槽邊框，依托border-color的屬性值；
ridge，壟狀邊框，依托border-color的屬性值；
inset，inset邊框，依托border-color的屬性值；
outset，outset邊框，依托border-color的屬性值；
inherit；
例：
???????? <head>
?????????????????? <style type='text/css'>
??????????????????????????? div{
???????????????????????????????????? width:1000px;
???????????????????????????????????? height:500px;
???????????????????????????????????? background-color:#f60;
???????????????????????????????????? border-style:dotted;
??????????????????????????? }
?????????????????? </style>
???????? </head>
???????? <body>
?????????????????? <div>
??????????????????????????? <p>基于Springmvc 和 maven 如果你在本地測試需要首先自己安裝好zookeeper因為注冊中心是zookeeper 采用測試用例測試的時候需要兩臺不同ip的機器去啟動job 因為ElasticJob默認的分片機制是根據ip來分片的如果ip相同它會默認為一臺服務器</p>
?????????????????? </div>
???????? </body>
?
ii邊框寬度：
border-width，統一風格；
單獨風格：border-top-width,border-bottom-width,border-left-width,border-right-width；
屬性：
thin，細邊框；
medium，中等邊框；
thick，粗邊框；
px，固定值的邊框（經常用）；
inherit；
?
iii邊框顏色：
border-color，統一風格；
單獨風格：border-top-color,border-bottom-color,border-left-color,border-right-color；
屬性：
rgb(255,255,0);
rgba(255,255,0,0.1);
#f00;或#ff0000;
inherit；
注：#aaa,#bbb,#ccc,#ddd；
屬性值的四種情況：
一個值，border-color:上下左右;
兩個值，border-color:上下左右;
三個值，border-color:上左右 下;
四個值，border-color:上右 下 左;
iv簡寫方式：
border:邊框風格 邊框寬度 邊框顏色;
border:solid 2px #f60
?
6)列表屬性：
i標記的類型，list-style-type：
none，無標記；
disc，默認，標記是實心圓；
circle，標記是空心圓；
square，標記是實心方塊；
decimal，標記是數字；
decimal-leading-zero，0開頭的數字標記，01,02,03等；
lower-roman，小寫羅馬數字，i,ii,iii,iv；
upper-roman，大寫羅馬數字；
lower-alpha，小寫英文字母；
upper-alpha，大寫英文字母；
lower-greek，小寫希臘字母，alpha,beta,gamma；
lower-lation，小寫拉丁字母，a,b,c,d,e；
upper-lation，大寫拉丁字母；
hebrew，傳統的希伯來編號方式；
armenian，傳統的亞美尼亞編號方式；
georgian，傳統的喬治亞編號方式，an,ban,gan；
cjk-ideographic，簡單的表意數字；
hiragana，日文片假名，a,I,u,e,o,ka,ki；
katakana，日文片假名，A,I,U,E,O,KA,KI；
hiragana-iroha，日文片假名，i,ro,ha,ni,ho,he,to；
katakana-iroha，日文片假名，I,RO,HA,NI,HO,HE,TO；
?
ii標記的位置，list-style-position:
inside，列表項目放置在文本以內，且環繞文本根據標記對齊；
outside，默認值，保持標記位于文本的左側，列表項目標記放置在文本以外，且環繞文本不根據標記對齊；
inherit；
?
iii設置圖像列表標記，list-style-p_w_picpath:
url(/path/to/file.jpg)，圖像的路徑；
none，默認，無圖形被顯示；
inherit；
?
iv簡寫方式：
list-style:標記類型 標記位置 圖像列表標記;
例：
list-style:decimal-leading-zero outside;
四、div+css布局：
1)div和span在整個html標記中，沒有任何意義，它們的存在就是為了應用css樣式；
div和span的區別在于，span是內聯元素，div是塊級元素；
2)盒模型：
margin，盒子外邊距，margin-top,margin-bottom,margin-left,margin-right；
padding，盒子內邊框，padding-top,padding-bottom,padding-left,padding-right；
border，盒子邊框寬度，border-top,border-bottom,border-left,border-right；
width，盒子寬度，width-top,width-bottom,width-left,width-right；
height，盒子調試，height-top,height-bottom,height-left,height-right；
注：
右鍵審查元素，以border劃分，以內內部白，以外外部白；
? ? ? ??
3)布局相關屬性：
1 定位方式：
relative，正常定位；
absolute，根據父元素進行定位；
fixed，根據browser窗口進行定位；
static，沒有定位；
inherit；
2 定位：left,right,top,bottom；
3 z-index，層覆蓋先后順序（優先級）：多個div可用數字大的覆蓋掉數字小的，當<body>中<div>在最前面時，此塊區域會被后面定義的覆蓋，需在.fixed{z-index:1;}
4 display，顯示屬性：
none，層不顯示；
block，塊狀顯示，在元素后面換行，顯示下一個塊元素，內聯元素-->塊級元素；
inline，內聯顯示，多個塊可以顯示在一行內，塊級元素-->內聯元素；
5 float，浮動屬性：
left，左浮動；
right，右浮動；
例：
???????? <head>
?????????????????? <style type='text/css'>
??????????????????????????? body{
???????????????????????????????????? margin:0;
???????????????????????????????????? padding:0;
??????????????????????????? }
??????????????????????????? .div{
???????????????????????????????????? width:300px;
???????????????????????????????????? height:300px;
???????????????????????????????????? background-color:green;
???????????????????????????????????? position:relative;
???????????????????????????????????? left:10px;
???????????????????????????????????? right:10px;
???????????????????????????????????? z-index:2;
??????????????????????????? }
??????????????????????????? span{
???????????????????????????????????? position:absolute;
???????????????????????????????????? background-color:#f60;
???????????????????????????????????? color:#fff;
???????????????????????????????????? top:10px;
???????????????????????????????????? right:0;
??????????????????????????? }
??????????????????????????? .fixed{?? //網頁中的客服標簽，當網頁滾動時此塊區域是固定的
???????????????????????????????????? position:fixed;
???????????????????????????????????? background-color:#f60;
???????????????????????????????????? color:#fff;
???????????????????????????????????? top:100px;
???????????????????????????????????? z-index:3;
???????????????????????????????????? <!--display:none-->
??????????????????????????? }
?????????????????? </style>
???????? </head>
???????? <body>
?????????????????? <div class='div'>
??????????????????????????? <span>瀏覽次數:222</span>
?????????????????? </div>
?????????????????? <div class='fixed'>
??????????????????????????? <p>聯系電話:110</p>
??????????????????????????? <p>聯系地址:police</p>
?????????????????? </div>
?????????????????? <br/>
?????????????????? <br/>
?????????????????? <br/>
?????????????????? ……
???????? </body>
6 clear，清除浮動：
clear:both;
7 overflow，溢出處理：
hidden，隱藏超出層大小的內容；
scroll，無論內容是否超出大小都添加滾動條；
auto，超出時自動添加滾動條；
例：產生浮動的解決辦法：方一
???????? <head>
?????????????????? <style type='text/css'>
??????????????????????????? .div{
???????????????????????????????????? width:960px;
???????????????????????????????????? height:600px;
???????????????????????????????????? margin:0auto;
???????????????????????????????????? background-color:#aaa;
??????????????????????????? }
??????????????????????????? .left{
???????????????????????????????????? float:left;
???????????????????????????????????? width:260px;
???????????????????????????????????? height:460px;
???????????????????????????????????? background-color:#ccc;
??????????????????????????? }
??????????????????????????? .right{
???????????????????????????????????? float:right;
???????????????????????????????????? width:700px;?? <!--width:690px;-->
???????????????????????????????????? height:460px;
???????????????????????????????????? background-color:#ddd;
???????????????????????????????????? <!--margin-bottom:10px;-->
??????????????????????????? }
??????????????????????????? .bottom{
???????????????????????????????????? width:960px;
???????????????????????????????????? height:200px;
???????????????????????????????????? background:red;
???????????????????????????????????? <!--clear:both;-->?? #產生浮動的解決辦法：方二
???????????????????????????????????? <!--margin-top:10px;-->
??????????????????????????? }
??????????????????????????? .clear{
???????????????????????????????????? clear:both;
??????????????????????????? }
??????????????????????????? .introduce{
???????????????????????????????????? background:red;
???????????????????????????????????? width:260px;
???????????????????????????????????? height:120px;
???????????????????????????????????? overflow:scroll;
??????????????????????????? }
?????????????????? </style>
???????? </head>
???????? <body>
?????????????????? <div class='div'>
??????????????????????????? <div class='left'></div>
???????????????????????????????????? <divclass='introduce'>
???????????????????????????????????? ……
???????????????????????????????????? </div>
??????????????????????????? <div class='right'></div>
??????????????????????????? <div class='clear'></div>
??????????????????????????? <div class='bottom'></div>
?????????????????? </div>
???????? </body>
?
4)兼容問題及高效開發工具：
1 兼容性測試工具：ietester,multibrowser
2 常用的browser：googlechrome,firefox,opera
3 高效的開發工具：輕量級（notepad++,sbulimetext,txt,hbuilder），重量級（webstorm,dreamweaver）
4 網頁設計工具：fireworks,photoshop
5 判斷IE的方法：
在<body>中，條件判斷格式：<!--[if 條件版本]>顯示內容<![endif]-->
[if ! IE 8]，不等于，除了IE8都可以顯示；
[if lt IE 5.5]，小于，如果IE版本小于5.5的顯示；
lte，小于等于；
[if gt IE 5]，大于；
gte，大于等于；
[if (gt IE 5) & (lt IE 7)]，大于和小于之間；
[if (IE 6) | (IE 7)]，或；
[if IE 8]，僅；
例：
<body>
?????????????????? <!--[if lte IE 9]>小于等于9版本<![endif]-->
</body>
?
轉載于:https://blog.51cto.com/jowin/1978297
總結
以上是生活随笔為你收集整理的VII html+css的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 暑假训练---三棱锥内切球公式及海伦公式
- 下一篇： 密码学系列之:NIST和SHA算法