移动端主流的css框架

html-css08

移动端主流的css框架,第1张

1、bootstrap: http://www.bootcss.com/ 响应式布局

jquery weui https://jqweui.cn/components#form

jquery weui开发经验总结

2、css3 动画

http://www.haorooms.com/uploads/example/Animatecss/

更多框架

http://nec.netease.com/framework

3、icon字体

http://fontawesome.io/

http://www.iconfont.cn/

4、css的 SASS 和Less框架

vonic 框架

https://wangdahoo.github.io/vonic/docs/#/

CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风格设计的。通过设立样式表,可以统一地控制HTML(XHTML)中各标签的显示属性。可以使人更能有效的控制Web页面(或Web应用程序)外观,可以精确指定Web元素位置,外观以及创建特殊效果的能力。CSS拥有对网页对象和模型样式编辑能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据 不同使用者的理解能力,简化或者优化写法,针对各类人群有较强的易读性。

就CSS本身而言,对于大多数Web前端从业人员来说就不是问题。学过CSS的人都知道,它不是一种编程语言。你可以用它开发网页样式,但是没法用它编程。换句话说,CSS基本上是设计师的工具,不是程序员的工具。在程序员的眼里,CSS是很头痛的事情,它并不像其它程序语言,比如说PHP、Javascript等等,有自己的变量、常量、条件语句以及一些编程语法,只是一行行单纯的属性描述,写起来相当的费事,而且代码难易组织和维护。

很自然的,有人就开始在想,能不能给CSS像其他程序语言一样,加入一些编程元素,让CSS能像其他程序语言一样可以做一些预定的处理。这样一来,就有了“CSS预处器(CSS Preprocessor)”。

一、什么是CSS预处器

CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题,例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。

CSS预处理器技术已经非常的成熟,而且也涌现出了很多种不同的CSS预处理器语言,比如说:Sass(SCSS)、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS预处理器,那么“我应该选择哪种CSS预处理器?”也相应成了最近网上的一大热门话题,在Linkedin、Twitter、CSS-Trick、知呼以及各大技术论坛上,很多人为此争论不休。相比过计我们对是否应该使用CSS预处理器的话题而言,这已经是很大的进步了。

到目前为止,在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀,讨论的也多,对比的也多。本文将分别从他们产生的背景、安装、使用语法、异同等几个对比之处向你介绍这三款CSS预处理器语言。相信前端开发工程师会做出自己的选择——我要选择哪款CSS预处理器。

二、Sass、LESS和Stylus背景介绍

为了能更好的了解这三款流行的CSS预处理器,我们先从其背景入手,简单的了解一下各自的背景信息。

1.Sass背景介绍

Sass是对CSS(层叠样式表)的语法的一种扩充,诞生于2007年,最早也是最成熟的一款CSS预处理器语言,它可以使用变量、常量、嵌套、混入、函数等功能,可以更有效有弹性的写出CSS。Sass最后还是会编译出合法的CSS让浏览器使用,也就是说它本身的语法并不太容易让浏览器识别,因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。

其实现在的Sass已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则和CSS一样采用了大括号({})作为分隔符。后一种语法规则又名SCSS,在Sass3之后的版本都支持这种语法规则。

2.LESS的背景介绍

2009年开源的一个项目,受Sass的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码,在很多流行的框架和工具中已经能经常看到LESS的身影了(例如Twitter的Bootstrap框架就使用了LESS)。

根据维基百科上的介绍,其实LESS是Alexis Sellier受Sass的影响创建的一个开源项目。当时SASS采用了缩进作为分隔符来区分代码块,而不是CSS中广为使用的大括号({})。为了让CSS现有的用户使用起来更佳方便,Alexis开发了LESS并提供了类似CSS的书写功能。

3.Stylus背景介绍

Stylus,2010年产生,来自于Node.js社区,主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如Sass和LESS。

Stylus被称为是一种革命性的新语言,提供一个高效、动态、和使用表达方式来生成CSS,以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。

注:Stylus上下载Ruby安装文件(随意选择一个版本),此处选择的是最新版本Ruby1.9.3-p385:

Ruby安装文件下载好后,可以按应用软件安装步骤进行安装Ruby。在安装过程中,个人建议将其安装在C盘下,在安装过程中选择第二个选项,如下图所示:

Ruby安装完成后,在开始菜单中找到新安装的Ruby,并启动Ruby的Command控制面板,如下图所示:

在启动的Ruby命令控制面板中输入下面的命令:

gem install sass

输入上面命令,回车后就会自动安装Sass:

这样Sass就安装成功了,也就可以使用了。

2.LESS的安装

