HTML+CSS标签属性大全_第1页
HTML+CSS标签属性大全_第2页
HTML+CSS标签属性大全_第3页
HTML+CSS标签属性大全_第4页
HTML+CSS标签属性大全_第5页
已阅读5页,还剩7页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、HTML CSS标签属性大全 a卷标,属性名称,简介<!-> 批注1、跑马灯<marquee> </marquee> 普通卷动<marquee behavior=slide> </marquee>滑动<marquee behavior=scroll> -</marquee> 预设卷动<marquee behavior=alternate> </marquee>来回卷动<marquee direction=down> </marquee> 向下卷动<marqu

2、ee direction=up> </marquee>向上卷动<marquee direction=right></marquee> 向右卷动<marquee direction=left></marquee> 向左卷动<marquee loop=2> </marquee>卷动次数<marquee width=180> </marquee>设定宽度<marquee height=30> </marquee>设定高度<marquee bgcolor=FF

3、0000> </marquee>设定背景颜色<marquee scrollamount=30> </marquee>设定卷动品巨离<marquee scrolldelay=300> </marquee>设定卷动时间2、字体效果< h1></h1>标题字(最大)< h6> - </h6>标题字(最小)< b>- - </b>粗体字<strong> </strong> 粗体字(强调)< i></i>斜体字<

4、em> </em>斜体字(强调)< dfn></dfn>斜体字(表示定义)< u>. </u>底线< ins> </ins>底线(表示插入文字)<strike> </strike> 横线< s>. </s>删除线< del> 3</del>删除线(表示删除)< kbd>-</kbd>键盘文字<tt></tt> 打字体<xmp></xmp>固定宽度字体(在文件中空白

5、、换行、定位功能有效 )plaintext/plaintext>固定宽度字体(不执行标记符号)<listing></listing> 固定宽度小字体<font color=00ff00> </font> 字体颜色<font size=1> </font> 最小字体<font style =font-size:100 px> </font> 无限增大3、区断标记<hr>水平线< hr size=9>水平线(设定大小)< hr width=80%>水平线(设定宽

6、度)< hr color=ff0000>水平线(设定颜色)< br>(换行)<nobr> </nobr> 水域(不换行)<p>. </p>水域(段落)<center> </center>置中4、连结格式 <base href=地址>(预设好连结路径)<a href=地址></a>外部连结 <a href=地址target=_blank></a>外部连结(另开新窗口) <a href= Mit target=_top></a

7、> 夕卜部连结(全窗口 连结)<a href=地址target=页框名></a>外部连结(在指定页框连结)<img src=图片地址<img src=图片地址<img src=图片地址<img src=图片地址<img src=图片地址 <bgsound src=MID 7、表格语法5、贴图/音乐>贴图width=180>设定图片宽度height=30>设定图片高度2忆提示文字 >设定图片提示文字border=1>设定图片边框音乐文件地址 >背景音乐设定<table aling=left

8、> </table> 表格位置,置左<table aling=center> </table>表格位置,置中<table background=图片路径 " </table>背景图片的 URL=就是路径网址<table border=边框大小</table>设定表格边框大小(使用数字)<table bgcolor=颜色码</table>设定表格的背景颜色<table borderclor=颜色码"</table>设定表格边框的颜色<table border

9、clordark=颜色码</table>设定表格暗边框的颜色<table borderclorlight=颜色码>3</table>设定表格亮边框的颜色<table cellpadding=参数 存一 </table>指定内容与网格线之间的间距(使用数字)<table cellspacing=参数> </table>指定网格线与网格线之间的距离(使用数字)<table cols=参数> - </table>指定表格的栏数<table =参数 > </table>设定表格

10、外框线的显示方式<table width=宽度> </table>指定表格的宽度大小 (使用数字)<table height=高度 > </table>指定表格的高度大小 (使用数字)<td colspan=参数存- </td>指定储存格合并栏的栏数(使用数字)<td rowspan=参数>3 </td>指定储存格合并列的列数(使用数字)<table border=n>调整表格的宽线高度<table cellpadding>调整数据域位之边界<table cellspacin

11、g>调整表格线的宽度<table height>调整表格的高度<table width>调整表格的宽度<table></table>产生表格的卷标< td align>调整表格字段之左右对齐< td bgcolor>设定表格字段之背景颜色< td colspan rowspan> 表格字段的合并< td nowrap>设定表格字段不换行< td valign>调整表格字段之上下对齐< td width>调整表格字段宽度< td> - </td>定

