zoukankan      html  css  js  c++  java
  • 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代码,一边在不同的浏览器上进行预览,及时作出调整。

  • 相关阅读:
    synchronized (lock) 买票demo 线程安全
    springboot项目搭建
    Maven命令
    Mybatis的mapper文件中$和#的用法及区别详解
    mybatis映射文件mapper.xml的写法(collections...)
    MyBatis-动态SQL的if、choose、when、otherwise、trim、where、set、foreach使用(各种标签详解), 以及实体间关系配置
    024 搭建前台系统-----乐优商城工程启动步骤教程
    023 商品管理功能03-----商品修改
    023 商品管理功能02-----商品新增
    022 商品管理功能01-----商品查询
  • 原文地址:https://www.cnblogs.com/jacinthcc/p/4679826.html
Copyright © 2011-2022 走看看