HTML+CSS标签属性大全

合集下载

html标签属性大全

html标签属性大全

html标签属性大全HTML标签属性大全。

HTML标签是网页制作的基础,而标签属性则是用来描述标签的特性和行为。

了解HTML标签属性对于网页制作非常重要,因为它可以帮助我们更好地控制网页的外观和行为。

本文将为大家介绍HTML标签的常见属性,希望能够对大家有所帮助。

1. `id`属性。

`id`属性用来唯一标识一个元素,每个元素都可以有一个唯一的`id`。

这个属性在JavaScript和CSS中经常被用到,可以方便地对元素进行操作和样式设置。

2. `class`属性。

`class`属性用来为元素定义一个或多个类名,这样可以为一个元素定义多个样式。

多个元素也可以共享相同的类名,从而实现样式的统一设置。

3. `style`属性。

`style`属性用来为元素设置内联样式,可以直接在HTML标签中定义元素的样式,但不推荐频繁使用,因为它会增加HTML文件的大小,不利于维护。

4. `title`属性。

`title`属性用来为元素提供附加的信息,当鼠标悬停在元素上时会显示`title`属性的内容,这对于提供额外的解释或描述非常有用。

5. `href`属性。

`href`属性用来指定链接的目标地址,常用于`<a>`标签中,定义链接的跳转目标。

6. `src`属性。

`src`属性用来指定资源文件的地址,比如图片、音频、视频等,常用于`<img>`、`<audio>`、`<video>`等标签中。

7. `alt`属性。

`alt`属性用来为图片指定替代文本,当图片无法加载时,会显示`alt`属性的内容,同时也有助于提高网页的可访问性。

8. `width`和`height`属性。

`width`和`height`属性用来定义元素的宽度和高度,常用于`<img>`标签中,可以控制图片的显示大小。

9. `disabled`属性。

`disabled`属性用来禁用元素,比如禁用表单中的输入框、按钮等,使其不能被用户操作。

HTML中CSS样式标签大全及用法

HTML中CSS样式标签大全及用法

CSS 网页样式大全如下:字体属性:(font)大小font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD样式font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高line-height: normal;(正常) 单位:PX、PD、EM粗细font-weight: 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, 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(垂直);简写方法background:#000 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-space: pre;(保留) nowrap;(不换行)显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) 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:; 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;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性:(Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)css属性代码大全如下一CSS文字属性:color : #999999;font-family : 宋体,sans-serif;font-size : 9pt;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;text-decoration:overline;text-decoration:underline;text-decoration:none;text-transform : capitalize;text-transform : uppercase;text-transform : lowercase;text-align:right;text-align:left;text-align:center;text-align:justify;vertical-align属性vertical-align:top;vertical-align:bottom;vertical-align:middle;vertical-align:text-top;vertical-align:text-bottom;二、CSS边框空白padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;list-style-type:decimal;list-style-type:lower-roman;list-style-type:upper-roman;list-style-type:lower-alpha;list-style-type:upper-alpha;list-style-type:disc;list-style-type:circle;list-style-type:square;list-style-image:url(/dot.gif);list-style-position:outside;list-style-position:inside;四、CSS背景样式:background-color:#F5E2EC; background:transparent; background-image : url(/image/bg.gif); background-attachment : fixed; background-repeat : repeat; background-repeat : no-repeat; background-repeat : repeat-x; background-repeat : repeat-y;指定背景位置background-position : 90% 90%; background-position : top; background-position : buttom; background-position : left; background-position : right; background-position : center;五、CSS连接属性:aa:linka:visiteda:activea:hover鼠标光标样式:链接手指CURSOR: hand十字体cursor:crosshair箭头朝下cursor:s-resize十字箭头cursor:move箭头朝右cursor:move加一问号cursor:help箭头朝左cursor:w-resize箭头朝上cursor:n-resize箭头朝右上cursor:ne-resize箭头朝左上cursor:nw-resize文字I型cursor:text箭头斜右下cursor:se-resize箭头斜左下cursor:sw-resize漏斗cursor:wait光标图案(IE6)p {cursor:url("光标文件名.cur"),text;}六、CSS框线一览表:border-top : 1px solid #6699cc;border-bottom : 1px solid #6699cc;border-left : 1px solid #6699cc;border-right : 1px solid #6699cc;以上是建议书写方式,但也可以使用常规的方式如下:border-top-color : #369border-top-width :1pxborder-top-style : solid其他框线样式soliddotteddoublegrooveridgeinsetoutset七、CSS表单运用:文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、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-family}2 字体类型{font-family:"字体1","字体2","字体3",...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{text-shadow:16位色值}8 字体行高{line-height:数值|inherit|normal;}9 字间距{letter-spacing:数值|inherit|normal}10 单词间距{word-spacing:数值|inherit|normal}11 字体变形{font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|no rmal| 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|blink}3 段首空格{text-indent:数值|inherit}4 水平对齐{text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定{background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白{margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-widthborder-bottom-width border-left-width}宽度值:thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值}数值:分别代表top、right、bottom、left颜色值5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}6 边框{border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color}下边框{border-bottom:border-bottom-width border-style color}左边框{border-left:border-left-width border-style color}7 宽度{width:长度|百分比| auto}8 高度{height:数值|auto}9 漂浮{float:left|right|none}10 清除{clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示{display:none|block|inline|list-item}2 控制空白{white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|uppe r-alpha|none}4 图形列表{list-style-image:URL}5 位置列表{list-style-position:inside|outside}6 目录列表{list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resiz e|sw-resize}。

