【前端技術(shù)】常用HTML標(biāo)簽屬性大集合

跑馬燈

<marquee>...</marquee>普通卷動
<marquee behavior=slide>...</marquee>滑動
<marquee behavior=scroll>...</marquee>預(yù)設(shè)卷動
<marquee behavior=alternate>...</marquee>來回卷動
<marquee direction=down>...</marquee>向下卷動
<marquee direction=up>...</marquee>向上卷動
<marquee direction=right></marquee>向右卷動
<marquee direction=’left’></marquee>向左卷動
<marquee loop=2>...</marquee>卷動次數(shù)
<marquee width=180>...</marquee>設(shè)定寬度
<marquee height=30>...</marquee>設(shè)定高度
<marquee bgcolor=FF0000>...</marquee>設(shè)定背景顏色
<marquee scrollamount=30>...</marquee>設(shè)定滾動速度
<marquee scrolldelay=300>...</marquee>設(shè)定卷動時間
<marquee onmouseover="this.stop()">...</marquee>鼠標(biāo)經(jīng)過上面時停止?jié)L動
<marquee onmouseover="this.start()">...</marquee>鼠標(biāo)離開時開始滾動

字體效果

<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)記符號)
<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=’頁框名’></a>外部連結(jié)(在指定頁框連結(jié))

貼圖/音樂

<img src=圖片位址>貼圖
<img src=圖片位址 width=’180’>設(shè)定圖片寬度
<img src=圖片位址 height=’30’>設(shè)定圖片高度
<img src=圖片位址 alt=’提示文字’>設(shè)定圖片提示文字
<img src=圖片位址’ border=’1’>設(shè)定圖片邊框
<bgsound src=MID音樂檔位址>背景音樂設(shè)定

表格語法

<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>指定儲存格合并欄的欄數(shù)(使用數(shù)字)
<td rowspan=參數(shù)>...</td>指定儲存格合并列的列數(shù)(使用數(shù)字)

分割視窗

<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調(diào)整
<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調(diào)整
<frameset cols="20%,*">分割左右兩個框架
<frameset cols="20%,*,20%">分割左中右三個框架
<分割上下兩個框架
<frameset rows="20%,*,20%">分割上中下三個框架
屬性:
cols 垂直切割窗口(如左右分割兩個窗口)接受整數(shù)值,百分?jǐn)?shù),*(*代表占用余下空間)數(shù)值的個數(shù)代表分成的部分?jǐn)?shù)目,要以逗號分隔仍翰。例:cols="30,*,50%"可以 切成三個視窗,第一部分是30像素(pixels)為絕對分割,第二部分是當(dāng)分配完第一和第三視圖后剩下的空間幔亥,第三部分則占整個窗口的50%寬度,為相對分割察纯。
rows 就是橫向切割帕棉,將窗口上下分開,數(shù)值設(shè)置同上饼记。
以上兩屬性盡量不要在同一個<frameset>標(biāo)記中香伴,因?yàn)橥蹙╪etscape)不支持,盡量采用多重分割具则。
frameborder 設(shè)置框架的邊框即纲,其值有0不要邊框,1要邊框博肋。
border 設(shè)置框架邊框厚度
framespacing 表示框架與框架間保留空白的距離
frame 元素(單標(biāo)簽)
語法格式:
<frame name="" src="url" scrolling="yes/no" noresize>
屬性:
name 框架名稱低斋,指定框架來做連接的目標(biāo)窗口。
src 框架中要顯示的網(wǎng)頁文當(dāng)url地址匪凡,每個個框架要對應(yīng)一個html文擋膊畴。
scrolling 是否顯示滾動條,yes/no,auto是自動病游。
noresize 設(shè)置不讓使用者改變這個框架的大小唇跨,

noframe元素

指定當(dāng)使用了框架的頁面在不支持框架的瀏覽器中打開時顯示的信息
語法格式:
<noframe>
......
</noframe>

表單<form></form>

