当前位置：文档之家 › 第六回合 层叠样式表单

第六回合 层叠样式表单

  • 格式：ppt
  • 大小：582.00 KB
  • 文档页数：14
第六回合 层叠样式表单

合集下载

第6章层叠样式表

第6章层叠样式表

第6章层叠样式表软件开发程序设计第6章层叠样式表软件开发程序设计概述教学提示：XML为存储结构化数据提供了教学提示：XML为存储结构化数据提供了强大的方法，强大的方法，但是它没有提供关于数据如何显示的信息，这实际上是XML的优点：XML的优点如何显示的信息，这实际上是XML的优点：数据的结构完全与数据表示无关。

数据的结构完全与数据表示无关。

当有必要表示格式化XML文件中的数据时，XML文件中的数据时必要表示格式化XML文件中的数据时，格式化的详细信息放置在层叠样式表CSS CSS中式化的详细信息放置在层叠样式表CSS中。

教学目标：理解层叠样式表CSS的概念，CSS的概念教学目标：理解层叠样式表CSS的概念，掌握层叠样式表CSS的方法，掌握CSS CSS的方法CSS与掌握层叠样式表CSS 的方法，掌握CSS与XML结合的方法学会综合运用CSS 结合的方法，CSS。

XML结合的方法，学会综合运用CSS。

北京林业大学信息学院软件开发程序设计6.1 6.2 6.3 6.4 6.5 6.6CSS简介设置字体属性设置色彩和背景图象属性设置边界属性CSS2新增功能综合实例北京林业大学信息学院软件开发程序设计6.1 CSS简介是用于为XML XML数据定义显示参数的一CSS 是用于为XML数据定义显示参数的一种技术，种技术，它利用简单的规则来控制元素内容在浏览器中的表现方式。

CSS最初是内容在浏览器中的表现方式。

CSS最初是被开发来为HTML文档指定显示的，HTML文档指定显示的被开发来为HTML文档指定显示的，同时也适合于XML数据。

XML数据也适合于XML数据。

样式表中的显示规范XML数据分离数据分离，与XML数据分离，这意味着相同的数据通过应用不同的样式表可以以不同的方式显示。

同样，显示。

同样，相同的样式表可以应用到多个XML文件。

XML文件多个XML文件。

北京林业大学信息学院软件开发程序设计6.1.1 CSS的概念CSS( CSS(Cascading Style Sheet)层叠样) 式表，也称为级联样式表，式表，也称为级联样式表，是页风格设计的。

层叠样式页19

层叠样式页19

精确安置空白在引入Cascading Style Sheet之前，要想控制一个网页中的空白是非常困难的。

使用下面的四个属性：margin-left、margin-top、margin-right和margin-bottom，一切就会变得很容易。

表7.6显示的例子说明了怎样使用这四个属性（见图7.34）：表7.6 控制文本空白<HTML><HEAD><TITLE> Style </TITLE><STYLE><!--.Thin {margin-left: 50pt; margin-right: 50pt}.VeryThin {margin-left: 100pt; margin-right: 100pt}--></STYLE></HEAD><BODY><P CLASS=Thin>Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.Thin. Thin. Thin. Thin. Thin.Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.Thin. Thin. Thin. Thin. Thin.Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.Thin. Thin. Thin. Thin. Thin.Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.Thin. Thin. Thin. Thin. Thin.Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.Thin. Thin. Thin. Thin. Thin.</P><P CLASS=VeryThin>Very Thin. Very Thin. Very Thin. Very Thin. Very Thin.Very Thin. Very Thin.Very Thin. Very Thin. Very Thin. Very Thin. Very Thin.Very Thin. Very Thin.Very Thin. Very Thin. Very Thin. Very Thin. Very Thin.Very Thin. Very Thin.Very Thin. Very Thin. Very Thin. Very Thin. Very Thin.Very Thin. Very Thin.Very Thin. Very Thin. Very Thin. Very Thin. Very Thin.Very Thin. Very Thin.</P></BODY></HTML>图7.34 使用不同的空白不需要一个个地指定空白值，你可以使用margin属性来一次设定所有的空白值。

层叠样式表(CSS)

层叠样式表(CSS)




注意:<STYLE>标记中包括了TYPE＝ "text/css"，这是 让浏览器知道你是使用 CSS1 样式规则。加入<!--和->这一对注释标记是防止有些老式的浏览器不认识样式 表规则，可以把该段代码忽略不计。 在使用样式表过程中，经常会有几个标志用到同 一个属性，比如我们规定 HTML 页面中凡是粗体字、 斜体字、H1号标题字显示为红色，我们可以写成：
4.样式表的层叠性

另外，当样式表继承遇到冲突时，总是以最后定义的 样式为准。如果上例中定义了P的颜色： div {color:red;font-size:9pt} p {color:blue} …… <div> <p>这个段落的文字为蓝色9号字</p> </div> 我们可以看到段落里的文字大小为9号字是继承 div属性的，而color属性则依照最后定义的。


B,I,H1{color:red}
此外，同一个HTML标志，可能定义到多种属性， 例如，我们规定把从H1到H6各级标题定义为红色黑体 字，带下划线，则应写为：

H1,H2,H3,H4,H5,H6{color:red;textdecoration:underline;font-family:"黑体"}
层叠样式表(CSS)
1.CSS概念
CSS是一种可嵌入HTML、控制HTML文件显示格式 的语言，有的书称作“级联样式表”或简称为“样式 表”。 优秀的杂志不仅仅是具备一套完整的结构内容、巧 妙出奇的页面布局，还需要一个统一的风格，好的风格 代表了一种高级的品味。优秀的网页制作也不再是漂亮 的图形、优美的布局和完整的结构就能满足了，使网站 整体保持一致的风格，例如字体字形的显示，页面边距 等等，也是使网站作品有美感有品味的关键一步。层叠 样式表就是设置整体风格这一任务的最好方法。
层叠样式表

层叠样式表


尺寸及定位 属性
Top Position
z-index
Company Logo
CSS样式表分类
根据样式代码的位置，分为三类： 行内样式
内嵌样式
外部样式
在最后一个声明后面加上一个分号 (;) 是一个好习惯
Company Logo
行内样式
您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内 样式”。行内样式使用元素标签的 STYLE 属性定义。 <html> <head> <title>行内样式表示例</title> </head> <body> <p style="font-family:华文彩云;">庐山美景——小天池</p> <p style="font-weight:bold">小天池位于庐山牯岭北面，池中之水置于高 山而终年不溢不涸。池后山脊上，屹立着一座白塔似的喇嘛塔。塔建于1936 年。小天池山对面还有一怪石，远望似一雄鹰伸颈欲鸣。</p> </body> </html>
type="text/css"表示类型是样 式表文本
Company Logo
CSS样式表常见的属性
属性 CSS名称 font-family Font-size Font-style 说明 设置或检索文本的字体 设置或检索文本字体的大小 设置或检索文本的字体样式，即字体风格，主 要设置字体是否为斜体。取值范围： normal | italic | oblique 用于设置字体的粗细，取值范围： Normal | bold | bolder | lighter | number