常用HTML標(biāo)簽屬性大集合

常用HTML標(biāo)簽屬性大集合

長(zhǎng)沙牛耳教育      2022-05-03 02:07:01     47

常用HTML標(biāo)簽屬性大集合,今天長(zhǎng)沙牛耳教育java學(xué)院小編對(duì)HTML里的一些常用標(biāo)簽做了整理,希望對(duì)于初學(xué)者有幫助。跑馬燈marquee.../marquee普通卷動(dòng)marque

課程價(jià)格 請(qǐng)咨詢

上課時(shí)段: 授課校區(qū):

詳細(xì)介紹



今天長(zhǎng)沙牛耳教育java學(xué)院小編對(duì)HTML里的一些常用標(biāo)簽做了整理,希望對(duì)于初學(xué)者有幫助。


跑馬燈


<marquee>...</marquee>普通卷動(dòng)

<marquee behavior=slide>...</marquee>滑動(dòng)

<marquee behavior=scroll>...</marquee>預(yù)設(shè)卷動(dòng)

<marquee behavior=alternate>...</marquee>來回卷動(dòng)

<marquee direction=down>...</marquee>向下卷動(dòng)

<marquee direction=up>...</marquee>向上卷動(dòng)

<marquee direction=right></marquee>向右卷動(dòng)

<marquee direction=’left’></marquee>向左卷動(dòng)

<marquee loop=2>...</marquee>卷動(dòng)次數(shù)

<marquee width=180>...</marquee>設(shè)定寬度

<marquee height=30>...</marquee>設(shè)定高度

<marquee bgcolor=FF0000>...</marquee>設(shè)定背景顏色

<marquee scrollamount=30>...</marquee>設(shè)定滾動(dòng)速度

<marquee scrolldelay=300>...</marquee>設(shè)定卷動(dòng)時(shí)間

<marquee onmouseover="this.stop()">...</marquee>鼠標(biāo)經(jīng)過上面時(shí)停止?jié)L動(dòng)

<marquee onmouseover="this.start()">...</marquee>鼠標(biāo)離開時(shí)開始滾動(dòng)



字體效果


<h1>...</h1>標(biāo)題字(最大)

<h6>...</h6>標(biāo)題字(最小)

<b>...</b>粗體字

<strong>...</strong>粗體字(強(qiáng)調(diào)) (同上效果略同)

<i>...</i>斜體字

<em>...</em>斜體字(強(qiáng)調(diào))

<dfn>...</dfn>斜體字(表示定義)

<u>...</u>底線

<ins>...</ins>底線(表示插入文字)

<strike>...</strike>橫線

<s>...</s>刪除線

<del>...</del>刪除線(表示刪除)

<kbd>...</kbd>鍵盤文字

<tt>...</tt> 打字體

<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)

<plaintext>...</plaintext>固定寬度字體(不執(zhí)行標(biāo)記符號(hào))

<listing>...</listing> 固定寬度小字體

<font color=00ff00>...</font>字體顏色

<font size=1>...</font>最小字體

<font style =’font-size:100 px’>...</font>無限增大



區(qū)斷標(biāo)記


<hr>水平線

<hr size=’9’>水平線(設(shè)定大小)

<hr width=’80%’>水平線(設(shè)定寬度)

<hr color=’ff0000’>水平線(設(shè)定顏色)

<br>(換行)

<nobr>...</nobr>水域(不換行)

<p>...</p>水域(段落)

<center>...</center>置中



連結(jié)格式


<base href=位址>(預(yù)設(shè)好連結(jié)路徑)

<a href=位址></a>外部連結(jié)

<a href=位址 target=’_blank’></a>外部連結(jié)(另開新視窗)

<a href=位址 target=’_top’></a>外部連結(jié)(全視窗連結(jié))

<a href=位址 target=’頁(yè)框名’></a>外部連結(jié)(在指定頁(yè)框連結(jié))



貼圖/音樂


<img src=http://faa912.cn/skin/default/image/nopic.gif>

<img src=圖片位址 width=’180’>設(shè)定圖片寬度

<img src=圖片位址 height=’30’>設(shè)定圖片高度

<img src=圖片位址 alt=’提示文字’>設(shè)定圖片提示文字