語法格式:
<form action="url" method="get/post">
....
<input type=submit><input type=reset>
</form>
method有兩種提交方式get,post
action 是指明處理該表單的程序位置,這樣表單所填的資料才能傳給cgi做處里衬衬,可設(shè)定此參數(shù)為action="mailto:lwr8494@163.com" 這樣此表單所填的資料將會發(fā)送到這個郵箱地址买猖。
method 是指傳送信息給cgi等網(wǎng)絡(luò)程序的方式∮赌停可選post方法政勃, get方法,post方法容許傳送大量信息兼砖。get方法只接受低于1k的信息奸远。
申請表單用的是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> 向中對齊
<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è)定戶動式表單的處理方式
<form method> 設(shè)定戶動式表單之資料傳送方式
<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)目 ( 可指定符號 )
< marquee> 跑馬燈效果
<menu>...</menu> 條列文字標(biāo)簽
<meta name="refresh" content url> 自動更新文件內(nèi)容
<multiple> 可同時選擇多項(xiàng)的列表欄
<noframe> 定義不出現(xiàn)分割視窗的文字
<ol>...</ol> 有序號的列表
<option> 定義表單中列表欄的項(xiàng)目
< p align> 設(shè)定對齊方向
<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)整表格欄位之左右對齊
<td bgcolor> 設(shè)定表格欄位之背景顏色
<td colspan rowspan> 表格欄位的合并
<td nowrap> 設(shè)定表格欄位不換行
< td valign> 調(diào)整表格欄位之上下對齊
<td width> 調(diào)整表格欄位寬度
<td>...</td> 定義表格的資料欄位
<textarea name rows cols> 表單中加入多少列的文字輸入欄
< textarea wrap> 決定文字輸入欄是自動否換行
<th>...</th> 定義表格的標(biāo)頭欄位
<title> 文件標(biāo)題
<tr>...</tr> 定義表格美一行
<tt> 打字機(jī)字體
<u> 文字加底線
< ul type>...</ul> 無序號的列表 ( 可指定符號 )
<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="url">
.text文本顏色(非連接文字顏色)
.link連接文字顏色(可連接文字顏色)
.alink活動連接文字顏色(正被點(diǎn)擊的可連接文字的顏色)
.vlink已訪問連接文字顏色)(已經(jīng)點(diǎn)擊訪問過的可連接文字的顏色)
語法格式:<body text="color" link="color" alink="color" vlink="color">
.leftmargin 頁面左側(cè)的留白距離
.topmargin 頁面頂部的留白距離
語法格式:<body leftmargin="value" topmargin="value">
注:value為長度值為數(shù)字

align屬性

語法:<h2 align="?">文字</h2>
其屬性有三種:left靠左,center居中,right靠右
〈p〉</p>為段落標(biāo)記胖烛,可利用以上屬性對整個段落進(jìn)行設(shè)置
〈br>為換行標(biāo)記
<nobr></nobr>為不換行標(biāo)記 放在文字兩邊即可
例:<body>
<h3>江南逢李龜年</h3>
<p>歧王宅里尋常見<br>
催九堂前幾度聞<br>
正是江南好風(fēng)景<br>
落花時節(jié)又逢君</p>
</body>

預(yù)格式化

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

列表

1、無序列表又稱符號列表
語法格式:
<ul type="">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的值是編號字符可選的有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="url" name="?" target="?" title="?">....</a>
屬性:href 連接目標(biāo) 值可以是url地址也可以是連接錨點(diǎn)
<a href="url">...</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="url"target="_blank|_self|_farent|_top|windowname">....</a>
-blank打開新窗口
_self當(dāng)前窗口打開
一下兩個僅在框架葉面中應(yīng)用
_parent當(dāng)前窗口的父級窗口(上一級)打開
_top在最高一級的窗口打開
windowname已命名的窗口或框架中打開連接

title連接提示
<a  title="他趟畏、楊小二的個人博客">楊小二的個人博客</a>

圖像<img> 語法格式
<img src="url" alt="?" width="?" height="?" border="?" align="?">
border屬性定義圖片邊框的寬度,默認(rèn)值為0
align屬性設(shè)置圖片旁邊文字的位置
語法格式:<img src="" align"">
可選值有:
top圖片和文字頂部對齊
middle圖片和文字居中對齊
bottom圖片和文字底邊對齊(默認(rèn))
left圖片居左對齊滩租,文字沿圖片繞排
right圖片居右對齊赋秀,文字沿圖片繞排
absmiddle圖片對齊到目前文字行絕對中央
absbottom圖片對齊到目前文字行絕對底部

文字的排版

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

font元素
語法格式:
<font face="字體名稱" size="字體大小" color="字體顏色">
字體大小可選值為1——7,默認(rèn)為3
例:〈font face="黑體" size="4" color="#ff00ff">....</font>

水平線<hr>
語法格式:<hr width="寬度" align="對齊方式默認(rèn)居中center" size="水平線厚度默認(rèn)為2" color="顏色" noshade>
noshade無陰影律想,既實(shí)線
層〈div><span>兩種元素
<div>是塊級元素猎莲,和段落元素<p>相似,不同的是兩個<div>元素之間不會產(chǎn)生兩個<p>元素之間的空行技即,
<span>是行內(nèi)元素著洼,可以定義段落中部分文字的屬性
語法格式:
<div align="" style="">...</div>
align設(shè)置層中元素的水平對齊方式
stule設(shè)置元素應(yīng)用css規(guī)范的屬性
<div>兼容性比<span>要好一點(diǎn),最好使用<div>

