CSS的调用 |
按照CSS出现在页面的位置不同，CSS的调用可以分为3种方法：元素中直接使用、从页面头部调用以及采用链接的形式调用。不同的调用方式有不同的写法和优先级。下面对CSS的调用方法进行详细介绍。 1.调用样式表的几种方法 元素中直接使用 <元素名称 style="属性:属性值"></元素名称> 样式中直接使用CSS，语法是使用style标签。其中""中，样式的语法结构和独立样式表中完全相同。 例如：<div style="width:400px;height:100px;background-color:#cccccc;font-size:18px;"> 该样式中定义了元素的宽度为400px，高为100px，背景颜色为浅灰色，字体大小为18px。 从页面头部调用 从页面头部调用CSS，是将CSS写在页面的head元素中，然后在页面中调用。 <style> 选择符{属性：属性值;} </style> （页面所有样式都可以写在，style>和</style>之间 使用头部调用的CSS，在页面中必须有相应的调用代码（其中，类型选择符、通配选择符、使用类型选择符的子选择符和使用类型选择符的伪类选择符不需要使用调用代码）。其中，类选择符的调用代码如下所示。 <元素名称 class="类选择符名称"></元素名称> ID选择符的调用代码如下所示。 <元素名称id="id选择符名称"></元素名称> 一个使用头部调用的CSS示例如下。 <head> <title>头部调用样式</title> .content{ width:400px; height:100px; color:#ffffff; backgroudn:#333333;} </style> </head> <body class="body"> <div class="content">这是一个页面头部调用样式的示例。</div> </body> 采用链接的形式调用 采用链接的形式调用CSS，通常有两种写法。 （1）使用Link元素 <link rel="stylesheet" href="css文件路径" typle="text/css" /> rel="stylesheet"指的是这个link和href之间的关联样式为样式表文件。type="text/css"指文件类型是样式表文本。 使用链接的形式调用样式表时，页面中调用样式的代码和使用头部调用样式时相同，依然使用class和id来调用类选择符和ID选择符。 （2）使用@import 使用@import调用CSS的语法如下所示。 <style type="text/css">@import url(css文件路径);</style> 说明：@import调用方法也可以写在CSS文件中，用来调用其他的CSS。 使用@import调用和使用Link元素调用的区别在于，@import的调用方法只能使用在样式文件中，即只能在调用的样式文件（或者style元素）中才能正常使用。 下面是一个同时使用Link和@import调用样式的示例。其代码如下示意。 <link href="style/main.css" rel="stylesheet" type="text/css" /> 以上是在页面头部中使用Link元素链接样式的代码，其链接的main.css文件中的代码如下所示。 .@import url(css1.css); .main{ width:750px; border:1px solid #666666; margin:100px auto; padding:33px; font-size:20px;} 该样式表现了从样式表中再次调用样式文件。 |
