html5样式的引入

来源：互联网发布：逆袭网络剧dvd 编辑：程序博客网时间：2024/05/12 10:37

Html5提供了三种常用的引入样式，分别为内嵌样式、内部样式和外部样式

一、内嵌样式

1.内嵌样式特点

语法：在标签中写一个style属性，例如：<div style="具体的样式">；

优点：优先级较高；

缺点：不易修改，维护困难，代码量非常大，存在代码冗余；

2.举例说明，建立一个文件名为”内嵌样式“的div标签，要求背景宽度100像素，高度100像素，颜色为红色，代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>内嵌样式</title></head><body><div style="width:100px;height:100px;background:red;">我是div</div></body></html>

说明，width：100px表示宽度100像素，height：100px表示高度100像素，bcakground：red表示红色背景；

注意，style中的属性用双引号括起来，属性之间分号隔开，以分号结束。

产生效果如下：

我是div

二、内部样式

1.内部样式特点

语法：在head标签写一个style标签，在style标签里面通过选择器来选择标签控制body中的样式；优点：不需要加载服务器，加载速度非常快；缺点：不利于代码扩展和重新使用。2.举例说明，建立一个文件名为”内部样式“的div标签，要求背景宽度50像素，高度50像素，颜色为蓝色，代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>内<span style="font-family:SimSun;">部</span>样式</title>                <style type="text/css">                     div{                              width:50px;                              height:50px;                              background:blue;                      }                </style></head><body><div>我是div</div></body></html>

说明，type=”text/css“表示指定type样式的类型为css样式，div选择器中的属性之间用分号隔开。

以上代码产生的效果如下：

我是div

三.外部样式

1.外部样式特点

语法：新建一个外部css文件，在css文件里面通过选择器来控制样式，在head标签里面用link来关联这个外部文件

优点：通用性强，有利于扩展

2.举例说明，创建一个文件名为“外部样式”的文件，要求背景宽度200像素，高度300像素，背景红色。

其中外部css文件代码如下：

div{width:200px;height:300px;background: red;}

Html文件代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>外部样式</title><link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><div>我是div</div></body></html>

说明，link用来关联外部路径，rel：relationship的英文缩写，rel属性用于定义连接的文件和HTML文档之间的关系。StyleSheet的意思就是样式调用，rel=StyleSheet指定一个固定或首选的样式,href指调用文件地址，此处为相对地址。

以上代码产生效果如下：

我是div

四.样式的优先级

相同权值的情况下，CSS样式样式一般为就近原则，即内嵌样式>内部样式>外部样式

0 0