CSS及XHTML技术.docx
- 文档编号:551596
- 上传时间:2023-04-29
- 格式:DOCX
- 页数:29
- 大小:229.46KB
CSS及XHTML技术.docx
《CSS及XHTML技术.docx》由会员分享,可在线阅读,更多相关《CSS及XHTML技术.docx(29页珍藏版)》请在冰点文库上搜索。
CSS及XHTML技术
DHTML技术
1、什么是DHTML
(1)DHTML技术
DHTML就是当网页从WEB服务器下载后无须再经过服务器的处理,而在浏览器中直接动态地更新网页的内容、排版样式、动画。
比如,当鼠标移至文章段落中,段落能够变成蓝色,或者当我们点击一个超链后会自动生成一个下拉式的子超链目录。
(2)DHTML可分为三个方面
DHTML(DynamicHTML,简称DHTML),其实并不是一门新的语言,它是建立在原有技术的基础上。
它其实是一种通过各种技术的综合发展而得以实现的概念,这些技术包括
●JavaScript,VBScript(编程语言)
●DocumentObjectModel(文件目标模块)
●Layers和CascadingStyleSheets(CSS样式表)等。
(3)主要是由如下四个方面的内容构成
●HTML-----动态内容可以使开发人员改变显示在一页上的文本或图像,以便内容能够交互式地对用户的鼠标和键盘操作作出响应。
●CSS----动态样式能使网页制作者改变内容的外部特征而不强制用户再次下载全部内容。
●客户端脚本(如:
JavaScript)-----动态定位则让页面制作者以自动方式或对用户的操作作出响应的方式移动页面上的文本和图像。
●DOM:
文档对象模式(DocumentObjectModel),它给HTML文档定义了一个与平台无关的程序接口。
使用该接口可以控制文档的内容、结构和样式。
Web开发人员借助DOM可以在其Web页中引入动态和交互式内容,而不必依赖于Web服务器来提供新的内容或改变现有内容的显示方式。
(4)不同的浏览器对DHTML的支持不同
非常遗憾的是在网景Netscape和微软IE浏览器几番大战后,我们仍没有得到一个对DHTML支持的统一标准。
2、MicrosoftIE对DHTML的支持
(1)动态内容(DynamicContent)
动态地更新网页的内容,可"动态"地随时插入、修改、或删除网页的元件,譬如文字、标记等。
(2)动态排版样式(DynamicStylesSheets)
通过W3C的“CascadingStyleSheets”(串联式排版样式,简称CSS1或CSS),提供了设定HTML标记的字体大小、字型、粗细、字型样式、行高度、文字颜色、加底线或加中间横线、与边缘距离、靠左右或置中、缩排、背景图片或颜色等排版功能。
而“动态排版样式”,可以“动态”地随时地改变排版样式。
(3)动态定位(DynamicPositioning)
通过W3C的“WorkingDraftonPositioningHTMLwithCascadingStyleSheets”,提供HTML元件在X、Y、Z轴的定位功能,让设计者可以放置影像、控件、文字等在网页上的任何位置上。
而放置在不同的Z轴上,设计者就可以产生重叠的效果。
(4)内建资料处理(DataAwareness)
无须复杂的程序,无须花费服务器太多资源,即可让网页设计者即时处理文档。
(5)内建多媒体支持
IE结合CSS与内建的ActiveXControls,提供多媒体支持的功能,包括转换特效、滤镜特效、路径控制、顺序控制、动画、制图、播放声音和影像等多媒体功能
3、企业网站应用的基本技术要求
(1)客户端的动态处理
对于建立商业网站的企业而言,仅仅拥有DHTML是远远不够的。
因为仅仅发生在客户浏览器端的动态效果是无法满足商业网站大量信息查询,客户咨询,资源交互等“动态”需求的。
(2)服务端的动态处理----ASP、JSP和ASP.Net等技术
CSS层叠样式表技术
1、CSS
(1)CSS技术
CSS(CascadingStyleSheet,层叠样式表)是一种格式化网页的标准方式,它扩展了HTML的功能,使网页设计者能够以更有效的设置网页格式。
(2)设计层叠样式表(CascadingStyleSheets,CSS)的目的
是要在HTML里把显示和数据分开。
之所以叫做“层叠”样式表,是因为HTML和XML一样,是树型的结构,应用到树根上的样式会一层一层的下降,应用到分支和树叶上。
CSS让Web开发者定义样式,以应用到任何给定类型的元素。
因为CSS是为Web设计的,所以在定义针对那些Web浏览器的数据显示的时候,表现相当出色。
(3)作用
利用CSS,我们可以定义页面的外观,例如:
字体,颜色,大小,和定位。
CSS让我们清晰地分隔开内容和形式,并且可以用JavaScript来编程改变。
(4)Web应用中的“结构、表现和行为”三者分离的模式
2、在网页中使用CSS
(1)在标记符中直接嵌套样式信息:
使用style属性可以在HTML标记符中直接嵌入样式定义。
<标记符style="property1:
value1;...">
例如:
14pt;color: red"> 仅位于此标记符内的文本受样式的影响
(2)在STYLE标记符中定义样式信息
CSS应用于网页的最常用的方式是在HEAD标记符内使用STYLE标记符,然后在STYLE标记符中定义样式。
语法格式通常如下:
......
[
--]
selector1{property1:
value1;...}
selector2{property1:
value1;...}
......
selectorN{property1:
value1;...}
[-->]
(3)链接外部样式表中的样式信息
如果要在多个网页中使用相同的样式,最好的办法是将网页中要使用的样式,单独放在一个文件中定义,然后通过链接的方式引用其中的样式。
链接引用外部样式表的方法为:
在HEAD标记符内使用LINK标记符,通过指定相应属性链接到外部样式表。
LINK标记符的用法如下:
其中:
rel属性规定了被链接文件的关系,在链接样式表文件(.css文件)的情况下,取值永远是“stylesheet”;type属性规定了链接文件的MIME类型,它的值永远是“text/css”;href属性指定了要链接的样式表文件的URL。
(4)样式的优先级
如果有多个样式同时修饰一个对象,样式如果冲突,则采用高优先级样式;如果没有冲突,则采用叠加的样式效果。
样式的优先级遵循“就近优先”的原则,也就是说,距离所修饰对象越近的样式,其优先级越高。
3、CSS样式单优缺点
(1)CSS样式单有如下一些优点
●简单,易学易用
●能够满足XML文档的基本显示要求
●标准稳定,得到了全面的支持
(2)CSS样式单有如下一些缺点
对XML显示的控制缺乏灵活和弹性。
4、CSS样式单应用的示例
(1)XML文档内容如下
xmlversion="1.0"encoding="GB2312"standalone="no"?
>
xml-stylesheettype="text/css"href="1-6.css"?
>
(2)CSS级联式显示单文件的内容
针对上面的XML文件中的各个标签进行显示风格的设计,文件名:
1-6.css
chapter
{display:
block
}
introdution
{display:
block;color:
blue
}
chap_num
{
display:
block;font-family:
"ComicSansMS";font-size:
20;font-style:
italic;font-weight:
bolder;text-align:
center;margin-top:
2ex
}
chap_title
{display:
block;font-family:
"arialblack";font-size:
25;text-align:
center
}
part
{display:
block;margin-top:
2ex
}
part_num
{font-family:
"couriernew";font-size:
18;font-weight:
bolder
}
part_title
{font-family:
"couriernew";font-size:
20;font-weight:
bolder
}
para_1
{display:
block
}
(3)在浏览器中的显示结果
5、CSS的属性单位
(1)长度单位
在CSS中用于描述长度的单位包括:
●cm厘米
●mm毫米
●em当前字体中m字母的宽度
●ex当前字体中x字母的高度
●in英寸
●pc1pc=12点
●pt点,1pt=1/72英寸
●px像素
(2)百分比单位
在CSS中除了可以使用绝对数来指定单位(如上面所介绍的),还可以用相对数来指定单位。
例如:
P{line-height:
150%}表示该段行高是标准行高的1.5倍。
(3)颜色
层叠样式表允许网页设计者使用以下方式中的一种指定颜色:
●颜色名直接使用标准颜色名称
●#RRGGBB使用6位十六进制数表示颜色
●#RGB使用3位十六进制数表示颜色,它是#RRGGBB方式的快捷方式。
例如:
#00FFEE可以表示为#0FE。
●grb(rrr,ggg,bbb)使用十进制数表示颜色。
●grb(rrr%,ggg%,bbb%)使用百分数表示颜色。
6、CSS样式定义
(1)样式表项的组成
selector{property1:
value1;property2:
value2;......}
其中selector表示需要应用样式的内容,property表示由CSS标准定义的样式属性,value表示样式属性的值。
Selector类型:
HTML标记符、用户定义的class类样式、自定义的ID、虚类等。
(2)HTML标记符selector
HTML标记符是最典型的selector类型,网页设计者可以为某个或某些具体的HTML元素应用样式定义。
例如:
H1{text-align:
center;font-family:
楷体_gb2312}
若将相同的样式应用于不同的selector,可以采用编组的方法简化样式定义。
例如:
H1{color:
#ff0000}
H2{color:
#ff0000}
H3{color:
#ff0000}
可以简化为:
H1,H2,H3{color:
#ff0000}
(3)具有上下文关系的HTML标记符selector
如果需要为位于某个标记符内的标记符设置特定的样式规则,则应将selector指定为具有上下文关系的HTML标记符。
例如:
要使位于P标记符内的CODE标记符内的B元素具有红色属性,则应使用如下格式:
PCODEB{color:
red}
7、用户定义的类selector
(1)语法格式
可以使用类(class)来为单一HTML标记符创建多个样式。
其语法格式如下:
selector.classname{property:
value;...}
例如:
H1.rr{color:
red}
然后在网页中需要处引用,所下所示:
(2)如果要定义应用于所有标记符的类,可以直接用句点后跟类名即可
其语法格式如下:
.classname{property:
value;...}
例如:
.rr{color:
red},然后在网页中需要处引用,所下所示:
8、用户定义IDselector
(1)语法格式
要将一个ID样式包括在样式定义中,应以一个井号“#”作为ID名称的前缀,其语法格式如下:
#IDname{property:
value;...}
定义了ID样式后,在引用该样式的标记符内使用id属性。
例如:
#rr{color:
red}
(2)注意
使用.classname和使用#IDname这两种方式在效果上没有区别,但最好只使用其中之一,以免造成混淆。
9、CSS中的各种属性说明
(1)字体属性
CSS中字体属性包括:
●font-family属性用于确定要使用的字体列表,取值可以是字体名称,也可以是字体族名称,值之间用逗号分隔。
●font-size用于控制字体的大小。
它的取值分为4种类型:
绝对大小,可能的取值有:
xx-small
x-small
small
medium
large
x-large
xx-large
相对大小,可能的取值为:
smaller比上一级字体小一号
larger比上一级字体大一号
使用长度值直接指定。
如:
P{font-size:
12px}
使用百分比,如:
H1{font-size:
70%}表示以H1标准字体的70%显示。
●font-style用于指定元素显示的字形。
取值为:
normal普通字体(默认值)
italic表示斜体字型
oblique表示斜体字型
font-variant指定了浏览器显示指定元素的字体变体。
该属性有两个值:
normal默认值
small-caps表示小体大写,即文本中的小写字母显示为大写,不过尺寸要比标准的大写字母要小一些。
font-weight定义了字体的粗细程度。
font可一次性设置前面介绍的种种字体属性,属性之间以空格分隔。
(2)文本属性
文本属性用于控制文本段落格式。
letter-spacing用于设置字符间距
line-height用于设置行间距
text-align设置对齐方式
text-decoration对特定选项的文本进行修饰,它的取值可以是:
none表示不加任何修饰(默认值)
underline加下划线
overline加上划线
line-through加删除线
blink表示添加闪烁效果
text-indent设置首行缩进
text-transform用于转换文本,取值为:
none默认值
capitaliae所选文本中每个单词的首字母大写显示;
uppercase所有字母都以大写显示
lowercase所有字母都以小显示
(3)颜色与背景属性
color用于控制文本的颜色
background-color用于设置HTML元素背景颜色。
background-image用于设置HTML元素背景图案。
background-attachment控制背景图案是否随内容一起滚动,取值为:
scroll表示背景随内容一起滚动(默认值)
fixed表示背景静止
bachground-position用于指定背景图案与相对关联区域左上角的位置。
background-repeat设置背景图案是否重复显示,以及如何重复。
取值可以是:
repeat
repeat-x
repeat-y
no-repeat
background与font类似,可以同时设置上述属性
(4)布局属性
●页面元素周围的空白
在任何一个HTML元素的周围,都包括边框、边界和填充这三种空白。
最接近元素内容的是填充,接下一来是边框,最外围是边界。
CSS的margin、border和background属性分别用于设置以上三个区域。
●边框属性
CSS边框属性包括:
border
border-bottom
border-bottom-color
border-bottom-style
border-botton-width
border-color
border-left
border-left-color
border-lefy-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
●边界属性
CSS边界属性包括margin、margin-bottom、margin-left、margin-right以及margin-top。
●填充属性
CSS填充属性包括padding、padding-left、padding-right、padding-top以及padding-bottom。
●浮动属性
CSS浮动属性包括:
float可以将元素的内容浮动到页面的边缘,其取值为:
none
left
right
clear设置了元素是否允许浮动元素在它旁边,取值可以是:
none
left
right
both
定位和显示属性
(5)定位属性和宽高属性
定位属性包括:
position用来规定元素在页面中的位置,它的取值可以是:
static默认值
relative
absolute
top
bottom
left
right
z-index
width和height属性可以控制元素的宽度和高度,此时position属性必须指定为absolute。
它们的取值可以是长度值,也可以是百分比。
(6)显示属性
在CSS中,有两个属性可以控制元素的显示和隐藏。
display用于确定一个元素是否应绘制在页面上,它的取值有多个,但在一般浏览器中,只有一个none可以使用。
当使用属性隐藏元素时,不但元素不可见,而且元素不占用任何空间。
visibility用于控制元素的可见性,取值包括:
visible可见
hidden隐藏
inherit继承(默认值)
与display不同之处在于当隐藏元素时,仍然为元素保留原有的显示空间。
(7)列表属性
列表属性用于设置网页中列表的格式,CSS中的列表属性包括:
list-style-image指定图片作为列表项目符号,取值为:
none默认值
url(imageURL)
list-style-position设置列表元素标记的位置,取值可以是:
inside
outside
list-style-type用来设置项目符号和编号的样式,取值如下:
disc实心黑园点
circle空心园圈
square方形黑块
decimal十进制数
lower-roman小写罗马数字
upper-roman大写罗马数字
lower-alpha小写字母
upper-alpha大写字母
none无
list-style用于一次性设置上述属性
(8)鼠标属性
鼠标属性通过cursor属性来设置在对象上移动的鼠标指针的形状,取值如下:
auto浏览器基于当前文本决定显示哪种指针
crosshair简单十字形
default随平台而定的默认指针(通常为箭头)
hand手形
move指示某对象被移动的交叉箭头
*-resize指示边缘被移动的前头(*可以是n、ne、nw、s、se、sw、e以及w,分别代表北、东北、西北、南、东南、西南、东以及西等方向)
text编辑文本指针(通常为I形)
wait指示程序正忙,用户需要等待的沙漏图标
help指示用户可以得到帮助的问号图标
XHTML技术
1、XHTML是HTML的改造和升级版---可扩展超文本标记语言(ExtensibleHypertextMarkupLanguage,XHTML)
(1)W3C的XHTML1.0规范在这里:
http:
//www.w3.org/TR/xhtml1/
(2)W3C目前正在制定XHTML2.0规范:
http:
//www.w3.org/TR/xhtml2/
2、XHTML1.0和HTML4.0的不同
(1)XHTML是一种基于HTML的语言,但是用结构良好的XML表示
●XHTML就是一个扮演着类似HTML的角色的XML
HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的XML,所以,本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。
●XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求
XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的基于HTML语言设计的网站,直接采用XML还为时过早。
因此,在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。
目前国际上在网站设计中推崇的WEB标准就是基于XHTML的应用(即通常所说的CSS+DIV)。
(2)XHTML1.0所做的工作就是将HTML4.0(最后的HTML版本)按照符合XML标准的要求加以改造
●传统的Web开发者/设计师非常容易掌握XHTML1.0
它用来为Web内容设计严格的、合理的文档结构,并且能够和其他类似CSS和DOM的Web标准进行协作,还有能够很好地和其他现有的和未来的基于XML的语言、应用程序和协议进行交互。
XHTML1.0并未定义任何新的元素和属性,而是沿用了所有HTML4.0的元素和属性,因此XHTML1.0与HTML4.0是完全兼容的。
传统的Web开发者/设计师非常容易掌握XHTML1.0。
目前所有主流的桌面浏览器都已经可以很好地支持XHTML1.0,甚至很多移动智能设备(智能手机、PDA等等)中的浏览器也已经可以很好地支持XHTML1.0。
●可以设计出既适合XML系统,又适合当前大部分HTML浏览器的页面
使用XHTML1.0,只要我们遵守一些
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS XHTML 技术