Css样式的使用大致分为三种
咱们先来看看一张总括图
1 使用连接的形式调用
有两种发方式调用:
A 使用 link 标签
将样式规则写在 .Css 的样式文档中,再以 <link> 标签引入
如法如下:
<link rel ="stylesheet"href="css 文件路径 " type="text/css"/>
通常是直接将 css 文件拖拽到 html 页的方法
集中 rel="stylesheet" 指这个 link 和 href 之间的关联样式为样式表文件。 Type= “ text/css ”指的是文件类型是样式表
放置的位置通常是在网页的 <head></head> 部分之中。
B 使用 @import 导入
就如导入命名空间一样。放在 zai<style>...</style> 中
STYLETYPE="text/css">
<!--
@importurl(引入的样式表的位址、路径与档名);
-->
</STYLE>
例如:
<STYLETYPE="text/css">
<!--
@importurl(http://yourweb/ example.css);
-->
</STYLE>
要注意的是,行末的分号是绝对不可少的!
2 使用 style 属性
将 style 属性直接添加到个别的元素标签里或行内
调用方式如下:
< 元素名称 style =" 属性 1 : 属性值 1; 属性 2 : 属性值 2;...."></ 元素名称 >
样式的语法和独立的样式语法完全相同。例如
<divstyle=" width:30px;color:red;font-size:15px;"></div>
这种用法的优点是灵巧应用标签中,蛋松缺点则是没有整篇文件的统一性;
3 使用 style 标签
将样式放在 head 元素中的 style 标签内, 与 body 平级
语法如下:
<style type="text/css">
<!-- css
样式表
-->
</style>
下面我们来用一个示例演示一下。
<head>
<title>CSS调用方法</title>
<style>
.content{
background-color: #cccccc;
font-size: 14px;
width: 240px;
height: 80px;
color: Blue;
text-align: center;
}
</style>
</head>
<body>
<div class="content">示例:从页面头部调用。</div>
</body>
通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD></HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性,只要是有声明的的元件即会套用该样式规则。 缺点就是在个别元件的灵活度不足。
以上就送 css 样式的使用方式,欢迎大家指正

