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

上传人:hw****26 文档编号:3120432 上传时间:2019-05-22 格式:DOC 页数:11 大小:76KB
下载 相关 举报
网页常用html标签与css样式.doc_第1页
第1页 / 共11页
网页常用html标签与css样式.doc_第2页
第2页 / 共11页
网页常用html标签与css样式.doc_第3页
第3页 / 共11页
网页常用html标签与css样式.doc_第4页
第4页 / 共11页
网页常用html标签与css样式.doc_第5页
第5页 / 共11页
点击查看更多>>
资源描述

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

2、颜色 .设定表格边框的颜色 .指定表格的宽度大小(使用数字) . 指定表格的高度大小( 使用数字) tr 元素 语法格式: . 高薪招聘 http:/ 2019-5-16第 2 页align 属性对齐方式可选值如下:left,center,tight,默认为 left bgcolor 指定该行的背景颜色 td 元素 语法格式: . align 属性的可选值有:left,center,right valign 属性的可选值有:top,middle,bottom .属性 1,背景属性 包括:bgcolor,background.bgcolor 背景色 语法格式: .background 背景图案。

3、 语法格式: 2,链接: 包括:link,visited,hover,active link 连接样式(可连接颜色) visited 已访问连接样式(已经点击访问过的样式)hover 触发链接样式(鼠标经过链接样式)active 活动连接样式(正被点击的可连接样式) align 属性 语法:文字 其属性有三种:left 靠左,center 居中,right 靠右 p 为段落标记,可利用以上属性对整个段落进行设置 br为换行标记 列表 1 无序列表又称符号列表 语法格式: type 的属性可选直 disc 实心圆点,clrcle 空心圆点,square 实心方框 文字 文字 2 有序列表 语法格

4、式: 文字 文字 type 的值是编号字符可选的有 1.,a.,A.,i. ,I. start 为起始值例:如果 start 为 3 是那么将从 3 开始,而且必须是数字。 3 定义列表 高薪招聘 http:/ 2019-5-16第 3 页定义列表标记 标示定义条目 标示定义内容 语法格式: 文字 文字内容 连接和图像 语法格式: . 属性:href 连接目标 值可以是 url 地址也可以是连接锚点 .或者 . target 目标窗口语法格式 : . -blank 打开新窗口 _self 当前窗口打开 一下两个仅在框架叶面中应用 _parent 当前窗口的父级窗口(上一级)打开 _top 在最

5、高一级的窗口打开 title 连接提示 百度一下 图像 语法格式:border 属性定义图片边框的宽度,默认值为 0 align 属性设置图片旁边文字的位置 语法格式: 可选值有: top 图片和文字顶部对齐 middle 图片和文字居中对齐 bottom 图片和文字底边对齐(默认) left 图片居左对齐,文字沿图片绕排 right 图片居右对齐,文字沿图片绕排 层 div两种元素 是块级元素,和段落元素相似,不同的是两个元素之间不会产生两个元素之间的空行, 是行内元素,可以定义段落中部分文字的属性 语法格式: . align 设置层中元素的水平对齐方式 兼容性比 要好一点,最好使用 inp

6、ut 元素 语法格式:高薪招聘 http:/ 2019-5-16第 4 页type 属性的可选值有: text 单行文本框 属性:name 文本框名称 value 文本框的初始值 size 文本框的长度 maxlength 可输入字符串最大的长度 radio 单选框 属性:name 单选框名称 value 内部值 checked 默认选定 checkbox 复选框 属性:name 复选框名称 value 内部值 checked 默认选定 reset 重置按钮 submit 确定按钮 属性:name 按钮名称 value 显示在按钮上的文字 password 密码框 属性与文本框的属性完全相同

7、file 文件域 属性:name 文件域名称 size 文件域的长度 maxlength 文件域可接受的字符数量的上限 hidden 隐藏域 属性:name 隐藏域名称 value 内定值 image 图片域 属性:name 所要代表的按钮,可以是 submit,reset,或其他. src 按钮图片的 url 地址 列表框 语法格式: . . . select 元素 语法格式: name 指定列表框的名字 size 指定列表框显示列表项的条数,如果指定了该参数,select 元素是个列表,否则是一个下拉列表框 multiple 指定了这个参数,则表示该列表框可选择多项,否则只可选择一项 op

