[互联网]WebCh02A_____标记语言与网页制作.ppt

高等教育“十一五”国家级规划教材 计算机技术基础,第 1 章 Web技术基础 第 2 章 标记语言与网页制作 第 3 章 图像处理技术 第 4 章 音频与视频处理 第 5 章 Flash动画设计 第 6 章 客户端开发 第 7 章 服务端编程,目 录,高等教育“十一五”国家级规划教材 计算机技术基础,第 2 章 标记语言与网页制作,本章要点： 1、熟悉超文本标记语言HTML的文档结构、标记的概念和语法。 2、掌握常用的HTML文档内容标记、表格标记、表单标记、控件标记、帧标记等。 3、CSS技术的应用（实践） 4、掌握网页制作工具FrontPage的应用（实践）,高等教育“十一五”国家级规划教材 计算机技术基础,第 2 章 标记语言与网页制作,2.1 标记语言及其发展 2.2 超文本标记语言HTML 2.3 网页设计基础 2.4 使用Front Page,高等教育“十一五”国家级规划教材 计算机技术基础,2.1 标记语言及其发展,标准通用标记语言SGML 超文本标记语言HTML 可扩展HTML规范XHTML 可扩展标记语言XML DHTML和SHTML技术,高等教育“十一五”国家级规划教材 计算机技术基础,标准通用标记语言SGML,标记语言的概念 广义上，标记语言可以理解为对内容进行描述的规范或标准。 例如，在出版印刷行业，编辑人员在进行文档内容编辑时对内容所做的标记 标准通用标记语言SGML SGML（Standard Generalized Markup Language，SGML）是一个用来定义在电子表格中如何对文件的结构和内容进行描述的国际标准（ISO-8879） ，1969年，IBM SGML设计的非常复杂，SGML的正式规范达500多页 意义 SGML定义了标记语言的基本概念，奠定了标记语言的技术基础,高等教育“十一五”国家级规划教材 计算机技术基础,超文本标记语言HTML,HTML 的诞生 超文本标记语言HTML起源于通用标准标记语言SGML 欧洲核子研究中心CERN于1991年首先提出。 HTML规范 标记 HTML主要版本和发布时间 HTML 2.0， HTML工作组开发完成，于1996年发布 HTML3.2，W3C于1997年1月14日将其列为推荐版本，在HTML2.0标准中添加了诸如：字体、表格、Java程序等特征 HTML 4.0，W3C于1997年12月18日将其列为推荐版本，第二个稍作修正的HTML 4.0 版本与1998年12月24日发布。 HTML4.0中最重要的特征是引入了样式表CSS技术。 HTML 4.01，W3C于1999年12月24日将其列为推荐版本，是HTML 4.0的升级版本，它对原版本做出了部分修正。,高等教育“十一五”国家级规划教材 计算机技术基础,可扩展HTML规范XHTML,HTML 的缺陷 HTML的标记固定，HTML只是一种表现技术，不能表达语义 不能适应现在越来越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML 。 由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML 数据与表现混杂，页面要改变显示，就必须重新制作HTML W3C 不再继续开发HTML 可扩展HTML-XHTML W3C制定 ，2000年1月20 日发布XHTML 1.0 。 HTML向XML过度的一个桥梁 2002年8月5日，发布XHTML 2.0的第一个工作草案。,高等教育“十一五”国家级规划教材 计算机技术基础,可扩展标记语言XML,可扩展标记语言XML XML（eXtensible Markup Language） ，1998年2月10日，XML工作组正式向W3C提交了XML的最终推荐标准，这就是XML 1.0标准。 核心思想 实现数据和显示的分离 XML地构成 DTD、XML架构等基本要素 元规范 相应规范 可扩展样式语言XSL XML路径语言XPath XML查询语言Xquery 可扩展连接语言XLL及XML文档对象模型DOM 简单应用程序接口SAX等,高等教育“十一五”国家级规划教材 计算机技术基础,DHTML和SHTML技术,DHTML技术 与Web开发相关的技术或者说开发模式 ，不是规范 涉及的内容 HTML 4.0 规范 客户端脚本语言CSSL（Clent-Side Scripting Language） 文档对象模型DOM（Document Object Model） ，它将网页中的内容抽象成对象，每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events)，可以通过上面的客户端脚本语言编程控制 层叠样式表单CSS 技术 SHTML技术 SHTML不是一种HTML规范，而是一种网站设计、开发与维护技术 是一种Web服务器 API，其指令可以在Web服务端运行，以产生动态的html，是一种类似于ASP的基于服务器的网页制作技术,高等教育“十一五”国家级规划教材 计算机技术基础,2.2 超文本标记语言HTML,HTML标记语法和文档结构 文件头标记及子标记 文件体标记及其属性 文档内容常用标记 表格（table） 表单（form） 层次块标记 对象和脚本程序标记 层叠样式表CSS技术 帧（frame）,高等教育“十一五”国家级规划教材 计算机技术基础,HTML标记语法,HTML标记语法 标记（Tag） 标记由封装在小于号（）构成的一对尖括号之中 一般形式：文档内容 例如：link text 标记类型与标记属性 单标记：只需单独使用即可完整表达意思； 双标记：包含首标记和尾标记两部分，须成对使用； 标记属性 例如：,高等教育“十一五”国家级规划教材 计算机技术基础,HTML文档结构, 头部信息 文档主体 （语句部分） ,高等教育“十一五”国家级规划教材 计算机技术基础,文件头标记及子标记,文件头 标记对之间的部分称为文件头 子标记 标记 标记 标记 标记 背景音乐标记,高等教育“十一五”国家级规划教材 计算机技术基础,标记,标记 用于标识网页主题，其中的内容将在浏览器的标题栏中显示，不出现在页面内 举例 计算机基础网络教学平台GSL3.0,高等教育“十一五”国家级规划教材 计算机技术基础,标记,标记为单标记，没有尾标记。 为单标记，没有尾标记。 标记属性 http-equiv属性 name属性,高等教育“十一五”国家级规划教材 计算机技术基础,标记-http-equiv属性,http-equiv属性 http-equiv相当于HTTP的文件头，向浏览器传回信息，以正确显示网页内容 http-equiv属性参数值 content-type（显示字符集的设定），设定页面使用的字符集。 expires（期限），用于设定网页的到期时间 pragma（Cache模式），禁止浏览器从本地计算机的缓存中访问页面内容 ，该种设定访问者将无法使用脱机浏览功能 refresh（刷新），自动刷新并指向新页面。 window-target（显示窗口的设定），强制页面在当前窗口以独立页面显示 ，可以用来防止别人在框架里调用自己的页面,高等教育“十一五”国家级规划教材 计算机技术基础,标记-name属性,name属性 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎查找信息和分类信息用的。 name属性参数值 keywords（关键字），keywords用来告诉搜索引擎该网页的关键字是什么 。 description（内容描述），description用来告诉搜索引擎网站的主要内容 author（作者），标注网页的作者 robots（机器人向导），robots用来告诉搜索机器人需要索引的页面有哪些。 ,高等教育“十一五”国家级规划教材 计算机技术基础,标记,标记 标记定义了文档的基础URL地址，在文档中所有的相对地址形式的URL都是相对于这里定义的URL而言的 。 文档中的标记不能多于一个，必须放于头部，并且应该在任何包含URL地址的语句之前 标记属性 href属性 ，指定了文档的基础URL地址，该属性在标记中是必须存在的 。 target属性 target属性同框架一起使用，它定义了当文档中的链接被点击后，在哪一个框架中展开页面。 常用的target的属性值有：_blank ，_self ，_parent ，_top 表明页面上所有的链接都在新窗口打开,高等教育“十一五”国家级规划教材 计算机技术基础,标记,标记（不建议使用） 标记定义了文档之间的包含 。 在HTML的头部可以包含任意数量的标记 标记属性 type，用于指定被包含的文件类型。例如，text/css是指包含一个层叠样式表文件。 href，指向被包含资源的url地址 。 title，一个字符串，用于描述该链接关系。 rel，定义HTML文档和所要包含资源之间的链接关系 例如：,高等教育“十一五”国家级规划教材 计算机技术基础,文件体标记,标记 在标记对之间的部分称为html文档的文件体。文件体中描述的是浏览器中显示的内容。 在标记对之间可包含、等标记，它们所定义的文本、图像以及超链接等将会在浏览器中显示。 标记属性 一般属性 事件属性,高等教育“十一五”国家级规划教材 计算机技术基础,标记属性-1,标记一般属性,高等教育“十一五”国家级规划教材 计算机技术基础,标记属性-2,标记事件属性,高等教育“十一五”国家级规划教材 计算机技术基础,一个简单HTML文档示例,文本编辑器,高等教育“十一五”国家级规划教材 计算机技术基础,一个简单HTML文档示例（Cont1）,使用FrontPage编辑,高等教育“十一五”国家级规划教材 计算机技术基础,一个简单HTML文档示例（Cont2）,在浏览器中打开,高等教育“十一五”国家级规划教材 计算机技术基础,文档内容常用标记,标题、段落标记 文本格式标记 字体标记 粗体、斜体和下划线标记 图像标记 超链接标记 影像地图标记 走马灯标记 注释标记,高等教育“十一五”国家级规划教材 计算机技术基础,标题标记,标题标记 标记属性 Align,使用IntelliSense（智能感知）技术 查看标记属性,高等教育“十一五”国家级规划教材 计算机技术基础,段落标记、换行标记,段落标记 ，标记一个段落，输出位置转到下一行开始，并增加一个空行。 标记属性,高等教育“十一五”国家级规划教材 计算机技术基础,水平线标记,段落标记 水平线标记 ，插入一条水平线。 单标记。 标记属性 width,代码： ,高等教育“十一五”国家级规划教材 计算机技术基础,文本格式标记,字体标记 常用的属性有face、size和color，分别设置字体、文字大小和颜色。 粗体、斜体和下划线标记 、 字体放大、缩小、上标和下标显示标记 、 、 标记和标记类似，都是字体加粗标记。 标记和标记类似，是斜体强调标记。 为打字字体 Courier字体，字母等宽标记。 为传记引述斜体效果标记。,高等教育“十一五”国家级规划教材 计算机技术基础,文本格式标记（举例）,标记的联合使用举例,高等教育“十一五”国家级规划教材 计算机技术基础,图像标记,图像标记 单标记，用以插入图片 标记属性 align：设置图像的对齐方式 id：指定的图片id号，用于对图像的程序访问 class：指定图像所属的类型（样式类） name：用于设定图像的名称，用于对图像的程序访问。 src：设置插入图像的url地址，即插入图像的路径和文件名。 title：属性值为一字符串，鼠标指向图片时，鼠标右下角显示标题文本。 alt：设置图像替代文字，主要用于在浏览器还没有装入图像（或关闭图像显示）的时候，此图像的显示信息。（另：假使浏览器没有载入图片的功能，浏览器就会转而显示Alt属性的值。） border：设置图片边框。 height和width：分别用于设置图像的高度和宽度 hspace和vspace：分别用于设置图像的左右边框大小和上下边框大小。 ismap和usemap：在应用图像地图（map）时使用。 事件属性,高等教育“十一五”国家级规划教材 计算机技术基础,图像标记（Example）,Title属性 如果在提示信息中，需要换行，可以使用“ 草原风光“,高等教育“十一五”国家级规划教材 计算机技术基础,例2-2图像标记的应用示例, Taishan Introduction ,高等教育“十一五”国家级规划教材 计算机技术基础,例2-2图像标记的应用示例（显示结果）,在浏览器中的显示,高等教育“十一五”国家级规划教材 计算机技术基础,超链接标记 (anchor：锚),超链接的分类 文本超链接 字符串 图片超链接 定义书签 书签文本 标记其它常用属性 target属性，定义超链接打开的目标窗口。 _self（相同框架），_blank（新建窗口），_top（整页），_parent（父窗口）。 title属性，属性值为一字符串，鼠标指向超链接时，鼠标右下角显示标题文本。 onclick事件属性,高等教育“十一五”国家级规划教材 计算机技术基础,例2-3超链接标记使用示例, Shandong Travel 美丽的山东 济南 青岛 曲阜 泰山 烟台 威海 日照 济南 青岛 主要旅游网 返回 关闭窗口 ,高等教育“十一五”国家级规划教材 计算机技术基础,例2-3 显示网页,在浏览器中的显示,高等教育“十一五”国家级规划教材 计算机技术基础,影像地图标记 ,什么是影像地图 所谓影像地图，就是在一个图片上定义一系列区域，每个区域对应一个超链接。 标记形式 热点标记（）属性 href属性，用于设定该热点所链接的url地址。 shape和coods属性，shape和coords是两个主要的参数，用于设定热点的形状和大小。 shape=“rect” ，shape=“circle” ，shape=“polygon“,高等教育“十一五”国家级规划教材 计算机技术基础,在Frontpage 2003中设置影像地图标记,首先插入一幅图片，然后在图片上右单击，执行“显示图片工具栏”命令，即可定义热点区域。,高等教育“十一五”国家级规划教材 计算机技术基础,走马灯标记,“走马灯”标记用于标记一行或多行滚动的文本，也可以将文本带有超链接，以增加网页的动态效果。 标记常用属性 align属性，设定活动字幕的位置，取值可以是left、center、right、top或bottom。 bgcolor属性，设定活动字幕的背景颜色，一般是十六进制数。 direction属性，设定活动字幕的滚动方向，取值可以是left、right、up或down。 behavior属性，设定滚动的方式，主要有三种方式：behavior=“scroll”表示由一端滚动到另一端；behavior=“slide”表示由一端快速滑动到另一端，且不再重复； behavior=“alternate”表示在两端之间来回滚动。 height和width属性，设定滚动字幕的高度和宽度。 hspace和vspace属性，设定滚动字幕的左右边框和上下边框的宽度。 scrollamount属性，设定活动字幕的滚动距离。 scrolldelay属性，用于设定滚动两次之间的延迟时间。 loop属性，用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。,高等教育“十一五”国家级规划教材 计算机技术基础,走马灯标记举例,例1 活动字幕内容第一行 活动字幕内容第二行 活动字幕内容第三行 例2 欢迎光临 例3 滚动的内容带有超链接，可以将内容用标记，即： 活动字幕内容,高等教育“十一五”国家级规划教材 计算机技术基础,走马灯标记显示效果,显示,高等教育“十一五”国家级规划教材 计算机技术基础,走马灯标记举例（代码）, 活动字幕内容第一行 活动字幕内容第二行 活动字幕内容第三行 站点更新. 泰山欢迎您 ,高等教育“十一五”国家级规划教材 计算机技术基础,表格（Table）,什么是表格？ 表格是由行、列构成的。每一行可以分成若干列，每一列成为一个单元格，相邻的单元格可以合并。 应用 页面布局 相关标记 表格标记 行标记 单元格标记 ,高等教育“十一五”国家级规划教材 计算机技术基础,表格相关标记属性,标记属性 一般属性 事件属性,高等教育“十一五”国家级规划教材 计算机技术基础,例2-4使用表格示例,HTML表格,高等教育“十一五”国家级规划教材 计算机技术基础,例2-4使用表格示例（代码）, 学生成绩等记表 学 语 2008000001 张三 95 90 说 明 成绩=平时*20%+期末*80% 2006年1月 ,高等教育“十一五”国家级规划教材 计算机技术基础,表格的复杂设计,表格嵌套 单元格内定义表格 立体表格设计 设置表格单元格属性 表格居中,高等教育“十一五”国家级规划教材 计算机技术基础,表单（form）,用户交互 表单 表单标记 表单元素 单行文本框输入 密码文本框输入 多行文本框输入 button按钮输入 radio单选钮输入 复选框输入 复选列表框输入 hidden隐藏元素 文件上传 表单提交按钮标记submit/reset,高等教育“十一五”国家级规划教材 计算机技术基础,表单标记,一般形式 表单元素 标记属性 name属性，给出表单的名称，用于脚本编程 method属性，method属性用来定义服务器表单处理程序从表单中获得信息的方式 get方法将数据打包放置在环境变量QUERY_STRING中作为URL整体的一部分传递给服务器。 post方法分离地传递数据给服务器表单处理程序，不需要设置QUERY_STRING环境变量，因此POST有更好的安全性，表单中数据的多少是任意的，因为这些数据从来也不分配到一个变量里。 action属性，设置表单处理程序的网络路径和程序名，当用户提交表单时，服务器将执行action属性所设置的程序。,高等教育“十一五”国家级规划教材 计算机技术基础,输入类型标记,一般形式 输入类型标记 标记属性 type属性，给出输入控件的类型，常用的控件类型有：text，textarea，radio，checkbox，button，image，hidden，password，file，submit/reset name属性，设置输入控件的名字，程序需要通过控件名称处理用户输入数据，同时，设置控件名称可以增加HTML代码的可读性。 value属性，保存用户的输入和选择，服务器通过调用输入区域的value属性值来获得输入控件的数据。另外，用户可以通过value属性来指定输入区域的缺省值 。,高等教育“十一五”国家级规划教材 计算机技术基础,单行文本框输入标记,单行文本框输入 主要属性 name属性，文本框名称，便于程序获取用户输入。 value属性，存储文本框的取值，可以设一个初始值。 size属性，设置表示文本框的显示长度。 maxlength属性，maxlength是文本框中输入的有效数据长度。 例如： 用户账户： ,高等教育“十一五”国家级规划教材 计算机技术基础,密码文本框输入标记,密码文本框输入 使用输入密码文本框控件，当用户输入密码时，区域内将会显示“*“号 主要属性 name属性，文本框名称，便于程序获取用户输入。 value属性，存储文本框的取值，可以设一个初始值。 size属性，设置表示文本框的显示长度。 maxlength属性，maxlength是文本框中输入的有效数据长度。 例如： 密码： ,高等教育“十一五”国家级规划教材 计算机技术基础,多行文本框输入标记,多行文本框输入 多行文本框，又称滚动文本框。和其它的输入类型不同，它不是通过来指定的，它是一个双标记 input text 主要属性 name属性，多行文本框的名称，便于程序获取用户输入。 rows属性和cols属性，分别用来设置文本框的列数和行数，列与行以字符数为单位。 标记对之间的文本input text为显示的初始文本内容。 例如： 请输入简要说明 ,高等教育“十一五”国家级规划教材 计算机技术基础,button按钮输入,按钮输入 ,高等教育“十一五”国家级规划教材 计算机技术基础,radio单选钮输入标记,radio单选钮输入 单选钮主要用于从多个可选项中，选择其中之一。往往是若干个radio为一组，他们具有相同的name，但不同的value，从而选择其中之一。 主要属性 name属性，单选扭的名称，一般是若干个radio一组，取相同的name。 checked属性，用来设置该单选框缺省时是否被选中，相同name的多个radio中只能有一个选择，或都不使用该参数。 value属性，存储单旋钮的取值，多个具有相同name的单旋钮应该具有不同的value。,高等教育“十一五”国家级规划教材 计算机技术基础,radio单选钮举例,例如： 性别： 女性 男性 学历： 学士 硕士 博士 显示,高等教育“十一五”国家级规划教材 计算机技术基础,复选框输入标记,复选框输入 复选框是对某种输入做出“是”或“否”的选择 常用属性 name属性，name为复选框的名称，便于程序获取用户输入 value属性，每一个checkbox 必须有一个value，当复选框选中时，value值便会传到表单的action属性指定的程序中。 checked属性，用来设置该复选框缺省时是否被选中。,高等教育“十一五”国家级规划教材 计算机技术基础,复选框输入标记（举例）,例如 兴趣爱好： 体育 音乐 文学 其它 ,高等教育“十一五”国家级规划教材 计算机技术基础,复选列表框输入标记,复选列表框 创建一个下拉列表框或可以复选的列表框，定义复选列表框不需要在中指定输入类型 标记 属性 name属性，name为下拉式列表控件名称，便于程序获取用户输入。 size属性，下拉式列表的高度，缺省时值为1，若没有设置（加入）multiple属性，显示的将是一个弹出式的列表框。若使用此参数则不会有PopUp效果。如果小于可选的项目数量，则出现垂直滚动条。 multiple属性，指定是否可以多选。multiple属性不用赋值，直接加入标记中即可使用，加入了此属性后列表框就成了可多选的了。,高等教育“十一五”国家级规划教材 计算机技术基础,复选列表框输入标记（举例）,举例 城市： 北京 济南 青岛 ,高等教育“十一五”国家级规划教材 计算机技术基础,hidden隐藏元素标记,hidden隐藏元素 在一个表单中，可以定义隐藏表单元素，它在网页上并不显示，不需要用户输入，主要目的是随表单一起传给表单处理程序一个特定的值，用于为网页处理程序传送数据。 例如 ,高等教育“十一五”国家级规划教材 计算机技术基础,文件上传标记,文件上传标记 一般属性 name属性为控件名称， size属性显示文本框长度。 Accept属性设置上载文件过滤，即点击“浏览”按钮时，只显示指定文件类型的文件列表。 例如 提交论文： ,高等教育“十一五”国家级规划教材 计算机技术基础,表单提交与重填按钮,表单提交 当表单填写完毕后，需要选择的submit/reset按钮，它结束表单输入，将表单数据传送到服务器端，由表单标记中的action属性指定的服务器上的程序处理用户输入数据。 重填按钮 表单清除就是要将表单中已做的输入和选择全部清除，重新填写。 一般属性 name属性，这和其它控件的属性不同，在提交表单中，name可以指定一个函数，需要和form标记中action属性的程序配合。一般情况下，不需要name属性。 value属性，提交按钮的显示名字，一般为“确定”、“提交”等易于理解的名字。 Onclick事件属性。 例如 ,高等教育“十一五”国家级规划教材 计算机技术基础,表单设计举例（一）,表单设计,高等教育“十一五”国家级规划教材 计算机技术基础,例2-5 表单设计举例,一个利用form计算阶乘的例子,高等教育“十一五”国家级规划教材 计算机技术基础,利用form计算阶乘HTML代码(Part1), A simple example for Form var calcOnly = false; function fact(n) if (n=0) return 1; else return n*fact(n-1); function calcFact(n) var res; res=fact(n); document.myForm.result.value = res; calcOnly=true; document.myForm.n.focus(); ,高等教育“十一五”国家级规划教材 计算机技术基础,利用form计算阶乘HTML代码(Part2), 使用表单示例 计算n的阶乘 输入n ,高等教育“十一五”国家级规划教材 计算机技术基础,层次块标记,层次块标记div 层次块标记用于定义网页上的一个矩形块，中间可以包含引起行中断的标记，如标记等。 层次块标记的一般形式是： 标记属性 Id，属性，用于标记一个块，以便引用该块。 style属性， 和没有默认的显示样式 ，必须使用style属性和class样式类定义图层块的位置、大小、显示属性等。 例如： style=“width:100px;height:100px;overflow-x :hidden;overflow-y:hidden;“ 。,高等教育“十一五”国家级规划教材 计算机技术基础,例3-6 定义div块并进行平滑移动,要求 在浏览器窗口定义一个div块，双击鼠标左键，div块从左向右平滑移动，单击鼠标左键，停止移动。,高等教育“十一五”国家级规划教材 计算机技术基础,定义div块并进行平滑移动（HTML代码）, Moving Div Sample var movingID = null; var scrolling = false; function startMove() var left = eval(div1.style.left.replace(“px“,“); if (left ,高等教育“十一五”国家级规划教材 计算机技术基础,定义div块并进行平滑移动（HTML代码）续, Div moving 双击鼠标，块开始从左向右移动 单击鼠标，块停止移动 ,高等教育“十一五”国家级规划教材 计算机技术基础,对象和脚本程序标记,插入对象标记 脚本程序定义标记 脚本程序代码 标记属性 language，设置脚本程序语言， 如：JavaScript,Jscript,etc. runat属性，设置脚本是客户端还是服务端脚本，默认为客户端脚本。,高等教育“十一五”国家级规划教材 计算机技术基础,层叠样式表CSS技术,什么是CSS? CSS全称为Cascading Style Sheet(层叠样式表)，是一种能制作出各种样式网页的技术统称。 CSS的作用 在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景、边框和其它效果实现更加精确和有效的控制。 使用CSS的好处 较好的实现内容和显示格式的分离，便于系统整体的风格一致和维护。 便于团队开发,高等教育“十一五”国家级规划教材 计算机技术基础,为什么需要CSS样式表,HTML标记的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服,内容相同,外观不同,高等教育“十一五”国家级规划教材 计算机技术基础,为什么需要CSS样式表,样式表能实现内容与样式的分离，方便团队开发,程序员写代码,美工做样式,内容与样式和谐统一的完整网页,高等教育“十一五”国家级规划教材 计算机技术基础,样式表的基本语法,样式表的基本结构, P color:red; font-size:30px; font-family:隶书; ,声明文档样式表结束,文档样式表开始，类型为CSS样式,样式规则,选择器,样式规则 P color:red; font-size:30px; font-family:隶书;,高等教育“十一五”国家级规划教材 计算机技术基础,样式表的基本语法, 样式规则 P color:red; font-family:“隶书“; font-size:24px; 静夜思 床前明月光， 疑是地上霜。 我是郭德刚， 低头思故乡。 ,本页面中所有的P标记都应用了此样式,所有的段落都采用P样式，保证风格统一,用分号隔开,选择器,如何编写此样式?字体类型为隶书、红色,大小24px,高等教育“十一五”国家级规划教材 计算机技术基础, .red color:red; font-family:“隶书“; font-size:24px; ,样式表的基本语法,如果希望其他的标记也能采用P标记的样式，怎么办？,其他标记和P标记若要采用相同的样式，需要为它们定义多个标记可共享的class属性（类样式）。,类属性(class)（语法格式）,.类名,样式规则,高等教育“十一五”国家级规划教材 计算机技术基础,样式表的基本语法, 样式规则 .red color:red; font-family:“隶书“;font-size:24px; 静夜思 床前明月光， 疑是地上霜。 我是郭德刚， 低头思故乡。 ,CLASS类属性,为类属性定义的样式规则,应用类属性 class”类名“,和标记应用同一样式,高等教育“十一五”国家级规划教材 计算机技术基础,样式表的基本语法, 样式规则 .red color:red; font-family:“隶书“; 静夜思 床前明月光， 疑是地上霜。 我是郭德刚， 低头思故乡。 ,CLASS类属性,为类属性定义的样式规则,应用类属性 class”类名“,如何使其中的一个段落有别于其他段落？,高等教育“十一五”国家级规划教材 计算机技术基础,使用标记的class属性,标记的class属性 CLASS属性用于指定标记使用的样式类。样式类可以关联一个标准的标记，也可以用于任何标记（可共享）。 例如 p.warning font-weight: bolder; color: red; background: white .word1 color: lime; background: #ff80c0 举例 警告： Please turn off the power first,高等教育“十一五”国家级规划教材 计算机技术基础,使用标记id属性,标记的id属性 ID属性用于定义一个元素的独特的样式。ID值可以关联一个标准的标记，也可以用于任何标记。 例如 #myID1 font-size: larger p#myNote font-weight: bolder; color: red; background: white 举例 注意事项： 1）必须要严格遵守语法规则 同class属性的区别：当一个样式仅需要在某文档中应用一次时，通常使用id属性。,高等教育“十一五”国家级规划教材 计算机技术基础,常用的样式属性,文本属性,使用font-size、font-family、 color实现,宋体，字体大小12px,宋体，字体大小16px,红色,要实现如下图所示的文本样式，该如何编写？,高等教育“十一五”国家级规划教材 计算机技术基础,常用的样式属性, P font-size: 12px; font-family: “宋体“; text-align:left; .bigFont font-size: 16px; color:red; 【新闻】设搜狐为首页 9月1日 ·世锦赛刘翔12秒95夺冠成就大满贯 ·我国实施不安全食品召回制度 遏制非法出口 ,声明P标记样式,声明名称为bigFont类属性,它可被多个标记共享,应用类属性用 class”类名“,高等教育“十一五”国家级规划教材 计算机技术基础,常用的样式属性,背景属性, table1 background-image: url(images/type_back1.jpg); background-repeat:no-repeat; ,设置背景图像为images文件夹下的type_back1.jpg,设置背景图像不平铺,高等教育“十一五”国家级规划教材 计算机技术基础,常用的样式属性,方框属性,margin-right 右边界,margin-left 左边界,margin-top 上边界,margin-bottom 下边界,margin,border,padding,border-width 边框的宽度,padding-left 左填充,padding-bottom 下填充,高等教育“十一五”国家级规划教材 计算机技术基础,常用的样式属性,方框属性,高等教育“十一五”国家级规划教材 计算机技术基础,常用的样式属性,要实现下图所示的效果，该如何编写样式规则？,线宽3px、虚线框样式dashed、颜色为red,使用background、border-right-width、border-right-color、border-right-style、padding-top和padding-left来实现,行的背景色为yellow,高等教育“十一五”国家级规划教材 计算机技术基础,常用的样式属性, .tableBorder border-right-width: 3px; border-right-color:red; border-right-style:dashed; padding-top:20px; padding-left:10px; TR background:yellow; 手机冲值 电子彩票 ,设置单元格右边框宽度为3像素,设置单元格右边框为虚线框,设置单元格里文字与左边框的距离为10像素,表格行的背景色,高等教育“十一五”国家级规划教材 计算机技术基础,常用的样式属性,要实现下图细边框的效果，该如何编写样式规则？,文本框宽度为1px,边框样式为solid,使用border-width和border-style属性,高等教育“十一五”国家级规划教材 计算机技术基础,常用的样式属性, #textBorder border-width:1px; border-style:solid; 名字： 密码： ,文本框为实线边框,边框宽度为1像素,高等教育“十一五”国家级规划教材 计算机技术基础,常用的样式属性,特殊样式（超连接） a:link color: #FF0000 /* 未被访问的链接 红色 */ a:visited color: #00FF00 /* 已被访问过的链接 绿色 */ a:hover color: #FFCC00 /* 鼠标悬浮在上的链接 橙色 */ a:active color: #0000FF /* 鼠标点中激活链接 蓝色 */, A color: blue; text-decoration: none; A:hover color: red; 诺基亚 | 摩托罗拉 联想 | 戴尔 ,超链接文本的样式,鼠标在超链接上悬停时，超链接文本变为红色,如何编写此超链接样式？,高等教育“十一五”国家级规划教材 计算机技术基础,常用的样式属性,要实现下图图片按钮的效果，该如何编写样式规则？,按钮的边界、边框、填充值均为0px,使用background-image、 margin、 border、padding、height、width和font-size属性,按钮背景图像与按钮宽度、高度大小一样,字体大小14px,综合例子：制作图片按钮,高