标签:文档 页面 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>
标签:文档 页面 outer str test padding htm text 引入
原文地址:http://www.cnblogs.com/o0-o-0o/p/7718456.html