js对应css样式,JS操作CSS样式

一、样式表(css)

使用样式表可以更好的显示WEB文档，也可以结合javascript从而实现很好的控制样式表。

样式(css)与内容(html)：

HTML是处理文档结构的，HTML可以实现如何把WEB文档划分为：标题、段落、正文、列表等元素的。HTML没有办法很好的表现WEB文档的外观。HTML定义了文档的结构，这样很好。现在只需要通过CSS控制页面的外观就可以了，而且不会改变HTML的内容。

CSS其实，就是实现了对HTML的再次定义，如果某个浏览器不支持CSS，那该浏览器一样可以浏览页面，只不过是无法看到CSS定义的外观而已。

如何定义CSS样式：

通过

H1{color:blue;}

应该把

样式表的规则：

样式表规则是由以下部分所组成的：

选择器：为HTML标签，描述将有哪个HTML标签将会受到影响。

属性名称：HTML标签的特定属性，既对该属性进行重新设定。

属性值：每个属性名称的值。

这里要注意一点，选择器可以为多个标签，也就是一组规则应用于多个HTML标签。

HTML标签本身的属性值，可以覆盖CSS的设定。

定义指定元素的样式：

按照以上的方法，可以定义指定类型标签的样式，也就是说，该类标签都会受到影响。其实也可以定义指定标签的样式，其他同类标签将不会受到影响。

可以在HTML标签内部定义只应用于该标签的样式：

This is Test

这被成为行内样式，因为该样式是定义在HTML标签内部的。

利用HTML标签的ID属性来定义样式：

可以定义HTML标签的ID属性，然后在样式表定义中把规则应用于ID为该属性的所有标签就可以实现这个功能了。CSS使用符号 # 来表明将该规则应用于特定ID的标签。比如：

#intro{color:blue;}

临时插上一句：笔者不推荐给多个标签起同一个ID，ID值应该始终是唯一的。如果需要给多个标签使用一个样式表的话，可以使用类，下面会讲到的。

HTML标签的类属性：

如果希望多个HTML标签使用同一样式的话，可以给HTML标签定义class属性。例如：

This is Test

以上

标签隶属于smallprint类，在样式表中给类定义规则的话，必须在类名称之前加一个句点(.)以表明该规则将用于类标签。比如：

.smallprint{color:blue;}

以上样式表定义了应用于smallprint类的样式。

也可以把一个HTML标签添加到多个类中，比如：class=”smallprint bold ”。这样定义在所有类上的样式都将应用到该标签。

CSS的属性：

CSS支持多种属性，包括：文本对齐、更改颜色、处理字体、设置边框等。

使用外部样式表文件：

当然可以在HTML文档中嵌入

如何可以使用外部CSS文件？

我们可以通过在HTML文档的

标签中通过标签来引用外部CSS文件，语法如下：

使用独立的CSS文件，很好的实现了3类文件的分离(HTML、CSS、JAVASCRIPT)。

编写独立的CSS文件：

.css文件是简单的文本文件，用普通的文本编辑器就可以编写。.css文件保存的实际上就是一些CSS规则列表，当然该文件不能够包含HTML标签。其实.css文件的内容与HTML中的的内容是一样的，只不过是写在了一个独立的文件中而已。比如下面的形式，就是一个.css文件：

Body{color:blue;}

P{text-align:center;

Margin-left:20%;

Margin-right:20%;}

H1,h2,h3{color:red;}

如何利用javascript控制样式：

利用javascript可以轻松的控制页面上的样式，就算没有样式表，也可以通过javascript控制页面声的任何元素的样式。

通过修改style对象的属性，可以修改任何一个对象的样式。首先我们就是要查找到要修改样式的对象，可以预先在对象中定义ID属性，然后由getElementById()方法查找到该对象。比如：

This is Text

Document.getElementById(“head1”).style.color=red;