LESS的安装和Sass安装有所不同,他不需要依赖于Ruby环境,就能直接安装使用。不过LESS安装分为两种:客户端和服务器端安装。

a)客户端安装:

我们可以直接在客户端使用“.less”(LESS源文件),只需要在官网载一个Javascript脚本文件主“less.js”,然后在我们需要引入LESS源文件的HTML的<head>中加入如下代码:

<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less"><script src="文件路径/less.js" type="text/javascript"></script>

需要注意的是:在引入“.less”文件中,“link”的“rel”属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是:LESS源文件一定要在“less.js”引入之前引入,这样才能保证LESS源文件正确编译解析。

b)服务器端安装

LESS在服务器端的使用主要是借助于LESS的编译器,将LESS源文件编译生成最终的CSS文件,目前常用的方式是利用node的包管理器(npm)安装LESS,安装成功后就可以在Node环境中对LESS文件进行编译。如此一来,LESS在服务器的安装和Sass的安装有点相似,不同之处是他们需依赖的环境不一样,LESS需要的是Node JS环境,而Sass需要的是Ruby环境,为了让大家能更清晰的知道如何在服务器端安装LESS,此处简单的过一下安装过程(本文演示的是在Window7下的安装方法)。

首先到Node Js的官网下载一个适合Windows系统的安装文件,此处下载的是“node-v0.8.20-x86.msi”:

安装文件下载后,按正常应用程序方法一样安装。安装完成后在开始菜单中启用Node js的Command控制面板:

在启动的Node Js的Command控制面板直接输入下面的命令:

$ npm install less

这样就安装完LESS的编译命令,可以在本地正常编译LESS源文件。如果您想下载最新稳定版本的LESS,还可以尝试在Node JS的Command控制面板输入:

$ npm install less@latest

3.Stylus的安装

Stylus的安装和LESS在服务器端的安装很相似,同样依赖于Node JS的环境,也就是说也要先安装Node Js(如果安装Node JS请参考前面的介绍)。唯一不同的是在Node JS的Command控制面板输入的命令不一样:

$ npm install stylus

然后,就会自动下载安装最新的stylus库:

这样就算是安装完Stylus了,也可以正常使用Stylus。

四、Sass、LESS和Stylus转译成CSS

Sass、LESS和Stylus源文件(除了LESS源文件在客户端下运行之外)都不能直接被浏览器直接识别,这样一来,要正常的使用这些源文件,就需要将其源文件转译成浏览器可以识别的CSS样式文件,这也是使用CSS预处理器很关键的一步,如果这一步不知道如何操作,那么意味着写出来的代码不可用。接下来按同样的方式,分别来看看三者之间是如何将其源文件转译成所需要的CSS样式文件。

1.Sass源文件转译成CSS文件

Sass文件就是普通的文本文件,不过其文件后缀名有两种,一种为“.sass”;另一种为“.scss”。我们一般用“.scss”就好,至于这两种文件扩展名的区别在于“.sass”是Sass语言文件的扩展后缀名,而“.scss”是SCSS语言文件的扩展后缀名,至于Sass和SCSS的详细区别这里不做介绍。你可以简单的理解为他们都是CSS预处理器语言,而且两者功能特性都一样,只是书写规则不同而以。

要转译Sass文件的前提是有文件可转,因此先在项目中创建一个Sass文件,此例中将其命名为“style.scss”,并且将其放在对应的项目样式中,如D盘的“www/workspace/Sass/css”目录下。

启动Ruby的Command控制面板,找到需要转译的Sass文件,如此例此文件放置在D盘的“www/workspace/Sass/css”目录下:

如果仅针对于单文件的转译,需要将“style.scss”转译成“style.css”,只需要在对应的目录下输入下面的命令:

$ sass style.scss style.css

这样原本在D盘的“www/workspace/Sass/css”目录下只有“style.scss”这个文件,现在增加了一个“style.css”文件,而这个CSS文件我们就可以用来调用,他也就是“style.scss”转译出来的样式文件。

当然,我们不可能每保存一次这个Sass文件就来执行一回这个转译命令。那么有没有更好的办法实现呢?回答是肯定的,可以通过下面的监听命令实现,这样一来只要Sass文件做了修改,就会自动更新对应的CSS样式文件。

单文件的监听,只需要在刚才的命令控制面板中输入:

$ sass --watch style.scss:style.css

按下回车键(Enter),就会看到下面的提示信息:

看到上图所示的提示信息就表示监听成功,这样一来,你只要修改了“style.scss”文件,“style.css”文件就会随着更新变化。