表格語法格式

<table width="" bgcolor="" background="" border="" cellspacing="" cellpadding="">
<tr>...<td>....</td>....</tr>
</table>
border邊框?qū)挾饶J(rèn)值為0姥份,既沒有邊框
cellspacing表格中單元格的邊距大小郭脂,默認(rèn)值為兩個像素
cellpadding表格中單元格之間的間距大小,默認(rèn)值為兩個像素

tr元素
語法格式:
<tr align="" bgcolor="">....</tr>
align屬性對齊方式可選值如下:left,center,tight,默認(rèn)為left
bgcolor指定該行的背景顏色

td元素
語法格式:
<td width="寬度" height="高度" align="水平對齊方式" valign="垂直對齊方式" bgcolor="" background="" rowspan="單元格的行跨度" colapan="單元格的列跨度">.....</td>
align屬性的可選值有:left,center,right
valign屬性的可選值有:top,middle,bottom
rowspan和colapan跨行和跨列的數(shù)量澈歉,默認(rèn)為1

input元素 語法格式

<input type="">
type屬性的可選值有:
text 單行文本框
屬性:name 文本框名稱
value 文本框的初始值
size 文本框的長度
maxlength 可輸入字符串最大的長度

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 文件域的長度
maxlength 文件域可接受的字符數(shù)量的上限
hidden 隱藏域
屬性:name 隱藏域名稱
value 內(nèi)定值
image 圖片域
屬性:name 所要代表的按鈕展鸡,可以是submit,reset,或其他.
src 按鈕圖片的url 地址

列表框<select>
語法格式:
<select>
.....
<option>....</option>
.....
</select>

select元素
語法格式:<select name="" size=""multiple></select>
name 指定列表框的名字
size 指定列表框顯示列表項(xiàng)的條數(shù),如果指定了該參數(shù)埃难,select元素是個列表莹弊,否則是一個下拉列表框
multiple 指定了這個參數(shù),則表示該列表框可選擇多項(xiàng)涡尘,否則只可選擇一項(xiàng)

option屬性
語法格式:<option value="" selected></option>
value 該列表項(xiàng)的值
selected 如果設(shè)定了這個參數(shù)忍弛,默認(rèn)為選定這一項(xiàng)

多行文本框<textarea>

<textarea name="" cols="" rows="" wrap="off/physical/virtual"></textarea>
屬性:
name文本框的名稱
cols文本框的寬度
rows文本框的高度
wrap文本框的折行方式可選值有:
off不保存換行信息
physical強(qiáng)迫瀏覽器在發(fā)送信息到web服務(wù)器端時必須將多行文本框的文字一行一行的送出,
virtual送出連續(xù)成串的字除非使用者按回車考抄。

css 層疊樣式表

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

1细疚、外聯(lián)式樣式表
例:<head>
<link rel="stylesheet" href="/css/css.css">
</head>
<body>
....
</body>
</html>
屬性:rel 用來說明<link>元素在這里要完成的任務(wù)是連接一個獨(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)先級
越接近目標(biāo)的樣式定義優(yōu)先級越高然遏,高優(yōu)先級樣式將繼承低優(yōu)先級樣式的未重疊定義但覆蓋重疊的定義
如果4種樣式表對同一元素定義了不同的樣式,那么他們的優(yōu)先級順序從高到低是吧彪,元素內(nèi)定待侵,內(nèi)嵌樣式表,導(dǎo)入樣式表姨裸,外聯(lián)樣式表秧倾。

