1￥　样式表的基本语法

　　样式表由样式规则组成，规则告诉浏览器如何显示文档。
    一个样式表由3部分组成：
       selector： 选择器
       property： 属性
       value：   属性值

1）样式表的基本结构

 如：
 <HEAD>
  <STYLE type=”text/css”>
   P {
       color:red;
       font-size:30px;
       font-family:隶书；
     }
     。。。。。。
  </STYLE>
</HEAD>

1$ 内嵌样式表，写在<STYLE></STYLE>标签内并在<HEAD>中

2）样式规则（略）

    上例，括在大括号中的部分称为声明。
    声明有属性和属性值两部分组成，一个选择器可以有多个属性，各属
    性用分号隔开。

3）类样式（class）

如：<STYLE type=”text/css”>
     .red {
          color:red;
          font-size:24px;
          font-family:”隶书”;
         }
      ……
    </STYLE>
说明：
   1。类样式名前面有有一个“。”号，而且可以随意命名，最好有意义。
   2。使用标签的class属性调用定义好的类，可以改变标签显示内容的
      外观。
    如： <H2 class=”类名”>静夜思</H2

2￥ 常用的样式属性

1）文本属性

    font-size:     设置文本字体大小
    font-family:   设置文本字体类型
    font-style:     设置文本字体样式
    color:        设置文本的颜色
    text-align:     设置文本的对齐方式

特别注意：文本样式的就进原则

  当不同的样式规则应用在同一个标签上时，根据这些样式规则距离修饰文本的远近，来决定应用哪一个样式规则。

2）背景属性

   background-color: 设置背景颜色
   background-p_w_picpath: url(图像路径)；设置背景图像
   background-repeat: 设置一个指定的背景图像如何被重复显示
     background-repeat可取的值：
                repeat:     铺满整个区域，即平铺（默认情况）
                no-repeat:  不平铺，即按原来大小显示图像
                repeat-x:   在水平方向平铺
                repeat-y:   在垂直方向平铺

3）方框属性

  方框属性就是对应CSS盒子模型，常用的方框属性有3种：
   边界（margin）：就是样式盒子与其他网页元素之间的距离
        margin-top  样式盒子的上边距
        margin-right
        margin-bottom
        margin-left
   
   边框（border）：就是样式盒子的厚度和颜色
        border-style  设置边框的样式
        border-width 设置边框的宽度
        border-color  设置边框的颜色
   填充（padding）：就是盒子内容到盒子边框的距离
        padding-up  设置内容与上边框之间的距离
        padding-right设置内容与右边框之间的距离
        padding-left  设置内容与左边框之间的距离
        padding-bottom设置内容与下边框之间的距离
 
 另外：
      1。虚线，是同过方框属性中的边框属性实现的（dashed）
        如：”border-right-sytle:dashed;”
      2。细边框，是同过方框样式中的边框属性实现的（solid）
        如：”border-style:solid;”
      3。方框样式中的边框属性可以写在同一行中，用空格分隔，分号
          结束。
        如：”border-right:#ff0000 dashed 20px;”
      4。写一个常用的细边框样式
          <STYLE type=”text/css”
            .textBorder{
                       border-width:1px;
                       border-style:solid;
                       }
           </STYLE>

3￥ 特殊样式

    特殊样式，就是指定某个标签的个别属性样式，常用于CSS控制超链接样式，共有4种状态样式：
   A:link { color:red}      未被访问时的链接样式
   A:visited {color:green}   已被访问过的链接样式
   A:hover {color:yellow}   鼠标悬停在链接对象上时的链接样式
   A:active {color:blue}    鼠标正在按下时的链接文字样式
  以上样式必须与<A>标签样式或同名超链接类样式组合使用，单独使用时没有意义的
  如：
  <STYLE type=”text/css”>
   A {
       color: blue;
       text-decoration:none;
      }
   A: hover {
             color:red;
             text-decoration:underline;
            }
另外： text-decoration是一个特殊样式属性，是对文本内容的修饰
       常可用的选项有：
                    underline：下划线
                    none:      无修饰
                    linethrouth: 文字中间的横线

特别注意：

    设置按钮背景图片的类样式代码
      .PictureButton{
                    background-p_w_picpath:url(图片路径);
                    //按钮周边全为0
                    border:0px;
                    margin:0px;
                    padding:0px;
                    //设定按钮高度和大小
                    height:23px;
                    width:82px;
                    font-size:14px; //设置按钮字体大小
                    }
   ？？？？点击按钮时更改按钮背景？？？？？？？
                   

4￥ 样式表的3类应用方式

1）  内嵌样式表

语法：（必须写在HEAD中并在<STYLE>中间）
  <HEAD>
   <STYLE type=”text/css”>
    选择符 {
样式属性：属性值；样式属性：属性值…..}
    选择符 {
样式属性：属性值；样式属性：属性值…..}
    ……
   </STYLE>
  </HEAD>

2）  行内样式表

    即：使用元素标签的style属性设置标签的特别样式，规定的样式只对所修饰的标签有效，其他标签不受任何影响。
    如： <P style=”color:red; font-size:30px;font-family:隶书;”></P>

3）  外部样式表

     希望多个页面甚至整个网站所有页面都采用统一风格时使用

1$ 链接外部样式表（必须写在HEAD中，没有STYLE标签）

<HEAD>
 <LINK rel=”stylesheet” type=”text/css” href=”newstyle.css”>
</HEAD>

2$ 导入外部样式表（必须写在HEAD中，必须STYLE标签）

   
<HEAD>
 <STYLE type=”text/css”>
   @import 样式表文件.css   //必须有@符号
 </STYLE>
</HEAD>