<四>脚本化CSS
日期：2014-05-16 浏览次数：20675 次
<4>脚本化CSS
四、脚本化CSS
层叠样式表（Cascadeing Style Sheet, CSS）是一种指定HTML文档视觉表现的标准。本节不详细介绍CSS的全部内容，只是提到一些基础，基本的脚本化。
CSS概览
Html文档的视觉显示包含很多变量：字体，颜色，间距等。CSS标准列举了这些变量，我们称为样式属性。CSS定义了这些属性以指定字体，颜色，外边距，边框，背景图片，文本对齐样式，元素尺寸和元素位置，这些属性都有各自可以取的值。
通常将单独的html元素与css样式分开，并把css样式定义在一个样式表（stylesheet）中。样式表通过选择器将一组样式属性和使用选择器描述的一组html元素关联起来。
用<style>标签把一个css样式表放在<head>标签里，它就和html文档关联在一起了。还可以通过<link>关联保存成文件的外部的样式表。类似<script>元素，<style>元素内容页不会当做html来解析。
关于css的定义方法有几种，每种定义方法的优先级，以及css各属性的使用这里不详细给出，可以查看专门的资料。这里主要给出用javascript怎么操作css属性。
重要的css属性
比如css定位属性position的使用：
脚本化内联样式
脚本化css最直截了当的方法就是更改单独的文档元素的style属性。Style属性的值不是字符串而是一个CSSStyleDecalration对象。如：
注意：在css中使用连字符的属性在javascript需要转成驼峰表示法，如font-size变为fontSize.
Html元素的style属性时它的内联样式，它覆盖在样式表中的任何样式说明。同样内联样式style也可以通过前面介绍过的属性操作方式来设置，比如setAttribute(“style”, “color：red”)等。
其他还有关于css实现动画，获取计算出来的最终样式，操作css样式类等不记录了，关于这部分还是使用类似jquery框架更方便，但是理解最基本最原生的操作方式还是非常有必要的。
四、脚本化CSS
层叠样式表（Cascadeing Style Sheet, CSS）是一种指定HTML文档视觉表现的标准。本节不详细介绍CSS的全部内容，只是提到一些基础，基本的脚本化。
CSS概览
Html文档的视觉显示包含很多变量：字体，颜色，间距等。CSS标准列举了这些变量，我们称为样式属性。CSS定义了这些属性以指定字体，颜色，外边距，边框，背景图片，文本对齐样式，元素尺寸和元素位置，这些属性都有各自可以取的值。
通常将单独的html元素与css样式分开，并把css样式定义在一个样式表（stylesheet）中。样式表通过选择器将一组样式属性和使用选择器描述的一组html元素关联起来。
用<style>标签把一个css样式表放在<head>标签里，它就和html文档关联在一起了。还可以通过<link>关联保存成文件的外部的样式表。类似<script>元素，<style>元素内容页不会当做html来解析。
关于css的定义方法有几种，每种定义方法的优先级，以及css各属性的使用这里不详细给出，可以查看专门的资料。这里主要给出用javascript怎么操作css属性。
重要的css属性
比如css定位属性position的使用：
脚本化内联样式
脚本化css最直截了当的方法就是更改单独的文档元素的style属性。Style属性的值不是字符串而是一个CSSStyleDecalration对象。如：
Element.style.fontSize = “24pt”; Element.style.fontWeight = “bold”; Element.style.color = “blue”;
注意：在css中使用连字符的属性在javascript需要转成驼峰表示法，如font-size变为fontSize.
Html元素的style属性时它的内联样式，它覆盖在样式表中的任何样式说明。同样内联样式style也可以通过前面介绍过的属性操作方式来设置，比如setAttribute(“style”, “color：red”)等。
其他还有关于css实现动画，获取计算出来的最终样式，操作css样式类等不记录了，关于这部分还是使用类似jquery框架更方便，但是理解最基本最原生的操作方式还是非常有必要的。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