12、义表格的数据域位 <!>分割窗口<set cols=" 20%,*” >左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整<set rows=" 20%,* ”>上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整<setcols=" 20%,*” >分割左右两个框架<set cols=" 20%,*,20%” >分割左中右三个框架分割上下两个框架<set rows=" 20%,*,20% " >分割上中下三个框架< !->

13、; 批注< a href target>指定超级链接的分割窗口< a href=#锚的名称指定锚名称的超级链接< a href>指定超级链接<a name=锚的名称被连结点的名称<address>- - .</address>用来显示电子邮箱地址<b>粗体字<base target>指定超级链接的分割窗口<basefont size>更改预设字形大小<bgsound src>加入背景音乐<big>显示大字体<blink>闪烁的文字<body text lin

14、k vlink>设定文字颜色<body>显示本文<br>换行<caption align>设定表格标题位置<caption> </caption> 为表格力口上标题<center>向中对齐<cite> <cite>用于引经据典的文字<code></code>用于列出一段程序代码<comment> </comment> 力口上批注<dd>设定定义列表的项目解说<dfn></dfn> 显示"定义"

15、;文字<dir> </dir>列表文字卷标<dl> '</dl>设定定义列表的卷标<dt>设定定义列表的项目<em>强调之用<font face>任意指定所用的字形<font size>设定字体大小<form action>设定户动式窗体的处理方式<form method>设定户动式窗体之资料传送方式< marginheight> 设定窗口的上下边界< marginwidth> 设定窗口的左右边界< name>为分割窗口命名<

16、 noresize>锁住分割窗口的大小< scrolling>设定分割窗口的滚动条< src>将html文件加入窗口<set cols>将窗口分割成左右的子窗口<set rows>将窗口分割成上下的子窗口<set></set>划分分割窗口<h1>-<h6>设定文字大小<head>标示文件信息<hr>加上分网格线<html>文件的开始与结束<i>斜体字<img align>调整图形影像的位置<img alt>为你的图形影像加

17、注<img dynsrc loop> 力口入影片<img height width>插入图片并预设图形大小<img hspace>插入图片并预设图形的左右边界<img lowsrc>预载图片功能<img src border>设定图片边界<img src>插入图片<img vspace>插入图片并预设图形的上下边界<input type name > 在窗体中加入输入字段<isindex>定义查询用窗体<kbd> -</kbd>表示使用者输入文字<li ty

18、pe</li>列表的项目(可指定符号)<menu> </menu> 条歹U文字卷标< name=" refresh" content url> 自动更新文件内容<multiple>可同时选择多项的列表栏<no>定义不出现分割窗口的文字<ol></ol>有序号的列表<option>定义窗体中列表栏的项目<p align>设定对齐方向<p>分段<person> </person> 显示人名<pre>使用原有排列&

19、lt;samp> - </samp> 用于弓I用字<select>- - </select>在窗体中定义列表栏<small>显示小字体<strike>文字加横线<strong>用于加强语气<sub>下标字<sup>上标字<textarea name rows cols> 窗体中加入多少列的文字输入栏<textarea wrap>决定文字输入栏是自动否换行<th> -</th>定义表格的标头字段<title>文件标题<tr>

20、 </tr>定义表格美一行<tt>打字机字体<u>文字加底线<ul type> </ul>无序号的列表(可指定符号)<var></var>用于显示变量字体属性:(font)大小font-size: x-large;(特大)xx-small;(极小)一般中文用不到,只要用数值就可以,单位: PX、PD样式 font-style: oblique;(偏斜体)italic;(斜体)normal;(正常)行高 line-height: normal;( 正常 ) 单位: PX 、 PD 、 EM粗细 font-weig

21、ht: bold;( 粗体 ) lighter;( 细体 ) normal;( 正常 )变体font-variant: small-caps;( 小型大写字母) normal;( 正常 )大小写 text-transform: capitalize 首字母大写 )uppercase;(大写)lowercase;(小写)none;(无)修饰 text-decoration:underline;( 下划线)overline;( 上划线)line-through;( 删除线)blink;( 闪烁)常用字体: (font-family)"Courier New", Courier,

22、 monospace, "Times New Roman", Times, serif,Arial, Helvetica, sans-serif, Verdana背景属性: (background)色彩 background-color: #FFFFFF; 图片 background-image: url();重复 background-repeat: no-repeat; 滚动 background-attachment: fixed;( 固定 ) scroll;( 滚动 ) 位置 background-position: left(水平)top(垂直);简写方法 bac

