作业中问题.ppt
《作业中问题.ppt》由会员分享,可在线阅读,更多相关《作业中问题.ppt(57页珍藏版)》请在三一文库上搜索。
1、作业中的问题,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中建立网站目录后,那么网站目录内的文件之间建立链接就会自动采用相对链接的方式,相对链接以网站目录为基准。 若没建立网站目录,DW则采用file协议方式,以磁盘根目录为基准,建立链接,而这是我们应该避免的,CSS 概述,CSS 概述,CS
2、S是Cascading Styles Sheets的缩写,中文译名为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 HTML和CSS的关系就是“内容”和“形式”的关系,由HTML组织网页的结构和内容,而通过CSS来决定页面的表现形式,为什么需要CSS,由于html的主要功能是描述网页的结构,所以控制网页外观和表现的能力很差, 1 无法精确到像素级调整文字大小,行间距等, 2 不能对多个网页元素进行统一的样式设置,只能一个一个元素的设置。 学习CSS可实现对网页的外观和排版进行更灵活的控制,使网页更美观 CSS禅意花园(网站,书名),html只能对元素一个一个的设置
3、样式, CSS标记1 CSS标记的正文内容1 CSS标记2 CSS标记的正文内容2 CSS标记3 CSS标记的正文内容3 CSS标记4 CSS标记的正文内容4 产生的问题:代码冗余 如果要修改元素的样式,也要一个个的改,修改工作量大,使用CSS后,h2 font-family:黑体; color:red; CSS标记1 CSS标记的正文内容1 CSS标记2 CSS标记的正文内容2 CSS标记3 CSS标记的正文内容3 CSS标记4 CSS标记的正文内容4,没有了代码冗余 如果要修改,只需修改选择器中的内容就可以了,html的弱点,而且有很多表现用html是根本无法修改的 最典型的是: 行距 以
4、象素级修改字体大小 为文字设置背景色,边框等,CSS的语法,CSS样式表由一系列样式规则组成,浏览器将这些规则应用到相应的元素上,下面是一条样式规则。 h1 color: red; font-size: 25px; ,CSS样式规则的组成选择器,一条CSS样式规则由选择器(selector)和声明(declarations)组成。 选择器是为了选中网页中某些元素的,选择器可以是一个标记名,表示将网页中该标记的所有元素都选中,也就是定义了CSS规则的作用对象。选择器也可以是一个自定义的类名,表示将自定义的一类元素全部选中,为了对这一类元素进行标识,必须在这一类的每个元素的标记里添加一个html属
5、性class“类名“;选择器还可以是一个自定义的id名,表示选中网页中某一个唯一的元素,同样,该元素也必须在标记中添加一个html属性id“id名“让CSS来识别。,CSS的声明,而声明则用于定义元素样式。在上面的示例中,h1 是选择器,介于花括号 之间的所有内容都是声明,声明又可以分为属性和值,属性和值用冒号隔开。(注意CSS的属性和值的写法与html属性的区别)。属性和值可以设置多个,从而实现对同一标记声明多种样式风格。如果要设置多个属性和值,则每条声明之间要用分号隔开;,CSS属性值的写法,如果属性的某个值不是一个单词,则值要用引号引起来: p font-family: “sans se
6、rif“; 如果一个属性有多个值,则每个值之间要用空格隔开:a margin:6px 4px 3px; 要为某个属性设置多个候选值,则每个值之间用逗号隔开:p font-family: “Times New Roman“, Times, serif;,在HTML中引入CSS的方法,在HTML中引入CSS的方法,HTML和CSS是两种作用不同的语言,它们同时对一个网页产生作用,因此必须通过一些方法,将CSS与HTML挂接在一起,才能正常工作。 在HTML中,引入CSS的方法有行内式、内嵌式、导入式和链接式4种,行内式,html标记都有一个通用的style属性,行内式就是在该属性内添加CSS属性和
7、值,如: 有时我们需要做测试或对个别元素设置CSS属性时,可以使用这种方式,这种方式由于CSS属性就在标记内,其作用对象就是标记内的元素。所以不需要指定CSS的选择器,只需要书写CSS属性和值。但它没有体现出CSS统一设置许多元素样式的优势。,嵌入式,嵌入式将页面中各种元素的CSS样式设置集中写在和之间,标记是专用于引入嵌入式CSS的一个html标记,它只能放置在文档头部,即下面这段代码只能放置在html文档的和之间。 h1 color: red; font-size: 25px; 对于单一的网页,这种方式很方便。但是对于一个包含很多页面的网站,如果每个页面都以嵌入式的方式设置各自的样式,不仅
8、麻烦,冗余代码多,而且网站每个页面的风格不好统一。因此一个网站通常都是编写一个独立的CSS文件,使用以下两种方式之一,引入到网站的所有html文档中,注意:可以将CSS样式规则写在注释符内,不会被忽略,链接式和导入式,链接式和导入式的目的都是将一个独立的CSS文件引入到HTML文件,我们在学习CSS或制作单个网页时,为了方便可采取行内式或嵌入式方法,但若要制作网站则主要应采用链接式方法引入CSS。 链接式和导入式最大的区别在于链接式使用HTML的标记引入外部CSS文件,而导入式则是用CSS的规则引入外部CSS文件,因此它们的语法不同,链接式和导入式的区别,链接式是在网页文档头部通过link标记
9、引入外部CSS文件,格式如下: 而使用导入式,则需要使用如下语句: import url(“style2.css“); ,此外,这两种方式的显示效果也略有不同。使用链接式时,会在装载页面主体部分之前装载CSS文件,这样显示出来的网页从一开始就是带有样式效果的,而使用导入式时,要在整个页面装载完之后再装载CSS文件,如果页面文件比较大,则开始装载时会显示无样式的页面。从浏览者的感受来说,这是使用导入式的一个缺陷。 import把CSS文件的内容复制到HTML文件中,link直接向CSS文件读取所定义的CSS样式,选择器的分类(重点),CSS选择器的分类,标记选择器 伪类选择器 类选择器 id选择
10、器,标记选择器,标记是元素固有的属性,CSS标记选择器用来声明哪种标记采用哪种CSS样式,因此,每一种html标记的名称都可以作为相应的标记选择器的名称。如图1所示,标记选择器将拥有同一个标记的所有元素全部选中。如: p /* 标记选择器 */ color:blue; font-size:18px; ,伪类选择器,所谓伪类就是指标记的状态。 网页中的链接标记能响应浏览者的点击。a标记有四种状态能描述这种响应,分别是a:link、a:visited、a:hover、a:active,a标记在这几种状态下的样式能够通过伪类选择器来分别定义,伪类选择器的标记和伪类之间用“:”隔开。其格式为,通过伪类
11、选择器制作动态超链接,伪类选择器可以看成是一种特殊的标记选择器,它用来选中在某种状态下的标记 如果分别定义a标记在四种不同的状态下具有不同的颜色,在鼠标悬停时还将添加下划线。需要注意两点:一、链接伪类选择器的书写应遵循LVHA的顺序,即CSS代码中四个选择器出现的顺序应为a:link a:visited a:hover a:active,若违反这种顺序鼠标停留和激活样式就不起作用了。二、各种伪类选择器将继承a标记选择器定义的样式。,类选择器,标记选择器一旦声明,那么页面中所有该标记的元素都会产生相应的变化。 例如当声明标记为红色时,页面中所有的元素都将显示为红色 但是如果希望其中某一些元素不是
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 作业 问题
链接地址:https://www.31doc.com/p-2717083.html