CSS样式表的基本结构和CSS3新增属性-opacity

css样式表是一种用来控制网页排版和表现的语言，通过CSS样式表，我们可以将网页的代码和样式分离开来，这不仅可以减少代码的冗余，提高网页的性能，更能让我们的代码更加清晰易读，方便维护和修改。本文将探讨CSS样式表的基本结构以及CSS3新增属性-opacity。

一、CSS样式表的基本结构

CSS样式表由选择器和声明组成，其中选择器用来选择需要设置样式的html元素，声明则用来设置该元素的样式。

例如：

``` p{ font-size: 16px; color: #333; line-height: 1.5; } ```

上面的例子中，p就是选择器，{}里面的属性就是声明。

二、CSS3新增属性-opacity

opacity属性用于指定一个元素的透明度，其取值范围在0到1之间。其中，0表示完全透明，1表示完全不透明，0.5表示半透明。

例如：

``` div{ opacity: 0.5; } ```

上面的例子中，div元素的透明度被设置为了半透明，可以看到背景颜色和下面的内容。

opacity属性不仅可以设置整个元素的透明度，还可以设置元素内部的透明度。

例如：

``` div{ background-color: rgba(255,0,0,0.5); } ```

在上面的例子中，我们使用了rgba()函数来设置div元素的背景颜色和透明度。其中，分别代表了红色、透明度为0.5的颜色。

需要注意的是，使用opacity属性设置透明度会影响到元素内所有的子元素，如果想单独设置子元素的透明度，可以使用rgba()函数或者继承属性。

例如：

``` div{ opacity: 0.5; } div p{ opacity: 1; } ```

在上面的例子中，我们设置了div元素的透明度为0.5，但是为了保持p元素的完整性，将其透明度设置为1，即完全不透明。如果不设置p元素的透明度，则p元素也会继承div元素的透明度。

总结：

CSS样式表的基本结构由选择器和声明组成，其中选择器用来选择需要设置样式的HTML元素，声明则用来设置该元素的样式。

CSS3新增属性-opacity，用于指定一个元素或元素内部的透明度，其取值范围在0到1之间，0表示完全透明，1表示完全不透明，0.5表示半透明。需要注意的是，使用opacity属性设置透明度会影响到元素内所有的子元素，如果想单独设置子元素的透明度，可以使用rgba()函数或者继承属性。