导读:上篇博客说到用XSL去实现XML文档的表现形式的美化,那么另外一种方式就是CSS的使用。本篇博客系统的介绍CSS,下篇博客,将系统的介绍XSL。

一、CSS的发展历史

1996年,层叠样式表(Cascading Style Sheets,CSS)是作为把有关样式属性信息如字体和边框加到HTML文档中的标准方法提出来的。

在W3C的努力下,CSS有一套比HTML更为清晰,数量并不十分巨大的规则集。CSS在应用中不断走向成熟,现在,CSS具有两个不同层次的标准:CSS1和CSS2.

1.1,CSS1

CSS1(CSS Level1):是CSS的第一层次标准,正式发布于1996年12月17日。后来改版在1999年1月11日进行了修改。CSS1提供简单的样式表机制,使得网页的编者通过附属的样式对HTML文档的表现进行描述。

CSS1语言易读性和可写性都比较强,而且用常见的桌面表现术语对样式进行规定。CSS意味着可以把多个样式表,包括不同来源的单独的样式表,层叠在一起产生最终的文档表现样式。

1.2,CSS2

CSS2(CSS Level2):在1998年5月12日正式被作为标准发布。CSS2基于CSS1,包含了CSS1所有的特色和功能,而且在多个领域进行了完善。

CSS2,通过把表现样式文档和文档内容进行分离,从而简化了Web的编写和网站的维护。CSS2,支持多媒体样式表,使得能够根据不同的输出设备为文档定制不同的表现样式。CSS2的标准还可以实现内容定位、下载字体、表格布局和自动计数等功能。

总体说来,CSS2是在CSS1的基础上增添了音频样式单、媒体类型、特性选择符和其他新的功能。

二、CSS的优势

2.1,方便修改网页样式

由于CSS对网页样式的控制可以独立的进行,这样就使修改网页元素的格式变得很容易,网页的更新工作从此也变得异常轻松。

2.2,减少网页的体积

CSS的强大表现功能,使得可以凭借短短的几行代码来为网页增加特殊的视觉效果,使得网页中使用图片的数量减少。对于大型的网页来说,这样的方法可以明显地提高其下载和显示的效率。

2.3,轻松增加网页的特殊效果

通过图形处理软件,可以将一个图形中需要变化的内容以位图形式输入,在使用相应的滤镜,以GIF或JPEG格式放到网页中发布。但是,过多的使用图像会破坏原有文字的存储格式,并且会延长下载时间。现在,通过使用CSS图像滤镜,就可以在不增加网页体积的情况下,实现一些特殊的视觉效果,为网页增添生气和创意。

2.4,其他

CSS是由W3C制定的标准,得到了最为广泛的支持,所以,CSS具有极其良好的适应性(兼容)。再者,在CSS出现之前,网页设计者,通常都是用表格来进行网页元素定位,但是,表格的适用范围小,并且会减慢浏览器对于网页的解释和显示速度,通过CSS,就可以在网页布局中达到随心所欲的地步。(表格适用于规则的网页排版)

三、CSS的功能

3.1,灵活定制网页元素风格

用CSS可逐个地定义元素在页面中的 显示风格,如果想要定义某种元素的多种外观,可以创建这种元素的多个类,把网页中的该元素用不同的类定义就可以了。

3.2,迅速的更新网站风格

CSS的出现,把整个网站所有页面的风格信息集中在一个被称为外部CSS样式表的文件中,这是一个以 .CSS为扩展名的文件,任何网页,无论是HTML还是XML编写的,都可以通过一定的语句对这个文档进行引用。通过这种引用,改变了整个网站中的与样式表文件相连接的所有网页。

3.3,组合不同风格的网页

通过CSS,不同的组织和地域中的设计者,只需将自己的内容直接放到网页中去,然后通过将网页和CSS文件相连接,达到多种网页风格的融合。

四、总结

一个CSS样式表就是一组规则,每个规则给出此规则所适用的元素的名称,以及此规则要应用于哪些元素的样式。虽然,CSS是通过附属的样式对HTML的内容进行描述,但是,因为HTML承担着CSS标志和HTML标志之间向后兼容的任务(如,要正确的支持CSS的nowrap属性,就要求废除HTML中非标准的但又经常使用的NOWRAP元素),而XML元素没有任何预定义的格式规定,不会限制何种CSS样式只能用于何种元素,所以,CSS和XML的组合要比CSS和HTML更好。

