这里主要介绍Bootstrap里用到的CSS语法，以便在源码分析时更容易理解和学习。Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理。
　　如何确定CSS的优先级，这里我们先要引入一个机制，分别用4个数字（a,b,c,d）表示优先级组合，比如1,1,1,1和0,1,0,1。它们的意思分别是：
第一个数字（a）表示某个元素的style属性值，优先级最高。但是区别优先级的时候，一般是对不同class中的定义进行比较，所以该值一般都是0。
第二个数字（b）是该CSS选择器上的id数量的总和，一般都是1。
第三个数字（c）是用在该CSS选择器上的其他属性CSS选择器以及伪类的总和。这里包括class(.btn)和属性选择器(比如li[id=red])
第四个数字（d）计算元素(就像table、p、div等)和伪元素(就像first-child等)
通用CSS选择器（*）是0优先级
如果两个CSS选择器有同样的优先级，在样式表后面的那个起作用。
　　计算下面两个选择器的优先级，结果肯定是第一个比第二个优先级高，因为第一个的优先级是0,2,0,1，而第二个是0,1,0,2。
#leftbar li#first { color: red; }
#leftbar li:first-child{ color: blue; }
　每一条CSS样式的定义都是由两部分组成：选择器{样式}。在{}之前的部分就是&选择器&，指明了应用这些&样式&的网页元素。
1.上下文选择符
　　上下文选择符的格式：标签1 标签2{样式}，其中标签2就是我们想要选择的目标，而且只有在标签1是其祖先元素的情况下才会被选中。上下文选择符，严格来讲叫做后代组合式选择符，就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。
article p {font-weight:bold;}
&h1&Contextual selectors are &em&very&/em& selective&/h1&
&p&This example shows how to target a &em&specific&/em& tag.&/p&
&/article&
&p&Contextual selectors are &em&very&/em& useful!&/p&
&下面几个特殊选择器的示例代码
&h2&An H2 Heading&/h2&
&p&This is paragraph 1&/p&
&p&Paragraph 2 has &a href="#"&a link&/a& in it.&/p&
&a href="#"&Link&/a&
&/section&
2.子选择器
&　　CSS里的子元素用符号"&"表示。标签1&标签2，标签2必须是标签1的子元素。
h2 {font-style:italic;}
&3.临近兄弟选择器
　　临近的兄弟选择符用&+&表示，标签1+标签2，标签2必须紧跟其同胞标签1的后面。
p {font-variant:small-caps;}
4.普通兄弟选择器
　　标签1~标签2，与兄弟选择器不同的是，标签2在标签1后面，但不一定紧跟。
a {color:red;}
5.属性选择器
　　Bootstrap的CSS组件里有很多属性选择器，比如[data-toggle^=button]、[data-toggle=toggle]等，下表列出常见属性选择器的用法：
　　CSS3提供了非常多的可用伪类，但是Bootstrap只是用来常用的几个，具体如下表所示：
　　举个例子，按钮组里，除第一个按钮、最后一个按钮和带有dropdown-toggle样式的元素外，其他btn样式都不能设置圆角，多个伪类可以一起使用：
.btn-group & .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
&display属性
　　这个属性用于定义建立布局时元素生成的框的类型。对于HTML等文档类型，如果使用display时不谨慎会很危险，因为可能违法HTML中已经定义的显示层次结构。
　　媒体查询是进行响应式设计的核心要素，其功能非常强大，具体可以访问：。Bootstrap主要用到min-width、max-width，以及and语法，用于在不同的分辨率下设置不同的CSS样式。示例如下：
@media (max-width: 767px) {
/*在小于768像素的屏幕里,这里的样式才生效*/
@media (min-width: 768px) and (max-width: 991px) {
/*在768和991像素之间的屏幕里,这里的样式才生效*/
@media (min-width: 992px) and (max-width: 1199px) {
/*在992和1199像素之间的屏幕里,这里的样式才生效*/
@media (min-width: 1200px) {
/*在大于1200像素的屏幕里,这里的样式才生效*/
&link href="lounge-mobile.css" rel="stylesheet" media="screen and (max-device-width: 400px)"&
阅读(...) 评论()CSS语法排版器(ProCSSor)下载在线版_西西软件下载
西西软件园多重安全检测下载网站、值得信赖的软件下载站！
相关软件 /中文/ /中文/ /中文/ /多国语言[中文]/ /中文/ /中文/ /中文/ /中文/ /中文/ /中文/顶好评:50%踩坏评:50%请简要描述您遇到的错误，我们将尽快予以修正。轮坛转帖HTML方式轮坛转帖UBB方式
436.8M/中文/4.5
84.5M/中文/4.9
60.1M/中文/6.4
436.8M/中文/6.2
116.3M/中文/5.7
68M/中文/3.4
399M/中文/3.8
CSS语法排版器(ProCSSor)写网页时都避免不了要使用 CSS 来对内容进行美化与排版，若是将 CSS 集中在一个档案内后来引用，在网页发布的时候，也会将其解省档案传输的时间，若想要参考这些经过压缩后的 CSS 档案，除非经过重新排版，否则很难阅读，想要对 CSS 进行重新排版，可以来试试 ProCSSor 这个线上的 CSS 语法排版器。
安卓官方手机版
IOS官方手机版
CSS语法排版器(ProCSSor) 在线版
下载帮助西西破解版软件均来自互联网, 如有侵犯您的版权, 请与我们联系。用户名：echorightcss
文章数：11
访问量：10385
注册日期：
阅读量：1297
阅读量：3317
阅读量：456043
阅读量：1140668
[匿名]derick：
[匿名]heb：
[匿名]Bab：
[匿名]eb：
51CTO推荐博文
&&&&&&& 将CSS应用到XHTML之中，首先要做的就是选择合适的选择符，选择符是CSS控制XHTML文档中对象的一种方式，简单地说，它用于告诉浏览器这段样式将应用到哪个对象。
1、CSS属性与选择符
&&&&&&& CSS语法结构仅仅由三部分组成：选择符（selector）、属性（property）和值（value ）。使用方法：
&&&&&&& selector ( Property : )
&&&&&&& ◆& 选择符（selector）指着组样式编码所要针对的对象，可以是一个XHTML标签，如body、h1；也可以是定义了特定id或class的标签，如#main选择符表示选择&div id="main"&，即一个 被指定了main为id的对象。浏览器将对CSS选择符进行严格的解析，每一组样式均会被浏览器应用到对应的对象上。
&&&&&&& ◆& 属性（Property）是CSS样式控制的核心，对每一个XHTML中的标签，CSS都提供了丰富的样式属性，如颜色、大小、定位、浮动方式等。
&&&&&&& ◆& 值（value）是指属性的值，形式有两种，一种是指定范围的值，如float属性，只可能应用left、right、none三种值；另一种为数值，如width能够使用0-9999px或其他数学单位来制定。
&&&&&&&&在实际应用中，我们往往使用以下类似的应用形式：
&&&&&&& body {&background-color : &}
&&&&&&& 表示选择符为body，即选择了页面中的&body&这个标签，属性为background-color这个属性用于控制对象的背景颜色，而值为blue。页面中的body对象的背景颜色通过使用这组CSS编码，被定义了蓝色。
&&&&&&& 除了单个属性的定义，同样可以为一个标签定义一个至更多个属性定义，每个属性之间使用逗号分开。
&&&&&&& p{
&&&&&&&&&&&&&&& text-align :
&&&&&&&&&&&&&& &color :
&&&&&&&&&&&&&&& font-family : arial :
&&&&&&& p标签被我们指定了3样式属性，包含对齐方式文字颜色及字体。同样一个id，或一个class，都能通过相同的形式编写样式。
&&&&&&& #content {
&&&&&&&&&&&&&&&& text-align :
&&&&&&&&&&&&&&&& color :
&&&&&&&&&&&&&&&& font-family :
&&&&&&&&.title{
&&&&&&&&&&&&&&&& line-height : 25
&&&&&&&&&&&&&&&& color : blue :
&&&&&&&&&&&&&&&& font-family :
&&&&&&&& }
2、类型选择符
&&&&&&&&上面的body {}就是一种类型选择符。所谓类型选择符，是指以网页中已有的标签类型作为名称的选择符，body是网页中的一个标签类型，div也是，span也是。因此以下选择符都是类型选择符，而它们将控制页面中所有的body或div或span ：
&&&&&&& body {}
&&&&&&& div {}
&&&&&&& span {}
3、群组选择符
&&&&&&&&除了对于单个XHTML对象进行样式指定，同样可以对一组对象进行相同的样式指派。
&&&&&&& h1,h2,h3,p,span P{
&&&&&&&&&&&&&&& font-size : 12
&&&&&&&&&&&&&&& font-family :
&&&&&&& 使用逗号对选择符进行分割，使得页面中所有的h1,h2,h3,p及span都将具有相同的样式定义。这样做的好处是对于页面中需要使用相同样式的地方只需要书写一次样式表即可实现，减少代码量，改善CSS代码的结构。
4、包含选择符
&&&&&&& h1 span {
&&&&&&&&&&&&&&& font-weight :
&&&&&&& 当我们仅仅相对某一个对象中的子对象进行样式指定时，包含选择符就派上了用场。包含选择符指选择符组合中前一个对象包含后一个对象，对象之间使用空格作为分隔符。如本例所示。我们对h1下面的span进行样式指派，最后应用到XHTML是如下格式：
&&&&&&& &h1&这是我们的一段文本&/span&这是span内的文本&/span&&/h1&
&&&&&&& &h1&单独的h1&/h1&
&&&&&&& &span&单独的span&/span&
&&&&&&& &h2&被h2标签套用的文本&span&这是h2下的span&/span&&/h2&
&&&&&&& h1标签之下的span标签将被应用font-weight : bold的样式设置。注意，仅仅对有此结构的标签方式有效，对于单独存在h1或是单独存在的span机器他非h1标签下属的span均不会应用此样式。
&&&&&&& 这样做能够帮助我们避免过多的id及class的设置，直接对所需要设置的元素进行设置。包含选择符除了可以二者包含，也可以多级包含，如下选择符样式同样能够使用：
&&&&&&&& body h1 span& strong {
&&&&&&&&&&&&&&&&& font-weight :
&&&&&&&& }
5、id及class选择符
&&&&&&& id选择符及class选择符均是CSS提供的由用户自定义标签名称的一种选择符模式，用户可以使用id及class对页面中的XHTML标签进行自定义名称，从而达到扩展XHTML标签及组合XHTML标签的目的。比如对XHTML中的h1标签而言，对于CSS，如果使用id进行选择符，那么&h1 id="pl"&及&h1 id="p2"&对于CSS来讲是两个不同的元素，从而达到扩展的目的。用户自定义名称的方式也有助于用户细化自身的界面结构，使用符号页面需求的名称来进行结构设计，增强代码的可读性。
&&&&&&& id选择符
&&&&&&& id选择符是根据DOM文档对象模型原理所出现的选择符类型。对于一个网页而言，其中的每一个标签（或其他对象），均可以使用一个id=""的形式对id属性进行一个名称的指派，id我们可以理解为一个标识，在网页中对每个id名称只能使用一次。
&&&&&&& &div id="content"&&/div&
&&&&&&& 如本例所示，XHTML中的一个div标签被我们指定了id名为content。
&&&&&&& 在CSS样式中，id选择符使用#符号进行标识，如果我们需要对id为content的标签设置样式，应当使用如下格式：
&&&&&&& #content {
&&&&&&&&&&&&&& font-size : 14
&&&&&&&&&&&&&& line-height : 130% ;
&&&&&&& id的基本作用是对每一个页面中的唯一出现的元素进行定义。如可以对导航条命名为nav，对网页的头部和底部命名为header和footer。对于类似于此的元素在页面中均出现一次，使用id进行命名具有进行唯一性的指派含义，有助于代码阅读与使用。
&&&&&&& class选择符
&&&&&&& 如果说id是对于XHTML标签的扩展的话，那么class应该是对XHTML多个标签的一种组合。class直译为类或类别。对于网页设计而言，我们可以对XHTML标签使用一个class="'的形式对class属性进行名称指派。与id不同的是，class允许重复使用，如页面中的多个元素，都可以使用同一个class定义。
&&&&&&& &div class="p1"&&/div&
&&&&&&& &h1 class="p1"&&/h1&
&&&&&&& &h3 class="p1"&&/h3&
&&&&&&& 使用class的好处是，对于不同的XHTML标签，CSS可以直接根据class名称来进行样式指派：
&&&&&&&&& .p1 {
&&&&&&&&&&&&&&&&& Margin : 10
&&&&&&&&&&&&&&&&& Background-color :
&&&&&&&&&& }
&&&&&&&&&&&class在CSS中的使用点符号 .& 加上class名称的形式，如上例所示，我们对class名称来进行样式指派。无论是什么XHTML标签，页面中所有使用了class="p1"的标签均使用此样式进行设置。class选择符也是对CSS代码重用性的良好提现，众多标签均可以使用同一个class来进行样式指派，不再需要每一个编写样式代码。
6、标签指定式选择符
&&&&&&& 如果既想使用id或class，也想同事使用标签选择符，可以使用如下格式：
&&&&&&& h1#content {}
&&&&&&& 表示针对所有id为content的h1标签。
&&&&&&& h1.p1{}
&&&&&&& 表示针对所有class为p1的h1标签。
&&&&&&& 标签指定式选择符在对标签选择的精确度上介于标签选择符及id/class选择符之间，也是一种经常能够使用到的选择符形式。
7、组合选择符
&&&&&&& 对于上述所有CSS选择符而言，无论是什么样的选择符，均可以进行组合使用。
&&&&&&& h1& .p1{}
&&&&&&& 表示h1标签下的所有class为p1的标签；
&&&&&&& #content &h1 {}
&&&&&&& 表示id为content的标签下的所有h1标签；
&&&&&&& h1& .p1 , #content&& h1{}
&&&&&&& 以上两者进行群组选择；
&&&&&&& h1#content& h2{}
&&&&&&& id为content的h1标签下的h2标签。
&&&&&&& CSS在选择符的使用上可以说是非常自由，根据页面需求，我们可以灵活使用各种选择符进行设计。
8、伪类及伪对象
&&&&& 伪类及伪对象是一种特殊的类和对象，它由CSS自动支持，属CSS的一种扩展型类和对象，名称不能被用户自定义，使用时只能够按标准格式进行应用。使用形式如下：
&&&&&&& a : hover {
&&&&&&&&&&&&&& background-color : #333333 ;
&&&&&&& 伪类和伪对象由一下两种形式组成：
&&&&&&& ◆& 选择符： 伪类
&&&&&&& ◆&& 选择符： 伪对象
&&&&&&& 本例中的hover便是一个伪类，用于指定链接标签a的鼠标移上状态。CSS内置了几个标准的伪类用于用户的样式定义。
&&&&&&& : link&&&&&&&&&&&&&&&& a链接标签的未被访问前的样式；
&&&&&&& : hover&&&&&&&&&&&&& 对象在鼠标移上时的样式；
&&&&&&& : active&&&&&&&&&&&&& 对象被用户点击及被点击释放之间的样式；
&&&&&&& : visited&&&&&&&&&&& &a链接对象被访问后的样式；
&&&&&&& : focus&&&&&&&&&&&&&& 对象成为输入焦点时的样式；
&&&&&&& : first-child&&&&&&& 对象的第一个子对象的样式；
&&&&&&& : first&&&&&&&&&&&&&&&& 对于页面的第一页使用的样式；
&&&&&&& 同样，CSS内置了几个标准伪对象用于用户的样式定义：
&&&&&&& : after&&&&&&&&&&&&&&& 设置某一个对象之后的内容；
&&&&&&& : first-letter&&&&&&&对象内的第一个字符的样式设置；
&&&&&&& : first-line&&&&&&&&& 对象内第一行的样式设置；
&&&&&&& : before&&&&&&&&&&&& 设置某一个对象之前的内容。
&&&&&&&&实际上，除了对于链接样式控制的 : hover , : active几个伪类之外，大多数伪类及伪对象在实际使用上并不常见到。我们所接触到的CSS布局中，大部分是有关于排版及样式，对于伪类及伪对象所支持的多数属性很少用到，但是不排除使用的可能，由此可看到CSS对于样式及样式中的对象的逻辑关系，对象组织提供了很多便利的接口。
9、通配选择符
&&&&&&& 如果接触过DOS命令或是word中替换功能，对于通配符操作应该不会陌生，通配符是指使用字符代替不确定的字，如在dos命令中，使用 *.* 表示所有文件，使用 *.bat表示所有扩展名为bat的文件。因此，所谓通配选择符，也是指我们对对象可以使用模糊指定的方式进行选择。CSS的通配符使用 * 作为关键字，使用方法如下：
&&&&&&& * {
&&&&&&&&&&&&& color :
&&&&&&&& }
&&&&&&& *号使用表示所有对象，包含所有不同id不同class的XHTML的所有标签。使用如上的选择符进行样式定义，页面中所有对象都会使用color : blue&; 的字体颜色。
了这篇文章
类别：未分类┆阅读(0)┆评论(0)&&4682 阅读
Bert Bos是一位计算机科学家，他也是CSS的创始人之一。在CSS的发展过程中，Bos是最早与H?kon Wium Lie（CSS之父）合作的人之一。在1996年，他加入了World Wide Web Consortium（W3C）负责CSS的开发。他曾任CSS工作组的主席，现在是工作组的W3C代表。
在此之前，Bert在格罗宁根大学研究期间独立开发了Argo浏览器，这是为他的样式表提案而开发的测试应用。Argo浏览器可以处理其自带的SSP样式表语言，利用这种新浏览器语言，他创造了一种CSS标准。随后Lie和Bos合作，一起把CSS发展成为了W3C Recommendation。
问：Bert先生，您曾多次来过中国。您感觉近来中国的Web开发者正在发生哪些变化？
我2008年的时候来过北京，我之前也去过香港和深圳。虽然中国起步较晚，但是现在越来越多的公司加入了W3C，其中有浏览器公司，也有搜索公司。虽然相比于美国、欧洲、澳大利亚来说中国开始得晚，但是现在来看中国的开发者已经和世界各地的开发者们没有什么区别了，他们做同样的修补、问类似的问题，拥有同样的布局困扰。
问：您认为中国的开发者虽然起步晚，但是现在已经赶上了？
是的。从各家公司来看，虽然中国的开发者在起步时落后了一段时间，但是现在已经赶上了，技术上已经同步。
问：现在CSS已经变成了Web开发不可或缺的一部分，但是其实CSS的概念却并不是一开始就必然有的（已经有了HTML描述内容，有了JavaScript描述行为和交互），可以说它是从无到有地被人为发明出来的，您作为CSS的创始人之一，是否能告诉我们在早期发展阶段是如何产生需要一套样式表的想法？早期开发过程中又有什么样的故事？
H?kon Wium Lie和我发明了CSS，但是我们并没有发明样式表这个概念，这个概念很早以前就存在。我们发明的只是让网页开发更加简单的具体语言而已。但是，用样式表记录和构造内容的概念要比这个早得多。在一本书上，你想要什么样的字体，什么样的图画，多大的边缘，都是样式表要做的，这些概念已经存在了很久。而用计算机语言表述的电子化样式表也已经在上世纪80年代中期就出现了。
这么说吧，ML是在HTML之前出现的，HTML是在XML基础上构建的，而XML很早以前就有了样式表。我们研究了XML早期的样式表概念，也研究了当时仍然在发展中的样式表的概念，从中吸取了很多好的创意。另外，我们在一场大会上遇到了HTML的发明者，在那里我们听到了很多人对样式表的需求。虽然这些人我们以前从没打过交道，但是从他们身上，我们获得了很多关键想法。
可以说，对于我们，这并不是一个发明出来的概念，但是对于很多其他人来说，一切都是从HTML和CSS开始的。但是我知道，它们只是进化的一部分。
问：CSS的全称是cascading style sheet（层叠样式表），请问为什么是cascading（层叠），而不是其他的词，比如combining（组合）？
H?kon Wium Lie有一个主张，视图由两部分组成，一部分是提供者所认为人们应该看到的样子，一部分是接收者在屏幕上实际阅读的文档。从最开始，我们的设计理念就是：接收者也需要对视图的结果有影响。即在得到内容之后，你可以自己把它调成想要的样子。内容和样式从提供者那来，提供者可以规定具体的颜色和大小。但是接收者可以根据屏幕的特殊性，使用不同的字体或颜色。这就是我们的理念：多重影响、多重样式表整合在一起，这也就是层叠样式表概念的基础。层叠的意思就是一样东西叠加在另一样之上，层叠就像瀑布，互相叠加最终得出结果，这是一个比喻。
问：您的背景是数学专业，请问这样的背景在您创造CSS的时候是否有什么帮助和影响？
在计算机科学中我学习了语法，另外我还学习了一些人工智能，语法解析对我也有很大的帮助。在语言设计上，我们尽量做出容易阅读和解析的语法。所以说，计算机方面的学习对我的帮助比数学要多。
问：您曾经创造了一个名叫Argo的浏览器，并在上面测试CSS，是这样吗？
不是这样，Argo并不是为了测试样式表，而是为了让大学中非技术学院的师生（比如艺术学院，历史学院）可以自由上网，为了让他们能够在网上交换文件，阅读馆藏目录，收发邮件等等。所以我的目的是要创造一个非常好用的浏览器，它要支持HTML同时也要支持XML，因为在某些学院中XML的使用率更高。比如有人在研究《圣经》，他们需要比对不同版本的《圣经》，这些文件都是通过XML呈现的。他们也需要样式表，所以我的浏览器里就要有样式表语言。样式表中有一些有趣的概念，但是在当时他们并没有注意语法，并不是每个人都想写代码。H?kon Wium Lie这时候也发表了自己的想法，我觉得我们的想法可以结合起来。
问：作为CSS的创造者之一，您可能是回答这个问题的最好人选，CSS最根本的目的是什么？是什么目的可以跨越时间？这个目的将如何影响未来的开发？
有几个目标，它们随着时间也在进化。第一个最主要的原因就是要保护HTML。当时我们看到有一些公司，包括Mozilla，为了让呈现效果更好，开始在HTML上面加东西。我们认为内容和样式应该区别开来，因为在不同设备和屏幕上，你想看到不同样式但是相同的内容。为了保护HTML的稳定性，有很多人，不只是H?kon Wium Lie和我，也在尝试做相同的事情。我们知道我们需要另外一种语言来保护HTML，这就是我们创造CSS的直接原因。
另外一个理由就是，一旦你有一个专业的用来布局的语言，可以做的事就更多了。这些事如果只用HTML很难完成，而对于专门的语言则是小菜一碟。另外，如果你完成了一个样式之后，你可以反复利用，这样效率也更高。同时，因为这是专门处理样式表的语言，所以它也更紧凑。用HTML+CSS比单纯使用HTML代码更少，更简洁。
这些就是我们早期创造CSS的理由。但是随着时间推移，其他的理由浮出水面。比如团队编写文挡，一些人可以专门写文档，另一些可以专注于样式。这就是传统出版的概念，书就是这样出版的。有人写书，但是他们并不负责排版，这个概念很传统，在Web上也同样适用。
晚些时候又有一些概念出现了，比如说执行效率。从某个时刻开始，我们可以实现动画了，你可以用其他语言比如JavaScript或者插件来完成动画，但是我们注意到，采用CSS做这件事更容易。CSS是陈述式的，所以你不需要写专门的程序就能实现。你可以陈述从一个对象的动作哪里开始，到哪里结束，中间采用什么路径。如果用JavaScript的话需要执行循环，电脑可能无法预测该如何执行。但是你用CSS在浏览器中执行的话，它们就能看到事情是如何进展的，应该在哪里结束。所以你就可以做优化，可以预测动画。这也让动画变得更有效率，在屏幕上的效果也更好。执行效率也是CSS将在HTML上完成更多应用的最重要的原因。
问：如今PC上的流量已经被移动端所侵蚀，您认为CSS将如何助力这场Web应用和本地应用之战？
我不认为这是一场战争，两者都有生存的空间。但是我们确实想要Web平台变得和本地平台一样强大。因为Web应用一旦写成可以在任何地方任何设备上运行，效率更高也更便宜。所以我们确实希望Web平台能完成本地平台那些功能。CSS也一直在努力寻找边界：什么是属于CSS的，什么是属于SVG的，其中有一些很难界定。但是我们认为CSS还有更大的空间，我们想要在CSS里做的更多。因为人们发现就算他们在SVG里面做某些事比在CSS中更容易，但是还有很多工作他们愿意使用SVG和CSS并行开发。我也和JavaScript API的工作组一起工作，JavaScript是对接GPS、动作感应这些功能的接口，这些设计也连接了不同设备的API接口。
很多时候我们也会根据人们和设备的交互而改变样式，所以我们认为可以有更多东西出现在CSS中。经常会有人提议CSS里应该有什么，但是我们觉得有些东西应该在其他地方完成比较好。所以我们需要具体分析，人们的需求是什么，而我们能提供的是什么。
问：可以看出CSS是一个好的答案，但并不是所有问题的答案。很多人对预处理器这个话题很感兴趣，他们对于使用这些预处理器有一些顾虑，对此您有什么观点？
我很惊讶预处理器出现得这么晚，我还以为Sass，LESS会出现得更早一些呢。因为CSS是一种简单的基于文本的语言，写预处理器并不难。人们确实也利用预处理器完成了更加专业的设计，但并不是每个人都需要预处理器，你必须首先是个程序员才能使用它。但是如果你是个程序员的话，那么Sass这样的工具就对你就很有帮助。
工具的出现对于我们工作组来说也是一件好事，预处理器减轻了CSS的压力。我们可以专注于功能，字体，以及布局，不需要再考虑诸如变量之类的程序员喜欢的功能了，因为这件事已经在预处理器中完成了。另外，人们还可以选择他们喜欢的预处理器，如果我们在CSS中预置了预处理器的话，那就只有一种方式。但是现在大家可以选择，Sass，LESS，甚至你可以选择使用PHP。我认为预处理器是对于专业设计师来说是非常重要的。
问：CSS中加入自定义属性的原因是什么？
变量对于程序员来说很重要，如果你要写大量样式表的话，所有这些都可以在Sass和LESS中完成。我并不认为W3C工作组应该来定义来如何完成工作，我们只负责创造核心语言，属性和值，而其他人可以来决定该如何写CSS。但是现在我们有变量了，加入变量的原因就是我们发现可以通过自定义属性和值让CSS变得更加常规。在自定义属性方面，我们利用CSS自己的机制cascading（层叠），这意味着你可以把变量附加在元素上，这样你不仅可以附加样式属性，还可以在文件上附加任意属性。对于应用来说这很方便，比如你有文件和结构，你需要把某些东西发展为高等级元素，你可以用CSS来附加这些值，你可以在HTML中这样做，但是用CSS更简单。这就是我们现在有自定义属性和值的原因。
如果你想用变量的话，那就用Sass就可以了。但是越来越多的人会开始使用自定义属性，自定义属性在未来有很多可能性，还有很多值得期待的有趣的功能可能会出现。
问：模块化似乎和CSS的思想相悖，能谈谈引入如此设计的缘由吗？
有两种模块化。在工作组中，我们分头制定更细化的规格，这是模块化的一种。我们这么做的原因在于这么一来规格的制定过程更简化，也可以在更小的规模上测试。但这和CSS中的模块化结构几乎没有什么关系，在这种意义下，我们并不是在模块化CSS而是在模块化我们的内部流程。因为我们不可能在同一时间做所有的事，我们需要聚焦在某个属性上，然后再研究下一个。
另外一种模块化是人们写样式表的方式，你可以写很多样式表，然后把它们融合起来，多重输入可以帮你把自己工作变成自己的样式表。
甚至还有第三种意义，虽然还没有开始，但是在工作组中已经开始讨论。我们开始讨论让其他制订人在CSS中加入特性，我们需要有另一种方式来模块化CSS，所以我们需要某种语法，JavaScript或其他语言的接口，让人们可以在CSS中加入特性，同时也符合CSS语法。你可以用自己的样式表，也可以插入扩展。虽然这件事还不存在，但是已经在讨论中了。虽然目前有两种模块形式，但是未来有可能模块化会有第三种意义。
问：CSS正在努力赶上XSL，到那一天XSL是否就成为多余的了？
要预言未来很难。现在XSL在出版行业的应用仍然很广，人们出版书籍使用的依然是XSL。但是正如我说过的，我们现在已经不再开发XSL了，因为找不到足够的人来组成工作组。虽然我们也希望能有新版本的XSL（现在仍然是版本1），但是我们目前没有计划开发下一个版本。也许我们很快能组件一个工作组，也许我们永远都不会，这些事都说不准。
现在我们的精力都集中在CSS上，人们希望能用CSS完成XSL能够完成的工作。XSL的功能都是为了出版而设计，生成索引、目录等等。我们未来会实现这些功能，但是并没有明确的日期。
除此之外，我们还有一大堆的事儿要做。在我们停止XSL工作组之前，已经有了一些为XSL版本2提交的需求，这些都是使用者向工作组提出希望XSL能实现的功能。这些需求仍然存在，我们可能会在CSS中一并实现这些功能，但是这就是再下一步的事儿了。
问：CSS已经快20岁了，您从一开始就参与了开发工作，这么多年下来回头看看，哪些功能是您最喜欢的？哪些是您最不喜欢的？
我最喜欢CSS的一点就是，几乎所有人都能写CSS。任何人都可以找一些例子，在网上看看其他人是怎么做的，然后就可以写自己的样式表了。这一点现在反而不那么强烈了，因为语言越来越大，样式表变得越来越复杂。但是我仍然认为要写CSS并不难。你不需要是一位专业人士就可以写一些Web文件，一些HTML，再来一点CSS。但是当然，为了完成更高级更完善的展示，我们也需要专业人士。相对来说XSL就不具备这样的品质，XSL是为专业人士而设计的。
最不满意的……可能就是我们没能做好的功能，比如定位。这个功能让你可以在CSS中把一个元素通过横纵坐标放到屏幕上特定的一点上。在1996年CSS最开始的时候，我们就想要做这个功能。当时的一个文档解释了我们将如何布局、修改屏幕，以及如何写在任何位置。我们把其称为frame，这比HTML的frame出现时间还要早。我们现在把这个概念称为regions，浏览器和工作组的概念都是同样的，但是96年对于这个概念来说太早了。那个时候的浏览器无法完成今天所能完成的工作。当时HTML只有两岁，记录的只是一个序列，从第一个字母开始到最后一个字母结束。所以 “在屏幕上制造一个事件”这样的概念过于先进了。但是另一个概念应运而生，就是额外帧，它从一个非常小的概念出发逐渐发展成一个非常灵活的概念，这也就是现在flex box出现的原因。这是我们现在尽最大努力能做到的了。
问：除了W3C工作组之外的时间您是否还做一些其他的项目？您是否考虑过自己写一个框架？
我是想过要写一个框架，但是从来都没有时间来做这件事。除了W3C工作组之外，我还有一个MathML工作组，但是工作基本已经结束了，我们已经完成了MathML第3版，暂时还没有创建下一个版本的计划。
其余的时间我自己也在做一些项目，但是和CSS完全无关，是关于网络安全的。在欧洲，欧盟会对相关研究予以补贴，每个人都可以申报研究项目，但是项目必须以合作形式完成，个人和单独机构都无法申请。W3C和比利时鲁汶大学、都柏林大学、SAP德国公司联手一起申请了网络安全方面的研究。我们的研究涵盖了很多广为人知的网络问题，但是也包含了一些鲜为人知的问题，这是个很有趣的项目。很多研究工作在大学中进行，而执行工作在公司中进行，两边的工作需要互相协调，标准化的工作在W3C以及其他一些机构中进行。这个项目占据了我很多时间，但是我从中学到了很多。
问：非常感谢您抽出宝贵时间接受采访，希望您下次来中国时带来更多精彩内容。
Bert Bos（右二）与采访者高博（右一）、李盼（左一）
更多精彩，加入图灵访谈微信！
《码农》电子刊执行主编，图灵访谈记者