html标签及属性大全(网页制作必备)

html标签及属性大全(网页制作必备)

html标签及属性⼤全(⽹页制作必备)总类(所有html⽂件都有的)--------------------------------------------------------------------------------⽂件类型 <html></html> (放在档案的开头与结尾)⽂件主题 <title></title> (必须放在「⽂头」区块内)⽂头 <head></head> (描述性资料,像是「主题」)⽂体 <body></body> (⽂件本体)结构性定义(由浏览器控制的显⽰风格)--------------------------------------------------------------------------------标题 <h?></h?> (?表⽰从1到6,有六层选择)数值越⾼字越⼩标题对齐 <h? align=left|center|right></h?> 左对齐、居中对齐、右对齐区分 <div></div>区分对齐 <div align=left|right|center|justify></div> 左对齐、右对齐、居中对齐、两端对齐引⽂区块 <blockquote></blockquote> (通常会内缩)斜体 <em></em>加粗 <strong></strong>引⽂ <cite></cite> (通常会以斜体显⽰)码 <code></code> (显⽰原始码之⽤)样本 </samp>表⽰⼀段⽤户应该对其没有什么其他解释的⽂本。

CSS常用样式属性大全

CSS常用样式属性大全

CSS常用样式属性大全1. 文本属性- `color`:设置文本颜色- `font-size`:设置字体大小- `font-family`:设置字体系列- `font-weight`:设置字体粗细- `text-align`:设置文本对齐方式- `text-decoration`:设置文本装饰(如下划线、删除线等)- `text-transform`:设置文本大小写转换2. 背景属性- `background-color`:设置背景颜色- `background-image`:设置背景图片- `background-repeat`:设置背景图片的重复方式- `background-position`:设置背景图片的位置- `background-size`:设置背景图片的尺寸3. 边框属性- `border`:设置元素边框样式、宽度和颜色- `border-radius`:设置元素边框的圆角- `border-color`:设置元素边框的颜色- `border-width`:设置元素边框的宽度4. 布局属性- `display`:设置元素的显示方式(如块级、内联等)- `width`:设置元素的宽度- `height`:设置元素的高度- `margin`:设置元素外边距- `padding`:设置元素内边距- `float`:设置元素的浮动方式5. 盒模型属性- `box-sizing`:设置元素的盒模型计算方式- `overflow`:设置元素溢出内容的处理方式- `position`:设置元素的定位方式- `top`:设置定位元素的上边距- `bottom`:设置定位元素的下边距- `left`:设置定位元素的左边距- `right`:设置定位元素的右边距以上是CSS中常用的样式属性,通过合理使用这些属性可以实现各种各样的页面效果。

在编写CSS代码时,建议将样式属性单独分行展示,以增加代码的可读性和维护性。

HTML标签与属性大全(很全哦)

HTML标签与属性大全(很全哦)

