您的位置：首页 > Web前端 > HTML5

HTML5学习_day01(3)--css样式引用方式

2016-09-20 16:44 169 查看

一.内嵌格式

语法：在标签中写一个style的属性

例如：<pre><div style="属性1:属性值1;属性2:属性值2;"></pre>

优点：优先级最高
缺点：不已修改，维护困难，代码量非常大，存在代码冗余。
例子：

<div style="width:200px;height: 100px;background-color: greenyellow;"></div>

width:宽度 height:高度 background-color:背景颜色

效果如下：

二.内部样式

写法：在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样式的详细使用方式请点击下方链接

点击打开链接

三.
外部样式：
写法：
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 零基础详细

相关文章推荐

新的分享

章节导航