CSS結(jié)構(gòu)
例:td{font-size:10.5pt;color:#666666}
css樣式包含兩個基礎(chǔ)部分,
選擇符<td>和聲明{font-size:10.5pt;color:#666666}
聲明也有兩部分組成:
屬性font-size,color和值10.5pt,#666666

選擇符分為6種
1傀缩、元素選擇符
當(dāng)頁面上多個元素的樣式相同時那先,可以將多個元素放在一起定義,中間以逗號分開 例: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">楊小二個人博客</p>
<p>楊小二的個人博客胃榕,楊小二的小江湖</p>
</body>
還有一種方法就是限定可以應(yīng)用它的頁面元素
例:
<head>
<title>.....</title>
<style type="text/css">
<!--
h1.red{color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p class="red">楊小二個人博客</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選擇附時與CLASS選擇附類似,只是將class=""換成了id=""苦掘,方便頁面腳本語言的調(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>
我們設(shè)定了在元素中<td>的元素<p>所包含文字的樣式换帜,只有在兩個條件都滿足是,樣式在會起作用鹤啡,

偽類選擇符
是只能用在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 >楊小二的小江湖</a><p>
<p><a >楊小二的小江湖</a><p>
<p><a >楊小二的小江湖</a><p>
<p><a >楊小二的小江湖</a><p>
</body>
</html>

正確的順序是a:link\a:visited\a:hover否則會引起頁面上連接顏色混亂

偽元素選擇符
與偽類選擇符定義類似,目前被大多數(shù)瀏覽器支持的有兩個:首行偽元素(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>

長度隨瀏覽器窗口大小而改變
首字
<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>為最高級<td>次一級兩種css用在一個屬性元素上递瑰,相同的覆蓋祟牲,不同的繼承,

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说贝、 長度單位
數(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(英寸)=我國新四號鉛字的尺寸
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 文字*右對齊
text-align:left 文字*左對齊
text-align:center 文字置中對齊
這些是一些簡單的文字效果函卒,可以應(yīng)用到css的頁面中∑裁校 

背景

background-color:black 背景顏色
background-image : url(image/bg.gif) 背景圖片
background-attachment : fixed 固定背景
background-repeat : repeat 重復(fù)排列-網(wǎng)頁預(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">

參考鏈接
https://mp.weixin.qq.com/s/B0MOE-e2TVahD1i1KTzSUQ

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末报嵌,一起剝皮案震驚了整個濱河市虱咧,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌沪蓬,老刑警劉巖彤钟,帶你破解...
    沈念sama閱讀 212,080評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異跷叉,居然都是意外死亡逸雹,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,422評論 3 385
  • 文/潘曉璐 我一進(jìn)店門云挟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來梆砸,“玉大人,你說我怎么就攤上這事园欣√溃” “怎么了?”我有些...
    開封第一講書人閱讀 157,630評論 0 348
  • 文/不壞的土叔 我叫張陵沸枯,是天一觀的道長日矫。 經(jīng)常有香客問我,道長绑榴,這世上最難降的妖魔是什么哪轿? 我笑而不...
    開封第一講書人閱讀 56,554評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮翔怎,結(jié)果婚禮上窃诉,老公的妹妹穿的比我還像新娘。我一直安慰自己赤套,他們只是感情好飘痛,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,662評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著容握,像睡著了一般宣脉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上唯沮,一...
    開封第一講書人閱讀 49,856評論 1 290
  • 那天脖旱,我揣著相機(jī)與錄音,去河邊找鬼介蛉。 笑死萌庆,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的币旧。 我是一名探鬼主播践险,決...
    沈念sama閱讀 39,014評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了巍虫?” 一聲冷哼從身側(cè)響起彭则,我...
    開封第一講書人閱讀 37,752評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎占遥,沒想到半個月后俯抖,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,212評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瓦胎,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,541評論 2 327
  • 正文 我和宋清朗相戀三年芬萍,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片搔啊。...
    茶點(diǎn)故事閱讀 38,687評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡柬祠,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出负芋,到底是詐尸還是另有隱情漫蛔,我是刑警寧澤,帶...
    沈念sama閱讀 34,347評論 4 331
  • 正文 年R本政府宣布旧蛾,位于F島的核電站莽龟,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏锨天。R本人自食惡果不足惜轧房,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,973評論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望绍绘。 院中可真熱鬧,春花似錦迟赃、人聲如沸陪拘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,777評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽左刽。三九已至,卻和暖如春酌媒,著一層夾襖步出監(jiān)牢的瞬間欠痴,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,006評論 1 266
  • 我被黑心中介騙來泰國打工秒咨, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留喇辽,地道東北人。 一個月前我還...
    沈念sama閱讀 46,406評論 2 360
  • 正文 我出身青樓雨席,卻偏偏與公主長得像菩咨,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,576評論 2 349

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案抽米? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評論 1 92
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的特占,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 3,872評論 0 0
  • 學(xué)習(xí)目標(biāo): 了解html的基本結(jié)構(gòu) 掌握標(biāo)題標(biāo)簽: 掌握段落標(biāo)簽: 掌握通用塊標(biāo)簽: 掌握圖片標(biāo)簽: 掌握超鏈接標(biāo)...
    husky_1閱讀 2,513評論 0 12
  • 概要 64學(xué)時 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,142評論 0 3
  • 瀏覽器與服務(wù)器的基本概念 瀏覽器(安裝在電腦里面的一個軟件) 作用: ①將網(wǎng)頁內(nèi)容渲染呈現(xiàn)給用戶查看云茸。 ②讓用戶通...
    云還灬閱讀 1,104評論 0 0