8、tion 属性 高薪招聘 http:/ 2019-5-16第 5 页语法格式: value 该列表项的值 selected 如果设定了这个参数,默认为选定这一项 多行文本框 属性: name 文本框的名称 cols 文本框的宽度 rows 文本框的高度 2、CSS 样式部分一、边框属性 每一个网页都可以理解成是被一个方框框起来的,而页面中不同的部分又可以分为一个个小的方框。因此定义方框的边距、边框、颜色等的边框属性应用而生。1、边距属性(外边距): 左边距(margin-left) 右边距(margin-right) 上边距(margin-top ) 下边距(margin-bottom ) 边

9、距(margin)边距属性定义 HTML 页面中 方框四边和其他元素之间的空白距离,每一个margin-side 属性只影响到一条边,而 margin 则提供了一个同时设置四个边距的机会。2、填充属性(内边距): 左填充(padding-left) 右填充(padding-right) 上填充(padding-top) 下填充(padding-bottom ) 填充(padding)填充属性设置边框和内部元素的距离。它和边距属性十分相似,每个 padding-side 定义一个边框距离,padding 则同时定义四个距离。3、边框属性: 上边框宽(border-top-width) 右边框宽(

10、border-right-width)下边框宽(border-bottom-width) 左边框宽(border-left-width) 边框宽(border-width )高薪招聘 http:/ 2019-5-16第 6 页这几个属性定义边框宽度,用 thin、medium 和 thick 分别表示细、中等和粗,或者指定具体的数值来定义边框的宽度。 4、 边框样式(border-style)该属性用以定义边框的风格呈现式样。共有九种。 none 不显示边框,为缺省值dotted 点线dashed 虚线solid 实线double 双线groove 凹线ridge 凸线inset 使整个方框凸

11、起outset 使整个方框凹陷上边框(border-top) 右边框(border-right) 下边框(border-bottom) 左边框(border-left) 边框(border)这几个是简写属性,它集合了上面几种属性的特点,可使用其给边框一次性定义宽度、式样和颜色。各属性值之间用空格隔开。5、边框颜色(border-color )这个属性定义边框的颜色,可以用 16 种颜色名或 RGB 值来设置。16 种颜色名分别为:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, si

12、lver, 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; height: 200px 7、浮动和清除属性 浮动属性是指某一对象在母体元素内的浮动位置,清除属性和浮动属性一起

13、使用,则表示同一母体内的其他对象可以流到浮动对象的旁边。 例: .float1 float: left; clear: right 假如这个样式定义在表格单元中的某个对象,则该对象将浮动在单元中的左边,而同一单元格中的其他对象在它右边的周围部分。高薪招聘 http:/ 2019-5-16第 7 页这里是一个比较完整的例子,把这个例子按样输入,建立一个 HTML 文件,看看它的显示样式: a sample 这是一个关于边框属性的完整实例 看看它的显示风格 二、字体属性 字体属性共分五种:字体家族(font-family) 、字体风格(font-style) 、字体变体(font-variant)

14、 、字体黑度(font-weight ) 、字体尺寸(font-size);此外 font 属性是一个总体属性 ,可一一指定以上各种属性和属性值。 1、字体家族(font-family ) 通过 font-family 指定字体类型,其语法为: 标记 font-family: 字体类型,字体类型,字体类型 例:p font-family: “Times New Roman“, arial, serif 假如字体类型之间有空格,就象 Times New Roman,必须用引号将之括起,中文字体也须用括号括起,列出多种类型,以防浏览用户无前面的字体类型时,可以用后一种字体类型将之取代。 2、字体风