对于一个项目而言,不太可能只有一个CSS样式文件,如果有多个Sass文件需要监听时,就很有必要的组织一下。默认情况之下,我喜欢把所有的Sass文件放在“/css/sass”目录中,而生成的CSS文件则直接放在“/css”目录下。现在我们修改一下项目文件目录结构,在“/css”目录中再创建一个“sass”目录,并找刚才创建的“style.scss”文件移至“/css/sass”目录下。此时监听“css/sass”下的所有Sass文件时,可以在命令面板中输入如下格式的命令:

$ sass --watch sassFileDirectory:cssFileDirectory

在本例中,冒号前面的“sassFileDirectory”是指“/css/sass”下的“sass”目录,冒号后面的“cssFileDirectory”是指“css”目录,对应的命令就是:

$ sass --watch css/sass:css

回车后,同样可以得到提示信息:

除了使用Ruby的Command控制面板转译Sass之外还可以考虑第三方工具,比如说有名的Compass.app和fire.app。

2.LESS文件的转译成CSS文件

LESS文件的转译和Sass文件转译可以说是大同小异,不同之处是LESS在安装的Node JS环境下通过其自己的命令来进行转译。

$ lessc style.less

上面的命令会将编译的CSS传递给stdout,你可以将它保存到一个文件中:

$ lessc style.less >style.css

除了上面的命令转译LESS源文件之外,现在还有很多第三方开发的工具,比较常见的有:SimpleLess、Less.app、LESS编译辅助脚本-LESS2CSS、WinLess和CodeKit.app等,我个人现在常用的是WinLess工具,简单易用,不过在IOS系统下LESS.app和CodeKit.app很好用。

3.Stylus源文件转译成CSS文件

Stylus具有可执行性,因此Stylus能将自身转换成CSS。Stylus可以读取自“stdin”输出到“stdout”,因此Stylus可以像下面转译源文件:

$ stylus –compress  <some.styl>some.css

Stylus也像Sass一样,同时接受单个文件和整个目录的转译。例如,一个目录名为“css”将在同一个目录编译并输出“.css”文件。

$ stylus css

下面的命令将输出到“./public/stylesheets”:

$ stylus css –out public/stylesheets

还可以同时转译多个文件:

$ stylus one.styl two.styl

如果你的浏览器安装了Firebug,那么可以使用FireStylus扩展。

$ stylus –firebug  <path>

五、Sass、LESS和Stylus的语法

每一种语言都有自己一定的语法规则,CSS预处理器语言也不例外,在真正使用CSS预处器语言之前还有一个不可缺少的知识点,就是对语法的理解。值得庆幸的是,这三款CSS预处理器语言的语法和CSS语法都差不多。

1.Sass语法

Sass3.0版本开始使用的是标准的CSS语法,和SCSS可以说是一样的。这样Sass代码转换成CSS代码变得更容易。默认Sass使用“.scss”扩展名。Sass语法规则可以像CSS那样书写:

