网页常用html标签与css样式.docx

1、网页常用html标签与css样式常用HTML标签与CSS样式1、Html标签部分字体效果 .标题字(最大) .标题字(最小) .粗体字 .粗体字(强调) （同上效果略同） 区断标记 水平线 水平线(设定大小) 水平线(设定宽度) 水平线(设定颜色) (换行) 链接格式 外部链接 外部链接(另开新视窗) 外部链接(全视窗链接) 外部链接(在指定页框链接) 贴图 贴图 设定图片宽度 设定图片高度 设定图片提示文字 设定图片边框 表格语法 .表格位置,置左 .表格位置,置中 .背景图片的URL=就是路径网址 .设定表格边框大小(使用数字) .设定表格的背景颜色 .设定表格边框的颜色 .指定表格的宽度

2、大小(使用数字) .指定表格的高度大小(使用数字) tr元素 语法格式： . align属性对齐方式可选值如下：left,center,tight,默认为left bgcolor指定该行的背景颜色 td元素 语法格式： . align属性的可选值有：left,center,right valign属性的可选值有：top,middle,bottom .属性 1，背景属性 包括：bgcolor,background.bgcolor背景色 语法格式： .background背景图案。 语法格式： 2,链接： 包括：link,visited,hover,active link连接样式（可连接颜色） v

3、isited已访问连接样式（已经点击访问过的样式）hover 触发链接样式（鼠标经过链接样式）active活动连接样式（正被点击的可连接样式） align 属性 语法：文字 其属性有三种：left靠左,center居中,right靠右 p为段落标记，可利用以上属性对整个段落进行设置 br为换行标记 列表 1无序列表又称符号列表 语法格式： type的属性可选直disc实心圆点,clrcle空心圆点,square实心方框 文字 文字 2有序列表 语法格式： 文字 文字 type的值是编号字符可选的有1.,a.,A.,i. ,I. start为起始值例：如果start为3是那么将从3开始，而且必须

4、是数字。 3定义列表 定义列表标记 标示定义条目 标示定义内容 语法格式： 文字 文字内容 连接和图像 语法格式： . 属性：href 连接目标 值可以是url地址也可以是连接锚点 .或者 . target目标窗口语法格式： . -blank打开新窗口 _self当前窗口打开 一下两个仅在框架叶面中应用 _parent当前窗口的父级窗口（上一级）打开 _top在最高一级的窗口打开 title连接提示 XX一下 图像 语法格式： border属性定义图片边框的宽度，默认值为0 align属性设置图片旁边文字的位置 语法格式： 可选值有： top图片和文字顶部对齐 middle图片和文字居中对齐

5、bottom图片和文字底边对齐（默认） left图片居左对齐，文字沿图片绕排 right图片居右对齐，文字沿图片绕排 层div两种元素 是块级元素，和段落元素相似，不同的是两个元素之间不会产生两个元素之间的空行， 是行内元素，可以定义段落中部分文字的属性 语法格式： . align设置层中元素的水平对齐方式 兼容性比要好一点，最好使用 input元素 语法格式： type属性的可选值有： text 单行文本框 属性：name 文本框名称 value 文本框的初始值 size 文本框的长度 maxlength 可输入字符串最大的长度 radio 单选框 属性：name 单选框名称 value 内

6、部值 checked 默认选定 checkbox 复选框 属性：name 复选框名称 value 内部值 checked 默认选定 reset 重置按钮 submit 确定按钮 属性：name 按钮名称 value 显示在按钮上的文字 password 密码框 属性与文本框的属性完全相同 file 文件域 属性：name文件域名称 size 文件域的长度 maxlength 文件域可接受的字符数量的上限 hidden 隐藏域 属性：name 隐藏域名称 value 内定值 image 图片域 属性：name 所要代表的按钮，可以是submit,reset,或其他. src 按钮图片的url 地

7、址 列表框 语法格式： . . . select元素 语法格式： name 指定列表框的名字 size 指定列表框显示列表项的条数，如果指定了该参数，select元素是个列表，否则是一个下拉列表框 multiple 指定了这个参数，则表示该列表框可选择多项，否则只可选择一项 option属性 语法格式： value 该列表项的值 selected 如果设定了这个参数，默认为选定这一项 多行文本框 属性： name文本框的名称 cols文本框的宽度 rows文本框的高度 2、CSS样式部分 一、边框属性 每一个网页都可以理解成是被一个方框框起来的，而页面中不同的部分又可以分为一个个小的方框。因此