HTML语言‎基本标签:创建一个HT‎M L文档 <html></html>设置文档标题‎以及其他不在‎W E B网页上‎显示的信息 <head></head>设置文档的可‎见部分 <body></body>标题标签将文档的题目‎放在标题栏中‎<title></title>文档整体属性设置背景颜色‎,使用名字或十‎六进制值 <body bgcolo‎r=?>设置文本文字‎颜色,使用名字或十‎六进制值 <body text=?>设置链接颜色‎,使用名字或十‎六进制值 <body link=?>设置已使用的‎链接的颜色,使用名字或十‎六进制值 <body vlink=?>设置正在被击‎中的链接的颜‎色,使用名字或十‎六进制值 <body alink=?> 文本标签创建预格式化‎文本 <pre></pre>创建最大的标‎题<h1></h1>创建最小的标‎题<h6></h6>创建黑体字 <b></b>创建斜体字 <i></i>创建打字机风‎格的字体 <tt></tt>创建一个引用‎,通常是斜体 <cite></cite>加重一个单词‎(通常是斜体加‎黑体) <em></em>加重一个单词‎(通常是斜体加‎黑体) <strong‎></strong‎>设置字体大小‎,从1到7 <font size=?></font>设置字体的颜‎色,使用名字或十‎六进制值 <font color=?></font>链接创建一个超链‎接<a href="URL"></a>创建一个自动‎发送电子邮件‎的链接 <a href="mailto‎:EMAIL">.... </a> 创建一个位于‎文档内部的靶‎位<a name="NAME"></a>创建一个指向‎位于文档内部‎靶位的链接 <a href="#NAME"></a>格式排版创建一个新的‎段落 <p>将段落按左、中、右对齐 <p align=?>插入一个回车‎换行符 <br>从两边缩进文‎本<blockq‎u ote></blockq‎u ote>创建一个定义‎列表 <dl></dl>放在每个定义‎术语词之前 <dt>放在每个定义‎之前 <dd>创建一个标有‎数字的列表 <ol></ol>放在每个数字‎列表项之前,并加上一个数‎字<li>创建一个标有‎圆点的列表 <ul></ul>放在每个圆点‎列表项之前,并加上一个圆‎点<li>一个用来排版‎大块HTML‎段落的标签,也用于格式化‎表<div align=?>图形元素添加一个图像‎<img src="name">排列对齐一个‎图像:左中右或上中‎下<img src="name" align=?>设置围绕一个‎图像的边框的‎大小 <img src="name" border‎=?>加入一条水平‎线<hr>设置水平线的‎大小(高度) <hr size=?>设置水平线的‎宽度(百分比或绝对‎像素点) <hr width=?>创建一个没有‎阴影的水平线‎<hr noshad‎e>表格创建一个表格‎<table></table>开始表格中的‎每一行 <tr></tr>开始一行中的‎每一个格子 <td></td>设置表格头:一个通常使用‎黑体居中文字‎的格子 <th></th>表格属性设置围绕表格‎的边框的宽度‎<table border‎=#>设置表格格子‎之间空间的大‎小<table cellsp‎a cing=#>设置表格格子‎边框与其内部‎内容之间空间‎的大小 <table cellpa‎d ding=#>设置表格的宽‎度-用绝对像素值‎或文档总宽度‎的百分比 <table width=# or %> 设置表格格子‎的水平对齐(左中右) <tr align=?> or <td align=?>设置表格格子‎的垂直对齐(上中下) <tr valign‎=?> or <td valign‎=?>设置一个表格‎格子应跨占的‎列数(缺省为1) <td colspa‎n=#>设置一个表格‎格子应跨占的‎行数(缺省为1) <td rowspa‎n=#>禁止表格格子‎内的内容自动‎断行回卷 <td nowrap‎>窗框放在一个窗框‎文档的<body>标签之前,也可以嵌在其‎他窗框文档中‎<frames‎et></frames‎e t>定义一个窗框‎内的行数,可以使用绝对‎像素值或高度‎的百分比 <frames‎e trows="value,value">定义一个窗框‎内的列数,可以使用绝对‎像素值或宽度‎的百分比 <frames‎e tcols="value,value">定义一个窗框‎内的单一窗或‎窗区域 <frame>定义在不支持‎窗框的浏览器‎中显示什么提‎示<nofram‎e s></nofram‎e s>窗框属性规定窗框内显‎示什么HTM‎L文档 <frame src="URL">命名窗框或区‎域以便别的窗‎框可以指向它‎<frame name="name">定义窗框左右‎边缘的空白大‎小,必须大于等于‎1<frame margin‎w idth=#>定义窗框上下‎边缘的空白大‎小,必须大于等于‎1<frame margin‎h eight‎=#>设置窗框是否‎有滚动栏,其值可以是"yes","no","auto",缺省时一般为‎"a uto" <frame scroll‎i ng=VALUE>禁止用户调整‎一个窗框的大‎小<frame noresi‎z e>表单对于功能性的‎表单,一般需要运行‎一个CGI小‎程序,HTML仅仅‎是产生表单的‎表面样子。

