HTML标签属性大全

最常见的HTML标签属性⼤全,和⼤家分享⼀下: 
<!>字体效果 
<h1>...</h1>标题字(最⼤) 
<h6>...</h6>标题字(最⼩) 
<b>...</b>粗体字 
<strong>...</strong>粗体字(强调) (同上效果略同) 
<i>...</i>斜体字 
<em>...</em>斜体字(强调) 
<dfn>...</dfn>斜体字(表⽰定义) 
<u>...</u>底线 
<ins>...</ins>底线(表⽰插⼊⽂字) 
<strike>...</strike>横线 
<s>...</s>删除线 
<del>...</del>删除线(表⽰删除) 
<kbd>...</kbd>键盘⽂字 
<tt>...</tt> 打字体 
<xmp>...</xmp>固定宽度字体(在⽂件中空⽩、换⾏、定位功能有效) 
<plaintext>...</plaintext>固定宽度字体(不执⾏标记符号) 
<listing>...</listing> 固定宽度⼩字体 
<font color=00ff00>...</font>字体颜⾊ 
<font size=1>...</font>最⼩字体 
<font style =’font-size:100 px’>...</font>⽆限增⼤ 
区断标记 
<hr>⽔平线 
<hr size=’9’>⽔平线(设定⼤⼩) 
<hr width=’80%’>⽔平线(设定宽度) 
<hr color=’ff0000’>⽔平线(设定颜⾊) 
<br>(换⾏) 
<nobr>...</nobr>⽔域(不换⾏) 
<p>...</p>⽔域(段落) 
<center>...</center>置中 
<!>连结格式 
<base href=位址>(预设好连结路径)<a href=位址></a>外部连结 
<a href=位址 target=’_blank’></a>外部连结(另开新视窗) 
<a href=位址 target=’_top’></a>外部连结(全视窗连结) 
<a href=位址 target=’页框名’></a>外部连结(在指定页框连结) 
<!>贴图/⾳乐 
<img src=图⽚位址>贴图 
<img src=图⽚位址 width=’180’>设定图⽚宽度 
<img src=图⽚位址 height=’30’>设定图⽚⾼度 
<img src=图⽚位址 alt=’提⽰⽂字’>设定图⽚提⽰⽂字 
<img src=图⽚位址’ border=’1’>设定图⽚边框 
<bgsound src=MID⾳乐档位址>背景⾳乐设定 
<!>表格语法 
<table aling=left>...</table>表格位置,置左 
<table aling=center>...</table>表格位置,置中 
<table background=图⽚路径>...</table>背景图⽚的URL=就是路径⽹址 
<table border=边框⼤⼩>...</table>设定表格边框⼤⼩(使⽤数字) 
<table bgcolor=颜⾊码>...</table>设定表格的背景颜⾊ 
<table borderclor=颜⾊码>...</table>设定表格边框的颜⾊ 
<table borderclordark=颜⾊码>...</table>设定表格暗边框的颜⾊ 
<table borderclorlight=颜⾊码>...</table>设定表格亮边框的颜⾊ 
<table cellpadding=参数>...</table>指定内容与格线之间的间距(使⽤数字) 
<table cellspacing=参数>...</table>指定格线与格线之间的距离(使⽤数字) 
<table cols=参数>...</table>指定表格的栏数 
<table frame=参数>...</table>设定表格外框线的显⽰⽅式 
<table width=宽度>...</table>指定表格的宽度⼤⼩(使⽤数字) 
<table height=⾼度>...</table>指定表格的⾼度⼤⼩(使⽤数字) 
<td colspan=参数>...</td>指定储存格合并栏的栏数(使⽤数字) 
<td rowspan=参数>...</td>指定储存格合并列的列数(使⽤数字) 
分割视窗 
<frameset cols="20%,*">左右分割,将左边框架分割⼤⼩为20%右边框架的⼤⼩浏览器会⾃动调整 
<frameset rows="20%,*">上下分割,将上⾯框架分割⼤⼩为20%下⾯框架的⼤⼩浏览器会⾃动调整 
<frameset cols="20%,*">分割左右两个框架 
<frameset cols="20%,*,20%">分割左中右三个框架 
<分割上下两个框架<frameset rows="20%,*,20%">分割上中下三个框架 
属性: 
cols 垂直切割窗⼝(如左右分割两个窗⼝)接受整数值,百分数,*(
*代表占⽤余下空间)数值的个数代表分成的部分数 
⽬,要以逗号分隔。例:cols="30,*,50%"可以 切成三个视窗,第⼀部分是30像素(
pixels)为绝对分割,第⼆部分是当分 
配完第⼀和第三视图后剩下的空间,第三部分则占整个窗⼝的50%宽度,为相对分割。 
rows 就是横向切割,将窗⼝上下分开,数值设置同上。 
以上两属性尽量不要在同⼀个<frameset>标记中,因为王井(
netscape)不⽀持,尽量采⽤多重分割。 
frameborder 设置框架的边框,其值有0不要边框,1要边框。 
border 设置框架边框厚度 
framespacing 表⽰框架与框架间保留空⽩的距离 
frame 元素(单标签) 
语法格式: 
<frame name=""src="url" scrolling="yes/no" noresize> 
属性: 
name 框架名称,指定框架来做连接的⽬标窗⼝。 
src 框架中要显⽰的⽹页⽂当url地址,每个个框架要对应⼀个html⽂挡。 
scrolling 是否显⽰滚动条,yes/no,auto是⾃动。 
noresize 设置不让使⽤者改变这个框架的⼤⼩, 
noframe元素 
指定当使⽤了框架的页⾯在不⽀持框架的浏览器中打开时显⽰的信息 
语法格式: 
<noframe> 
...... 
</noframe> 
表单<form></form> 
语法格式: 
<form action="url"method="get/post"> 
.... 
<input type=submit><inputtype=reset> 
</form> 
method有两种提交⽅式get,post 
action 是指明处理该表单的程序位置,这样表单所填的资料才能传给cgi做处⾥,可设定此参数为 
action="mailto:lwr8494@163.com"这样此表单所填的资料将会发送到这个邮箱地址。 
method 是指传送信息给cgi等⽹络程序的⽅式。可选post⽅法, get⽅法,post⽅法容许传送⼤量信息。get⽅法只接受 
低于1k的信息。申请表单⽤的是post搜索引擎⽤的是get 
<!- - ... - -> 注解 
<A HREF TARGET> 指定超连结的分割视窗 
<A HREF=#锚的名称> 指定锚名称的超连结 
<A HREF> 指定超连结 
<A NAME=锚的名称> 被连结点的名称 
<ADDRESS>....</ADDRESS> ⽤来显⽰电⼦邮箱地址 
<B> 粗体字 
<BASE TARGET> 指定超连结的分割视窗 
<BASEFONT SIZE> 更改预设字形⼤⼩ 
<BGSOUND SRC> 加⼊背景⾳乐 
<BIG> 显⽰⼤字体 
<BLINK> 闪烁的⽂字 
<BODY TEXT LINK VLINK> 设定⽂字颜⾊ 
<BODY> 显⽰本⽂ 
<BR> 换⾏ 
<CAPTION ALIGN> 设定表格标题位置 
<CAPTION>...</CAPTION> 为表格加上标题 
<CENTER> 向中对齐 
<CITE>...<CITE> ⽤於引经据典的⽂字 
<CODE>...</CODE> ⽤於列出⼀段程式码 
<COMMENT>...</COMMENT> 加上注解 
<DD> 设定定义列表的项⽬解说 
<DFN>...</DFN> 显⽰"定义"⽂字 
<DIR>...</DIR> 列表⽂字标签 
<DL>...</DL> 设定定义列表的标签 
<DT> 设定定义列表的项⽬ 
<EM> 强调之⽤ 
<FONT FACE> 任意指定所⽤的字形 
<FONT SIZE> 设定字体⼤⼩ 
<FORM ACTION> 设定户动式表单的处理⽅式 
<FORM METHOD> 设定户动式表单之资料传送⽅式 
<FRame MARGINHEIGHT> 设定视窗的上下边界<FRame MARGINWIDTH> 设定视窗的左右边界 
<FRame NAME> 为分割视窗命名 
<FRame NORESIZE> 锁住分割视窗的⼤⼩ 
<FRame SCROLLING> 设定分割视窗的卷轴 
<FRame SRC> 将HTML档加⼊视窗 
<FRameSET COLS> 将视窗分割成左右的⼦视窗 
<FRameSET ROWS> 将视窗分割成上下的⼦视窗 
<FRameSET>...</FRameSET> 划分分割视窗 
<H1>~<H6> 设定⽂字⼤⼩ 
<HEAD> 标⽰⽂件资讯 
<HR> 加上分格线 
<HTML> ⽂件的开始与结束 
<I> 斜体字 
<IMG ALIGN> 调整图形影像的位置 
<IMG ALT> 为你的图形影像加注 
<IMG DYNSRC LOOP> 加⼊影⽚ 
<IMG HEIGHT WIDTH> 插⼊图⽚并预设图形⼤⼩ 
<IMG HSPACE> 插⼊图⽚并预设图形的左右边界 
<IMG LOWSRC> 预载图⽚功能 
<IMG SRC BORDER> 设定图⽚边界 
<IMG SRC> 插⼊图⽚ 
<IMG VSPACE> 插⼊图⽚并预设图形的上下边界 
<INPUT TYPE NAME value> 在表单中加⼊输⼊栏位 
<ISINDEX> 定义查询⽤表单 
<KBD>...</KBD> 表⽰使⽤者输⼊⽂字 
<LI TYPE>...</LI> 列表的项⽬ ( 可指定符号 ) 
<MARQUEE> 跑马灯效果 
<MENU>...</MENU> 条列⽂字标签 
<meta NAME="REFRESH" CONTENTURL> ⾃动更新⽂件内容 
<MULTIPLE> 可同时选择多项的列表栏 
<NOFRame> 定义不出现分割视窗的⽂字 
<OL>...</OL> 有序号的列表 
<OPTION> 定义表单中列表栏的项⽬ 
<P ALIGN> 设定对齐⽅向<P> 分段 
<PERSON>...</PERSON> 显⽰⼈名 
<PRE> 使⽤原有排列 
<SAMP>...</SAMP> ⽤於引⽤字 
<select >...</select > 在表单中定义列表栏 
<SMALL> 显⽰⼩字体 
<STRIKE> ⽂字加横线 
<STRONG> ⽤於加强语⽓ 
<SUB> 下标字 
<SUP> 上标字 
<TABLE BORDER=n> 调整表格的宽线⾼度 
<TABLE CELLPADDING> 调整资料栏位之边界 
<TABLE CELLSPACING> 调整表格线的宽度 
<TABLE HEIGHT> 调整表格的⾼度 
<TABLE WIDTH> 调整表格的宽度 
<TABLE>...</TABLE> 产⽣表格的标签 
<TD ALIGN> 调整表格栏位之左右对齐 
<TD BGCOLOR> 设定表格栏位之背景颜⾊ 
<TD COLSPAN ROWSPAN> 表格栏位的合并 
<TD NOWRAP> 设定表格栏位不换⾏ 
<TD VALIGN> 调整表格栏位之上下对齐 
<TD WIDTH> 调整表格栏位宽度 
<TD>...</TD> 定义表格的资料栏位 
<TEXTAREA NAME ROWS COLS> 表单中加⼊多少列的⽂字输⼊栏 
<TEXTAREA WRAP> 决定⽂字输⼊栏是⾃动否换⾏ 
<TH>...</TH> 定义表格的标头栏位 
<TITLE> ⽂件标题 
<TR>...</TR> 定义表格美⼀⾏ 
<TT> 打字机字体 
<U> ⽂字加底线 
<UL TYPE>...</UL> ⽆序号的列表 ( 可指定符号 ) 
<var>...</var> ⽤於显⽰变数 
BlockQuotc⽂本缩进 
表⽰颜⾊的有三种⽅式;1,16进制颜⾊代码 
语法:#RRGGBB 
例:<fontcolor="#ff0000">红⾊</font> 
2,10进制RGB码 
语法:RGB(RRR,GGG,BBB) 
例:<fontcolor="rgb(255,000,000)">红⾊</font> 
3,直接⽤颜⾊的英⽂名称 
例:<fontcolor="red">红⾊</font> 
<body>.....</body>属性可分为三种: 
1,背景属性 
包括:bgcolor,background 
2,⽂字属性: 
包括:text,link,alink,vlink, 
3,留⽩属性: 
其中分为:leftmargin,topmargin 
.bgcolor背景⾊ 
语法格式:<bodybgcolor="#ff0000"> 
.background背景图案。 
语法格式:<bodybackground="url"> 
.text⽂本颜⾊(⾮连接⽂字颜⾊) 
.link连接⽂字颜⾊(可连接⽂字颜⾊) 
.alink活动连接⽂字颜⾊(正被点击的可连接⽂字的颜⾊) 
.vlink已访问连接⽂字颜⾊)(已经点击访问过的可连接⽂字的颜⾊) 
语法格式:<bodytext="color" link="color" alink="color"vlink="color"> 
.leftmargin 页⾯左侧的留⽩距离 
.topmargin 页⾯顶部的留⽩距离 
语法格式:<bodyleftmargin="value" topmargin="value"> 
注:value为长度值为数字 
align属性 
语法:<h2align="?">⽂字</h2> 
其属性有三种:left靠左,center居中,right靠右 
〈p〉</p>为段落标记,可利⽤以上属性对整个段落进⾏设置 
〈br>为换⾏标记 
<nobr></nobr>为不换⾏标记 放在⽂字两边即可例:<body> 
<h3>江南逢李龟年</h3> 
<p>歧王宅⾥寻常见<br> 
催九堂前⼏度闻<br> 
正是江南好风景<br> 
落花时节⼜逢君</p> 
</body> 
预格式化: 
<pre>......</pre> 浏览是效果和编写是效果格式⼀样 
列表
1⽆序列表⼜称符号列表 
语法格式: 
<ul type="">type的属性可选直disc实⼼圆点,clrcle空⼼圆点,square实⼼⽅框 
<li>⽂字</li> 
<li>⽂字</li> 
</ul> 
2有序列表 
语法格式: 
<ol type="?"start"?"> 
<li>⽂字</li> 
<li>⽂字</li> 
</ol> 
type的值是编号字符可选的有1...,a...,A...,i... ,I... 
start为起始值例:如果start为3是那么将从3开始,⽽且必须是数字。 
3定义列表 
<dl>定义列表标记 
<dt>标⽰定义条⽬ 
<dd>标⽰定义内容 
语法格式: 
<dl> 
<dt>⽂字</dt> 
<dd>⽂字内容</dd> 
</dl> 
连接和图像语法格式: 
<a href="url"name="?" target="?" title="?">....</a> 
属性:href 连接⽬标 值可以是url地址也可以是连接锚点 
<a href="url">...</a>或者 
<a href="锚点">...</a> 
name连接名称 
语法格式:<aname="锚点名称">...</a> 
例:<aname="abcdcf">...</a> 
连接到该锚点的连接则应是: 
<aname="#abcdef">....</a> 
target⽬标窗⼝语法格式: 
<a href="url"target="_blank|_self|_farent|_top|windowname">....</a> 
-blank打开新窗⼝ 
_self当前窗⼝打开 
⼀下两个仅在框架叶⾯中应⽤ 
_parent当前窗⼝的⽗级窗⼝(上⼀级)打开 
_top在最⾼⼀级的窗⼝打开 
windowname已命名的窗⼝或框架中打开连接 
title连接提⽰ 
<ahref="http://www.crazytribe.net" title="打开狂⼈部落的⾸页">狂⼈部落</a> 
图像<img> 语法格式: 
<img src="url" alt="?"width="?" height="?" border="?"align="?"> 
border属性定义图⽚边框的宽度,默认值为0 
align属性设置图⽚旁边⽂字的位置 
语法格式:<imgsrc="" align""> 
可选值有: 
top图⽚和⽂字顶部对齐 
middle图⽚和⽂字居中对齐 
bottom图⽚和⽂字底边对齐(默认) 
left图⽚居左对齐,⽂字沿图⽚绕排 
right图⽚居右对齐,⽂字沿图⽚绕排 
absmiddle图⽚对齐到⽬前⽂字⾏绝对中央 
absbottom图⽚对齐到⽬前⽂字⾏绝对底部 
⽂字的排版不换⾏空⽩标记 
font元素 
语法格式: 
<font face="字体名称" size="字体⼤⼩" color="字体颜⾊"> 
字体⼤⼩可选值为1——7,默认为3 
例:〈
fontface="⿊体"size="4" color="#ff00ff">....</font> 
⽔平线<hr> 
语法格式:<hrwidth="宽度"align="对齐⽅式默认居中center"size="⽔平线厚度默认为2"color="颜⾊"noshade> 
noshade⽆阴影,既实线 
层〈div><span>两种元素 
<div>是块级元素,和段落元素<p>相似,不同的是两个<div>元素之间不会产⽣两个<p>元素之间的空⾏, 
<span>是⾏内元素,可以定义段落中部分⽂字的属性 
语法格式: 
<div align=""style="">...</div> 
align设置层中元素的⽔平对齐⽅式 
stule设置元素应⽤css规范的属性 
<div>兼容性⽐<span>要好⼀点,最好使⽤<div> 
表格语法格式: 
<table width="" bgcolor=""background="" border="" cellspacing=""cellpadding=""> 
<tr>...<td>....</td>....</tr> 
</table> 
border边框宽度默认值为0,既没有边框 
cellspacing表格中单元格的边距⼤⼩,默认值为两个像素 
cellpadding表格中单元格之间的间距⼤⼩,默认值为两个像素 
tr元素 
语法格式: 
<tr align=""bgcolor="">....</tr> 
align属性对齐⽅式可选值如下:left,center,tight,默认为left 
bgcolor指定该⾏的背景颜⾊ 
td元素 
语法格式: 
<td width="宽度" height="⾼度" align="⽔平对齐⽅式" valign="垂直对齐⽅式" bgcolor=""background="" rowspan="单 
元格的⾏跨度" colapan="单元格的列跨度">.....</td> 
align属性的可选值有:left,center,rightvalign属性的可选值有:top,middle,bottom 
rowspan和colapan跨⾏和跨列的数量,默认为1 
input元素 语法格式: 
<input type=""> 
type属性的可选值有: 
text 单⾏⽂本框 
属性:name ⽂本框名称 
value ⽂本框的初始值 
size ⽂本框的长度 
maxlength 可输⼊字符串最⼤的长度 
radio 单选框 
属性:name 单选框名称 
value 内部值 
checked 默认选定 
checkbox 复选框 
属性:name 复选框名称 
value 内部值 
checked 默认选定 
reset 重置按钮 
submit 确定按钮 
属性:name 按钮名称 
value 显⽰在按钮上的⽂字 
password 密码框 
属性与⽂本框的属性完全相同 
file ⽂件域 
属性:name⽂件域名称 
size ⽂件域的长度 
maxlength ⽂件域可接受的字符数量的上限 
hidden 隐藏域 
属性:name 隐藏域名称 
value 内定值 
image 图⽚域 
属性:name 所要代表的按钮,可以是submit,reset,或其他. 
src 按钮图⽚的url 地址列表框<select> 
语法格式: 
<select> 
..... 
<option>....</option> 
..... 
</select> 
select元素 
语法格式:<selectname="" size=""multiple></select> 
name 指定列表框的名字 
size 指定列表框显⽰列表项的条数,如果指定了该参数,select元素是个列表,否则是⼀个下拉列表框 
multiple 指定了这个参数,则表⽰该列表框可选择多项,否则只可选择⼀项 
option属性 
语法格式:<optionvalue="" selected></option> 
value 该列表项的值 
selected 如果设定了这个参数,默认为选定这⼀项 
多⾏⽂本框<textarea> 
<textarea name=""cols="" rows=""wrap="off/physical/virtual"></textarea> 
属性: 
name⽂本框的名称 
cols⽂本框的宽度 
rows⽂本框的⾼度 
wrap⽂本框的折⾏⽅式可选值有: 
off不保存换⾏信息 
physical强迫浏览器在发送信息到web服务器端时必须将多⾏⽂本框的⽂字⼀⾏⼀⾏的送出, 
virtual送出连续成串的字除⾮使⽤者按回车。 
css 层叠样式表 
引⼊层叠样式表的⽅法包括: 
外联式样式表 
例:<head> 
<link rel="stylesheet"href="/css/default.css"> 
</head> 
<body> 
....</body> 
</html> 
属性:rel ⽤来说明<link>元素在这⾥要完成的任务是连接⼀个独⽴的css⽂件。⽽href属性给出了所要连接css⽂件的url地 
内嵌式样式表: 
例:<html> 
<head> 
<style type="text/css"> 
<!-- 
td{font:9pt;color:red} 
.font105{font:10.5pt;color:blue} 
--> 
</style> 
</head> 
<body>....</body> 
</html> 
元素内定 
格式:<pstyle="font-size:10.5pt"> 
导⼊式样式表 
〈html> 
<head> 
<style type="text/css"> 
<!-- 
@import url(css/home.css); 
--> 
</style> 
<body> 
.... 
</body> 
</html> 
css的优先级 
越接近⽬标的样式定义优先级越⾼,⾼优先级样式将继承低优先级样式的未重叠定义但覆盖重叠的定义 
如果4种样式表对同⼀元素定义了不同的样式,那么他们的优先级顺序从⾼到低是,元素内定,内嵌样式表,导⼊样式表, 
外联样式表。 
css结构例:td{font-size:10.5pt;color:#666666} 
css样式包含两个基础部分, 
选择符<td>和声明{font-size:10.5pt;color:#666666} 
声明也有两部分组成: 
属性font-size,color和值10.5pt,#666666 
选择符分为6种 
1元素选择符 
当页⾯上多个元素的样式相同时,可以将多个元素放在⼀起定义,中间以逗号分开例:td,p,li,input,select{font-size:12px;} 
2class(类)选择符 
例:〈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> 
还有⼀种⽅法就是限定可以应⽤它的页⾯元素 
例:〈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> 
我们看到在调⽤ID选择附时与CLASS选择附类似,只是将class=""换成了id="",⽅便页⾯脚本语⾔的调⽤ 
关联选择符 
<body> 
<head> 
<style type="text/css"> 
<!-- 
td p{font-size:18px;color:#0000ff} 
--> 
</style> 
</head> 
<body> 
<table width="250"border="1" height="50"> 
<tr> 
<tdalign="center"><p>关联选择符</p></td> 
</tr> 
</table><p>关联选择符</p> 
</body> 
</html> 
我们设定了在元素中<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 href="#">关联选择符</a><p> 
<p><a href="#">关联选择符</a><p> 
<p><a href="#">关联选择符</a><p> 
<p><a href="#">关联选择符</a><p> 
/body> 
</html> 
正确的顺序是a:link\a:visited\a:hover否则会引起页⾯上连接颜⾊混乱 
伪元素选择符 
与伪类选择符定义类似,⽬前被⼤多数浏览器⽀持的有两个:⾸⾏伪元素(
first-line)和⾸字符伪元素(first-letter)是⽤来 
实现⾸⾏⼤写和⾸⾏下沉效果的 
例:⾸⾏ 
<html> 
<head> 
<style> 
<!--p:first-line{color:red;font-size:20pt} 
--> 
</style> 
</hesd> 
<body> 
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p> 
</body> 
</html> 
长度随浏览器窗⼝⼤⼩⽽改变 
⾸字
<html> 
<head> 
<style> 
<!-- 
p:first-letter{color:red;font-size:50pt;float:left;} 
--> 
</style> 
</hesd> 
<body> 
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p> 
</body> 
</html> 
以上两种都只能应⽤于块状元素上 
css规则 
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规则</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 长度单位 
数值可以是整数,⼩数,正数,负数,0,后加单位(负值不要轻易使⽤) 
换算关系: 
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% 设定⾏⾼ 
font-weight:bold ⽂字粗体 
vertical-align:sub 下标字 
vertical-align:super 上标字 
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 ⽂字置中对齐 
这些是⼀些简单的⽂字效果,可以应⽤到css的页⾯中。 
背景
 
background-image : url(image/bg.gif) 背景图⽚ 
background-attachment : fixed 固定背景 
background-repeat : repeat 重复排列-⽹页预设 
background-repeat : no-repeat 不重复排列 
background-repeat : repeat-x 在x轴重复排列 
background-repeat : repeat-y 在y轴重复排列 
background-position : 90% 90% 背景图⽚x与y轴的位置 
链接
A 所有超连接 
A:link 超连接⽂字格式 
A:visited 浏览过的连接⽂字格式 
A:active 按下连接的格式 
A:hover ⿏标移⾄连接 
边框
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 dashedpink"> 
实线
<TEXTAREA STYLE="border:1px solidpink"> 
<marquee>...</marquee>普通卷动 
<marqueebehavior=slide>...</marquee>滑动 
<marqueebehavior=scroll>...</marquee>预设卷动 
<marqueebehavior=alternate>...</marquee>来回卷动 
<marqueedirection=down>...</marquee>向下卷动 
<marquee direction=up>...</marquee>向上卷动<marqueedirection=right></marquee>向右卷动 
<marquee direction=’left’></marquee>向左卷动 
<marquee loop=2>...</marquee>卷动次数 
<marqueewidth=180>...</marquee>设定宽度 
<marqueeheight=30>...</marquee>设定⾼度 
<marqueebgcolor=FF0000>...</marquee>设定背景颜⾊ 
<marqueescrollamount=30>...</marquee>设定滚动速度 
<marqueescrolldelay=300>...</marquee>设定卷动时间 
<marqueeοnmοuseοver="this.stop()">...</marquee>⿏标经过上⾯时停⽌滚动 
<marqueeοnmοuseοver="this.start()">...</marquee>⿏标离开时开始滚动
posted @ 2022-09-18 03:26  chen1777  阅读(2444)  评论(0)    收藏  举报