致力于高端网站建设服务的专业公司
网站建设热线:010-51000596
首页 > 网站资讯 > 网站建设 > css详解之基本语法和样式表定义

css详解之基本语法和样式表定义

CSS基本语法

CSS是Cascading Style Sheet的缩写, 中文译作层叠样式表(简称为样式表),是W3C组织制定的,用于控制网页样式的一种标记性语言。

1.使用css可以简单概括为:
  1)选择符:选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素.
   2)选择属性:属性是指定选择符所具有的属性,它是css的核心,css2共有150多个属性。
   3)定义属性值 :属性值包括常见的数值加单位,如25px。

2.每个CSS样式都必须由两部分组成:选择符(Selector)和声明(Declaration)。
                                        声明又包括属性(Properyt)和属性值(Value)

3.语法:selector{property:value;}
         选择符{属性:属性值;}

4.说明:
          1、属性必须要包含在{}号之中;
          2、属性和属性值之间用“:”分隔;
          3、当有多个属性时,用“;”进行区分;
          4、在书写属性时属性之间使用空格、换行等,并不影响属性的显示;
          5、如果一个属性有几个值,则每个属性值之间用空格分隔开。

样式表的定义
1、内联样式(嵌入式样式、行间样式表)
    语法:<标记styl e="属性:属性值;属性:属性值;">     </标记>


2、内部样式
    语法:<style type="text/css">
            选择符{属性:属性值;
                   属性:属性值;}
            </style>
           
    说明:1、内部样式表必须定义在<head>和</head>之间;说明:
                2、 页面所有样式都可以写在<style>和</style>之间。

        
3、外部样式

(A)使用link元素
使用link元素调用CSS的语法如下:
<link rel="stylesheet" href="css文件路径" type="text/css" />
说明:rel="stylesheet"指这个link和其href之间的关联样式为样式表文件。
      type= "text/css"指文件类型是样式表文本。


(B)使用@import
使用@import调用CSS的语法如下:
<style type="text/css" >
@import url(css文件路径);
</style>
说明:@import的调用方法也可以写在CSS文件中,用来调用其他的CSS。

区别:
1、import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件;
2、IE6.0以下的版本:旧的浏览器是不支持@import方式的
3、如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.
4、@import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.