JavaScript权威指南（个人笔记）：（九）脚本化CSS

层叠样式表（Cascading Style Sheet，CSS）是一种指定HTML文档视觉表现的标准

通常将单独的HTML元素和CSS样式分开并把他们定义在一个样式表（stylesheet）中会更有用

样式表通过选择器将一组样式属性和使用选择器（selector）描述的一组HTML元素关联在一起。

一个选择器基于元素ID，类名或标签名或更多条件指定（或称“选择”）一个或多个文档中的元素

CSS样式表的基本元素是样式规则，他们由选择器和包裹在一对“{}”中的CSS属性和值组成

当一个样式表需要在网站的多个页面中使用时，通常将其保存在自己的文件中比较好，这个文件不含任何HTML标签。他可以被引入到HTML页面中

 

层叠

该术语指示了应用于文档中任何给定元素的样式规则是各个“来源”的“层叠”效果：

1.Web浏览器的默认样式表

2.文档的样式表

3.每个独立的HTML元素的style属性

任意给定元素的视觉表现可能是来自3个来源的一个样式组合。一个元素甚至可能匹配样式表中的多个选择器。

 

复合属性

例如：代替指定border-top，可以分别指定border-top-color，border-top-style和border-top-width等属性

 

 

 z-index只对兄弟元素（例如，同一个容器的子元素）应用堆叠效果。如果两个元素不是兄弟元素之间的重叠，那么设置他们的z-index属性无法决定哪一个显示在最上面。

非定位元素总是以防止重叠的方式进行布局，因此，z-index属性不会应用到他们上面。尽管如此，他们默认的z-index值为0，这意味着z-index为正值的定位元素显示在常规文档流的上面，而z-index为负值定位元素显示在常规文档流的下面。

 

如果元素的display属性设置为none，在文档布局中不再给他分配空间，它各边的元素会合拢，就当他从来不存在。例如，在创建展开和折叠轮廓的效果时display属性很有用。

 

visibility和display属性对绝对和固定定位的元素的影响时等价的，因为这些元素都不是文档布局的一部分。然而，在隐藏和显示定位元素时一般首选visibility属性。

 

除了background-color属性，也可以为元素指定背景图像。background-image属性指定使用的图像，background-attachment，background-position和background-repeat属性指定如何绘制该图像的一些高级细节。复合属性background允许一起指定这些属性值。

 

如果没有为元素指定背景颜色或图像，它的背景通常透明，理解这点非常重要。例如，如果一个<div>绝对定位在常规文档流中一些已存在的文本上方，默认情况下，文本将透过<div>元素显示出来。如果<div>同时包含了自己的文本，字母将重叠在一起而变得模糊不清。尽管如此，默认情况下不是所有元素都是透明的。例如，具有透明背景的表单元素看起来不透明，并且（如<button>）有默认的背景颜色。用background-color属性可以覆盖默认颜色，如果强烈要求可以将其显示设置为“transparent”。

 

clip属性的值指定了元素的裁剪区域。语法是：rect(top right bottom left)，如：

style="clip:rect(0 100px 100px 0);"

 

注意：要配合定位来使用

 

脚本化内联样式

脚本化CSS最直截了当的方法就是更改单独的文档元素的style属性。

style也是元素属性的对象，它可以在JavaScript中操作。

例如，让元素e的文本变成加粗和蓝色，可以使用如下代码设置font-weight和color等样式属性对应的JavaScript属性：

e.style.fontWeight = "bold";

e.style.color = "blue";

注意：e.style.font-weight = "bold";　　// 语法错误（在JavaScript中，连字符是减号，所以不能这样写）

 

所有的值都应该是字符串

所有的定位属性都需要包含单位。设置元素e的left属性值为300像素的正确做法是：

e.style.left = "300px";

如果通过计算的值来设置left属性，需要保证在最后增加单位：

e.style.left = (width + 10)  + "px";

注意：作为加上字符串单位的副作用，计算的数值结果会转变成字符串。

 

CSSStyleDeclaration对象的属性可以理解为代表内联样式，但是它只返回有意义的值：JavaScript代码已经设置的值或者HTML元素显示设置了想要的内联样式的值。

例如：文档可能可能包含一个样式表以设置所有段落的左外边距为30像素，但是当在读取段落元素的marginLeft属性时，会得到一个空字符串，除非该段落上有一个style属性覆盖了样式表中的属性。