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>