一、插入样式
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>
显示效果如下: