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

2023-05-07 分类：网站建设

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的语法如下：

说明：rel="stylesheet"指这个link和其href之间的关联样式为样式表文件。

type= "text/css"指文件类型是样式表文本。

（B）使用@import

使用@import调用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之前被下载.

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容