zoukankan      html  css  js  c++  java
  • CSS 基础知识(下)

    第二章CSS的应用方式

        这章节将开始为您介绍CSS的应用。当然一开始要介绍的是如何去建立个样式表

    (Style Sheets),包括了声明的方式和应用在网页上的方法,最後还会为您概述一下CSS的一些特性。概略来说,CSS的声明有三种方式:

     一、基本声明:最典型的CSS声明方式。

    element {property: value} 用中文来表示的话,也就是元件

    (标签) {性质(属性)

    名称: 设定值} 

     例如: H3 {COLOR: BLUE} 即为一组声明。

     二、集体声明:同时声明某个或数个元件(标签)(各元件(标签)间以逗号分隔)的一组或数组规则(性质)(各组规则间以分号分隔)。

      元件(标签) {性质(属性)名称1: 设定值1;性质(属性)名称2: 设定值2;... }

    或是

      元件A(标签A), 元件B(标签B), 元件C(标签C), ... {性质(属性)名称1: 设定值1;性质(属性)名称

    2: 设定值2;...} 

     例如:TD {COLOR: BLUE;font-size: 9pt;} 

    或是TD,P,DIV {COLOR: BLUE;font-size: 9pt; } 

        三、分项声明:将许多样式规则分组再分别声明。

        元件A(标签A) {性质(属性)名称1: 设定值1; 性质(属性)名称2: 设定值2; } 

        元件A(标签A) {性质(属性)名称3: 设定值3; 性质(属性)名称4: 设定值4; } 

     例如:

        TD { COLOR: BLUE; font-size: 9pt} 

        TD { font-family: "标楷体"; line-height: 150%} 

     这样子的声明方式并不会互相抵触,因为所声明的性质是不同的。如果不小心对同样一个性质作了重复的声明,则只有後来声明的设定值才会发生作用。

     要附带提一下的是,在您的声明中,只要您的格式正确就会被接受,而不论是大小写、空白或换行都不会对显示的结果有影响的,您可依自己习惯来编写。

     CSS的应用方法

    接下来要为您介绍的是将所建立的样式表应用在网页上的四种基本方法。

    一、使用STYLE属性:将STYLE属性直接加在个别的元件标签里。

      <元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...> 

        例如:

    <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%> 

        这种用法的优点是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一

    性』。

        二、使用STYLE标签:将样式规则写在<STYLE>...</STYLE>标签之中。        

        <STYLE TYPE="text/css"> 

          <!-- 

            样式规则表

          -->  

         </STYLE> 

      例如:

         <STYLE TYPE="text/css"> 

           <!-- 

             BODY {color: BLUE;background: #FFFFCC;font-size: 9pt} 

             TD, P {COLOR: GREEN;font-size: 9pt} 

            --> 

         </STYLE>

         通常是将整个的<STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这

  • 相关阅读:
    OSG中的示例程序简介(转)
    空间点到直线垂足坐标的解算方法 (转)
    OpenscenGraph中控制swapbuffer的方法(用于多机大屏幕同步显示机制)
    吏治 ? 官治 ?
    C++中使用union的几点思考(转)
    一个穷人移民美国三年的生活经历(转)
    展望99股市:谁是重组大黑马?(转)
    mysql 在一个实例运行情况下再搭建一个实例
    在CentOS下安装crontab服务
    Zabbix监控之迁移zabbix server
  • 原文地址:https://www.cnblogs.com/Web-XS/p/6993935.html
Copyright © 2011-2022 走看看