HTML标签代码大全(CSS前端开发者的宝藏)

HTML标签代码大全(CSS前端开发者的宝藏)

HTML标签代码大全(CSS前端开发者的宝藏)1. 概述2.1 文字标签- `<h1>`到`<h6>`:定义标题1到标题6,按级别递减。

- `<p>`:定义段落。

- `<strong>`:定义加粗的文本。

- `<em>`:定义斜体的文本。

- `<span>`:定义内联元素的文本。

2.2 列表标签- `<ul>`:定义无序列表。

- `<ol>`:定义有序列表。

- `<li>`:定义列表项。

2.3 图像标签- `<img>`:插入图片。

- `<figure>`和`<figcaption>`:定义图片和其标题。

2.4 表格标签- `<table>`:定义表格。

- `<tr>`:定义表格行。

- `<td>`:定义表格数据单元格。

- `<th>`:定义表格标题单元格。

2.5 表单标签- `<form>`:定义表单。

- `<input>`:定义输入字段。

- `<select>`和`<option>`:定义下拉列表。

- `<textarea>`:定义多行文本输入框。

- `<button>`:定义按钮。

2.6 多媒体标签- `<audio>`:插入音频。

- `<video>`:插入视频。

- `<source>`:定义多媒体资源的URL。

2.7 框架标签- `<iframe>`:嵌入其他网页。

3. 总结。

认识HTML和CSS网页设计语言

认识HTML和CSS网页设计语言

认识HTML和CSS网页设计语言第一章:HTML的介绍和基本语法HTML(HyperText Markup Language)是一种用于创建网页的标记语言。

它包含一系列的标记,这些标记用于描述网页的结构和内容。

HTML的基本语法由标签、元素和属性组成。

1.1 标签HTML中的标签是一对尖括号包围的关键字,它们定义了元素的开始和结束。

例如,<head>和</head>标签用于定义网页的头部部分。

1.2 元素在HTML中,元素是由起始标签、内容和结束标签组成的。

起始标签用于定义元素的开始,结束标签用于定义元素的结束。

元素的内容位于起始标签和结束标签之间,可以包含文本、图片、链接等。

1.3 属性HTML中的属性用于为元素提供额外的信息。

属性通常包含在起始标签中,由属性名和属性值组成。

例如,<imgsrc="image.jpg">中的src属性指定了图片的链接地址。

第二章:HTML常用标签和属性2.1 文本标签HTML中的文本标签用于定义文本的样式和结构。

常用的文本标签包括<p>(段落)、<h1>-<h6>(标题)、<strong>(加粗)、<em>(斜体)等。

2.2 图片标签图片标签用于在网页中插入图片。

<img>标签是HTML中用于插入图片的标签,它需要指定图片的链接地址、宽度、高度等属性。

2.3 链接标签链接标签用于创建网页之间的链接。

<a>标签用于定义链接,它需要指定链接的目标地址,可以是其他网页、文件或者锚点。

2.4 列表标签列表标签用于创建有序或无序的列表。

<ul>标签用于创建无序列表,<ol>标签用于创建有序列表,<li>标签用于定义列表项。

第三章:CSS的介绍和基本语法CSS(Cascading Style Sheets)是用于描述网页样式的语言。

css常用代码大全(html+css代码)

css常用代码大全(html+css代码)

css常用代码大全,html+css代码html+css可以很方便的进行网页的排版布局,还能减少很多不必要的代码。