<img src=圖片位址’ border=’1’>設(shè)定圖片邊框

<bgsound src=http://faa912.cn/skin/default/image/nopic.gif>



表格語法


<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網(wǎng)址

<table border=邊框大小>...</table>設(shè)定表格邊框大小(使用數(shù)字)

<table bgcolor=顏色碼>...</table>設(shè)定表格的背景顏色

<table borderclor=顏色碼>...</table>設(shè)定表格邊框的顏色

<table borderclordark=顏色碼>...</table>設(shè)定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設(shè)定表格亮邊框的顏色

<table cellpadding=參數(shù)>...</table>指定內(nèi)容與格線之間的間距(使用數(shù)字)

<table cellspacing=參數(shù)>...</table>指定格線與格線之間的距離(使用數(shù)字)

<table cols=參數(shù)>...</table>指定表格的欄數(shù)

<table frame=參數(shù)>...</table>設(shè)定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數(shù)字)

<table height=高度>...</table>指定表格的高度大小(使用數(shù)字)

<td colspan=參數(shù)>...</td>指定儲(chǔ)存格合并欄的欄數(shù)(使用數(shù)字)

<td rowspan=參數(shù)>...</td>指定儲(chǔ)存格合并列的列數(shù)(使用數(shù)字)



分割視窗


<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會(huì)自動(dòng)調(diào)整

<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會(huì)自動(dòng)調(diào)整

<frameset cols="20%,*">分割左右兩個(gè)框架

<frameset cols="20%,*,20%">分割左中右三個(gè)框架

<分割上下兩個(gè)框架

<frameset rows="20%,*,20%">分割上中下三個(gè)框架


屬性:


cols 垂直切割窗口(如左右分割兩個(gè)窗口)接受整數(shù)值,百分?jǐn)?shù),*(*代表占用余下空間)數(shù)值的個(gè)數(shù)代表分成的部分?jǐn)?shù)目,要以逗號(hào)分隔。例:cols="30,*,50%"可以 切成三個(gè)視窗,第一部分是30像素(pixels)為絕對(duì)分割,第二部分是當(dāng)分配完第一和第三視圖后剩下的空間,第三部分則占整個(gè)窗口的50%寬度,為相對(duì)分割。

rows 就是橫向切割,將窗口上下分開,數(shù)值設(shè)置同上。

以上兩屬性盡量不要在同一個(gè)<frameset>標(biāo)記中,因?yàn)橥蹙╪etscape)不支持,盡量采用多重分割。

frameborder 設(shè)置框架的邊框,其值有0不要邊框,1要邊框。

border 設(shè)置框架邊框厚度

framespacing 表示框架與框架間保留空白的距離

frame 元素(單標(biāo)簽)

語法格式:

<frame name=http://faa912.cn/skin/default/image/nopic.gif src=http://faa912.cn/skin/default/image/nopic.gif scrolling="yes/no" noresize>

屬性:

name 框架名稱,指定框架來做連接的目標(biāo)窗口。

src 框架中要顯示的網(wǎng)頁(yè)文當(dāng)url地址,每個(gè)個(gè)框架要對(duì)應(yīng)一個(gè)html文擋。

scrolling 是否顯示滾動(dòng)條,yes/no,auto是自動(dòng)。

noresize 設(shè)置不讓使用者改變這個(gè)框架的大小,



noframe元素


指定當(dāng)使用了框架的頁(yè)面在不支持框架的瀏覽器中打開時(shí)顯示的信息

語法格式:

<noframe>

......

</noframe>



表單<form></form>


語法格式:

<form action=http://faa912.cn/skin/default/image/nopic.gif method="get/post">

....

<input type=submit><input type=reset>

</form>

method有兩種提交方式get,post

action 是指明處理該表單的程序位置,這樣表單所填的資料才能傳給cgi做處里,可設(shè)定此參數(shù)為action="mailto:lwr8494@163.com" 這樣此表單所填的資料將會(huì)發(fā)送到這個(gè)郵箱地址。

method 是指?jìng)魉托畔⒔ocgi等網(wǎng)絡(luò)程序的方式。可選post方法, get方法,post方法容許傳送大量信息。get方法只接受低于1k的信息。

申請(qǐng)表單用的是post搜索引擎用的是get


注解


<! - - ... - -> 


超鏈接


<A HREF TARGET a href target> 指定超連結(jié)的分割視窗

<a href=#錨的名稱> 指定錨名稱的超連結(jié)

<a href> 指定超連結(jié)

<a name=錨的名稱> 被連結(jié)點(diǎn)的名稱



html常用


<address>....</address> 用來顯示電子郵箱地址

<b> 粗體字

< base target> 指定超連結(jié)的分割視窗

< basefont size> 更改預(yù)設(shè)字形大小

<bgsound src> 加入背景音樂

<big> 顯示大字體

<blink> 閃爍的文字

< body text link vlink> 設(shè)定文字顏色

<body> 顯示本文

<br> 換行

<caption align> 設(shè)定表格標(biāo)題位置

<caption>...</caption> 為表格加上標(biāo)題

<center> 向中對(duì)齊

<cite>...<cite> 用於引經(jīng)據(jù)典的文字

< dode>...</code> 用於列出一段程式碼

< comment>...</comment> 加上注解

< dd> 設(shè)定定義列表的項(xiàng)目解說

< dfn>...</dfn> 顯示"定義"文字

< dir>...</dir> 列表文字標(biāo)簽

< dl>...</dl> 設(shè)定定義列表的標(biāo)簽

< dt> 設(shè)定定義列表的項(xiàng)目

<em> 強(qiáng)調(diào)之用

< font face> 任意指定所用的字形

< font size> 設(shè)定字體大小

< form action> 設(shè)定戶動(dòng)式表單的處理方式

<form method> 設(shè)定戶動(dòng)式表單之資料傳送方式

<frame marginheight> 設(shè)定視窗的上下邊界

<frame marginwidth> 設(shè)定視窗的左右邊界

<frame NAME> 為分割視窗命名

<frame NORESIZE> 鎖住分割視窗的大小

<frame SCROLLING> 設(shè)定分割視窗的卷軸

<frame SRC> 將HTML檔加入視窗

<frameSET COLS> 將視窗分割成左右的子視窗

<frameSET ROWS> 將視窗分割成上下的子視窗

<frameSET>...</frameSET> 劃分分割視窗

<H1>~<H6> 設(shè)定文字大小

<HEAD> 標(biāo)示文件資訊

<hr> 加上分格線

<html> 文件的開始與結(jié)束

<i> 斜體字

<img align> 調(diào)整圖形影像的位置

<img alt> 為你的圖形影像加注

< img dynsrc loop> 加入影片

<img height width> 插入圖片并預(yù)設(shè)圖形大小

<img hspace> 插入圖片并預(yù)設(shè)圖形的左右邊界

<img lowsrc> 預(yù)載圖片功能

<IMG SRC BORDER> 設(shè)定圖片邊界

<img src> 插入圖片

< img vspace> 插入圖片并預(yù)設(shè)圖形的上下邊界

<input type name value> 在表單中加入輸入欄位

< isindex> 定義查詢用表單

<kbd>...</kbd> 表示使用者輸入文字

<li type>...</li> 列表的項(xiàng)目 ( 可指定符號(hào) )

< marquee> 跑馬燈效果

<menu>...</menu> 條列文字標(biāo)簽

<meta name="refresh" content url> 自動(dòng)更新文件內(nèi)容

<multiple> 可同時(shí)選擇多項(xiàng)的列表欄

<noframe> 定義不出現(xiàn)分割視窗的文字

<ol>...</ol> 有序號(hào)的列表

<option> 定義表單中列表欄的項(xiàng)目

< p align> 設(shè)定對(duì)齊方向

<p> 分段

<person>...</person> 顯示人名

<pre> 使用原有排列

< samp>...</samp> 用於引用字

<select >...</select > 在表單中定義列表欄

<small> 顯示小字體

<strike> 文字加橫線

<strong> 用於加強(qiáng)語氣

<sub> 下標(biāo)字

<sup> 上標(biāo)字

< table border=n> 調(diào)整表格的寬線高度

< table cellpadding> 調(diào)整資料欄位之邊界

<table cellspacing> 調(diào)整表格線的寬度

<table height> 調(diào)整表格的高度

<table width> 調(diào)整表格的寬度

<table>...</table> 產(chǎn)生表格的標(biāo)簽

<td align> 調(diào)整表格欄位之左右對(duì)齊

<td bgcolor> 設(shè)定表格欄位之背景顏色

<td colspan rowspan> 表格欄位的合并

<td nowrap> 設(shè)定表格欄位不換行

< td valign> 調(diào)整表格欄位之上下對(duì)齊

<td width> 調(diào)整表格欄位寬度

<td>...</td> 定義表格的資料欄位

<textarea name rows cols> 表單中加入多少列的文字輸入欄

< textarea wrap> 決定文字輸入欄是自動(dòng)否換行

<th>...</th> 定義表格的標(biāo)頭欄位

<title> 文件標(biāo)題

<tr>...</tr> 定義表格美一行

<tt> 打字機(jī)字體

<u> 文字加底線

< ul type>...</ul> 無序號(hào)的列表 ( 可指定符號(hào) )

<var>...</var> 用於顯示變數(shù)

BlockQuotc文本縮進(jìn)



表示顏色的常用三種方式


1,16進(jìn)制顏色代碼

語法:#RRGGBB

例:<font color="#ff0000">紅色</font>

2,10進(jìn)制RGB碼

語法:RGB(RRR,GGG,BBB)

例:<font color="rgb(255,000,000)">紅色</font>

3,直接用顏色的英文名稱

例:<font color="red">紅色</font>



<body>.....</body>屬性可分為三種


1,背景屬性

包括:bgcolor,background

2,文字屬性:

包括:text,link,alink,vlink,

3,留白屬性:

其中分為:leftmargin,topmargin

.bgcolor背景色

語法格式:<body bgcolor="#ff0000">

.background背景圖案。

語法格式:<body background=http://faa912.cn/skin/default/image/nopic.gif>

.text文本顏色(非連接文字顏色)

.link連接文字顏色(可連接文字顏色)

.alink活動(dòng)連接文字顏色(正被點(diǎn)擊的可連接文字的顏色)

.vlink已訪問連接文字顏色)(已經(jīng)點(diǎn)擊訪問過的可連接文字的顏色)

語法格式:<body text="color" link="color" alink="color" vlink="color">

.leftmargin 頁(yè)面左側(cè)的留白距離

.topmargin 頁(yè)面頂部的留白距離

語法格式:<body leftmargin="value" topmargin="value">

注:value為長(zhǎng)度值為數(shù)字


align屬性


語法:<h2 align="?">文字</h2>

其屬性有三種:left靠左,center居中,right靠右

〈p〉</p>為段落標(biāo)記,可利用以上屬性對(duì)整個(gè)段落進(jìn)行設(shè)置

〈br>為換行標(biāo)記

<nobr></nobr>為不換行標(biāo)記 放在文字兩邊即可

例:<body>

<h3>江南逢李龜年</h3>

<p>歧王宅里尋常見<br>

催九堂前幾度聞<br>

正是江南好風(fēng)景<br>

落花時(shí)節(jié)又逢君</p>

</body>


預(yù)格式化


<pre>......</pre> 瀏覽是效果和編寫是效果格式一樣



列表


1、無序列表又稱符號(hào)列表

語法格式:

<ul type=http://faa912.cn/skin/default/image/nopic.gif>type的屬性可選直disc實(shí)心圓點(diǎn),clrcle空心圓點(diǎn),square實(shí)心方框

<li>文字</li>

<li>文字</li>

</ul>


2、有序列表

語法格式:

<ol type="?" start"?">

<li>文字</li>

<li>文字</li>

</ol>

type的值是編號(hào)字符可選的有1...,a...,A...,i... ,I...

start為起始值例:如果start為3是那么將從3開始,而且必須是數(shù)字。


3、定義列表

<dl>定義列表標(biāo)記

<dt>標(biāo)示定義條目

<dd>標(biāo)示定義內(nèi)容

語法格式:

<dl>

<dt>文字</dt>

<dd>文字內(nèi)容</dd>

</dl>



連接和圖像


語法格式:

<a href=http://faa912.cn/skin/default/image/nopic.gif name="?" target="?" title="?">....</a>

屬性:href 連接目標(biāo) 值可以是url地址也可以是連接錨點(diǎn)

<a href=http://faa912.cn/skin/default/image/nopic.gif>...</a>或者

<a href="錨點(diǎn)">...</a>


name連接名稱

語法格式:<a name="錨點(diǎn)名稱">...</a>

例:<a name="abcdcf">...</a>

連接到該錨點(diǎn)的連接則應(yīng)是:

<a name="#abcdef">....</a>


target目標(biāo)窗口語法格式

<a href=http://faa912.cn/skin/default/image/nopic.giftarget="_blank|_self|_farent|_top|windowname">....</a>

-blank打開新窗口

_self當(dāng)前窗口打開

一下兩個(gè)僅在框架葉面中應(yīng)用

_parent當(dāng)前窗口的父級(jí)窗口(上一級(jí))打開

_top在最高一級(jí)的窗口打開

windowname已命名的窗口或框架中打開連接


title連接提示

<a href="http://www.yangxiaoer.cn" title="他、楊小二的個(gè)人博客">楊小二的個(gè)人博客</a>


圖像<img> 語法格式

<img src=http://faa912.cn/skin/default/image/nopic.gif alt="?" width="?" height="?" border="?" align="?">

border屬性定義圖片邊框的寬度,默認(rèn)值為0

align屬性設(shè)置圖片旁邊文字的位置

語法格式:<img src=http://faa912.cn/skin/default/image/nopic.gif alignhttp://faa912.cn/skin/default/image/nopic.gif>

可選值有:

top圖片和文字頂部對(duì)齊

middle圖片和文字居中對(duì)齊

bottom圖片和文字底邊對(duì)齊(默認(rèn))

left圖片居左對(duì)齊,文字沿圖片繞排

right圖片居右對(duì)齊,文字沿圖片繞排

absmiddle圖片對(duì)齊到目前文字行絕對(duì)中央

absbottom圖片對(duì)齊到目前文字行絕對(duì)底部



文字的排版


不換行空白標(biāo)記


font元素

語法格式:

<font face="字體名稱" size="字體大小" color="字體顏色">

字體大小可選值為1——7,默認(rèn)為3

例:〈font face="黑體" size="4" color="#ff00ff">....</font>


水平線<hr>

語法格式:<hr width="寬度" align="對(duì)齊方式默認(rèn)居中center" size="水平線厚度默認(rèn)為2" color="顏色" noshade>

noshade無陰影,既實(shí)線

層〈div><span>兩種元素

<div>是塊級(jí)元素,和段落元素<p>相似,不同的是兩個(gè)<div>元素之間不會(huì)產(chǎn)生兩個(gè)<p>元素之間的空行,

<span>是行內(nèi)元素,可以定義段落中部分文字的屬性

語法格式:

<div align=http://faa912.cn/skin/default/image/nopic.gif style=http://faa912.cn/skin/default/image/nopic.gif>...</div>

align設(shè)置層中元素的水平對(duì)齊方式

stule設(shè)置元素應(yīng)用css規(guī)范的屬性

<div>兼容性比<span>要好一點(diǎn),最好使用<div>



表格語法格式


<table width=http://faa912.cn/skin/default/image/nopic.gif bgcolor=http://faa912.cn/skin/default/image/nopic.gif background=http://faa912.cn/skin/default/image/nopic.gif border=http://faa912.cn/skin/default/image/nopic.gif cellspacing=http://faa912.cn/skin/default/image/nopic.gif cellpadding=http://faa912.cn/skin/default/image/nopic.gif>

<tr>...<td>....</td>....</tr>

</table>

border邊框?qū)挾饶J(rèn)值為0,既沒有邊框

cellspacing表格中單元格的邊距大小,默認(rèn)值為兩個(gè)像素

cellpadding表格中單元格之間的間距大小,默認(rèn)值為兩個(gè)像素


tr元素

語法格式:

<tr align=http://faa912.cn/skin/default/image/nopic.gif bgcolor=http://faa912.cn/skin/default/image/nopic.gif>....</tr>

align屬性對(duì)齊方式可選值如下:left,center,tight,默認(rèn)為left

bgcolor指定該行的背景顏色


td元素

語法格式:

