1 / 57

作业中的问题

作业中的问题. url （统一资源定位器） url 一般作为哪些属性的取值？ href=“index.asp” src=“logo.gif” url 的种类 相对 url 绝对 url url 格式的类型 协议名 :// 主机 ip 或域名 / 文件目录 / 文件名. url 协议的类型. 常见的 url 协议的类型 http ftp file://192.168.88.6/web/wy.gif 当在 DW 中建立网站目录后，那么网站目录内的文件之间建立链接就会自动采用相对链接的方式，相对链接 以网站目录为基准 。

duc
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. 作业中的问题 url（统一资源定位器） • url一般作为哪些属性的取值？ href=“index.asp” src=“logo.gif” • url的种类 相对url 绝对url • url格式的类型 协议名://主机ip或域名/文件目录/文件名

  2. url协议的类型 • 常见的url协议的类型 • http • ftp • file://192.168.88.6/web/wy.gif 当在DW中建立网站目录后，那么网站目录内的文件之间建立链接就会自动采用相对链接的方式，相对链接以网站目录为基准。 若没建立网站目录，DW则采用file协议方式，以磁盘根目录为基准，建立链接，而这是我们应该避免的

  3. CSS 概述

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

  5. 为什么需要CSS • 由于html的主要功能是描述网页的结构，所以控制网页外观和表现的能力很差， 1 无法精确到像素级调整文字大小，行间距等， 2 不能对多个网页元素进行统一的样式设置，只能一个一个元素的设置。 • 学习CSS可实现对网页的外观和排版进行更灵活的控制，使网页更美观 • CSS禅意花园（网站，书名）

  6. 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> <h2><font color="#FF0000" face="黑体">CSS标记4</font></h2> <p>CSS标记的正文内容4</p> </body> 产生的问题：代码冗余 如果要修改元素的样式，也要一个个的改，修改工作量大

  7. 使用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</font></h2> <p>CSS标记的正文内容3</p> <h2>CSS标记4</font></h2> <p>CSS标记的正文内容4</p>

  8. html的弱点 • 而且有很多表现用html是根本无法修改的 • 最典型的是： 行距 以象素级修改字体大小 为文字设置背景色，边框等

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

  10. CSS样式规则的组成－选择器 • 一条CSS样式规则由选择器(selector)和声明(declarations)组成。 • 选择器是为了选中网页中某些元素的，选择器可以是一个标记名，表示将网页中该标记的所有元素都选中，也就是定义了CSS规则的作用对象。选择器也可以是一个自定义的类名，表示将自定义的一类元素全部选中，为了对这一类元素进行标识，必须在这一类的每个元素的标记里添加一个html属性class＝"类名"；选择器还可以是一个自定义的id名，表示选中网页中某一个唯一的元素，同样，该元素也必须在标记中添加一个html属性id＝"id名"让CSS来识别。

  11. CSS的声明 • 而声明则用于定义元素样式。在上面的示例中，h1 是选择器，介于花括号{ }之间的所有内容都是声明，声明又可以分为属性和值，属性和值用冒号隔开。（注意CSS的属性和值的写法与html属性的区别）。属性和值可以设置多个，从而实现对同一标记声明多种样式风格。如果要设置多个属性和值，则每条声明之间要用分号隔开；

  12. CSS属性值的写法 • 如果属性的某个值不是一个单词，则值要用引号引起来： • p {font-family: "sans serif"}； • 如果一个属性有多个值，则每个值之间要用空格隔开：a {margin:6px 4px 3px}； • 要为某个属性设置多个候选值，则每个值之间用逗号隔开：p {font-family: "Times New Roman", Times, serif}；

  13. 在HTML中引入CSS的方法

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

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

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

  17. 链接式和导入式 • 链接式和导入式的目的都是将一个独立的CSS文件引入到HTML文件，我们在学习CSS或制作单个网页时，为了方便可采取行内式或嵌入式方法，但若要制作网站则主要应采用链接式方法引入CSS。 • 链接式和导入式最大的区别在于链接式使用HTML的标记引入外部CSS文件，而导入式则是用CSS的规则引入外部CSS文件，因此它们的语法不同

  18. 链接式和导入式的区别 • 链接式是在网页文档头部通过link标记引入外部CSS文件，格式如下： <link href="style1.css" rel="stylesheet" type="text/css" /> • 而使用导入式，则需要使用如下语句： <style type="text/css"> @import url("style2.css"); </style>

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

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

  21. CSS选择器的分类 • 标记选择器 • 伪类选择器 • 类选择器 • id选择器

  22. 标记选择器 • 标记是元素固有的属性，CSS标记选择器用来声明哪种标记采用哪种CSS样式，因此，每一种html标记的名称都可以作为相应的标记选择器的名称。如图1所示，标记选择器将拥有同一个标记的所有元素全部选中。如： <style type="text/css"> p{ /* 标记选择器 */ color:blue; font-size:18px; } </style>

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

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

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

  26. 声明 声明 类别名称 .class { color: green; font-size: 20px; } 类别选择器 属性 值 属性 值 • 以上定义了类别名的元素都会应用相应的类选择器的样式，其中第四行通过class="one two"将两种样式同时加入，得到红色20象素的大字体。第一行的p元素因未定义类别名则不受影响，仅作为对比时参考

  27. <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> <p class="one two">同时应两种class选择器样式</p> <h3 class="two">h3同样适用</h3>

  28. id选择器 • id选择器的使用方法与class选择器基本相同，不同之处在于一个id选择器只能应用于html文档中的一个元素，因此其针对性更强，而class选择器可以应用于多个元素。id选择器以半角“#”开头，且id名称的第一个字母不能为数字

  29. 声明 声明 #id { color: yellow; font-size: 30px; } 属性 值 属性 值 ID选择器 ID选择器

  30. 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> <p id="two">ID选择器3</p> <p id="one two">ID选择器3</p>

  31. 上例中，第一行应用了#one的样式，第二行和第三行将一个id选择器应用到了两个元素上，显然违反了一个id选择器只能应用在一个元素上的规定，但浏览器却也显示了CSS样式风格且没有报错。虽然如此，我们在编写CSS代码时，还是应该养成良好的编码习惯，一个id最多只能赋予一个html元素，因为每个元素定义的id不只是CSS可以调用，JavaScript等脚本语言也可以调用，如果一个html中有两个相同id属性的元素，那么将导致JavaScript在查找id时出错，例如函数getElementById ( )。第四行在浏览器中没有任何CSS样式风格显示，这意味着ID选择器不支持像class选择器那样的多风格同时使用。因为元素和id是一一对应的关系，不能为一个元素指定多个id，也不能将多个元素定义为一个id。类似id="one two"这样的写法是完全错误的

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

  33. DW中对CSS的可视化编辑

  34. 新建CSS规则的过程 • DW对CSS的建立和编辑有很好的支持，对CSS的所有操作都集中在“CSS样式”面板中，一般我们首先要点“新建CSS规则” 来新建样式，这时会弹出如图所示的对话框：

  35. CSS规则定义面板

  36. 编辑CSS样式－也在CSS面板里

  37. 用CSS修饰文本－简单CSS属性的应用

  38. CSS的文本属性 • CSS中控制文本样式的属性主要有font-属性类和text-属性类，再加上修改颜色的color属性和行高line-height属性。DW中这些属性的设置是放在CSS规则定义面板的“类型”和“区块”中的。 • 其中text-indent表示首行缩进，在每段开头空两格通常是用text-indent: 2em;来实现，text-decoration: none;表示去掉下划线，line-height: 150%;表示调整为1.5 倍行间距。

  39. 文本对齐属性(text-align) 这个属性用来设定文本的对齐方式。有以下值： left (居左，缺省值) right (居右) center (居中) justify (两端对齐) 示例代码如下： .p2 {text-align:right} 注意：行内元素应用对齐属性无效

  40. 文本修饰属性(text-decoration) 这个属性主要设定文本划线的属性。有以下值： none (无，缺省值) underline (下划线) overline (上划线) line-through (当中划线) 示例代码如下： .p2 {text-decoration: underline overline;}

  41. 文本缩进属性(text-indent) 这个属性设定文本首行缩进。其值有以下设定方法： length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px)) percentage (百分比，相当于父对象宽度的百分比) 示例代码如下： .p1 {text-indent: 8mm}

  42. 行高属性(line-height) 这个属性设定每行之间的距离。其值有以下设定方法： normal (缺省值) length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px)) percentage (百分比，相当于父对象高度的百分比) 示例代码如下： .p1 {line-height:1cm}

  43. 颜色属性(color) 用颜色属性(color)可以改变文本的字体颜色。示例代码如下： .p1{color:gray}

  44. 字间距属性(letter-spacing) 这个属性用来设定字符之间的距离。 normal (缺省值) length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px)) 示例代码如下： .p1 {letter-spacing: 3mm}

  45. CSS的层叠性

  46. CSS具有两个特性：层叠性和继承性。 • 层叠性是指当有多个选择器都作用于同一元素时，CSS怎样处理？CSS的处理原则是： • 1）如果多个选择器定义的规则不发生冲突，则元素将应用所有选择器定义的样式。如：

  47. <style type="text/css"> • p{ /* 标记选择器 */ • color:blue; • font-size:18px; • } • .special{ /* 类别选择器 */ • font-style: italic; /* 斜体 */ • text-decoration: underline; /* 有下划线 */ • } • </style> • <body> • <p>class选择器与标记选择器1</p> • <p>class选择器与标记选择器2</p> • <p class="special">class选择器与标记选择器3</p> • <p class="special">class选择器与标记选择器4</p> • <p>class选择器与标记选择器5</p>

More Related