【HTML/XML 7】CSS层叠样式表的更多相关文章

  1. CSS层叠样式表(Cascading Style sheets)

    CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...

  2. 《精通CSS层叠样式表》

    书名 <精通CSS层叠样式表> 图片 时间 2017-7月 学习 感觉和ps一样对我都不友好 3天撸完

  3. CSS:CSS层叠样式表的概述

    CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...

  4. css:层叠样式表-网页布局基础

    css:层叠样式表:一.写法分类: 1.内联(行内,写在标签里面,以属性的形式表现,属性名是style) 例:<table style="background-color: aqua& ...

  5. 实验时css层叠样式表不更新的情况

    自定义了CSS的样式,希望在页面中起作用.因为MVC中Views/Shared/_Layout.cshtml是所有视图的公共文件,如下: <!DOCTYPE html> <html& ...

  6. 前端内容之CSS层叠样式表

    CSS(Cascading Style Sheet层叠样式表) 把HTML认为是网页的骨架 那么CSS就是用于对HTML骨架进行修饰,比如加背景色.显示方式.位置等等属性 CSS语法形式: 一个完整的 ...

  7. CSS层叠样式表的层叠是什么意思(转自知乎)

    转自知乎上的回答:http://www.zhihu.com/question/20077745 解答一: 层叠指的是样式的优先级,当产生冲突时以优先级高的为准.1. 开发者样式>读者样式> ...

  8. css 层叠样式表

    css选择器 派生选择器 根据其元素在其上下文关系来定义样式 <style type="text/css">body{ font-size:12px; color:re ...

  9. css层叠样式表

    css的三种声明方式    1.行内样式        通过每个标签都有的style属性        <div style="color:red;">黄卫星说没有内容 ...

随机推荐

  1. linux 定时器编程实例(完善中).....

    最近在写linux 下的定时器编程实验,测试发现 usleep函数在 x86 架构下的定时还是比较准确的,在arm9下 就不太准了. 今天用linux 下的setitimer()函数进行了定时 器的测 ...

  2. (C#) Parse xml 时, 返回的node值总是null。

    网上查了一下,原因在于要parse的Xml文件本身包含了一些namespace,这些需要被添加进去. http://msdn.microsoft.com/zh-cn/library/system.xm ...

  3. VS 开发工具中的Remote Debug 功能远程调试程序经验分享

    前言: 有时候我们Dev(开发人员)需要debug tester(测试人员)或者customer(客户)的环境,可tester的机器上没有Code,是不是有点着急? 而且是多版本应用且tester 发 ...

  4. java数组初始化的三种方式

      //第一种 int[] is= new int[3]; is[0]=1; is[1]=2; is[2]=3; //第二种 int[] is2= {1,2,3}; //第三种 int[] is3= ...

  5. RAC_Oracle集群服务安装RAC(案例)

    2015-01-23 Created By BaoXinjian Thanks and Regards

  6. HDU 1213 How Many Tables(并查集,简单)

    题解:1 2,2 3,4 5,是朋友,所以可以坐一起,求最小的桌子数,那就是2个,因为1 2 3坐一桌,4 5坐一桌.简单的并查集应用,但注意题意是从1到n的,所以要减1. 代码: #include ...

  7. MST_kruskal

    kruskal是求最小生成树的算法. 首先,kruskal就是把所有边按照权值从小到大的顺序排列,这一步可以直接使用sort,然后依次考查每一条边,设w=(u,v)表示从u到v的一条边的权值为w,则有 ...

  8. HTML 表单验证和事件

    1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...

  9. C#(二维数组/集合)

    一.二维数组int [,] array = new int[5,3];//有五个一维数组,每一个一维数组有3个元素 /打印出来一个“王”这个字string[,] wang = new string[, ...

  10. 【Java】图片高质量缩放类

    package com.test; import com.sun.image.codec.jpeg.JPEGImageEncoder; import com.sun.image.codec.jpeg. ...