一.文本设置1、font-size: 字号参数2、font-style: 字体格式3、font-weight: 字体粗细4、颜色属性color: 参数注意使用网页安全色二、超链接设置text-decoration: 参数主要用途是改变浏览器显示文字链接时的下划线。

参数取值范围:underline:为文字加下划线overline:为文字加上划线line-through:为文字加删除线blink:使文字闪烁none:不显示上述任何效果三、背景1、背景颜色background-color: 参数2、背景图片background-image: url(URL)URL就是背景图片的存放路径,none表示无。

3、背景图片重复background-repeat: 参数参数取值范围:no-repeat:不重复平铺背景图片repeat-x:使图片只在水平方向上平铺repeat-y:使图片只在垂直方向上平铺如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。

4、背景图片固定背景图片固定控制背景图片是否随网页的滚动而滚动。

如果不设置背景图片固定属性,浏览器默认背景图片随网页的滚动而滚动。

为了避免过于花哨的背景图片在滚动时转移浏览者的注意力,一般都设为固定background-attachment: 参数参数取值范围:fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动四、区块1、单词间距word-spacing: 间隔距离2、字母间距letter-spacing: 字母间距3、文本对齐text-align: 参数参数的取值:left:左对齐right:右对齐center:居中对齐justify:相对左右对齐4、垂直对齐vertical-align: 参数top:顶对齐bottom:底对齐text-top:相对文本顶对齐text-bottom:相对文本底对齐baseline:基准线对齐middle:中心对齐sub:以下标的形式显示super:以上标的形式显示5、文本缩进text-indent: 缩进距离12px相当于一个文字距离6、空格white-space: 参数normal 正常pre 保留nowrap 不换行7、显示样式display: 参数参数取值范围:block:块级元素,在对象前后都换行inline:在对象前后都不换行list-item:在对象前后都换行,增加了项目符号none:无显示五、方框1、height 高度2、width 宽度3、padding 内边距4、margin 外边距5、float(浮动):可以让块级元素在一行中排列,例如横向菜单。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

