CSS里面的的为什么有逗号？

2023-04-20 12:18:03html-css048

CSS里面的的为什么有逗号？,第1张

.ad_stu , .ad_2 , .ad_house{ ... }

这里用了逗号，作用是表示这3个class用的是相同的css属性。

而如果用空格，变成这样：.ad_stu .ad_2 .ad_house{ ...}，其意思就全变了。这样用空格分开，变成了在ad_stu这个容器里有一个叫ad_2的容器,而在ad_2这个容器里，又包含着一个叫ad_house的容器。最终仅仅是ad_house这个容器有这些css属性。另外2个容器是没有这些属性的。

给你举个例子(例1)：

<div class="ad_stu">我是容器A</div>

<div class="ad_2">我是容器B</div>

<div class="ad_house">我是容器C</div>

css写成：.ad_stu , .ad_2 , .ad_house{ height:196pxfloat:leftmargin: 5px 0 0 6px }

这时，上面A、B、C三个容器，呈现出来的效果是完全一样的，都是靠左浮动，高度都是196像素；

而如果用空格区分上面3个class，仍然用上面3个div结构的话，这3个容器将不会有任何效果的。

除非改成(例2)：

我是容器3

</div>

这样的话，css写成：.ad_stu .ad_2 .ad_house{ height:196pxfloat:leftmargin: 5px 0 0 6px }

这时，ad_house这个容器将呈现出来的效果就是高196像素，左浮动。。。而ad_stu,ad_2这2个容器，如果你不单独对其进行定义，将没有任何样式效果。

同样是上面例2这个例子，我加多一个div，变成如下

我是容器3

</div>

<div class="ad_house">我也是ad_house</div>

可以看到，下面加多了一个类名也叫ad_house的div，但是这个单独的ad_house同样是没有效果的。因为css中写明了，只有ad_stu下面的ad_2下面的ad_house设置了css属性。

一般来说，一个属性它是不会用逗号隔开来写的。一写在IE6、Firefox里面会出错的！还有，一个属性的多个值一般是这样写的，在这里举几个例子来:h2 { border:1px solid #333}h2 { #999 background: url(../images/001.png) no-repeat left center}属性值一般是不会用逗号隔开的。但选择器就可以用逗号隔开来写，比如：h1,h2,h3,h4,h5,h6 { margin:0padding:0}

一般写3个像素值

一个颜色值

就行

前面第一个是指上下的阴影扩散程度，正值为向下扩散，负值为向上扩散，如果为0代表向上下同时根据第三个值的大小往外扩散。

第二个是指向左右扩散，正值为向右扩散，负值为向左，为0则代表向左右同时。

第三个值简单的理解为扩散的距离

颜色值

是指阴影的颜色，你可以想象阴影的第一个（不透明）的像素颜色就是它，然后逐渐的过度到完全透明。你上面的例子，是指它用的是RGB格式（3个255是白色，但后面的0.3让它变成灰色），也可以用类似

#666666

上面讲到第三个值（像素值）时，只简单的解释为“距离”，没有直接说是指：由“实”到完全透明的距离。就是因为你给出的例子里有“第四个像素值”，这个是指阴影“扩展”。如果你会PS的话，这个很好理解；否则，你看下我下面说的，考考你理解力。

首先，第三个值已经设定阴影的距离，第四个值并不会改变这个距离。因此，它能改变的就是阴影的“透明度”。阴影一般的效果都是由不透明到完全透明，而第四个值就让阴影在设定的距离内（第三个值），阴影不完全透明（即阴影效果为不透明到半透明）。

当然第四个值如果设置比第三个值小很多的话，你基本感觉不出变化，设置大点能感觉出来。