ML简介与CSS3样式表

XML简介

XML是由W3C于1998年2月发布的一种可扩标记语言，是一种用于标记数据文件使其具有结构性的标记语言，它被设计用来传输和存储数据。在电子计算机中，标记指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种的信息比如文章等。它可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。它非常适合互联网传输，提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据，使用XML也可以简化互联网的文档信息传输。

XML在语法方面和HTML是一样的，和HTML不同的是XML是设计用来传输和存储数据，而HTML是设计用来显示数据，它们都是标准通用标记语言的子集。XML的标签是没有预先定义的，需要自己自行定义标签，所以才被称为可扩展标记语言。

在XML发布后同年的8月18日，W3C发布了XSLT的草案，1999年11月16日则正式发布XSLT1.0推荐版本。XSMLT是eXtensible Stylesheet Language Transformation(扩展样式表转换语言)的缩写。

XSMLT主要是用于将XML文档转换成可以被浏览器解析的文档，例如HTML、XHTML。转换成浏览器解析的文档之后能让我们更加直观地在浏览器页面上查看XML文档的数据，并且能使用CSS增加样式效果，例如：

这样使用XSMLT转换后要比起直接阅读XML文档要更加清晰直观，这就是XSMLT主要的作用。

但是现在XSMLT已经很少使用了，几乎淘汰了，而且XML也由于过于笨重，在一些需要轻量级的数据传输方面也逐渐比较少使用了，但是XML目前仍在一些数据结构复杂的情况下使用。

文档结构定义DTD  and  Schema介绍：

DTD：

文档类型定义(Document Type Definition)是一套为了进行程序间的数据交换而建立的关于标记符的语法规则。它是标准通用标记语言和可扩展标记语言1.0版规格的一部分，文档可根据某种DTD语法规则验证格式是否符合此规则。文档类型定义也可用做保证标准通用标记语言、可扩展标记语言文档格式的合法性，可通过比较文档和文档类型定义文件来检查文档是否符合规范，元素和标签使用是否正确。文件实例提供应用程序一个数据交换的格式。使用各类文档类型定义是为了让标准通用标记语言、可扩展标记语言文件能符合规定的数据交换标准，因为这样，不同的公司只需定义好标准文档类型定义，就都能依文档类型定义建立文档实例，并且进行验证，如此就可以轻易交换数据，防止了实例数据定义不同等原因造成的数据交换障碍，满足了网络共享和数据交互。

内部声明代码示例：

外部声明代码示例：

HTML里面开头的DOCTYPE就是引入了一个文档类型定义文档：

Schema：

Schema是基于XML的DTD代替者，Schema是更加地严格的文档结构定义。Schem是2001年5月2日成为W3C标准，Schem要更加完善功能也更加强大，也就是类似于DTD的一个升级版。

思维导图：

CSS3样式表

CSS3简介：

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

CSS3完全向后兼容，所以没有必要修改的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。

样式在HTML中的书写方式：

样式有三种书写方式，第一种是直接在style属性上写，style里有很多的样式子属性，不同的字属性使用分号分开，示例：

运行结果：

这种写法适合用于个别标签需要单独样式的情况下，如果好几个标签都需要同样的样式的话，使用这种写法就会导致很多重复的代码，不利于网页的优化，所以第二种写法就是在<style>标签里声明样式属性，之后只要是该样式里定义的标签就会统一使用<style>里声明的样式，示例：

运行结果：

第三种写法是在css文件里声明样式，这种方式好处是可以共享更多的网页，因为只需要使用<link>标签引用这个文件就可以使用文件里声明的样式了。示例：

创建一个后缀为.css的文件，将样式属性的声明写在文件里：

然后在HTML文件里使用<link>标签引用这个文件：

运行结果：

思维导图：

样式选择器：

并不是所有的标签都需要使用同一个样式，而且不是全部标签都得使用样式，那么同样的标签要使用不同的样式就需要使用到样式选择器了。

在这里介绍几种较为常用的样式选择器：

1. element选择器，直接写标签的名称，也就是上面使用的那种方式，示例：

运行结果：

1. .class选择器，要使用这个选择器的标签需要使用class属性引用这个选择器的名称，也叫做类样式，示例：

运行结果，只有使用class属性引用了选择器的标签才会使用这个选择器里的样式，这些选择器都可以写在css文件里：

1. #id选择器，要使用这个选择器的标签需要使用id属性来引用这个选择器的名称，示例：

运行结果：

在这里要说明一下.class选择器与#id选择器的区别：id是唯一的是不可重复的，一个页面只可以使用一次，class则可以多次引用，一个页面内可以使用多次。虽然你重复地使用#id选择器浏览器也可以正常解析，有些IDE也不会报语法错误，但是当你需要用JavaScript通过id来控制div时就会出现错误。

id相当于是一个唯一的标识，用于区分不同的结构和内容，就象×××或名字，如果一个屋子有2个人同名，就会出现混淆。class则是一个样式，可以套在任何结构和内容上，就象一件衣服。

所以从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

当我们使用#id选择器时，应当遵循规范的语法不重复地去使用，要明白这两个选择器的区别。

错误写法示例：

运行结果：

1. *选择器，这个选择器表示给所有的标签都加上这个选择器里的样式：

运行结果：

1. element,element选择器，使用逗号隔开可以给多个标签定义样式，示例：

运行结果：

1. element element选择器，例如div p，选择给div内部所有的p标签定义样式，示例：

运行结果：

1. element+element选择器，例如div+p，选择紧接着在div标签后的那个p标签（仅第一个有效），示例：

运行结果：

1. [attribute]选择器，[]里写属性名称，例如[title]，只要写有括号里定义的属性名称就会使用此选择器的样式，示例：

运行结果：

这个选择器也可以自己定义属性的名称，不一定要使用html里的属性名称，只要标签里的属性名称和选择器上定义的属性名称相同就可以了，示例：

运行结果：

1. [attribute=value]选择器，只要标签里属性的名称与值和选择器里定义的属性名称和值相同，就会使用这个选择器里的样式，示例：

运行结果：

思维导图：

CSS3选择器参考：