一、插入样式
1. 插入样式
- 行内样式（Inline Style)
- 内嵌样式（Internal Style Sheet）
- 外联样式表（External Style Sheet）
---行内样式
- 使用的是元素的style属性，如
<p style="font-size:14px;text-align:left">这是一个段落</p>
<section style="margin-left: 50px;"> <h1 style="position: relative;margin-left: 18px;font-size: 20px;color:#005A9C;"> <span>4.7. </span> <span>Embedded content</span> <a style="position: absolute;top: 0;left: -30px;width:30px;height: 30px;text-align:center; border: none;" href="#1"></a> </h1> <h2 style="position: relative;margin-left: 18px;font-size: 16px;font-weight: bold;color: #000;"> <span>4.7.1. </span> <span>Introduction</span> <a style="position: absolute;top: 0;left: -30px;width:30px;height: 30px;text-align:center; border: none;" href="#2"></a> </h2> <[表情]ction>
这种情况下大量代码重复，无法复用。并且特殊效果无法实现，如鼠标移入的hover等
---内嵌样式表
- 使用的是style元素
<style>
p{font-size:14px;text-align:left}
</style>
<p>段落</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>InsertCSS</title>
</head>
<style>
section{margin-left: 50px;}
h1,h2{position: relative;margin-left: 18px;}
h1{font-size: 20px;color:#005A9C;}
h2{font-size: 16px;font-weight: bold;color: #000;}
a{position: absolute;top: 0;left: -30px;width:30px;height: 30px;text-align:center; border: none;}
a:hover{background: #EFEFEF;border-bottom-width: 3px;}
</style>
<body>
<section>
<h1>
<span>4.7. </span>
<span>Embedded content</span>
<a href="#semantics-embedded-content"></a>
</h1>
<h2>
<span>4.7.1. </span>
<span>Introduction</span>
<a href="#embedded-content-introduction"></a>
</h2>
<section>
</body>
但是这种情况下跨文档的使用就没有办法了。
---外联样式表
- 使用的是link元素
p{font-size:14px;text-align:left} //style.css
<link rel="stylesheet" href="style.css">
section {
margin-left: 50px;
}
h1,
h2 {
position: relative;
margin-left: 18px;
}
h1 {
font-size: 20px;
color: #005A9C;
}
h2 {
font-size: 16px;
font-weight: bold;
color: #000;
}
a {
position: absolute;
top: 0;
left: -30px;
width: 30px;
height: 30px;
text-align: center;
border: none;
}// style.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>InsertCSS</title>
<link rel="stylesheet" href="style.css"> //调用css
</head>
<body>
<section>
<h1>
<span>4.7. </span>
<span>Embedded content</span>
<a href="#semantics-embedded-content"></a>
</h1>
<h2>
<span>4.7.1. </span>
<span>Introduction</span>
<a href="#embedded-content-introduction"></a>
</h2>
<section>
</body>
</html>
2. 外联样式表
<link>
- 两个资源之间的关系
-超链接
<title>Chapter2</title>
<link href="chapter1.html" rel="prev" rev="next">
<link href="chapter2.html" rel="next" rev="prev">
-外联资源
<link rel="icon" href="haha.png" sizes="16x16" type="image/png">
<link rel="stylesheet" href="style.css">
rel
- 文档与资源之间的关系
- link元素必须要有rel属性
- 值是浏览器预置的关键字中的一个或者多个。--stylesheet、alternate、next、prev、author、icon、license。
- 多个关键字之间用空格分隔。 --<link rel = "author license" href = "/about">
href
- 资源的目标地址
- link元素必须有href属性
- href值必须为一个合法的URL地址
type
- 资源的MIME类型
- 建议的属性，可以不设置type。
- 对于外联资源，浏览器不会载入不支持的资源。如<link rel="stylesheet" href="style.css" type="text/plain">，由于是plain不是css，所以这个样式不会加载出来。
media
- 资源应用的设备
- 值为媒体查询信息
<link rel="stylesheet" href="style.css" media="(max-width:800px)"> //宽度小于等于800px时生效 <link rel="stylesheet" href="style.css" media="print"> //打印时生效
3. 应用案例
响应式
/* 水平布局样式文件 hoz.css*/
main {
clear: both;
}
main aside {
float: left;
width: 150px;
}
main section {
margin-left: 150px;
}
/* 垂直布局样式文件ver.css */
main aside {
float: none;
}
main section {
margin-left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式</title>
<link rel="stylesheet" href="hoz.css">
<link rel="stylesheet" href="ver.css" media="(max-width:500px)">
</head>
<body>
<main>
<aside>
<ol>
<li>
<a href="#1">目录 1</a>
</li>
<li>
<a href="#2">目录 2</a>
</li>
<li>
<a href="#3">目录 3</a>
</li>
<!-- 目录结构 -->
</ol>
</aside>
<section>
<div>
<p>内容1内容1内容1</p>
</div>
<hr/>
<div>
<p>内容2内容2内容2</p>
</div>
<hr/>
<div>
<p>内容3内容3内容3</p>
<!-- 详细内容 -->
</div>
</section>
</main>
</body>
</html>
显示效果如下：