23、kground:#。url(.) repeat fixed left top;区块属性: (Block)字间距 letter-spacing: normal; 数值对刘 text-align: justify;(两端对齐)left;(左对齐)right;(右对齐)center;(居中)缩进 text-indent: 数值 px;垂直对齐 vertical-align: baseline;(基线)sub;(下标)super;(下标)top; text-top; middle; bottom;text-bottom;词间距 word-spacing: normal; 数值空格 white-spac

24、e: pre;(保留)nowrap;(不换行)显示 display:block;(块)inline;(内嵌)list-item;(列表项)run-in;(追加部分)compact;(紧凑) marker;(标 t己)table; inline-table; table-raw-group; table-header-group; table-footer-group;table-raw; table-column-group; table-column; table-cell; table-caption;( 表格标题 )方框属性: (Box)width:; height:; float:;

25、clear:both; margin:; padding:; 顺序:上右下左边框属性: (Border)border-style: dotted(点线);dashed(虚线);solid(实线);double(双线);groove(槽线);ridge;(脊状) inset;( 凹陷 ) outset;border-width:; 边框宽度border-color:#; 边框颜色简写方法 border : width style color;列表属性: (List-style)类型 list-style-type: disc;(圆点)circle;(圆圈)square;(方块)decimal;(

26、数字)lower-roman;(小罗 码数字 ) upper-roman; lower-alpha; upper-alpha;位置 list-style-position: outside;( 外) inside; 图像 list-style-image: url(.);定位属性: (Position)Position: absolute; relative; static; overflow: visible; hidden; scroll; auto; 性代码大全一 CSS 文字属性:color : #999999; /* 文字颜色 */font-size : 9pt; /* 文字大小 *

27、/ font-variant:small-caps; /* 小字体 */ line-height : 2。%; /* 设置行高 */ vertical-align:sub; /* 下标字 */ text-decoration:line-through; /* 加删除线visibility: inherit; visible; hidden;clip: rect(12px,auto,12px,auto)(裁切)css 属font-family : 宋体 ,sans-serif; /* 文字字体 */ font-style:itelic; /* 文字斜体 */ letter-spacing : 1

28、pt; /* 字间距离 */ font-weight:bold; /* 文字粗体 */ vertical-align:super; /* 上标字 */*/ text-decoration: overline; /* 加顶线 */text-decoration:underline; /* 加下划线*/text-transform : capitalize; /* 首字大写*/text-transform : lowercase; /* 英文小写*/text-decoration:none; /* 删除链接下划线 */ text-transform : uppercase; /* 英文大写 */

29、text-align:right; /* 文字右对齐*/text-align:left; /* 文字左对齐*/text-align:justify; /* 文字分散对齐*/vertical-align:top; /* 垂直向上对齐*/vertical-align:middle; /* 垂直居中对齐*/text-align:center; /* 文字居中对齐*/vertical-align 属性vertical-align:bottom; /* 垂直向下对齐*/vertical-align:text-top; /* 文字垂直向上对齐*/vertical-align:text-bottom; /*

30、 文字垂直向下对齐*/二、 CSS 边框空白padding-top:10px; /* 上边框留空白 */ padding-bottom:10px; /* 下边框留空白 */ 三、 CSS 符号属性: list-style-type:none; /* 不编号 */ list-style-type:lower-roman; /* 小写罗马数字 list-style-type:lower-alpha; /* 小写英文字母 list-style-type:disc; /* 实心圆形符号*/list-style-type:square; /* 实心方形符号*/list-style-position: o

31、utside; /* 凸排 */ 四、 CSS 背景样式: background-color:#F5E2EC; /* 背景颜色 */ background:transparent; /* 透视背景 */ 背景图片 */padding-right:10px; /* 右边框留空白 */padding-left:10px; /* 左边框留空白 */list-style-type:decimal; /* 阿拉伯数字*/*/ list-style-type:upper-roman; /* 大写罗马数字*/*/ list-style-type:upper-alpha; /* 大写英文字母*/list-st

32、yle-type:circle; /* 空心圆形符号*/list-style-image:url(/dot.gif); /* 图片式符号 */ list-style-position:inside; /* 缩进 */background-image : url(/image/bg.gif); /*background-attachment : fixed; /* 浮水印固定背景*/ background-repeat : repeat; /* 重复排列 -网页默认 */background-repeat : no-repeat; /* 不重复排列 */ background-repeat :

