第3章 CSS-层叠式样式表.ppt

1、第3章CSS级联样式表为XML收纳结构化的数据提供了强有力的方法，但没有提供关于数据如何表示的信息，实际上是XML的优点(数据的结构与数据表现完全无关)。 如果格式化XML文件需要表示数据，则格式化详细信息将放置在CSS中。 【教学提示】，理解CSS的概念把握CSS的方法把握CSS和XML结合的方法【教学目标】，【参考例：比较例first_exp.xml，second_exp.xml，seet简单的XML文档只是提供数据的结构，对于数据的显示方法CSS是一种定义XML数据的显示残奥仪表的技术，它使用简单的规则来控制元素内容在浏览器中的显示方式。 CSS最初是为了指定HTML文档的显示而开发的，

2、也适用于XML数据。 样式表中的显示规范与XML数据是分离的。 也就是说，可以通过应用不同的样式表以不同的方式显示相同的数据。 同样，可以将相同的样式表应用于多个XML文件。3.1 CSS配置文件、3.1.1 CSS概念、级联样式表(CSS )级联样式表和级联样式表，它们都用于设置和修改网页样式。 创建网页时采用CSS技术，可以更准确地控制网页的布局、字体、颜色、背景和其他效果。 只需对相应的代码进行简单修改，即可更改同一页的不同部分或不同页的网页外观和格式。 (1)大多数浏览器都可以使用。 (2)以前有必须通过图像转换来实现的功能，现在只通过CSS就能够简单地实现，能够更快地下载页面。 (3

3、)使页面字体更漂亮，更容易布局。 (4)能够简单地控制页面的布局。 (5)能够同时更新很多网页的样式、格式，不需要一页一页地更新。 可以用一个CSS文件控制站点上的所有网页样式。 修改此CSS文件中的相应行将更改整个站点的所有页面。【具有以下特征】、3.1.2 CSS技术概要、CSS即级联样式表或级联样式表，当前是以一定形式在浏览器中显示XML文档内容的主要方法之一。 CSS样式表包含设定元素显示样式的一组规则，最初用于控制HTML文件内容的显示格式，也用于控制XML文件内容的显示格式。 中的组合图层性质变更选项。 XML和HTML使用的CSS语法通用，特定的属性设置集指定元素内容的显示格式。

4、 可以设置的元素显示属性包括文本字体、字体、大小、颜色、元素内容在页面中的位置、是否分割、是否放置、是否添加边框、背景、下划线等。 3.1.2创建CSS技术概述、专用样式表文件，将控制元素显示格式的相关命令放入其中，与XML文档的数据内容分离，从而大幅提高控制XML文档显示方式的灵活性，能够更简单地维持样式表本身。 对于可扩展的lestylesheetlanguage (xsl )技术，使用CSS技术查看XML文档的方式是有限的。3.1.2 CSS技术概述、CSS样式表是以. CSS为文件扩展名的纯文本文件，可以使用“记事本”等文本编辑器创建CSS样式表文件。 您必须将对应的样式表档案连结至此

5、XML文件，才能参照您建立的样式表档案来格式化显示XML文件的内容。 只需在xml文档中添加以下链接语句：3.1.2 CSS技术概述、3.2 CSS基本语法、1CSS语句的基本格式【基本格式】选择器属性1:属性值1； 属性2:属性值2，【注释】选择器用于指定应用此规则的元素，由一个或多个元素名或特定标识符组成，然后与括在大括号“”中的多个属性名相对应的属性值对为选择器中指定的元素设置特定的显示样式大括号中的每个属性名称和相应的属性值之间必须用冒号“:”分隔。每对属性之间必须用分号“； 的)必要的；隔开的。 3.2 CSS基本语法、背景色：红色； 字体大小：12 pt； color :黑色分别设

6、定了背景色、字体大小、字体颜色等。 为了直观显示，P background-color:red； 字体大小：12 pt； color :黑色，以下是样式表的简单示例。3.2 CSS基本语法、3.2 CSS基本语法、2、CSS注释样式表文件中也可以包含注释语句，添加注释字符后样式表更易于阅读。 注释语句以斜杠加星号“/*”开始，以斜杠加“*/”结束，可以在这两个特定标记之间输入要解释的字符。 3CSS中的大小写与IE浏览器不区分CSS中的大小写。 但是，将CSS应用于XML文档时，忽略大小写会产生问题。 使用CSS查看XML文档时，文档中不同元素的名称必须完全不同，而不仅仅是大小写。3.2 CS

7、S基本语法、3.2 CSS基本语法、4和CSS中的属性继承通常，在CSS中为元素设置的显示格式属性会影响该元素中包含的所有子元素，除非它们的子元素重新设置不同的格式属性。 注：元素名称不能使用中文。 5在CSS中使用中文如果在CSS中使用中文简体字符集，则必须在CSS文件的第一行中添加以下命令： charset gb2312；3.2 CSS基本语法、1和CSS链接使用常规链接命令，可以在XML文档的开头使用XML :样式表处理命令链接指定的CSS样式表。 【格式】 【注释】？ xml :样式表指示当前XML文档在查看时必须使用样式表，并告知IE不使用默认树结构。 type=“文本css”表示使

