css调用样式表 css文件调用方法

发布时间:2020-10-07编辑:脚本学堂
本文介绍了css样式表文件的调用方法,分为直接在html标签元素内嵌入css样式与使用link来调用外部的css文件两种方法,需要的朋友参考下。

css文件调用方法有哪些?

html引用css方法:
1、直接在div中使用css样式
2、html中使用style自带式
3、使用@import引用外部CSS文件
4、使用link引用外部CSS文件(www.jb200.com 推荐

下面分别介绍下css文件的调用方法。

1、直接在html标签元素内嵌入css样式,例如:
 

复制代码 代码示例:
<div style="font-size:14px; color:#FF0000;">

2、在html头部head部分内style声明插入代码:
 

复制代码 代码示例:
<style type="text/css">
<!--
.ceshi {font-size:14px; color:#FF0000;}
-->
</style>

3、使用@import引用外部CSS文件方法
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css引用方法实例测试实例_www.jb200.com</title>
<style type="text/css">
<!--
@import url(wcss.css);
-->
</style>
</head>
<body>
<div class="ceshi">测试内容</div>
</body>
</html>
Wcss.css文件内代码.ceshi {font-size:14px; color:#FF0000;}

4、使用link来调用外部的css文件 html嵌入CSS样式的三种方式
在head放置<link rel="stylesheet" href="wcss.css" type="text/css" />来调用外部的wcss.css文件来实现html引用css文件

CSS的调用,按照CSS出现在页面的位置不同,不同的调用方式有不同的写法和优先级。

下面对CSS元素直接使用介绍。
元素中直接使用
元素中直接使用样式的写法如下:
<元素名称 style="属性:属性值"></元素名称>
说明:样式中直接使用CSS,语法是使用style标签。
其中""中,样式的语法结构和独立样式表中完全相同。

例子,元素中直接使用样式:
 

复制代码 代码示例:
<div style="width:400px; height:100px; background-color:#cccccc;font-size:18px;">
 

这是一个在元素中直接使用样式的示例。</div>

说明:该样式中定义了元素的宽度为400像素,高为100像素,背景颜色为浅灰色,字体大小为18像素。