8、定义方框的边距、边框、颜色等的边框属性应用而生。 1、边距属性（外边距）： 左边距（margin-left） 右边距（margin-right） 上边距（margin-top） 下边距（margin-bottom） 边距（margin）边距属性定义HTML页面中方框四边和其他元素之间的空白距离，每一个margin-side属性只影响到一条边，而margin则提供了一个同时设置四个边距的机会。2、填充属性（内边距）： 左填充（padding-left） 右填充（padding-right） 上填充（padding-top） 下填充（padding-bottom） 填充（padding）填充属性设

9、置边框和内部元素的距离。它和边距属性十分相似，每个padding-side定义一个边框距离，padding则同时定义四个距离。3、边框属性： 上边框宽（border-top-width） 右边框宽（border-right-width） 下边框宽（border-bottom-width） 左边框宽（border-left-width） 边框宽（border-width） 这几个属性定义边框宽度，用thin、medium和thick分别表示细、中等和粗，或者指定具体的数值来定义边框的宽度。 4、 边框样式（border-style） 该属性用以定义边框的风格呈现式样。共有九种。 none 不显示

10、边框，为缺省值dotted 点线dashed 虚线solid 实线double 双线groove 凹线ridge 凸线inset 使整个方框凸起outset 使整个方框凹陷 上边框（border-top） 右边框（border-right） 下边框（border-bottom） 左边框（border-left） 边框（border） 这几个是简写属性，它集合了上面几种属性的特点，可使用其给边框一次性定义宽度、式样和颜色。各属性值之间用空格隔开。5、边框颜色（border-color） 这个属性定义边框的颜色，可以用16种颜色名或RGB值来设置。16种颜色名分别为：aqua, black, bl

11、ue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。 RGB值则应表示为#RRGGBB或r%,g%,b%。 #rrggbb (如，#00cc00) rgb(x,x,x) x是一个介乎0到255之间的整数 (如，rgb(0,204,0) rgb(y%,y%,y%) y是一个介乎0.0到100.0之间的整数 (如，rgb(0%,80%,0%) 6、尺寸属性 定义方框的宽度width和高度height。 例：DIV.sample width: 300px; heig

12、ht: 200px 7、浮动和清除属性 浮动属性是指某一对象在母体元素内的浮动位置，清除属性和浮动属性一起使用，则表示同一母体内的其他对象可以流到浮动对象的旁边。 例： .float1 float: left; clear: right 假如这个样式定义在表格单元中的某个对象，则该对象将浮动在单元中的左边，而同一单元格中的其他对象在它右边的周围部分。这里是一个比较完整的例子，把这个例子按样输入，建立一个HTML文件，看看它的显示样式： a sample !- DIV.example margin-left: 20px; padding-top: 50px; border: 10px red o

13、utset; float: right clear: none 这是一个关于边框属性的完整实例 看看它的显示风格 二、字体属性 字体属性共分五种：字体家族（font-family）、字体风格（font-style）、字体变体（font-variant）、字体黑度（font-weight）、字体尺寸（font-size）;此外font属性是一个总体属性，可一一指定以上各种属性和属性值。 1、字体家族（font-family） 通过font-family指定字体类型，其语法为： 标记 font-family: 字体类型，字体类型，字体类型 例：p font-family: Times New Ro

14、man, arial, serif 假如字体类型之间有空格，就象Times New Roman，必须用引号将之括起，中文字体也须用括号括起，列出多种类型，以防浏览用户无前面的字体类型时，可以用后一种字体类型将之取代。 2、字体风格（font-style） 属性值：normal（普通）、italic（斜体）、oblique（倾斜），默认值为normal。 例：h1 font-syle: italic 3、字体变体（font-variant） 属性值：normal（普通）和small-caps（小型大写字母），缺省值为normal。 字体变体属性是让字体以小型大写方式来显示。小型大写方式看起来是一

15、般大写字母的7580左右。 该变体在某些需要特殊表现的标题中比较有用。例： H1 font-variant: small-caps 4、字体加粗（font-weight） 属性值：normal、 bold、 lighter、 bolder、以及数值100900。 该属性用以指定字体粗细的显示，并不是所有字体都可以显示这些指定的加粗程度，因此有些情况下这些指定值会被替代，例如100到300被lighter替代，600到900则替换bolder，反之亦然。例： h1 p 5、字体尺寸（font-size） 字体尺寸可设置绝对尺寸、相对尺寸、长度、百分比。 绝对尺寸分为xx-small, x-sma

