一、样式表(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;

JS操作CSS样式的更多相关文章

  1. 11-13 js操作css样式

    1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...

  2. js操作css样式、js的兼容问题

    一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...

  3. js操作css样式,null和undefined的区别?

    1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...

  4. JS操作css样式用法

    //html <div id="div1" style="background:red;"> 修改背景颜色 </div> <but ...

  5. js中css样式

    1.js操作css样式 例如 div . style . width=“100px”. 就是在div标签内我们添加一个style属性,并设定了width值,这种写法会给标签带来大量的style属性,跟 ...

  6. jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  7. js改变css样式

      CreateTime--2017年10月31日15:14:12 Author:Marydon js改变css样式 1.js改变单个css样式 HTML部分 <div id="tes ...

  8. 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  9. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

随机推荐

  1. IOS第二天多线程-02一次性代码

    ********** #import "HMViewController.h" #import "HMImageDownloader.h" @interface ...

  2. svn Q&amp;A

    Q1:在svn commit的时候,会出现某某文件 is missing.这是因为此次提交时:远程repository中并没有该文件,而且本地repository也没有该文件. 具体原因: 1.可能因 ...

  3. 知识总结提炼-AP模块

    http://www.cnblogs.com/bruce_zhao/p/3809686.html 应付模块业务操作流程 供应商管理 供应商概述 在您使用 Oracle Purchasing 之前,需要 ...

  4. mybatis3批量更新 批量插入

    在公司ERP项目开发中,遇到批量数据插入或者更新,因为每次连接数据库比较耗时,所以决定改为批量操作,提升效率.库存盘点导入时,需要大量数据批量操作. 1:数据库连接代码中必须开启批量操作.加上这句,& ...

  5. 页面多个Jquery版本共存的冲突问题,解决方法!

    示例如下: <script type="text/javascript" src="jquery.js"></script> <s ...

  6. Linode和DigitalOcean lnmp一键安装包哪个好?

    Linode和DigitalOcean都是非常棒的VPS厂商,512MB内存的VPS每月低到5美元,搭建wordpress网站,非常方便,甚至可以多人共用,服务器足够强悍,跑几个wordpress博客 ...

  7. ASP.net core 2.0.0 中 asp.net identity 2.0.0 的基本使用(一)—修改数据库连接

    开发环境:vs2017  版本:15.3.5 项目环境:.net framework 4.6.1    模板asp.net core 2.0  Web应用程序(模型视图控制器) 身份验证:个人用户账号 ...

  8. BZOJ 1202: [HNOI2005]狡猾的商人 [带权并查集]

    题意: 给出m个区间和,询问是否有区间和和之前给出的矛盾 NOIp之前做过hdu3038..... 带权并查集维护到根的权值和,向左合并 #include <iostream> #incl ...

  9. docker安装优化

    1.优化 #关闭防火墙 [root@docker03 ~]# systemctl stop firewalld.service [root@docker03 ~]# systemctl disable ...

  10. Spring Boot笔记五: Web开发之Webjar和静态资源映射规则

    目录 Webjar /** 访问当前项目的任何资源 欢迎页 标签页图标 Webjar 开始讲到Spring Boot的Web开发了,先介绍Webjar,这个其实就是把一些前端资源以jar包的形式导入到 ...