码迷,mamicode.com
首页 > Web开发 > 详细

在HTML文档内引入CSS

时间:2017-10-23 19:23:46      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:文档   页面   outer   str   test   padding   htm   text   引入   

通过CSS可以为HTML页面添加丰富的效果,下面就来说说把CSS添加到HTML页面中的方式,让二者连接起来。


一、link标签——外部样式表

示例:

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

 

(一)link标签的位置

link标签只能出现在<head></head>之间,它在<head></head>之间可出现无数次。

比如:

<head>
<link href="1.css" rel="stylesheet" type="text/css" />
<link href="2.css" rel="stylesheet" type="text/css" />
<link href="3.css" rel="stylesheet" type="text/css" />
</head>

 

(二)link标签的属性

 

1.href

href属性定义外部资源(也就是样式表)的位置,href属性的值可以是相对URL,也可以是绝对URL。

相对URL:

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


绝对URL:

<link href="http://www.w3school.com.cn/html/csstest1.css" rel="stylesheet" type="text/css" />

 

2.rel

rel属性定义外部文档 与 当前文档的 关系,由于外部文档是当前文档的样式表,所以rel属性的值为stylesheet。

 

3.type和media

type属性定义外部文档的MIME类型,其值是text/css。

media属性定义外部样式表要用在何种媒体上。media属性涉及到媒体查询,这个知识点目前还不熟悉,暂时挂起。

 

二、style标签——文档样式表

通过style标记可以添加文档样式表,文档样式表中的样式只在当前HTML文档生效。

示例:

<style type="text/css">
*{margin: 0; padding:0;}
p{ 
background-color: aqua;
}
</style>

 

(一)style标签的位置

style标签需要出现在head标签内。

 


(二)style标签的type属性

style标签的type属性,其值是text/css,代表样式表的 MIME 类型是CSS。

 

三、HTML标签的style属性——内联样式

CSS样式也可以通过HTML标签的style属性来设置,但这些标签必须是出现在<body></body>内部的标签,比如titile、head就不能添加。

如:

<p style="background: lime;">style属性——内联样式</p>

 

在HTML文档内引入CSS

标签:文档   页面   outer   str   test   padding   htm   text   引入   

原文地址:http://www.cnblogs.com/o0-o-0o/p/7718456.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!