css教程样式引用三种方式

css教程

css教程样式的详细使用三种方式简介
1.内嵌格式
语法:在标签中写一个style的属性
例如:<pre><div style=”属性1:属性值1;属性2:属性值2;”></pre>
优点:优先级最高
缺点:不已修改,维护困难,代码量非常大,存在代码冗余。

具体示例:
<div style=”width:200px;height: 100px;background-color: greenyellow;”></div>
width:宽度 height:高度 background-color:背景颜色

 

2.外部样式:
写法:
1.新建一个外部CSS文件
2.在css文件里通过选择器来控制样式。
3.在head标签里面通过link来关联外部css文件。
例如:<link rel=”stylesheet” type=”text/css” href=”css/style.css”> 然后与第二引用方式一样使用就OK了
优点:重用性强,有利于扩展
缺点:需要从WEB服务器中加载css文件。

具体示例:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title></title>
<link rel=”stylesheet” type=”text/css” href=”文件路径”/>
</head>
<body>
</body>
</html>

3.内部样式
写法:在head标签写一个style标签,在style标签里面通过选择器来选择标签来控制该标签的样式。
优点:不需要加载服务器(不需要加载web服务器端的css文件),加载速度非常快。
缺点:不利于代码的扩展和重用,只能在单个页面里面使用。

具体示例:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title></title>
<style type=”text/css”>
此处写css样式
</style>
</head>
<body>
</body>
</html>
CSS教程样式的详细使用三种方式解析

成为第一个发表评论的人

发表评论

您的电子邮件地址不会被公开.


*