16、ll, small, medium, large, x-large, xx-large七种，它们以各种字体的medium尺寸成比例缩放，每一级1.5倍。 相对尺寸有larger和smaller两种，根据字体原来的大小来决定缩放以后的大小。 长度是以pt, points, cm, mm, inch等度量单位用具体数值来指定字体的尺寸大小。 百分比是把字体设置成原来尺寸的百分比值，可以任意指定数值。例如： h1 font-size: 150% td font-size: 10pt p font-size: smaller 6、字体（font） 该属性使你可以把上述字体的各种属性合并到一行代码中指定

17、，也即提供了一个实现字体属性的快捷方式，各种属性值之间用空格隔开。例如： td font: italic bold 12pt 方正楷体简体，宋体 3、文本属性 文本属性设置文本的一些显示特性，例如文本对齐、文本缩进、行间距、字间距等。 1、文本对齐text-align 属性值：left（左）, right（右）, center（居中）, justify（两端对齐）。 例：h1 text-align: center 2、文本缩进text-indent 该属性有效的控制了文本段落第一行的缩进，其值可以指定，是长度或段落宽度的百分比。例：p text-indent: 1.0 in 3、行高line-

18、height 该属性设置行与行之间的间距，其值可以为数值、长度或百分比，百分比以行高为基础。例：body line-height: 120% 4、字间距letter-spacing 字间距设置字与字之间的距离，同样可以用数值、长度或百分比来指定，百分比以字符大小为基础。例:body letter-spacing: 0.5em 顺便提一下，文本属性中还有一个单词间距（word-spacing），设置每个单词之间的距离，对于中文页面来讲，可能很少用到。 5、文本装饰text-decoration 属性值：underline（下划线）, overline（底线）, line-through（线穿过）

19、, blink（闪烁）, none(无)。例：h3 text-decoration: underline 6、垂直对齐vertical-align 属性值：baseline（基准线）, super（上标）, sub（下标）, top（顶部）, text-top（文本顶部）, middle（中）, bottom（底部）, text-bottom（文本底部）和百分比。 通过不同的值设某对象相对其他文本的位置，特别有用的是，上标、下标成为可能。 例： 平方值：32 7、文本变换text-transform 属性值：capitalize（首字母大写）, uppercase（大写）, lowercase

20、（小写）和none（无）。缺省值为none。例： p text-transform: capitalize 四、颜色与背景属性 在很多时候，要用到颜色属性，指定文本段落、标题、背景等的颜色，背景属性则用于设定背景图像在浏览器中的显示方式。 1、颜色属性：color 属性值：16种颜色名（上文已经介绍过）、数值（#RRGGBB或是r%,g%,b%）。 在、及其单元元素、标题等对象都可以用到color属性。下例指定超链接的初始颜色和被激活时的颜色： a color: green a:hover color: red 2、背景属性 background-color定义页面或指定对象的背景颜色，属性值

21、和颜色属性相同。 background-image属性值：none, url（address），包括相对路径和绝对路径，指定对象的背景图像。 background-repeat属性值：no-repeat（无重复）, repeat（重复）, repeat-x（x方向重复）, repeat-y（y方向重复），缺省值为repeat，指定背景图像的显示方式。该属性需与background-image和background-position组合使用。 background-attachment属性值：scroll（随对象一起滚动）, fixed（固定），缺省值为scroll。该属性指定对象的背景图像是否

22、与对象一起滚动，或是固定在页面上的某一个位置。这个属性与background-image组合使用。 background-position属性值：垂直位置vertical，指定top, center, bottom和具体数值、百分比；水平位置horizontal，指定left, center, right和具体数值、百分比。定义背景图像的绝对或相对位置显示。 这是一个简写属性，可以把上述所有背景属性归纳到一行代码中定义。 这里是一个较完整的例子： body background-image: url(yueju/images/002.gif); background-repeat: no-re

23、peat; background-position: 20px 50px; background-attachment: fixed 用background属性简写为： body background: url(yueju/images/002.gif) no-repeat 20px 50px fixed 五、分类属性 分类属性控制了浏览器的显示方式，我们知道在HTML语言中，对于空格和换行的处理是缺陷所在，分类属性的到来使这些特性的控制成为可能。 分类属性包括显示属性、空白属性和列表属性。下面一一的介绍。 1、显示属性display 通过显示属性控制HTML页面中被定义对象在浏览器中的显示方法。这个属性有四个值： 块（block）在该对象前后自动增加分行符例：texttext图像前后的文字将与图像分行显示。 内联（inline）这个对象前后的元素与之在一行显示这个属性值正好相反，当需要对象与前一元素强制性在同一行时使用该值。 列表项（list-item）加一个列表项标记，其余同块该属性值与、等列表标记一起使用。 无（non