第一篇:网页设计技术复习题
一、填空
填空答案:
1.Html
CSS
JavaScript 2.letter-spacing
word-spacing 3.超文本标记语言
层叠样式表
基于对象的脚本语言 4.W3C
Strict DTD
Transitonal DTD
Frameset DTD 5.普通标签
自封闭标签
空标签
块级标签
行内标签
不可见标签 6./*
*/
//
/*
href 8.内嵌式
嵌入式
链接式
1、WWW 为了访问网页提供了三个统一,分别是()、()和()。
2、字母间距的设置使用属性(),单词间距的设置使用属性
()。
3、Html是(),CSS是(),JavaScript是()。
4、Html文档格式定义是由()组织制定的,分别是(),()和()。
5、Html标签按使用方法可分为()、()和();按页面浏览时产 生效果分为()、()和()。
6、Html注释标签是(),CSS注释用(),JavaScript多行注释用()。
7、超链接标签是(),其中标签的属性()用于指定链接的URL信息。
8、在HTML文档中应用CSS样式的方式包括()、()和()。
二、单选题
1.D
2.D
3.B
4.D
5.C
6.B
7.D
8.C 9.A
10.D 11.C 12.C 13.B 14.B 15.A 16.A 17.B 18.A 19.A 20.A
1、用HTML标记语言编写一个简单的网页,网页最基本的结构是()
A、
„ „B、
第二篇:【网页设计-最新经典技术文档】网页排版CSS教学(五)
网页排版CSS教学
(五)第五章 文字性质的CSS
本 章 C S S 的 主 要 作 用
本章要介绍的是文字相关的CSS指令。通 常一个网站的内容最多的就是文字了,透过这些文字相关的CSS指令,您可以将您的 网页内容排版得美美的。本章将分两个部份为您介绍,第一部份是字型性质的CSS指令,用以控制文字字型的各种样式;第二部份介绍的是文字性质的CSS指令,用以控 制文字段落的外观及摆设方式。
字 型 性 质 的 C font-family 设定文字字型
支 持:IE3、IE4 适 用:所有元素 可能值:
预设值:视浏览器而定 继承性:有
一般范例:SPAN { family-name : “标楷体” } 同轴范例: font-style 设定字体样式
支 持:IE3、IE4、NC4 适 用:所有元素 可能值: normal 普通字
italic 斜体字
oblique 斜体字
预设值:normal 继承性:有
一般范例:SPAN { font-style : italic } 同轴范例: font-weight 设定字型份量
支 持:IE3、IE4、NC4 适 用:所有元素 可能值: normal 普通字
bold 粗体字
bolder 相对于父元素稍粗
lighter 相对于父元素稍细
S 指 令
S100,200,300, 400,500,600, 700,800,900.数字由小到大代表笔画由细到粗 normal=400 bold=700 预设值:normal 继承性:有
一般范例:SPAN { font-weight : bolder } 同轴范例: font-size 设定文字大小
支 持:IE3、IE4、NC4 适 用:所有元素 可能值:
百分比,以父元素字型大小为基准
预设值:medium 继承性:有
一般范例:SPAN { font-size : 12pt } 同轴范例: font-variant 设定文字转换
支 持:IE3、IE4、NC4 适 用:所有元素 可能值: normal 普通字
small-caps 将小写文字转换为大写
预设值:normal 继承性:有
一般范例:SPAN { font-variant : small-caps } 同轴范例: font 综合设定字型性质
支 持:IE3、IE4、NC4 适 用:所有元素 可能值:
预设值:无 继承性:有
一般范例: SPAN { font : bolder small-caps 12pt/120% Arial } 同轴范例:< SPAN style=“font : bolder small-caps 12pt/120% Arial”>
文 字 性 质 的 C S S 指 令
line-height 设定列高
支 持:IE3、IE4、NC4 适 用:所有元素 可能值:
normal 普通列高,根据字体变化合理高度,视浏览器而定
百分比,相对于元素字型大小为比例
预设值:normal 继承性:有
一般范例:DIV { line-height : 120% } 同轴范例:
支 持:IE3、IE4、NC4 适 用:区块元素 可能值:
center 对 中央
right 对 右边
left 对 左边
justify 左右对
预设值:视浏览器而定 继承性:有
一般范例:DIV { text-align : center } 同轴范例:
支 持:IE4 适 用:同轴元素 可能值:
top 对 同列最高元素顶端
bottom 对 同列最低元素底端
baseline 对 底线 middle 对 中央
sub 将元素置于下标
super 将元素置于上标
text-top 对 文字顶端
text-bottom 对 文字底端
参照元素本身列高,以父元素底线为基准作位移
预设值:baseline 继承性:有
一般范例:SPAN { vertical-align : sub } 同轴范例: text-decoration 设定文字装饰
支 持:IE3、IE4、NC4 适 用:所有元素 可能值: none 普通字
underline 文字加底线
overline 文字加顶线
line-through 文字加删除线
blink 设定文字闪烁
预设值:none 继承性:有
一般范例:SPAN { text-decoration : blink } 同轴范例: text-transform 设定文字转换
支 持:IE3、IE4、NC4 适 用:所有元素 可能值: none 普通字
capitalize 将英文单字地一个字母转换为大写
uppercase 将所有文字转换为大写
lowercase 将所有文字转换为小写
预设值:none 继承性:有
一般范例:SPAN { text-transform : uppercase } 同轴范例: letter-spacing 设定字母间隔
支 持:IE4 适 用:所有元素 可能值: normal 不改变字母间隔,使用浏览器预设值
预设值:normal 继承性:有
一般范例:SPAN { letter-spacing : 0.5pt } 同轴范例: text-indent 设定文字缩排
支 持:IE3、IE4、NC4 适 用:区块元素 可能值:
以父元素宽Q291911320度为基准的百分比值
预设值:0 继承性:有
一般范例:DIV { text-indent : 3pt } 同轴范例:
第三篇:【网页设计-最新经典技术文档】网页排版CSS教学(六)
网页排版CSS教学
(六)第六章 区块性质的CSS
本 章 C S S 的 主 要 作 用
本章介绍的是区块性质的CSS指令以及它 们的应用与特性,可以设定与控制区块的位置,大小及边缘宽度等性质。本章也将分成 两个部份为您介绍,第一部份要讲的是区块各部份名称与概念的介绍,对于区块有一点概念后,第二部份才再进入区块性质的CSS指令的介绍。
区 块 各 部 份 名 称 与 概 念
其实我们还可以把所谓的「区块」细分成如 下面图形所表示的几个部份。
由外而内为您作介绍:
MARGIN: 边缘,虽然是通透的部份,但是可以藉由边缘宽度的调整来达到内容元素位置调整的目的。
BORDER: 边框,就是外框的部份,经由CSS指令您可以控制边框的宽度、颜色和样式,不再死板!
PADDING: 补白,也就是内容元素与框架之间的这段距离与空间,也可以利用CSS指令去控制大小。
元素: 内容元素,也就是您放置于该区块内的内容,或为文字,或为图形,或为所有其它元素。
附带一提的是,所谓的区块宽度是指整个包含边缘在内的宽度,而元素宽度指的只 是内容元素的宽度。有了这些对区块各部份的基本概念与认识之后,接下来就要来介绍控制区块各部份分别的的CSS指令了!
区 块 性 质 的 C S S 指 令
margin-top
设定上边缘宽度 margin-right 设定右边缘宽度
margin-bottom 设定下边缘宽度 margin-left
设定左边缘宽度
支 持:IE3、IE4、NC4 适 用:区块元素 可能值:
百分比,相对于元素宽度大小
auto 使用浏览器预设值
预设值:0 继承性:无
一般范例:DIV { margin-top : 20pt } 同轴范例:
支 持:IE3、IE4、NC4 适 用:区块元素 可能值:
依序设定top,right,bottom,left的边缘宽度
{1,4} 百分比,相对于元素宽度大小
auto {1,4} 使用浏览器预设值
预设值:无 继承性:无
一般范例:DIV { margin : 20pt 15pt 10pt 5pt } 同轴范例:
要附带说明的是,如果指定了四个合法设定值,则会依序套用于四个边缘;如果只 有指定一个合法设订值,则会统一套用于四个边持;若只有指定二或三个合法设定值,则未指定的边缘会套用对边的宽度设定值。
DIV { margin: 20pt } →top=20pt;right=20pt;bottom=20pt;left=20pt DIV { margin: 20pt 15pt } →top=20pt;right=15pt;bottom=20pt;left=15pt DIV { margin: 20pt 15pt 10pt } →top=20pt;right=15pt;bottom=10pt;left=15pt border-top-width
设定上边框宽度 border-right-width 设定右边框宽度
border-bottom-width设定下边框宽度 border-left-width
设定左边框宽度
支 持:IE4、NC4 适 用:区块元素 可能值:
thin < medium < thick thin 统一的绝对单位,因浏览器而异
medium 统一的绝对单位,因浏览器而异
thick 统一的绝对单位,因浏览器而异
预设值:medium 继承性:无
一般范例:DIV { border-top-width : 2pt } 同轴范例:
支 持:IE4、NC4 适 用:区块元素 可能值:
依序设定top,right,bottom,left的边框宽度 thin {1,4} 统一的绝对单位,因浏览器而异
medium {1,4} 统一的绝对单位,因浏览器而异
thick {1,4} 统一的绝对单位,因浏览器而异
一般范例:DIV { border-width : 4pt 3pt 2pt 1pt } 同轴范例:
要附带说明的是,如果指定了四个合法设定值,则会依序套用于四个边框;如果只 有指定一个合法设订值,则会统一套用于四个边框;若只有指定二或三个合法设定值,则未指定的边框会套用对边的宽度设定值。
DIV { border-width: 2pt } →top=2pt;right=2pt;bottom=2pt;left=2pt DIV { border-width: 2pt 3pt } →top=2pt;right=3pt;bottom=2pt;left=3pt DIV { border-width: 2pt 3pt 4pt } →top=2pt;right=3pt;bottom=4pt;left=3pt border-top-color
设定上边框颜色 border-right-color 设定右边框颜色
border-bottom-color 设定下边框颜色 border-left-color 设定左边框颜色
支 持:IE4、NC4 适 用:区块元素 可能值:
预设值:color性质之值 继承性:无
一般范例:DIV { border-top-color : BLUE } 同轴范例:
支 持:IE4、NC4 适 用:区块元素 可能值:
依序设定top,right,bottom,left的边框颜色
预设值:无 继承性:无
一般范例:DIV { border-color : RED GREEN BLUE YELLOW } 同轴范例:
要附带说明的是,如果指定了四个合法设定值,则会依序套用于四个边框;如果只 有指定一个合法设订值,则会统一套用于四个边框;若只有指定二或三个合法设定值,则未指定的边框会套用对边的颜色设定值;若无指定此一性质,则套用color性质之设定值。
DIV{border-color:RED } →top=RED;right=RED;bottom=RED;left=RED
DIV{border-color:RED GREEN } →top=RED;right=GREEN;bottom=RED;left=GREEN DIV{border-color: RED GREEN BLUE} →top=RED;right=GREEN;bottom=BLUE;left=GREEN border-top-style
设定上边框样式 border-right-style 设定右边框样式
border-bottom-style 设定下边框样式 border-left-style
设定左边框样式
支 持:IE4、NC4 适 用:区块元素 可能值:
none 不显示边框
dotted 虚线(IE4、NC4浏览器当作实线)
dashed 短直线(IE4、NC4浏览器当作实线)
solid 实线
double 双直线
ridge 3D凸线
groove 3D凹线
outset 3D隆起(IE4不显示)
inset 3D嵌入(IE4不显示)
预设值:none 继承性:无
一般范例:DIV { border-top-style : inset } 同轴范例:
支 持:IE4、NC4 适 用:区块元素 可能值:
依序设定top,right,bottom,left的边框样式 none {1,4} 不显示边框
dotted {1,4} 虚线(IE4、NC4浏览器当作实线)
dashed {1,4} 短直线(IE4、NC4浏览器当作实线)
solid {1,4} 实线
double {1,4} 双直线
ridge {1,4} 3D凸线
groove {1,4} 3D凹线
outset {1,4} 3D隆起(IE4不显示)
inset {1,4} 3D嵌入(IE4不显示)
预设值:无 继承性:无
一般范例:DIV { border-style : ridge groove outset inset } 同轴范例:
要附带说明的是,如果指定了四个合法设定值,则会依序套用于四个边框;如果只 有指定一个合法设订值,则会统一套用于四个边框;若只有指定二或三个合法设定值,则未指定的边框会套用对边的样式设定值。
DIV{border-width:outset} →top=outset;right=outset;bottom=outset;left=outset DIV{border-width:outset inset} →top=outset;right=inset;bottom=outset;left=inset DIV{border-width:outset inset ridge} →top=outset;right=inset;bottom=ridge;left=inset border-top
综合设定上边框性质 border-right 综合设定右边框性质
border-bottom 综合设定下边框性质 border-left
综合设定左边框性质
支 持:IE4、NC4 适 用:区块元素
可能值:
预设值:无 继承性:无
一般范例:DIV { border-top : 2pt solid BLUE } 同轴范例:
支 持:IE4、NC4 适 用:区块元素
可能值:
预设值:无 继承性:无
一般范例:DIV { border : 2pt solid BLUE } 同轴范例:
要附带说明的是,这个指令只能指定一组设定值,也就是说,上右下左四个边框都将套用同一组的设定值,而不能作个别边框的设定值变化。
padding-top
设定上方补白宽度 padding-right 设定右方补白宽度
padding-bottom 设定下方补白宽度 padding-left
设定左方补白宽度
支 持:IE4、NC4 适 用:区块元素
可能值:
百分比,相对于元素宽度大小
预设值:0 继承性:无
一般范例:DIV { padding-top : 5pt } 同轴范例:
支 持:IE4、NC4 适 用:区块元素
可能值:依序设定top,right,bottom,left的补白宽度
{1,4} 百分比,相对于元素宽度大小
预设值:无 继承性:无
一般范例:DIV { padding : 2pt 5pt 2pt 5pt } 同轴范例:
要附带说明的是,如果指定了四个合法设定值,则会依序套用于四个补白;如果只有指定一个合法设订值,则会统一套用于四个补白;若只有指Q291911320定二或三个合法设定值,则未指定的补白会套用对边的宽度设定值。
DIV { padding: 1pt } →top=1pt;right=1pt;bottom=1pt;left=1pt DIV { padding: 1pt 2pt } →top=1pt;right=2pt;bottom=1pt;left=2pt DIV { padding: 1pt 2pt 3pt } →top=1pt;right=2pt;bottom=3pt;left=2pt
第四篇:【网页设计-最新经典技术文档】网页排版CSS教学(三)
网页排版CSS教学
(三)第三章 CSS的应用补充 挑 选 者 特 性 的 应 用
在讲挑选者的特性之前,要提一下的是CSS继承的特性。所谓的继承的特性是指被包在内部的标签将拥有外部标签的样式性质。继承的特性最典型的应用通常发挥在预设整份网页的样式,而要指定为其它样式的部份再依要设定在个别元素里即可。这项特性可以提供网页设计者更理想的发挥空间。
接下来就要讲挑选者特性的应用!其实这部份应该算是声明的一种方式,但是在您看过第二章的基本的声明与应用後,到这边再讲挑选者您会比较有概念点。在CSS应用或设计的时候,有几种依据元素的关系或性质来设定显示特定性质的方法,就是挑选者特性的应用,能让您在控制与应用上更加灵活。
一、前後文挑选者:依声明标签前後文关系显示特定性质的方法。
前後文挑选者便是当浏览器在显示HTML原始码所指定的内容时,会考虑元素标签的前後关系,而去显示指定的样式声明。也就是说只要HTML原始码内的标签排列前後顺序符合时,该项声明便会发生作用了!
元素A(标签A)元素B(标签B)元素C(标签C)...{样式规则} 要注意的是,前後文挑选者的声明跟集体声明很像,但是集体声明的元素标签间要用逗号隔开,而用前後文挑选者声明时元素标签间要用空格隔开;而这两种声明方式您可以混合使用。
元素A 元素B, 元素C 元素D 元素E,...{样式规则} 这样您就可以用集体声明的方式,声明数组前後文挑选者的样式规则。
二、类别挑选者:让单一或数个标签使用同组样式规则的方法。
类别(class)可以让不同的元素标签共同套用同一组样式性质或相同的元素标签套用不同组的样式性质。首先介绍的是如何让不同的元素套用同一组样式性质,如下面范例所写即可。
.blue { color : BLUE }-->
...
...
...
...
... 要注意在声明时前面的小点,CLASS名称可任取。而要让相同的元素标签套用不同组的样式性质时,也可以应用类别特性来设定。
例如:
通常是将整个的 结构写在网页的
部份之中。这种用法的优点就是在於整篇文件的统一性,只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。三、使用 LINK标签: 将样式规则写在.css的样式档案中,再以标签引入。
假设我们把样式规则存成一个example.css的档案,我们只要在网页中加入 即可套用该样式档案中所制定好的样式了。通常是将LINK标签写在网页的
部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。四、使用@import引入: 跟LINK用法很像,但必 放在 中。
例如:
要注意的是,行末的分号是绝对不可少的!切记切记!
很明显的,不管是LINK还是@import的用法都可能可以直接套用他人现有的样式表。不过,基於网路的礼仪,这种事别做的好,至少也应该知会 对方一声,要先取得人家的同意才行!
而四种应用方法各有其优缺点,您可以综合地使用,并不会相互抵触。但是如果相同的性质属性遇上重复的声明的话,就要考量套用优先权的问题了!一般来讲,优先权的顺序有以下的几点原则:
网页设计者的样式设定 > 使用者的样式设定 > 浏览器的样式设定 STYLE属性的样式设定 > STYLE标签样式设定 > 链结进来的样式设定 後面声明的样式设定 > 前面的样式设定
所谓『链结进来的样式设定』指的就是用上面提到过的LINK标签与@import引入这两种应用方式所链结进来的的样式设定。
以上就是CSS最基本的声明与应用的方法介绍,有了这些基本的认识与方法,您已经可以开始建立您的样式表!除了上面提到的Q291911320基本的声明与应用的方法之外,还有其它的声明与应用的方法,将为您在下一章中再作介绍。
文档为doc格式
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:645879355@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。
电工技术复习题
电工技术复习题一、填空题1、电路主要由 电源 、 负载 、 中间环节 三个基本环节组成。2、并联电路具有 分流 作用,且电阻......
技术竞赛复习题
2007年技术系统知识竞赛复习题 (安装分公司) 一、技术通用部分 1、什么是民用建筑节能? 答:民用建筑节能,是指民用建筑在规划、设计建造和使用过程中,通过采用新型墙体材料,执行建......
供电技术复习题
供电技术复习题 1、 电能有哪些优点?电力系统的构成、电力系统运行的特点是什么? 2、 电气元件额定电压的确定 3、 中性点运行方式有哪几类?各有何优缺点?适用范围? 4、 供电质量......
《CADCAM技术》复习题
复习题 第一章概述 1.常用缩写名词的中文和英文全称 缩写 中文全称英文全称 CAD 计算机辅助设计 Computer Aided Design CAPP 计算机辅助工艺过程设计 Computer Aided......
《现代教育技术》复习题
现代教育技术复习题 单选题(共90题) 1 教育技术研究的主要领域是 • 开发、应用、购置、建构、评价• 组织、设计、实验、管理、辅导• 开发、应用、管理、设计、评价 • 远......
现代教育技术复习题
一 基本知识点 教育技术的研究范畴 教育技术的主要目的教育技术与信息技术的关系“经验之塔”理论 数码照相机的性能指标 信息化的教学模式 新课程标准中,学习目标的类型 课......
《技术经济学》复习题
《技术经济学》复习题一、简答题1、科学技术经济的实质及表现形式。2、可行性研究的内容主要有哪些?3、静态指标和动态指标的区别。4、技术经济预测的方法有哪些?5、设备的有......
现代教育技术复习题
《现代教育技术》复习题 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 三维教学目标是什么?“学教并重”教学设计的主要环节是什么?学习者特征分析主要涉及哪些方面?请根据自己......