15、格(font-style) 属性值:normal(普通) 、italic(斜体) 、oblique(倾斜) ,默认值为 normal。 例:h1 font-syle: italic 3、字体变体(font-variant) 属性值:normal(普通)和 small-caps(小型大写字母) ,缺省值为 normal。 字体变体属性是让字体以小型大写方式来显示。小型大写方式看起来是一般大写字母的 7580左右。 该变体在某些需要特殊表现的标题中比较有用。例: H1 font-variant: small-caps 4、字体加粗(font-weight ) 属性值:normal、 bold、 l

16、ighter、 bolder、以及数值 100900。 高薪招聘 http:/ 2019-5-16第 8 页该属性用以指定字体粗细的显示,并不是所有字体都可以显示这些指定的加粗程度,因此有些情况下这些指定值会被替代,例如 100 到 300 被 lighter 替代,600 到 900 则替换bolder,反之亦然。例: h1 p 5、字体尺寸(font-size) 字体尺寸可设置绝对尺寸、相对尺寸、长度、百分比。 绝对尺寸分为 xx-small, x-small, small, medium, large, x-large, xx-large 七种,它们以各种字体的 medium 尺寸成比例

17、缩放,每一级 1.5 倍。相对尺寸有 larger 和 smaller 两种,根据字体原来的大小来决定缩放以后的大小。长度是以 pt, points, cm, mm, inch 等度量单位用具体数值来指定字体的尺寸大小。百分比是把字体设置成原来尺寸的百分比值,可以任意指定数值。例如: h1 font-size: 150% td font-size: 10pt p font-size: smaller 6、字体(font) 该属性使你可以把上述字体的各种属性合并到一行代码中指定,也即提供了一个实现字体属性的快捷方式,各种属性值之间用空格隔开。例如: td font: italic bold 12

18、pt “方正楷体简体“,“ 宋体“ 3、文本属性 文本属性设置文本的一些显示特性,例如文本对齐、文本缩进、行间距、字间距等。 1、文本对齐 text-align 属性值:left(左), right(右) , center(居中), justify(两端对齐) 。 例:h1 text-align: center 2、文本缩进 text-indent 该属性有效的控制了文本段落第一行的缩进,其值可以指定,是长度或段落宽度的百分比。例:p text-indent: 1.0 in 3、行高 line-height 该属性设置行与行之间的间距,其值可以为数值、长度或百分比,百分比以行高为基础。例:bo

19、dy line-height: 120% 4、字间距 letter-spacing 字间距设置字与字之间的距离,同样可以用数值、长度或百分比来指定,百分比以字高薪招聘 http:/ 2019-5-16第 9 页符大小为基础。例:body letter-spacing: 0.5em 顺便提一下,文本属性中还有一个单词间距(word-spacing) ,设置每个单词之间的距离,对于中文页面来讲,可能很少用到。5、文本装饰 text-decoration 属性值:underline(下划线) , overline(底线), line-through (线穿过), blink (闪烁), none(无

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

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

22、同。 background-image属性值:none, url(address) ,包括相对路径和绝对路径 ,指定对象的背景图像。background-repeat属性值:no-repeat(无重复), repeat(重复), repeat-x(x 方向重复), repeat-y(y 方向重复) ,缺省值为 repeat,指定背景图像的显示方式。该属性需与background-image 和 background-position 组合使用。 高薪招聘 http:/ 2019-5-16第 10 页background-attachment属性值:scroll(随对象一起滚动), fixed(

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

24、es/002.gif); background-repeat: no-repeat; 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)加一个列表项标记,其余同块该属性值与、 、等列表标记一起使用。无(none )对象不显示该属性值在某种情况下很有用,比如事先隐藏正确答案,直到经过某种操作以 后才显示。

展开阅读全文
相关资源
相关搜索

当前位置:首页 > 教育教学资料库 > 精品笔记

Copyright © 2018-2021 Wenke99.com All rights reserved

工信部备案号浙ICP备20026746号-2  

公安局备案号:浙公网安备33038302330469号

本站为C2C交文档易平台,即用户上传的文档直接卖给下载用户,本站只是网络服务中间平台,所有原创文档下载所得归上传人所有,若您发现上传作品侵犯了您的权利,请立刻联系网站客服并提供证据,平台将在3个工作日内予以改正。