下载

2下载券

加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 第10讲_层叠样式表单(CSS)续

第10讲_层叠样式表单(CSS)续.ppt

第10讲_层叠样式表单(CSS)续

dengwulin
2011-12-01 0人阅读 举报 0 0 暂无简介

简介:本文档为《第10讲_层叠样式表单(CSS)续ppt》,可适用于IT/计算机领域

第讲CSS样式续第讲CSS样式续本讲内容本讲内容CSS语法CSS编写规则显示属性display显示属性displayCSS对文本的格式化主要显示在显示器和打印机上在CSS中display用来设置元素内容在屏幕上的显示形状如成块、成行货其他方式显示属性display显示属性displayXML文档被显示在矩形区域中一些重要的布局属性及其属性值如下:display:描述矩形区域的显示方法block-元素作为新的一段显示在新的一行上inline-行级元素显示时不产生新块跟随前面定义的块级元素listitem-以列表形式显示liststyletype:disc,circle,square,decimaltableinlinetabletablerowtablecolumntablecaptionnone-不显示元素举例举例<xmlstylesheettype="textcss"href="goodscss"><goods><good><name>金利来<name><material>纯棉<material><size>A<size><price><price><good><good><name>轻曼<name><material>棉<material><size>A<size><price><price><good><good><name>红豆<name><material>棉<material><size>A<size><price><price><good><good><name>利郎<name><material>棉<material><size>A<size><price><price><good><goods>举例举例goods{display:blockwidth:height:backgroundcolor:silver}good{display:block}name,material,size,price{display:inlinefontfamily:宋体,黑体fontsize:px}举例举例建立textareaxml<xmlstylesheettype="textcss"href="textareacss"><textarea><textlist>内容一<textlist><textlist>内容二<textlist><textlist>内容三<textlist><textarea>举例举例建立textareacsstextarea{display:blockbackgroundcolor:#ccwidth:}textlist{display:listitemliststyletype:discfontfamily:宋体fontsize:pxtextalign:lefttextindent:em}width,height:描述矩形区域的宽度和高度in-英寸cm-厘米mm-毫米pt-点(points,inch)px-象素(pixels)颜色与背景颜色与背景使用英文单词如:auqa,navy,silver,olive,teal,purple,maroon,fuchsia,lime使用RGB函数如:rgb(,,)rgb(,,)rgb(,,)颜色组合十六进制代码#ff#ff等goods{display:tablewidth:height:backgroundcolor:silver}name{color:bluefont:px}或name{color:rgb(,,)font:px}或name{color:#fffont:px}背景背景backgroundcolorbackgroundimage使用background对前面两种属性概括举例goods{background:url(backgif)}字体与文本字体与文本fontfamily字体族title{fontfamily:宋体,楷体,黑体}fontstyle字体样式fontweight字体粗细:normal,bold,bolder,lighterfont是对上述字体属性的概括可以代表上面所有属性name{fontsize:pt}type{fontsize:larger}date{fontsize:}size{fontsize:em}文本属性文本属性textindent:首行缩进textalign:对齐方式textdecoration:underlineoverline等用CSS设计页面用CSS设计页面例、例的XML文档及对应的CSS文档例(对book和title设置了背景色)用CSS设计页面用CSS设计页面CSS中的样式规则包含了许多样式属性可以控制字体颜色对齐空白等。样式属性可以分为两种主要类型:布局属性:影响XML内容的显示位置如内容的显示位置宽度对齐等格式属性:控制XML内容的外观如边界字体等。元素定位(position)元素定位(position)元素的定位方式分为相对定位和绝对定位两种。相对定位即元素根据自己原始位置作相对位移。而其周围的元素并不受影响。如:title{display:blockfontfamily:Arial,Helvetica,sansseriffontsize:pxcolor:#backgroundcolor:#AAAposition:relativeleft:pxtop:px}元素定位(position)元素定位(position)该CSS文档在对title元素定义样式时增加了对title元素的位置设置。title元素相对于原位置向左偏移px向上偏移px。可以看到此时title重叠在了下面的元素上。除了通过“left”和“top”设置左移和上移的距离外还可以设置“bottom”和“right”属性控制下移和右移的距离。下图显示了部分输出结果:元素定位(position)元素定位(position)还可以修改上面的CSS将定位方式设置为绝对定位如:title{display:blockfontfamily:Arial,Helvetica,sansseriffontsize:pxcolor:#backgroundcolor:#AAAposition:absoluteleft:pxtop:px}输出结果显示如下:现在所有的title元素根据top和left属性确定了显示位置。由于它们设置的top和left属性相同所以显示在同一个位置于是只有最后一个title可以被看到。设置元素大小设置元素大小CSS通过高度(height)和宽度(width)参数设置元素显示的大小。参见例(P)边框(border)、空格填充(padding)和边距(margins)边框(border)、空格填充(padding)和边距(margins)可以在元素的周围增加边框在元素与其边框之间的设定空格填充还可以设置边框与周围元素之间的边距。其中:margin-矩形区域外部的空白填充padding-矩形区域内部的空白填充margintop,marginright,marginbottom,marginleftmargin:一个数值代表所有空白两个数值代表topbottom、leftright四个数值分别代表top、right、bottom、leftpaddingtop,paddingright,paddingbottom,paddingleftpadding:含义与margin类似border:可用border属性统一设置或用bordertop、borderleft等属性分别设置。border属性如下:borderwidth:所有边界的宽度bordercolor:所有边界的颜色borderstyle:所有边界的样式取值有solid,double,dashed,dotted,groove,ridge,outset,none(缺省值)border:设置所有边界为相同宽度颜色样式borderleft:设置左边界borderright:设置右边界bordertop:设置上边界borderbottom:设置下边界borderwidth:pxborderstyle:dottedbordercolor:blackborderleft:pxdoublered=border:pxdottedblack环绕文本环绕文本在CSS中一个元素的文本可以环绕另一个元素的文本就像HTML中文本能环绕图片一样。示例:参见例的XML文档对应的CSS文档(例)图片图片通过使用CSS可以在XML中引入图片(在XML文档中没有提供一种受到广泛支持的方法来链接图片)。具体方法:修改XML文档使其包含一个picture元素用该元素处理图片信息。picture元素的id属性用来在CSS中链接并输出相应的图片(参见例的XML文档和例的CSS文档)用CSS样式化文本字体字体的设置包括字形、字号和颜色。在定义字体时最好在字体列表的后面设定字体家族(font-family)以防万一所设的字体在客户的计算机上未被安装。例如:fontfamily:Arial,Helvetica,sansseriffontsize:pxcolor:#FEA也可以用一种在页面中嵌入字体的机制即可使用一种未被安装的字体。这需要提供一个指向该字体文件的URL然后下载该文件就可以在页面上正确显示该字体。IE要求字体文件以“eot”形式存放。(参见例)用CSS样式化文本文本特性可以设置字体的多种属性如fontstylefontvarient和fontweight。字体大小可以有多种设置方法包括相对大小和绝对大小。因为图片、框架和表格在屏幕上都是以像素定义尺寸的所以推荐使用以像素来定义字体大小这样便于界面的设计。好的样式表编辑器会对不同的文本属性进行设置包括行间距文本颜色背景色字符间距字间距文本对齐方式文本下划线设置以及改变文本大小写等。所有这些属性都能帮助进行更好的页面设计。

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

文档小程序码

使用微信“扫一扫”扫码寻找文档

1

打开微信

2

扫描小程序码

3

发布寻找信息

4

等待寻找结果

我知道了
评分:

/29

第10讲_层叠样式表单(CSS)续

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利