HTML中嵌入CSS样式

最新推荐文章于 2024-08-13 10:40:16 发布

hardyantelope

最新推荐文章于 2024-08-13 10:40:16 发布

阅读量3k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/ysc612/article/details/48297515

版权

html网页中嵌入CSS样式的方式有如下三种：

1、外部样式表
2、内部样式表
3、内联样式

一、外部样式表

方法一

外部样式表，顾名思义就是将CSS样式保存在外部的".css"文件中，浏览器加载页面时读取外部文件的样式进行显示。如果要将同一样式应用于多个页面，这种方式是理想的选择。多个页面同时调用一个".css"文件即可，同时要修改样式也只需修改外部文件，非常方便。可以使用<link>标签链接到样式表，<link>标签应置于头部：

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

外部文件中不能有html标签，文件用css扩展名。
<link>标签中rel属性规定当前文档与被链接文档之间的关系，stylesheet表示是文档的外部样式表；
<link>标签的type属性规定被链接文档的MIME(Multipurpose Internet Mail Extensions)类型，"text/css"表示样式表；
<link>标签的href表示外部文件的地址；

方法二

在<style>元素之间用@import导入外部css文件：

<span style="font-family:SimSun;font-size:10px;"><head>
<style type="text/css">
 @import "style.css";
  <!--与前者效果相同
    @import url("style.css");
  -->
<style>
</head></span>

@import可以在html文件和css文件中使用，<link>的方式只能在html文件中使用，但是@import方式老的浏览器不支持，@import不受DOM控制，所以使用javascript控制DOM转变样式时，只能用<link>的方式。一般情况下用<link>的方式比较好。

方法三

在开头部分写一个XML形式的，关于样式的指令处理语句：

<span style="font-family:SimSun;font-size:10px;"><?xml-stylesheet type="text/css" href="style.css" ?> 
<html> 
...
</html></span>

这种方式只适合XML语法编写的html文档，且JS不能处理这种CSS。

二、内部样式表

内部样式表用<style>标签在头部定义，可用于单个文件的特殊样式：

<head>
<style type="text/css">
 p {color:yellow;font-family:"arial",sans-serif;font-size:1.2em}
</style>
</head>

三、内联样式

内联样式对某个元素内的样式进行定义，内联样式使用style属性在相应的标签中定义：

<p style="color:yellow;font-family:"arial",sans-serif;font-size:1.2em">
  Hello World
</p>

PS:

如果同一个元素在不同的样式表中定义，那么属性值将从更具体的样式表中被继承过来。

参考自：

http://www.w3school.com.cn/css/css_howto.asp

http://www.jb51.net/web/172967.html

http://www.divcss5.com/rumen/r431.shtml

hardyantelope

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML中嵌入CSS样式

html网页中嵌入CSS样式的方式有如下三种：1、外部样式表2、内部样式表3、内联样式一、外部样式表外部样式表，顾名思义就是将css样式保存在外部的 ".css" 文件中，浏览器加载页面时读取外部文件的样式进行显示。如果要将同一样式应用于多个页面，这种方式是理想的选择。多个页面同时调用一个 ”.css“ 文件即可，同时要修改样式也只需修改外部文件，非常方便。可以
复制链接

扫一扫