8、用css类型的样式表。 href=url指定样式表文件的URL。3.3 CSS选择器和链接(见示例：book.xml、cssforbook.css )、3.3 CSS选择器和链接、选择器*或元素名称2如果希望将一组属性应用于使用多个元素和规则的多个元素，即，相同标记应用特定样式若要使用css_book01.css，3.CLASS属性，必须使用相同的标签在文档的不同位置使用不同的样式，并使用class属性。 CSS _ book 02.CSS如果XML文档中的一个标签没有定义样式，则该标签应用使用父标签样式(继承、3.3 CSS选择器和链接、3.3 CSS选择器和链接、4、ID属性ID和Clas

9、s )的应用使用方法的差异不大，定义ID时请参照【例：book03.xml】； 使用css_book03.css、3.3 CSS选择器和链接以及5.import命令，可以在样式表中使用import命令部署一个或多个独立存储的样式表。 也就是说，可以将这些样式表中包含的规则添加到当前样式表中。 导入URL (样式表URL )； 【注释】样式表URL表示要导入的样式表文件的URL。 您可以指定本地或网络上样式表文件的绝对或相对路径。 该命令在CSS样式表的开头加上末尾的分号； 中所述情节，对概念设计中的量体执行面积分析。 必须少。 在URL之后采用() 【参考例：book04.xml； css_b

10、ook04.css】，3.3 CSS选择器和链接，3.3 CSS选择器和链接，6， important声明important声明和属性链接在一起，不会复盖此属性。【参考例：book05.xml； 使用css_book05.css，7.STYLE属性，使用HTML的style标签直接将样式语句写入XML文档中。 为了使用HTML标签实现XML嵌套样式，必须指定要使用的样式标签的来源： xmlns : html=“http:/www.w3. org/profiles/XHTML-transitional”(XHTML-transitional ) 如果样式表中的元素未设置样式规则，并且无法继承父元

11、素的样式规则，则浏览器将使用您自己设置的规则。 在同一级别，如果为元素的属性指定了冲突的属性值，浏览器将使用上次处理的属性设置。 可以使用！ important关键字特别声明此规则是重要和必要的。 将3.4css与XML结合起来，1、外部样式文件【例： book06.xml参照； css_book06.css】 2、将样式语句嵌入XML文件的【参照例： book08.XML】3、混合方式指定样式是将这两种方法组合而在XML中追加样式的【参照例： book08.XML】。 以后包含的文件定义的样式为中心，3.5 CSS属性和属性值，与1属性关键字2色彩属性值色彩设定相关联的属性有color、ba

12、ckground-color、border-color等，其中应用最多的是color属性。 可以使用英语颜色名称，也可以使用任何RGB格式作为颜色属性值。 (1)使用英文色彩名称(2)各种RGB表现方式、色彩单位、16个关键字： aqua、black、blue、fuchsia、gray、green、lime， 使用marooooo，3.5 CSS属性和属性值，3尺寸属性值(1)绝对尺寸值： in、mm、cm、pt (2)相对尺寸值： px、em、ex (3)百分比尺寸值：对于3.5 CSS属性屏幕的分辨率)有效的绝对单位为333 1cm=10mm)mm(mm)pt (点，1点=1/72英寸)

13、PC显示属性可以是以下四个属性值之一： block :将元素显示为块，并通过换行与其他元素分开显示inline :在同一行中显示元素none :隐藏元素，以便不在页面上显示list-item :列出元素。 3.5 CSS属性和属性值，5，共同设置字体属性字体font-family属性：确定字体的字体为arial font-size属性：确定字体大小为large或数字font-style属性：确定字体样式italic font-weight属性：确定字体的粗细，如粗体、灯光字体变化属性。 打印时更改英语字体的大小写，设置是正常还是小写字母；字体大小为： 20pt； font-family:字体_

14、gb2312； 元素字体336020 pt字体_gb2312 italic； 角色等效于上述示例：3.5 CSS属性和属性值，font-family属性的多个关残奥参数值。 指定字体系列属性时，可以同时指定多个字符集。这样，当浏览器找不到第一个字符集时，可以依次使用第二个字符集来显示字体。 elementfont-family:字体_gb2312、宋体、黑体、【例】、【字体字体- family属性】、3.5 CSS属性和属性值、【设定为大写字体- variant属性】、3.5 CSS属性和属性值， font-variant属性用于设定打印时的英语【font-variant属性说明】normal

15、 :表示打印过程中大写字母没有变化。 此残奥元表示字体变化属性的缺省值small-caps:设置为大写而不是文本中的小写。 如果将font-variant属性值设置为small-caps，则使用小于正文文本大小的大写字母代替小写字母，6、设置布局属性，设置元素的位置和大小margin属性：的边界属性，并设置元素的边界填充属性。 补充属性，一个元素的补充是边界和元素内容之间的间隔3.5 CSS属性和属性值，【参考例： css1.xml】，3.5 CSS属性和属性值，7，设置边框属性border-style属性： dotted border-color属性等用于设置元素边框的样式可能的值包括thin、medium、thick或指定大小边界属性(参见示例： book06.xml、css_book06.css )， 8 .设置背景属性背景-颜色属性：用于为指定元素设置背景颜色的背景-图像属性：