工作内联单
共 1 页第 1 页
知识点:CSS样式表的简单应用 知识点:CSS样式表的简单应用 考点说明: CSS样式表是《网络技术应用》第5章第2节中的一个知识点,属于学业水平测试的一个重要考点,也是一个难点。 一、选择题: 1. 下面哪种不是我们常见的CSS样式表。() A. 嵌入式样式表 B.内联样式表 C. 外联式样式表 D. 关联式样式表 2.根据下图判断当前页面使用的CSS加入方式是( ) A. 嵌入式样式表 B. 内联式样式表 C. 外联式样式表 D. 依赖式样式表 3. 在HTML中加入
,此为( ) A. 嵌入式样式表 B. 内联式样式表 C. 外联式样式表 D. 动态式样式表 4. 在HTML中加入CSS的方法有多种,其中把样式代码定义成一个文件,然后链接到被引用的网页中,这种方法称为( ) A. 直接编写 B. 外联式样式表 C. 内联式样式表 D. 嵌入式样式表 5. 在网站开发时,为了保证网站页面风格的一致,最好采用( ) A. 外联式样式表 B. 内联式样式表 C. 嵌入式样式表 D. JavaScript 6. 所谓外联式样式表,就是把样式定义为一个文件,然后在网页中调用该文件,这个文件的扩展名是( ) A. doc B. txt C. css D. bmp 7. css样式表中,若想只对当前页面应用样式,最好使用( ) A. 嵌入式样式表 B. 内联式样式表 C. 外链式样式表 D. 直接编写 8. 可以通过一个css文件管理网站中多个网页外观设置的是( ) A. 外联式样式表 B. 内联式样式表 C. JavaScript样式表 D. VBScript样式表关于内联元素和块元素,html 关于内联元素和块元素 我们首先要了解,所有的html元素,都要么是block(块元素)、要么是inline(内联元素)。下面了解一下block、inline各自的特点: block元素的特点: 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度。 inline元素的特点: 和其他元素都在一行上; 高,行高及顶和底边距不可改变; 宽度就是它的文字或图片的宽度,不可改变。 我们来详细了解它们的情况。 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css 以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者(不包括视力障碍者、盲人等)的角度来看这两种布局,除了页面载入速度的差别外,没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后,两者所表现出来的差异就非常大了。基于良好重构理念设计的css 布局页面源码,至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说,css layout code应该有更好的美学体验。 你能够把块容器元素div想象成一个个box,或者如果你玩过剪贴文载的话,那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图,用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸,网页布局设计也遵循了同样的模式。 内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素“a”。 需要说明的是:inline element的中文叫法,有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译,爱怎么叫怎么叫吧。另外提到内联元素,我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。 块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。 可变元素是基于以上两者随环境而变化的,它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。
CSS样式应用 课题名称:CSS样式应用 教学目的: 知识目标:1、掌握css基本语法 2、了解css 特点 能力目标:运用CSS样式布局网页的能力 情感目标:提高学生团结合作精神,提高学生竞争意识 教学重点:1、css基本语法 2、css基本特点 教学难点:样式表的应用 教学方法:讲授法、演示法、讨论法 课时安排:2课时 教学环境:多媒体教室 学习过程: 教学环节教学内容学生活动 新课导入请同学们观看下面两幅图,对比说出两幅图的差异: 图一未应用CSS样式找出两幅图片的差异,并由组长进行总结
图二应用了CSS样式 任务1 CSS样式应用 利用CSS将页面独立成更多的区域,在打开页面的时候,逐 层加载。这就避免了象表格嵌套那样将整个页面圈在一个大 表格里,使得页面体积变小,浏览速度变快。 一、如何插入样式表 当浏览器读到一个样式表时,浏览器会根据它来格式化 HTML文档。插入样式表的方法有三种: (1)外部样式表 顾名思义,外部样式表是指储存在html文档之外的独立 CSS文件中的样式表。当样式需要应用于很多页面时,外部 样式表将是理想的选择。在使用外部样式表的情况下,你可 以通过改变一个文件来改变整个站点的外观。每个页面使用 元素链接到样式表。 元素在(文档的)头部
中: 浏览器会从文件mystyle.css中读到样式声明,并根据它 美化HTML文档。外部样式表可以在任何文本编辑器中进行 编辑,但该文件中不能包含任何的html元素。样式表应该 以.css 扩展名进行保存。下面是一个样式表文件的例子: hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} 不要在属性值与单位之间留有空格。例如使用 “margin-left: 20 px” 而不是“margin-left: 20px”,它仅在IE6中 有效,但是在Mozilla/Firefox或Netscape中却无法正常工作。 (2)内部样式表 新建html文 件,输入样式 表代码,熟悉 语法规则CSS作业 一、问答题 1、CSS选择器以及引入方式哪几种,CSS选择器有哪些以及它们的优先级 1、#id选择器 .class选择器 标签名选择器 2、内链式样式表 嵌入式样式表 外联式样式表 导入式样式表 3、行内样式 > ID选择器样式 > 类选择器样式 2、行内元素和块级元素的区别,分别举出6个行内元素和块级元素,块级元素的特点是什 么 A(1)行内元素与块级元素直观上的区别 行内元素会在一条直线上排列,都是同一行的,水平方向排列; 块级元素各占据一行,垂直方向排列; 块级元素从新行开始结束接着一个断行。 (2)块级元素可以包含行内元素和块级元素。 行内元素不能包含块级元素。 (3)行内元素与块级元素属性的不同,主要是盒模型属性上 行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效 (4)行内元素转换为块级元素 display:block (字面意思表现形式设为块级)
B行内元素 块级元素