<td width="寬度" height="高度" align="水平對(duì)齊方式" valign="垂直對(duì)齊方式" bgcolor=http://faa912.cn/skin/default/image/nopic.gif background=http://faa912.cn/skin/default/image/nopic.gif rowspan="單元格的行跨度" colapan="單元格的列跨度">.....</td>

align屬性的可選值有:left,center,right

valign屬性的可選值有:top,middle,bottom

rowspan和colapan跨行和跨列的數(shù)量,默認(rèn)為1



input元素 語法格式


<input type=http://faa912.cn/skin/default/image/nopic.gif>

type屬性的可選值有:

text 單行文本框

屬性:name 文本框名稱

value 文本框的初始值

size 文本框的長(zhǎng)度

maxlength 可輸入字符串最大的長(zhǎng)度


radio 單選框

屬性:name 單選框名稱

value 內(nèi)部值

checked 默認(rèn)選定

checkbox 復(fù)選框

屬性:name 復(fù)選框名稱


value 內(nèi)部值

checked 默認(rèn)選定

reset 重置按鈕

submit 確定按鈕

屬性:name 按鈕名稱

value 顯示在按鈕上的文字

password 密碼框

屬性與文本框的屬性完全相同


file 文件域

屬性:name文件域名稱

size 文件域的長(zhǎng)度

maxlength 文件域可接受的字符數(shù)量的上限

hidden 隱藏域

屬性:name 隱藏域名稱

value 內(nèi)定值

image 圖片域

屬性:name 所要代表的按鈕,可以是submit,reset,或其他.

src 按鈕圖片的url 地址


列表框<select>

語法格式:

<select>

.....

<option>....</option>

.....

</select>


select元素

語法格式:<select name=http://faa912.cn/skin/default/image/nopic.gif size=http://faa912.cn/skin/default/image/nopic.gifmultiple></select>

name 指定列表框的名字

size 指定列表框顯示列表項(xiàng)的條數(shù),如果指定了該參數(shù),select元素是個(gè)列表,否則是一個(gè)下拉列表框

multiple 指定了這個(gè)參數(shù),則表示該列表框可選擇多項(xiàng),否則只可選擇一項(xiàng)


option屬性

語法格式:<option value=http://faa912.cn/skin/default/image/nopic.gif selected></option>

value 該列表項(xiàng)的值

selected 如果設(shè)定了這個(gè)參數(shù),默認(rèn)為選定這一項(xiàng)



多行文本框<textarea>


<textarea name=http://faa912.cn/skin/default/image/nopic.gif cols=http://faa912.cn/skin/default/image/nopic.gif rows=http://faa912.cn/skin/default/image/nopic.gif wrap="off/physical/virtual"></textarea>

屬性:

name文本框的名稱

cols文本框的寬度

rows文本框的高度

wrap文本框的折行方式可選值有:

off不保存換行信息

physical強(qiáng)迫瀏覽器在發(fā)送信息到web服務(wù)器端時(shí)必須將多行文本框的文字一行一行的送出,

virtual送出連續(xù)成串的字除非使用者按回車。



css 層疊樣式表


引入層疊樣式表的方法包括:


1、外聯(lián)式樣式表

例:<head>

<link rel="stylesheet" href="/css/css.css">

</head>

<body>

....

</body>

</html>

屬性:rel 用來說明<link>元素在這里要完成的任務(wù)是連接一個(gè)獨(dú)立的css文件。而href屬性給出了所要連接css文件的url地址

內(nèi)嵌式樣式表:

例:

<html>

<head>

<style type="text/css">

<!--

td{font:9pt;color:red}

.font105{font:10.5pt;color:blue}

-->

</style>

</head>

<body>....</body>

</html>


2、元素內(nèi)定

格式:<p style="font-size:10.5pt">


3、導(dǎo)入式樣式表

〈html>

<head>

<style type="text/css">

<!--

@import url(css/home.css);

-->

</style>

<body>

....

</body>

</html>


css的優(yōu)先級(jí)

越接近目標(biāo)的樣式定義優(yōu)先級(jí)越高,高優(yōu)先級(jí)樣式將繼承低優(yōu)先級(jí)樣式的未重疊定義但覆蓋重疊的定義

