CSS高级语法有哪些?学习CSS语法

CSS高级语法


选择器的分组


CSS高级语法


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


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 还存在相关的问题,在表格内的字体样式会被忽略。我们又该如何是好呢?


友善地对待Netscape 4


幸运地是,你可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承的问题。


body  {

     font-family: Verdana, sans-serif;

     }


p, td, ul, ol, li, dl, dt, dd  {

     font-family: Verdana, sans-serif;

     }


4.0 浏览器无法理解继承,不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽,但是如果需要对 Netscape 4 用户进行支持,就不得不这么做。


继承是一个诅咒吗?


如果你不希望 "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, "Times New Roman", serif;

     }


CSS声明总是以分号(;)结束,声明组以大括号({})括起来:


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


为了让CSS可读性更强,你可以每行只描述一个属性:


p

{

color:red;

text-align:center;

}


CSS 颜色值的写法


在描述颜色的时候,除了使用英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:     


p { color: #ff0000; }


为了节约字节,我们可以使用 CSS 的缩写形式:     


p { color: #f00; }


我们还可以通过两种方法使用 RGB 值:


p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); }


提示:当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位。


本站有介绍了CSS使用十六进制代码设置颜色,以及CSS使用rgb属性设置颜色,你可以参考该部分的内容进行更多了解。


CSS 注释


注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。


CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:


/*这是个注释*/        

p       

{        

text-align:center;       

/*这是另一个注释*/        

color:black;        

font-family:arial;       

}


微信扫码咨询
建站咨询
cache
Processed in 0.008920 Second.