|
|
|
|
移动端

1.4.2 CSS基础语法

《H5和WebGL 3D开发实战详解》第1章HTML 5开发基础—进入WebGL 世界的第一道坎,本书是介绍WebGL技术的一本书,但是在进入WebGL世界之前我们需要迈过HTML门槛,因为这是通向WebGL的必经通道。如果连最基本的HTML开发也做不了,那么开发WebGL就是一件遥不可及的事情。本节为大家介绍CSS基础语法。

作者:吴亚峰/于复兴/索依娜来源:人民邮电出版社|2017-10-31 18:27

技术沙龙 | 6月30日与多位专家探讨技术高速发展下如何应对运维新挑战!


1.4.2 CSS基础语法
 
CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。选择器通常为需要改变样式的HTML元素,每条声明由一个属性与一个值构成,如果有多个属性即多条声明就用分号分隔开。声明中的属性为我们需要改变的样式属性,在下面的小节中我们会重点讲述。
 
声明样式时需要用大括号(花括号)包围声明,图1-17便为声明一条CSS样式表的格式,本图代码为上一小节我们介绍的那行代码。以此为例我们来看一下,选择器部分为<h1>元素,后面花括号中为两条声明,分别包含着各自需要的属性与值。
 
 

 
如果要定义不止一个声明,则需要用分号将每个声明分开。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,有经验的人都会在每条声明的末尾加上分号,这么做的好处是,当你从现有的规则中增减声明时,会尽可能地减少出错的可能性。
 
大多数样式表中不止一条声明,所以在编辑时适时使用空格会使得样式表更容易编辑。是否包含空格不会影响 CSS 在浏览器中的工作效果,但是加上空格后不论是我们自己还是其他看代码的人都会比较容易地理解代码结构。
 
  1. 1     h1,h2,h3,h4,h5,h6 { color: green;} 
 
上面一行代码演示的为选择器的分组,在开发过程中我们常会遇到多个选择器需要的样式是一样的,此时我们便会运用上面的代码而不是为每个选择器写一遍代码。用逗号将选择器分开,这样这些选择器便会共享同样的声明。
 
在CSS中子元素继承父元素的属性,但是它并不总按照此方式工作。我们来看一下下面一行代码,根据我们说的继承原则来看那么站点的<body>元素将使用Verdana字体。通过继承规则,所有的子元素都会继承父元素(body)的属性,理论上是这么回事。
 
  1. 1     body {font-family: Verdana, sans-serif;} 
 
但是在那个浏览器大战的血腥年代里,这种情况就未必会发生,那时候对标准的支持并不是企业的优先选择。比方说,Netscape 4就不支持继承,它不仅忽略继承,而且也忽略应用于 <body> 元素的规则。IE/Windows直到IE 6还存在相关的问题,在表格内的字体样式会被忽略。
 
那么此时我们该怎么办呢?幸运的是,你可以通过使用我们称为“Be Kind to Netscape 4”的冗余法则来处理旧式浏览器无法理解继承的问题。4.0浏览器无法理解继承,不过它们可以理解组选择器。这么做虽然会浪费一些用户的带宽,但是如果需要对Netscape 4用户进行支持,就不得不这么做。
 
  1. 1 body {font-family: Verdana, sans-serif;} 
  2. 2 p, td, ul, ol, li, dl, dt, dd {font-family: Verdana, sans-serif;} 
 
 
 
类似上面的代码,如果我们希望父元素中的某些元素不继承父类的属性,这时我们也可以像上述代码一样在声明完<body>元素的样式以后,单独地声明一下与父类元素不同的元素的样式,这样也就巧妙地避开了所有的子元素都继承父元素。
 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

JSP应用开发详解(第三版)

本书结合JSP和Servlet的最新规范,从基本的语法和规范入手,以经验为后盾,以实用为目标,以实例为导向,以实践为指导,深入浅出地讲解了JS...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