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算法