如果4種樣式表對(duì)同一元素定義了不同的樣式,那么他們的優(yōu)先級(jí)順序從高到低是,元素內(nèi)定,內(nèi)嵌樣式表,導(dǎo)入樣式表,外聯(lián)樣式表。


CSS結(jié)構(gòu)

例:td{font-size:10.5pt;color:#666666}

css樣式包含兩個(gè)基礎(chǔ)部分,

選擇符<td>和聲明{font-size:10.5pt;color:#666666}

聲明也有兩部分組成:

屬性font-size,color和值10.5pt,#666666


選擇符分為6種

1、元素選擇符

當(dāng)頁(yè)面上多個(gè)元素的樣式相同時(shí),可以將多個(gè)元素放在一起定義,中間以逗號(hào)分開 例:td,p,li,input,select{font-size:12px;}


2、class(類)選擇符

例:

<head>

<title>.....</title>

<style type="text/css">

<!--

.red{font-size:10.5pt;color:#ff0000}

-->

</style>

</head>

<body bgcolor="#ffffff">

<p class="red">楊小二個(gè)人博客</p>

<p>楊小二的個(gè)人博客,楊小二的小江湖</p>

</body>

還有一種方法就是限定可以應(yīng)用它的頁(yè)面元素

例:

<head>

<title>.....</title>

<style type="text/css">

<!--

h1.red{color:#ff0000}

-->

</style>

</head>

<body bgcolor="#ffffff">

<p class="red">楊小二個(gè)人博客</p>

<h1 class="red">楊小二的小江湖</h1>

</body>


3、 id選擇符

與class選擇附類似,只是把'.'換成'#'

例:

<body>

<head>

<style type="text/css">

<!--

#select{font-size:18px;color:#0000ff}

-->

</style>

</head>

<body>

<table width="250" border="1" height="50">

<tr>

<td align="center" id="select">id選擇符——楊小二的小江湖</td>

</tr>

</table>

</body>

</html>

我們看到在調(diào)用ID選擇附時(shí)與CLASS選擇附類似,只是將class=http://faa912.cn/skin/default/image/nopic.gif換成了id=http://faa912.cn/skin/default/image/nopic.gif,方便頁(yè)面腳本語言的調(diào)用


關(guān)聯(lián)選擇符

<body>

<head>

<style type="text/css">

<!--

td p{font-size:18px;color:#0000ff}

-->

</style>

</head>

<body>

<table width="250" border="1" height="50">

<tr>

<td align="center"><p>關(guān)聯(lián)選擇符——楊小二的小江湖</p></td>

</tr>

</table

<p>關(guān)聯(lián)選擇符———楊小二的小江湖</p>

</body>

</html>

我們?cè)O(shè)定了在元素中<td>的元素<p>所包含文字的樣式,只有在兩個(gè)條件都滿足是,樣式在會(huì)起作用,


偽類選擇符

是只能用在css選擇符里,而不能用在html代碼中的選擇符

例:

<html>

<head>

<style type="text/css">

<!--

a:link{color:#000000}

a:visited{color:#cccccc}

a:hover{color:#ff0000}

a:active{color:#ooooff}

-->

</style>

</head>

<body>

<p><a href="http://www.yangxoaper.cn">楊小二的小江湖</a><p>

<p><a href="http://www.yangxoaper.cn">楊小二的小江湖</a><p>

<p><a href="http://www.yangxoaper.cn">楊小二的小江湖</a><p>

<p><a href="http://www.yangxoaper.cn">楊小二的小江湖</a><p>

</body>

</html>


正確的順序是a:linka:visiteda:hover否則會(huì)引起頁(yè)面上連接顏色混亂


偽元素選擇符

與偽類選擇符定義類似,目前被大多數(shù)瀏覽器支持的有兩個(gè):首行偽元素(first-line)和首字符偽元素(first-letter)是用來實(shí)現(xiàn)首行大寫和首行下沉效果的

例:首行

<html>

<head>

<style>

<!--

p:first-line{color:red;font-size:20pt}

-->

</style>

</hesd>

<body>

<p>楊小二的小江湖</p>

</body>

</html>


長(zhǎng)度隨瀏覽器窗口大小而改變

首字

<html>

<head>

<style>

<!--

p:first-letter{color:red;font-size:50pt;float:left;}

-->

</style>

</hesd>

<body>

<p>楊小二的小江湖</p>

</body>

</html>

以上兩種都只能應(yīng)用于塊狀元素上


CSS規(guī)則

1.繼承

<html>

<head>

<style type="text/css">

<!--

td{font-size:12pt}

p{color:red}

-->

</style>

</hesd>

<body>

<table width="300" border="1" height="150">

<tr>

<td align="center">

<p> CSS規(guī)則——楊小二的小江湖</p>

</td>

</table>

</body>

</html>

<p>為最高級(jí)<td>次一級(jí)兩種css用在一個(gè)屬性元素上,相同的覆蓋,不同的繼承,


2.組合

例:td{font-size:12pt}

p1{font-size:12pt}

組合后

td,.p1{font-size:12pt}


3.層疊

在樣式里定義過后,在表格屬性中又定義一次

<html>

<head>

<style type="text/css">

<!--

red{color:#ff0000 limportant}

-->

</style>

</hesd>

<body>

<table width="300" border="1" height="150">

<tr>

<td align="center" style="color:#0000ff" class="red">楊小二的小江湖</td>

</tr>

</table>

</body>

</html>



CSS單位


分四大類:

1、 長(zhǎng)度單位

數(shù)值可以是整數(shù),小數(shù),正數(shù),負(fù)數(shù),0,后加單位(負(fù)值不要輕易使用)

換算關(guān)系:

1in(英寸)=6pc(派)

1in(英寸)=72pt(磅)

1in(英寸)=2.54(厘米)

1cm(厘米)=10mm(毫米)

1cm(厘米)=0.3937(英寸)

1pt(磅)=1/72in(英寸)=0.2478mm(毫米)

1pc(派)=1/6in(英寸)=我國(guó)新四號(hào)鉛字的尺寸

2、 百分比單位

3 、顏色單位

4 、url單位



div屬性


color : #999999   文字顏色

font-family : 宋體 文字字型

font-size : 10pt 文字大小

font-style:itelic 文字斜體育

font-variant:small-caps 小字體

letter-spacing : 1pt 文字間距

line-height : 200% 設(shè)定行高

font-weight:bold 文字粗體

vertical-align:sub 下標(biāo)字

vertical-align:super 上標(biāo)字

text-decoration:line-through 加?h除線

text-decoration:overline 加頂線

text-decoration:underline 加底線

text-decoration:none ?h除連接底線

text-transform : capitalize 首字大寫

text-transform : uppercase 英文大寫

text-transform : lowercase 英文寫

text-align:right 文字*右對(duì)齊

text-align:left 文字*左對(duì)齊

text-align:center 文字置中對(duì)齊

這些是一些簡(jiǎn)單的文字效果,可以應(yīng)用到css的頁(yè)面中。

 


背景


background-color:black 背景顏色

background-image : url(image/bg.gif) 背景圖片

background-attachment : fixed 固定背景

background-repeat : repeat 重復(fù)排列-網(wǎng)頁(yè)預(yù)設(shè)

background-repeat : no-repeat 不重復(fù)排列

background-repeat : repeat-x 在x軸重復(fù)排列

background-repeat : repeat-y 在y軸重復(fù)排列

background-position : 90% 90% 背景圖片x與y軸的位置  



鏈接


A 所有超連接

A:link 超連接文字格式

A:visited 瀏覽過的連接文字格式

A:active 按下連接的格式

A:hover 鼠標(biāo)移至連接

邊框

border-top : 1px solid black 上框

border-bottom : 1px solid #6699cc 下框

border-left : 1px solid #6699cc 左框

border-right : 1px solid #6699cc 右框

border: 1px solid #6699cc 四邊框

虛線

<textarea STYLE="border:1px dashed pink">

實(shí)線

<textarea STYLE="border:1px solid pink">



培訓(xùn)啦提醒您:交易時(shí)請(qǐng)核實(shí)對(duì)方資質(zhì),對(duì)于過大宣傳或承諾需謹(jǐn)慎!任何要求預(yù)付定金、匯款等方式均存在風(fēng)險(xiǎn),謹(jǐn)防上當(dāng)。