css3技术

(层叠样式表)(3)

字号+ 作者:H5之家 来源:H5之家 2015-09-06 18:09 我要评论( )

如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设

如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么做的好处是,当你从现有的规则中增减声明时,会尽可能地减少出错的可能性。就像这样:

p{   text-align:center;   color:red; }

你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:

p{   text-align:center;   color:black;   font-family:arial; }

空格和大小写

大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:

body{   color:#000;   background:#fff;   margin:0;   padding:0;   font-family:Georgia,Palatino,serif; }

是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。[1] 

高级语法 选择器的分组

你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

h1, h2, h3, h4, h5, h6 {   color:green; }


  

继承及其问题

根据 CSS,子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则:

body{   font-family:Verdana,sans-serif; }


  

根据上面这条规则,站点的 body 元素将使用 Verdana 字体(假如访问者的系统中存在该字体的话)。

通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规则,所有 body 的子元素都应该显示 Verdana 字体,子元素的子元素也一样。并且在大部分的现代浏览器中,也确实是这样的。

但是在那个浏览器大战的血腥年代里,这种情况就未必会发生,那时候对标准的支持并不是企业的优先选择。比方说,Netscape 4 就不支持继承,它不仅忽略继承,而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题,在表格内的字体样式会被忽略。我们又该如何是好呢?

关于继承,还有一个特别的地方,如果<html>上没有设置background相关属性,而<body>上有设置,则<body>会向上传播到<html>上;

并不是所有属性都能继承,比如CSS盒子模型相关属性就是不能继承的。

继承是一个诅咒吗?

如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承,又该怎么做呢?比方说,你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则,这样它就会摆脱父元素的规则:

body {   font-family:Verdana,sans-serif; } td, ul, ol, ul, li, dl, dt, dd {   font-family:Verdana,sans-serif; } p {   font-family:Times,"TimesNewRoman",serif; }

关于继承其实是一个很好、很强大的功能,因为有继承,我们可以少写很多code. 

删除样式

使用Frontpage编辑时,在页面视图下打开样式文件。格式/样式命令,从打开的“样式”对话框中选择要删除的样式,单击“删除”。

专业人士可能会用代码写CSS样式,例如给一个div块内的内容连接样式可以使用下面的语句:<div class="classname" >,而当你要删除样式时,把尖括号里面的"class='classname' "语句去掉即可。

参考资料

词条标签:

软件 计算机学 网页开发 互联网

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML CSS网页基础开发教程第1讲01

    HTML CSS网页基础开发教程第1讲01

    2015-10-02 16:42

  • HTML CSS网页基础开发教程第1讲02

    HTML CSS网页基础开发教程第1讲02

    2015-10-02 16:42

  • HTML CSS网页基础开发教程第1讲03

    HTML CSS网页基础开发教程第1讲03

    2015-10-02 16:42

  • HTML CSS网页基础开发教程第1讲04

    HTML CSS网页基础开发教程第1讲04

    2015-10-02 16:42

网友点评