/*style.sass新版语法规则*/h1{  color:#936

background-color:#333}

正如你所看到的,在Sass样式中,这样的代码是在简单不过的了。

重要的一点是,Sass也同时支持老的语法,老的语法和常规的CSS语法略有不同,他需要严格的语法,任何的缩进和字符的错误都会造成样式的编译错误。Sass可以省略大括号({})和分号(;),完全依靠严格的缩进和格式化代码,而且文件使用“.sass”扩展名,他的语法类似于:

/*style.sass*/h1

color:#936

background-color: #333

2.LESS语法

LESS是CSS的一种扩展形式,它并没有阉割CSS的功能,而是在现有的CSS语法上,添加了很多额外的功能。就语法规则而言,LESS和Sass一样,都是使用CSS的标准语法,只是LESS的源文件的扩展名是“.less”,其基本语法类似于:

/*style.less*/h1 {  color: #963

background-color: #333}

3.Stylus语法

Stylus的语法花样多一些,它的文件扩展名是“.styl”,Stylus也接受标准的CSS语法,但是他也像Sass老的语法规则,使用缩进控制,同时Stylus也接受不带大括号({})和分号的语法,如下所示:

/*style.styl*//*类似于CSS标准语法*/h1 {  color: #963

background-color:#333}/*省略大括号({})*/h1

color: #963 background-color: #333/*省略大括号({})和分号()*/h1

color:#963

background-color:#333

在Stylus样式中,你也可以在同一个样式文件中使用不同的语法规则,下面这样的写法也不会报错:

/*style.styl*/h1 {

color  #963}

h2

font-size:1.2em

六、Sass、LESS和Stylus特性

这三款CSS预处理器语言具有一些相同的特性,例如:变量、混入、嵌套、函数等。在这一节中,我们依次来对比一下这三款CSS预处理器语言各种特性的异同之处,以及使用方法。

1.变量(Variables)

如果你是一个开发人员,变量应该是你最好朋友之一。在CSS预处理器语言中你也可以声明变量,并在整个样式表中使用。CSS预处理器语言支持任何变量(例如:颜色、数值、文本)。然后你可以在任意地方引用变量。

a)Sass的变量

Sass声明变量必须是“$”开头,后面紧跟变量名和变量值,而且变量名和变量值需要使用冒号(:)分隔开。就像CSS属性设置一样:

/*声明变量*/$mainColor: #963$siteWidth: 1024px$borderStyle: dotted/*调用变量*/                              |  /*转译出来的CSS*/------------------------------------------+------------------------------

body {                                    |  body {

color: $mainColor                     |    color: #963

border:1px $borderStyle $mainColor    |    border:1px dotted #963

max-width: $siteWidth                 |    max-width: 1024px

}                                         |  }

b)LESS的变量

LESS样式中声明变量和调用变量和Sass一样,唯一的区别就是变量名前面使用的是“@”字符:

/*声明变量*/@mainColor: #963@siteWidth: 1024px@borderStyle: dotted/*调用变量*/                            |  /*转译出来的CSS*/----------------------------------------+-------------------------------

body {                                  |  body {

color: @mainColor                   |    color:#963

border:1px @borderStyle @mainColor  |    border:1px dotted #963

max-width: @siteWidth               |    max-width:1024px

}                                       |  }

c)Stylus的变量

Stylus样式中声明变量没有任何限定,你可以使用“$”符号开始。结尾的分号()可有可无,但变量名和变量值之间的等号(=)是需要的。有一点需要注意的是,如果我们使用“@”符号开头来声明(0.22.4)变量,Stylus会进行编译,但其对应的值并不会赋值给变量。换句话说,在Stylus中不要使用“@”符号开头声明变量。Stylus中调用变量的方法和LESS、Sass是完全相同的。

/*声明变量*/mainColor = #963siteWidth = 1024px$borderStyle = dotted/*调用变量*/                            |    /*转译出来的CSS*/----------------------------------------+--------------------------------

body                                    | body {

color mainColor                       |   color: #963

border 1px $borderStyle mainColor     |   border:1px dotted #963

max-width siteWidth                   |   max-width:1024px

| }

Stylus还有一个独特功能,不需要分配值给变量就可以定义引用属性:

/*水平垂直居中*/                    |  /*转译出来的CSS*/------------------------------------+------------------------------------#logo                               |   #logo {

position  absolute                |     position:absolute

top  50%                          |     top:50%

left  50%                         |     left:50%

width  w = 150px                  |     width:150px

height  h = 80px                  |     height:80px

margin-left  -(w / 2)  

CSS(Cascading Style Sheet)可译为“层叠样式表”或“级联样式表”,它定义如何显示 HTML 元素,用于控制Web页面的外观。

通过使用CSS实现页面的内容与表现形式分离,极大提高了工作效率 。

样式存储在样式表中,通常放在<head>部分或存储在 外部CSS文件中。

作为网页标准化设计的趋势,CSS取得了浏览器厂商的广泛支持,正越来越多的被应用到网页设计中去。

CSS有各种版本(即Level),所以知道要使用哪个版本是很重要的。

CSS 1 在1996年末成为推荐标准,其中包含非常基本的属性,比如字体,颜色、空白边。

CSS2 在此基础上添加了高级概念(比如浮动和定位)以及高级的选择器(比如子选择器、相邻同胞选择器和通用选择器)。

在编写本书时,CSS2仍然是CSS的最新版本,尽管它早在1998年就已经成为推荐标准。

万维网联盟(W3C)的行动非常缓慢,所以尽管CSS3的开发工作在新千年开始之前就开始了,但是距离最终的发布还有相当长的路要走,为提高开发和浏览器实现的速度,CSS3被分割成模块,这些模块可以独立发布和实现。

CSS3包含一些令人兴奋的新特性,包括一个用于多列布局的模块,但是,选择器模块最接近于完成,可能在2006年成为推荐标准。

因为预期从CSS2到CSS3的发布之间时间会很长,2002年人们启动了CSS2.1的开发。

这是CSS2的修订版,它计划纠正一些错误,并且更精确地描述CSS的浏览器实现。

CSS2.1正在逐渐接近完成,但是可能在2006年年底之前无法实现,然而,它更准确地反映了CSS当前的状态。

层叠样式表解决了一个普遍的问题

HTML 标签原本被设计为用于定义文档内容。

通过使用 <h1>、<p>、<table>这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。

同时文档布局由浏览器来完成,而不使用任何的格式化标签。

由于两种主要的浏览器(Netscape 和 Inter Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。

所有的主流浏览器均支持层叠样式表。

层叠式表的特点

1、便于页面的修改。

2、便于页面风格的统一。

3、减少网页的体积。

层叠样式表极大地提高了工作效率

样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。

样式通常保存在外部的 .css 文件中。

通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。

作为网站开发者,你能够为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。

如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。

[1]

编辑本段CSS历史

1994年哈坤·利提出了CSS的最初建议;伯特·波斯(Bert Bos)当时正在设计一个叫做Argo的浏览器,他们决定一起合作设计CSS。

当时已经有过一些关于样式表语言的建议了,但CSS是第一个含有“层叠”的主意的。

在CSS中,一个文件的样式可以从其他的样式表中继承下来。

读者在有些地方可以使用他自己更喜欢的样式,在其他地方去继承,或“层叠”作者的样式, 这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合各人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议,1995年他与波斯一起再次提出这个建议。

当时W3C刚刚建立,W3C对CSS的发展很感兴趣,它为此组织了一次讨论会。

哈坤、波斯和其他一些人(比如微软的托马斯·雷尔登)是这个项目的主要技术负责人。

1996年底,CSS已经完成。

1996年12月CSS要求的第一版本被出版。

1997年初,W3C内组织了专门管CSS的工作组,其负责人是克里斯·里雷。

这个工作组开始讨论第一版中没有涉及到的问题,于是1998年5月出版了CSS的第二版。

到2007年为止,第三版还未完备。

编辑本段使用CSS布局的优点

采用CSS布局相对于传统的TABLE网页布局而具有以下3个显著优势:

1:表现和内容相分离

将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。

这样的页面对搜索引擎更加友好。

2:提高页面浏览速度

对于同一个页面视觉效果,采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。

浏览器就不用去编译大量冗长的标签。

3:易于维护和改版

你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

4: 使用CSS布局更符合现在的W3C标准.

ps:W3C组织并不是ISO 国际标准组织成员

编辑本段感性体验CSS

什么是CSS呢?你可能急迫的想知道答案。

但是空泛的文字描述意义不大,让我们先来一点感性体验吧。

是一个普普通通的网页。

然而通过给这个文件添加的CSS规则,我们可以得到十分美观的网页。

这还不是全部,不改动HTML,只是通过添加不同的CSS规则,我们就可以得到各种不同样式的网页:

什么是CSS

* CSS是Cascading Style Sheets(层叠样式表)的简称. * CSS语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言).

CSS的作用

* 在标准网页设计中CSS负责网页内容(XHTML)的表现. * CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀. * 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课. * CSS是由W3C的CSS工作组产生和维护的。

为什么叫层叠? 在页面显示的过程中,有很多的样式作用在页面元素上,这些样式来自不同的地方。

浏览器自己有默认的样式,网页作者有自己写的样式,用户也可能有自己的样式, 但是最终显示的样式是其中之一,它们之间产生了冲突,CSS通过一个称为层叠(cascade)的过程处理这种冲突。

层叠给每个规则分配一个重要度:作者的样式表被认为是最重要的,其次是用户的样式表,最后是浏览器或用户代理使用的默认样式表。

为了让用户有更多的控制能力,可以通过将任何规则指定为!important来提高它的重要度,让它优先于任何规则,甚至优先于作者加上!important标志的规则。

因此,层叠采用以下重要度次序:标为!important的用户样式>标为!important的作者样式>作者样式>用户样式>浏览器/用户代理应用的样式。

然后,根据选择器的特殊性决定规则的次序。

具有更特殊选择器的规则优先于具有比较一般的选择器的规则。

如果两个规则的特殊性相同,那么后定义的规则优先。

由此可见,层叠是指不同的优先级的构成的层的叠加。

编辑本段如何将样式表加入到网页

可以用以下四种方式将样式表加入您的网页。

而最接近目标的样式定义优先权越高。

高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。

例外请参阅 !important 声明。

定义内部样式块对象

你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。

定义方式请参阅样式表语法。

示例如下: <><head><title>文档标题</title><style type=text/css><!-- body {font: 10pt "Arial"} h1 {font: 15pt/17pt "Arial"font-weight: boldcolor: maroon} h2 {font: 13pt/15pt "Arial"font-weight: boldcolor: blue} p {font: 10pt/12pt "Arial"color: black} --></style></head><body>正文内容 </body></>请注意,这里将style对象的type属性设置为"text/css",是允许不支持这类型的浏览器忽略样式表单。

内联定义 (Inline Styles)