CSS基础知识

1.1 CSS概念

  CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,是用于控制网页样式并允许样式信息与网页内容分离的一种技术。CSS是1996年由W3C审核通过并推荐使用的。它以HTML语言为基础,提供了丰富的格式化功能,如字体、颜色、背景以及排版等,由网页设计者针对各种显示设备(如显示区、打印机、投影仪、移动终端等)来设置不同的样式风格。CSS扩展了HTML的功能,使网页设计者能够 以更有效的方式设置网页格式。

  CSS是由W3C组织负责制定和发布的。1996年12月,发布了CSS1.0规范;1998年5月,发布了CSS2.0规范。

  在CSS还没有被引入页面设计之前,传统的HTML语言要实现页面美工设计是非常麻烦的。比如要在一个网页中定义一段文字为红色字体,并作为标题,我们可以使用<font>标记来实现,代码如下:

<h1><font color="#FF0000" face="宋体">CSS标记</font></h1>

  这样做似乎没有什么问题。但如果页面中需要设置这种格式的文字很多:问题就出来了:要在每个地方都重复这段代码吗?如果这种格式还出现在网站中的其他页面,我们能忍受这种无聊的大量重复的工作吗?更严重的问题是如果这个格式需要修改,比如红色字体要改为蓝色字体,我们需要一个个找出来并保证不遗漏任何一个,然后去修改,这需要浪费多少时间和精力?

  所以,传统的HTML进行网页设计时存在大量的缺陷,而我们引入了CSS技术和HTML结合后,情况得到了明显的改善。CSS带来以下好处。

  1.将格式和结构分离

    格式和结构的分离,有利于格式的重用及网页的修改维护。

  2.精确控制页面布局

  能够对网页的布局、字体、颜色、背景等图文效果实现更加精确的控制。

  3.制作体积更小、下载更快的网页

  CSS只是简单的文本、使用它可以减少表格标记、图像用量及其他加大HTML体积的代码。

  4.可以实现许多网页同时更新

  利用CSS样式表,可以将站点上所有网页都指向同一个CSS文件。  

1.2 应用CSS的步骤

  CSS文件与HTML文件一样,都是纯文本文件,因此一般的文字处理软件都可以对CSS进行编辑。记事本和Editplus等常用文本编辑器都可以很方便地编写代码。Dreamweaver代码模式下同样对CSS代码有着非常好的语法着色以及代码提示功能,可以帮助我们更高效得的编辑CSS代码。使用CSS格式化网页,需要将CSS应用HTML文档中。简单的说,CSS的应用涉及两个步骤,首先是定义CSS样式表,然后是将定义好的CSS在HTML文档中进行应用。定义CSS的基本语法是:选择器{属性:属性值},其中选择器可以是HTML标记,或自定义的类名或ID名。

  【示例1】在HTML文件中应用CSS样式。

  h1{

    color:#F00;

  }

  【示例2】新建first.html文件,代码如下: 

  <html>
    <head>
      <meta charset="utf-8">
      <title>CSS示例</title>
      <link href="first.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
      <h1>欢迎应用CSS的步骤</h1>
    </body>
  </html>

  目前使用的浏览器各式各样,绝大多数浏览器对CSS都有很好的支持,一般不用担心设计的CSS文件不被浏览器支持。但需要注意,不同浏览器对CSS的支持在细节上会有差异,不同浏览器显示的CSS效果可能会不同。所以,使用CSS设计网页一般需要对几个主流浏览器显示效果进行测试,以保证网页的兼容性良好。通常的做法是一边编写HTML和CSS代码,一边在不同的浏览器上进行预览,及时作出调整。

posted @ 2015-07-27 12:37  jacinthcc  阅读(240)  评论(0编辑  收藏  举报