HTML CSS标签属性大全a卷标, 属性名称, 简介<! - - …- -> 批注1、跑马灯<marquee>…</marquee>普通卷动<marquee behavior=slide>…</marquee>滑动<marquee behavior=scroll>…</marquee>预设卷动<marquee behavior=alternate>…</marquee>来回卷动<marquee direction=down>…</marquee>向下卷动<marquee 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=FF0000>…</marquee>设定背景颜色<marquee scrollamount=30>…</marquee>设定卷动距离<marquee scrolldelay=300>…</marquee>设定卷动时间2、字体效果<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>无限增大3、区断标记<hr>水平线<hr size=9>水平线(设定大小)<hr width=80%>水平线(设定宽度)<hr color=ff0000>水平线(设定颜色)<br>(换行)<nobr>…</nobr>水域(不换行)<p>…</p>水域(段落)<center>…</center>置中4、连结格式<base href=地址>(预设好连结路径)<a href=地址></a>外部连结<a href=地址target=_blank></a>外部连结(另开新窗口)<a href=地址target=_top></a>外部连结(全窗口连结)<a href=地址target=页框名></a>外部连结(在指定页框连结)5、贴图/音乐<img src=图片地址>贴图<img src=图片地址width=180>设定图片宽度<img src=图片地址height=30>设定图片高度<img src=图片地址alt=提示文字>设定图片提示文字<img src=图片地址border=1>设定图片边框<bgsound src=MID音乐文件地址>背景音乐设定7、表格语法<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 =参数>…</table>设定表格外框线的显示方式<table width=宽度>…</table>指定表格的宽度大小(使用数字)<table height=高度>…</table>指定表格的高度大小(使用数字)<td colspan=参数>…</td>指定储存格合并栏的栏数(使用数字)<td rowspan=参数>…</td>指定储存格合并列的列数(使用数字)<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> 定义表格的数据域位<!>分割窗口<set cols=”20%,*”>左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整<set rows=”20%,*”>上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整<set cols=”20%,*”>分割左右两个框架<set cols=”20%,*,20%”>分割左中右三个框架<分割上下两个框架<set rows=”20%,*,20%”>分割上中下三个框架<! - - …- -> 批注<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> 设定户动式窗体之资料传送方式< marginheight> 设定窗口的上下边界< marginwidth> 设定窗口的左右边界< name> 为分割窗口命名< noresize> 锁住分割窗口的大小< scrolling> 设定分割窗口的滚动条< src> 将html文件加入窗口<set cols> 将窗口分割成左右的子窗口<set rows> 将窗口分割成上下的子窗口<set>…</set> 划分分割窗口<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 > 在窗体中加入输入字段<isindex> 定义查询用窗体<kbd>…</kbd> 表示使用者输入文字<li type>…</li> 列表的项目( 可指定符号)<menu>…</menu> 条列文字卷标< name=”refresh”content url> 自动更新文件内容<multiple> 可同时选择多项的列表栏<no> 定义不出现分割窗口的文字<ol>…</ol> 有序号的列表<option> 定义窗体中列表栏的项目<p align> 设定对齐方向<p> 分段<person>…</person> 显示人名<pre> 使用原有排列<samp>…</samp> 用于引用字<select>…</select> 在窗体中定义列表栏<small> 显示小字体<strike> 文字加横线<strong> 用于加强语气<sub> 下标字<sup> 上标字<textarea name rows cols> 窗体中加入多少列的文字输入栏<textarea wrap> 决定文字输入栏是自动否换行<th>…</th> 定义表格的标头字段<title> 文件标题<tr>…</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-weight: 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, 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(垂直); 简写方法background:#000 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-space: pre;(保留) nowrap;(不换行)显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) 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:; 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;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside; 图像list-style-image: url(..);定位属性:(Position)Position: absolute; relative; static; visibility: inherit; visible; hidden; overflow: visible; hidden; scroll; auto; clip: rect(12px,auto,12px,auto) (裁切) css属性代码大全一CSS文字属性:color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/ 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; /*加删除线*/ text-decoration: overline; /*加顶线*/text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/text-align:justify; /*文字分散对齐*/ vertical-align属性vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/二、CSS边框空白padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白*/三、CSS符号属性:list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/ list-style-type:disc; /*实心圆形符号*/ list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/ list-style-image:url(/dot.gif); /*图片式符号*/ list-style-position: outside; /*凸排*/ list-style-position:inside; /*缩进*/四、CSS背景样式:background-color:#F5E2EC; /*背景颜色*/background:transparent; /*透视背景*/ 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轴的位置*/ background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/ background-position : left; /*向左对齐*/background-position : right; /*向右对齐*/ background-position : center; /*居中对齐*/五、CSS连接属性:a /*所有超链接*/a:link /*超链接文字格式*/ a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/ a:hover /*鼠标转到链接*/鼠标光标样式:链接手指CURSOR: hand 十字体cursor:crosshair箭头朝下cursor:s-resize 十字箭头cursor:move箭头朝右cursor:move 加一问号cursor:help箭头朝左cursor:w-resize 箭头朝上cursor:n-resize箭头朝右上cursor:ne-resize 箭头朝左上cursor:nw-resize文字I型cursor:text 箭头斜右下cursor:se-resize箭头斜左下cursor:sw-resize 漏斗cursor:wait光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}六、CSS框线一览表:border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下:border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/ dotted /*虚线框*/ double /*双线框*/ groove /*立体内凸框*/ ridge /*立体浮雕框*/ inset /*凹框*/ outset /*凸框*/七、CSS表单运用:八、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-family}2 字体类型{font-family:"字体1","字体2","字体3",...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller|x-small| xx-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{text-shadow:16位色值}8 字体行高{line-height:数值|inherit|normal;}9 字间距{letter-spacing:数值|inherit|normal}10 单词间距{word-spacing:数值|inherit|normal}11 字体变形{font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|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|blink}3 段首空格{text-indent:数值|inherit}4 水平对齐{text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定{background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白{margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{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|groove}6 边框{border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color}下边框{border-bottom:border-bottom-width border-style color}左边框{border-left:border-left-width border-style color}7 宽度{width:长度|百分比| auto}8 高度{height:数值|auto}9 漂浮{float:left|right|none}10 清除{clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示{display:none|block|inline|list-item}2 控制空白{white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none }4 图形列表{list-style-image:URL}5 位置列表{list-style-position:inside|outside}6 目录列表{list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize} word-wrap是控制换行的。

相关文档
最新文档