zoukankan      html  css  js  c++  java
  • JS操作CSS样式

    一、样式表(css)

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

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

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

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

    如何定义CSS样式:

      通过<style>标签在HTML中定义样式表,下面是一个最简单样式表的例子:

       <style type=”text/css”>

      H1{color:blue;}

       </style>

      应该把<style>定义写在<head>与</head>部分。

    样式表的规则:

      <style>标签内的所有元素都被称为规则,规则是作用于特定的HTML元素之上的。规则中包含控制特定元素外观的属性与属性值。

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

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

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

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

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

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

    定义指定元素的样式:

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

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

       <h1 style=”color:red; text-align:center;”>This is Test</h1>

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

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

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

      <style type=”text/css”>

      #intro{color:blue;}

      </style>

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

    HTML标签的类属性:

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

       <p class=”smallprint”>This is Test</p>

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

       <style type=”text/css”>

      .smallprint{color:blue;}

       </style>

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

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

    CSS的属性:

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

    使用外部样式表文件:

      当然可以在HTML文档中嵌入<style>标签以实现对HTML外观的定义,但是却使得HTML变地更加的长与复杂,后期维护也变的非常的麻烦。解决该问题的方案就是在HTML文档中使用来自于外部独立的CSS文件。更重要的是使用外部CSS文件,可以实现一个样式表为多个HTML服务,从而节省了大量的代码。而且可以根据需要临时打开或关闭样式表功能。

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

      我们可以通过在HTML文档的<head>标签中通过<link>标签来引用外部CSS文件,语法如下:

       <link rel=”stylesheet” type=”text/css” href=”style.css”>

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

    编写独立的CSS文件:

      .css文件是简单的文本文件,用普通的文本编辑器就可以编写。.css文件保存的实际上就是一些CSS规则列表,当然该文件不能够包含HTML标签。其实.css文件的内容与HTML中的<style>与</style>的内容是一样的,只不过是写在了一个独立的文件中而已。比如下面的形式,就是一个.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()方法查找到该对象。比如:

       <h1 id=”head1”>This is Text</h1>

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

     

  • 相关阅读:
    PS教程:合成复古人物风格海报的技巧
    配色那么差,还不‘哥屋恩’去看电影!
    中国最贵海报设计师!黄海究竟凭什么?
    这才叫会PS,普通照片分分钟P成好莱坞海报!
    安装ADOBE全系列软件的步骤
    UI设计教程:几步教你如何创建一个漂亮又好吃的饼干
    Design and Analysis of Algorithms_Brute Froce
    Design and Analysis of Algorithms_Fundamentals of the Analysis of Algorithm Efficiency
    Design and Analysis of Algorithms_Introduction
    从顺序查找窥探平均时间复杂度分析的一般化方法
  • 原文地址:https://www.cnblogs.com/reganLi/p/3406593.html
Copyright © 2011-2022 走看看