1 / 55

思考问题：

思考问题：. <table width="200" border="4" cellspacing="10" cellpadding="10"> <tr> <td> <img src=“aa.gif" width="180" height="60" alt=“image" /> </td> </tr> </table>. <table width=“180” cellspacing=“5” cellpadding=“5” border=“0”>

melvin-navarro
Download Presentation

思考问题：

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 思考问题： <table width="200" border="4" cellspacing="10" cellpadding="10"> <tr> <td> <img src=“aa.gif" width="180" height="60" alt=“image" /> </td> </tr> </table> <table width=“180” cellspacing=“5” cellpadding=“5” border=“0”> <tr><td>hello</td></tr></table> 问题1：请问外表格的总宽度是多少？ 问题2：修改为如图所示的代码，内层表格的实际内容宽度是多少？

  2. 复习小结——表格 • 使用表格进行网页布局时，一般外层表格用像素为单位，内层表格百分比。 • 整个页面不要都套在一个表格里，尽量拆分成多个表格。 • 单一表格的结构尽量整齐。 • 表格嵌套层次尽量要少，嵌套层数不超过三层，能不嵌套的尽量不要使用嵌套。 实验证明：越复杂、嵌套层次越多的表格下载速度越慢。

  3. 链接颜色 已访问链接 变换图像链接 活动链接 分析链接代码： <style type="text/css"> <!-- a:link { color: #FF0000; } a:visited { color: #0000FF; } a:hover { color: #00FF00; } a:active { color: #FFFF00; } --> </style>

  4. 商务网页设计与制作课程 CSS层叠样式表

  5. 本章内容 1. CSS样式表的定义 2. 选择器的分类√ 3. 在HTML中引入CSS的方法√ 4. DW中CSS的可视化编辑 √

  6. CSS层叠样式表 • CSS是Cascading Styles Sheets的缩写，中文译名为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 • HTML和CSS的关系就是“内容”和“形式”的关系，由HTML组织网页的结构和内容，而通过CSS来决定页面的表现形式

  7. 思考：在Excel中，需要给学生的成绩评定等级：思考：在Excel中，需要给学生的成绩评定等级： x≥85，为“优秀”； 85>x≥70，为“良好”； x ≥60，为“及格”。如何实现？ 为什么需要CSS • 由于html的主要功能是描述网页的结构，所以控制网页外观和表现的能力很差，无法精确到像素级调整文字大小，行间距等 • 不能对多个网页元素进行统一的样式设置，只能一个一个元素进行设置

  8. HTML只能对元素逐个进行设置样式 <body> <h2><font color="#FF0000" face="黑体"> CSS标记1</font></h2> <p>CSS标记的正文内容1</p> <h2><font color="#FF0000" face="黑体"> CSS标记2</font></h2> <p>CSS标记的正文内容2</p> <h2><font color="#FF0000" face="黑体"> CSS标记3</font></h2> <p>CSS标记的正文内容3</p> </body> 产生的问题： 1）代码冗余 2）如果要修改元素的样式，也要一个个的改，修改工作量大

  9. 使用CSS后 h2{ font-family:黑体; color:red; } …… <h2>CSS标记1</h2> <p>CSS标记的正文内容1</p> <h2>CSS标记2</h2> <p>CSS标记的正文内容2</p> <h2>CSS标记3</h2> <p>CSS标记的正文内容3</p> 1）没有了代码冗余 2)如果要修改，只需修改选择器中的内容就可以

  10. 1 2 3 CSS选择器的类型：有4种。类、标签、ID和伪类选择器。 名称：根据选择器的类型，选择或自定义相应的名称。 保存位置：可以新建一个样式表文件也可以直接保存在现在的文档中。 1 2 3 新建CSS规则的对话框

  11. 选择器的分类（重点）

  12. 声明 声明 { color: red; font-size: 25px; } h1 选择器 属性 值 属性 值 CSS的语法 • CSS样式表由一系列样式规则组成，浏览器将这些规则应用到相应的元素上，下面是一条样式规则。 h1{ color: red; font-size: 25px; }

  13. CSS样式规则的组成－选择器 • 一条CSS样式规则由选择器(selector)和声明(declarations)组成。 • 选择器是为了选中网页中某些元素，选择器可以是一个标签名，叫标签选择器。 • 选择器也可以是一个自定义的类名，表示将自定义的一类元素全部选中，称为类选择器。 • 选择器还可以是一个自定义的id名，表示选中网页中某一个唯一的元素，称为ID选择器。

  14. CSS选择器的分类 • 标签选择器 • 类选择器 • id选择器 • 伪类选择器

  15. 声明 声明 标签名称 P { color: green; font-size: 20px; } 标签选择器 属性 值 属性 值 标签选择器 • 标签是元素固有的属性，CSS标签选择器用来声明哪种标记签用哪种CSS样式，因此，每一种html标签的名称都可以作为相应的标签选择器的名称。如：

  16. 选择器 样式规则 用分号隔开 样式表 标签选择器示例（段落标签） …… <HEAD> <TITLE>应用样式</TITLE> <style type="text/css" > P { font-size:20px; color:blue; text-align:center; } </style> </HEAD> <BODY> <P>我是段落 1</P> <P>我是段落 2</P> <P>我是段落 3</P> <P>我们的样式绝对统一</P> </BODY> …… 所有的段落都采用 P 样式，保证样式统一

  17. 声明 声明 类别名称 .class { color: green; font-size: 20px; } 类别选择器 属性 值 属性 值 类选择器 • 选择器也可以是一个自定义的类名，表示将自定义的一类元素全部选中。定义时一般以“.”开头，引用时必须在这一类的每个元素的标记里添加一个html属性class＝“类名”。 如：

  18. 类选择器示例 <HEAD> <style type="text/css"> .myinput { border: 1px solid; border-color:#D4BFFF; color:#FF0000; } </style> </HEAD> <BODY> <FORM > <P>用户名 <INPUT name="textfield" type="text" class="myinput"></P> <P>密 &nbsp;码 <INPUT name="textfield" type="password" class="myinput"> </P> <P> <INPUT type="submit" name="Submit" value=" 重 填 "> <INPUT type="submit" name="Submit" value=" 提 交 "></P> …… CLASS类选择器 类选择器的定义格式为： .类名 { …样式规则; } 应用类选择器： class＝”类名“

  19. 课堂练习 注意：制作过程请注意代码变化。 设计一个表单，表单包含一个用户名输入框、一个密码输入框、 一个重置按钮和一个提交按钮。 提示：“插入”菜单>>>>>表单 “插入”菜单>>>>>文本域 “插入”菜单>>>>>按钮 为输入框定义样式：输入框为红色边框和输入文字为红色。 将定义好的样式应用到对应的两个输入框的HTML标签。 如果将样式应用到按钮上，按钮将如何变化？

  20. 类选择器 • 标记选择器一旦声明，那么页面中所有该标记的元素都会产生相应的变化。 • 例如当声明<p>标记为红色时，页面中所有的<p>元素都将显示为红色 • 但是如果希望其中某一些<p>元素不是红色，而是蓝色，就需要将这些<p>元素自定义为一类，用类选择器来选中它们； • 或者希望不同标记的元素应用同一样式，也可以将这些不同标记的元素定义为同一类，如下所示的一个<p>元素和一个<h3>元素被定义为了同一类。类选择器以半角“.”开头，且类名称的第一个字母不能为数字

  21. 类选择器示例 <style type="text/css"> .one{ color: red; /* 红色 */ } .two{ font-size:20px; /* 文字大小 */ } </style> <p>选择器之标记选择器1</p> <p class="one">应用第一种class选择器样式</p> <p class="two">应用第二种class选择器样式</p> <h3 class="two">h3同样适用</h3> <h3 class=“one two”>应用两种样式</h3>

  22. 声明 声明 ID名称 #ID { color: green; font-size: 20px; } ID选择器 属性 值 属性 值 ID选择器 • id选择器的使用方法与class选择器基本相同，不同之处是一个id选择器只能应用于html文档中的一个元素，而class选择器可以应用于多个元素。id选择器以半角“#”开头，且id名称的第一个字母不能为数字

  23. ID选择器示例 <HEAD> <style type="text/css"> #fire { color:red; font-size: 24px; } </style> </HEAD> <BODY> <H2 ID="fire">我是二级标题，火是这样的</H2> <P >我是段落，火是这样的</P> </BODY> ID选择器 ID选择器的定义格式为： ＃ID名 { …样式规则; } 应用ID选择器：ID＝”ID名“

  24. ID选择器示例 <style type="text/css"> #one{ font-weight:bold; /* 粗体 */ } #two{ font-size:30px; /* 字体大小 */ color:#009900; /* 颜色 */ } </style> <body> <p id="one">ID选择器1</p> <p id="two">ID选择器2</p> <h3 id=“one two”>应用两种样式</h3>

  25. ID选择器 • 上例中，第一行应用了#one的样式，一个id选择器只能应用在一个元素上（但即使真的违规，浏览器也显示了CSS样式风格且不会报错。 • 在编写CSS代码时，还是应该养成良好的编码习惯，一个id最多只能赋予一个html元素，因为每个元素定义的id不只是CSS可以调用，JavaScript等脚本语言也可以调用，如果一个html中有两个相同id属性的元素，那么将导致JavaScript在查找id时出错。

  26. 类名和ID名的大小写 • 关于类名和id名的大小写：CSS大体上是不区分大小写的语言，但是对于标签实体的类名和id名是否区分大小写取决于标记语言是否区分大小写，如果使用XHTML，那么类名和id名是区分大小写的；如果是HTML，则不区分大小写

  27. 声明 声明 伪类名 a:hover { color: green; font-size: 20px; } 标记名 属性 值 属性 值 伪类选择器 • 伪类选择器可以看成是一种特殊的标记选择器，它用来选中在某种状态下的标记 。 • 网页中的链接标签能响应浏览者的点击。a标签有四种状态能描述这种响应，分别是a:link、a:visited、a:hover、a:active，a标记在这几种状态下的样式能够通过伪类选择器来分别定义，伪类选择器的标记和伪类之间用“:”隔开。其格式为

  28. 通过伪类选择器制作动态超链接 • 如果分别定义a标记在四种不同的状态下具有不同的颜色，在鼠标悬停时还将添加下划线。需要注意两点： 一、链接伪类选择器的书写应遵循LVHA的顺序，即CSS代码中四个选择器出现的顺序应为a:link→ a:visited→ a:hover→ a:active，若违反这种顺序鼠标停留和激活样式就不起作用了。 二、各种伪类选择器将继承a标记选择器定义的样式。

  29. 在HTML中引入CSS的方法

  30. 在HTML中引入CSS的方法 • HTML和CSS是两种作用不同的语言，它们同时对一个网页产生作用，因此必须通过一些方法，将CSS与HTML挂接在一起，才能正常工作。 • 在HTML中，引入CSS的方法有行内样式表、内嵌样式表、外部样式表三种

  31. 行内样式表 • html标记都有一个通用的style属性，行内式就是在该属性内添加CSS属性和值，如： /*－－关键代码--*/ <p> 所 在 地：北京 <BR> 宝贝数量：5 件 <BR> 浏 览 量：220 次</p> <p style=“color:#FF00FF; font-family:隶书; font-weight:bold; font-size:24px"> 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以 </p>

  32. 行内样式表 • html标记都有一个通用的style属性，行内样式表就是在该属性内添加CSS属性和值，如： • <tdstyle="color: #FF0000; text-decoration: underline"width="88%"> • 需要做测试或对个别元素设置CSS属性时，可以使用这种方式，这种方式由于CSS属性就在标记内，其作用对象就是标记内的元素。所以不需要指定CSS的选择器，只需要书写CSS属性和值。但它没有体现出CSS统一设置许多元素样式的优势。 • 实现方法：直接手动输入

  33. 内嵌样式表 • 内嵌式将页面中各种元素的CSS样式设置集中写在<style>和</style>之间，<style>标记是专用于引入嵌入式CSS的一个html标记，它只能放置在文档头部，即下面这段代码只能放置在html文档的<head>和</head>之间。 <style type="text/css"> h1{ color: red; font-size: 25px; } </style> • 对于单一的网页，这种方式很方便。但是对于一个包含很多页面的网站，如果每个页面都以嵌入式的方式设置各自的样式，不仅麻烦，冗余代码多，而且网站每个页面的风格不好统一。因此一个网站通常都是编写一个独立的CSS文件，使用以下两种方式之一，引入到网站的所有html文档中

  34. 内嵌样式表实现方法 选择此选项

  35. 外部样式表 • 根据样式文件与网页的关联方式分为： • 链接式（link ） • 导入式（import） 样式文件 P { ….. } 网页1 网页2 网页3

  36. 链接式和导入式的实现方法 选择此选项

  37. 链接式 第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页关联 第三步：浏览查看各网页 样式文件： newstyle.css P { ….. } One.htm another.htm

  38. 链接式 使用LINK（链接）标签 ，语法： <HEAD> <link rel = “stylesheet” type=”text/css” href=”sheet.css” > </HEAD> rel是关联的意思，关联的是一个样式表(stylesheet)文档

  39. 导入式 操作步骤同链接样式表 使用@import导入 ，语法： <head> <styletype="text/css"> @import url("out.css") </style> </head> 导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import

  40. 链接式和导入式的区别 • 这两种方式的显示效果略有不同。使用链接式时，会在装载页面主体部分之前装载CSS文件，这样显示出来的网页从一开始就是带有样式效果的，而使用导入式时，要在整个页面装载完之后再装载CSS文件，如果页面文件比较大，则开始装载时会显示无样式的页面。从浏览者的感受来说，这是使用导入式的一个缺陷。 • import把CSS文件的内容复制到HTML文件中，link直接向CSS文件读取所定义的CSS样式

  41. DW中CSS的可视化编辑

  42. 【类型】分类 【类型】指的是CSS的文字属性。如字体、大小、粗细等。

  43. CSS长度单位 • 为了正确显示网页中的元素，许多CSS属性都依赖于长度。所有长度都可以为正数或者负数加上一个单位来表示，而长度单位大致可分为三类：绝对单位、相对单位和百分比。 • 绝对单位 绝对单位很简单，包括英寸（in）、厘米（cm）、毫米（mm）、磅（pt）和pica（pc）。 由于同一个长度在不同的显示器或者相同显示器不同的分辨率中显示并不相同，不会按显示器的比例去显示。所以绝对单位很少用。

  44. 相对单位 顾名思义，相对单位的长短取决于某个参照物，如屏幕的分辨率，字体高度等。 有3种相对长度单位，元素的字体高度（em）、字母x的高度（ex）和像素（px）。 em：元素原来给定的字体font-size的值，如果元素原来给定的font-size值是14px，那么1em就是14px。ex：以字体中小写x字母为基准的单位，不同的字体有不同的x高度，因此即使font-size相同而字体不同的话，1ex的高度也会不同。 px：像素指显示器按分辨率得到的小点，因为显示器由于分辨率不同，像素点的大小是不同的，所以像素也是相对单位。目前大多数设计者都倾向于使用像素作为单位。

  45. 百分比 • 百分比显得非常简单，也可看成是一个相对量。如： td{font-size:12px; line-height: 160%; } /*设定段落的行高为字体高度的160% */ hr{ width: 80% } /* 线段长度是相对于浏览器窗口的80% */

  46. 【背景】分类 【背景】指的是背景的相关属性。如背景色、背景图像、重复方向、背景图片是否随着滚动条滚动而改变位置等。

  47. 【区块】分类 【区块】可以设置单词之间的间距、文本在垂直方向和水平方向上的对齐方式等。

  48. 【方框】分类 【方框】可设置方框的相关样式。如方框的宽、高，方框中文本的环绕方式。“填充”指定元素内容与元素边框之间的间距；“边界”指定元素的边框与另一个元素之间的间距。

  49. 【边框】分类 【边框】可以设置元素上、下、左、右的边框样式、边框宽度和边框颜色等。

  50. 【列表】分类

More Related