33、repeat-x; /* 在 x 轴重复排列 */background-repeat : repeat-y; /* 在 y 轴重复排列 */ 指定背景位置background-position : 90% 90%; /* 背景图片 x 与 y 轴的位置 */ background-position : top; /*向上对齐 */background-position : buttom; /* 向下对齐 */向左对齐 */background-position : right; /* 向右对齐 */* 居中对齐 */5、 CSS 连接属性:a /* 所有超链接*/a:link /* 超链接文字

34、格式*/*/a:active /* 按下链接的格式 */鼠标光标样式:链接手指CURSOR: hand箭头朝下cursor:s-resize箭头朝右cursor:move箭头朝左cursor:w-resize箭头朝右上cursor:ne-resize文字 I 型 cursor:text箭头斜左下cursor:sw-resize光标图案 (IE6) p cursor:url(" 光标文件名6、 CSS 框线一览表:background-position : left; /*background-position : center;a:visited /* 浏览过的链接文字格式a:hov

35、er /* 鼠标转到链接*/十字体cursor:crosshair十字箭头 cursor:move加一问号cursor:help箭头朝上cursor:n-resize箭头朝左上cursor:nw-resize箭头斜右下cursor:se-resize漏斗 cursor:wait.cur"),text;border-bottom : 1px solid #6699cc;border-top : 1px solid #6699cc; /* 上框线 */* 下框线 */border-left : 1px solid #6699cc; /* 左框线 */border-right : 1px

36、solid #6699cc;/* 右框线 */以上是建议书写方式,但也可以使用常规的方式如下 :border-top-color : #369 /* 设置上框线top 颜色 */border-top-width :1px /* 设置上框线 top 宽度 */border-top-style : solid/* 设置上框线 top 样式 */其他框线样式solid /* 实线框 */ dotted /* 虚线框 */ double /* 双线框 */ groove /* 立体内凸框*/ridge /* 立体浮雕框 */ inset /* 凹框 */ outset /* 凸框 */7、 CSS 表

37、单运用:8、 CSS 边界样式:margin-top:10px; /* 上边界 */ margin-right:10px; /* 右边界值 */margin-bottom:10px; /* 下边界值 */ margin-left:10px; /* 左边界值 */CSS 属性: 字体样式 (Font Style)序号 中文说明 标记语法1 字体样式 font:font-style font-variant font-weight font-size font-family2 字体类型 font-family:" 字体 1","字体 2","字体3

38、",.3 字体大小 font-size: 数值 |inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small4 字体风格 font-style:inherit|italic|normal|oblique5 字体粗细font-weight:100-900|bold|bolder|lighter|normal;6 字体颜色color: 数值 ;7 阴影颜色 text-shadow:16 位色值 8 字体行高line-height: 数值 |inherit|normal;9 字 间

39、 距 letter-spacing: 数值 |inherit|normal10 单词间距word-spacing: 数值 |inherit|normal11 字体变形font-variant:inherit|normal|small-cps 12 英文转换text-transform:inherit|none|capitalize|uppercase|lowercase13 字体变形font-size-adjust:inherit|none14 字体font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|na

40、rrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider文本样式 (Text Style)序号 中文说明 标记语法1 行 间 距 line-height: 数值 |inherit|normal;2 文本修饰 text-decoration:inherit|none|underline|overline|line-through|blink3 段首空格 text-indent: 数值 |inherit4 水平对齐text-align:left|right|center|justify5 垂直对

41、齐vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super6 书写方式writing-mode:lr-tb|tb-rl背景样式序号 中文说明 标记语法1 背景颜色background-color:数值 2 背景图片background-image: url(URL)|none3 背景重复background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y4 背景固定background-attachment:fixed|scroll5 背景

42、定位background-position: 数值 |top|bottom|left|right|center6 背影样式background: 背景颜色 |背景图象|背景重复 |背景附件|背景位置框架样式(Box Style)序号 中文说明 标记语法1 边界留白margin:margin-top margin-right margin-bottom margin-left2 补白 padding:padding-top padding-right padding-bottom padding-left3 边框宽度border-width:border-top-width border-right-width border-bottom-widthborder-left-width宽度值: thin|medium|thick| 数值4 边框颜色 border-color: 数值 数值 数值 数值 数值:分别代表top、 right 、 bottom 、left 颜色值5 边框风格 border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove6 边 框 border:border-width border-style col

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论