W3C标准定义WEB包含三个层
– 结构层（HTML）
– 表现层（CSS）
– 行为层（Javascript）
提倡“结构、表现、行为，三者分离，互不干涉”的WEB页面
– 内容：让访问者浏览的信息
– 结构：使内容具有逻辑性和易用性
– 表现：修饰内容的外在表现使之看起来美观
– 行为：与内容的交互操作
CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
外部样式表
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="index.css" media="all" /> <title>Document</title> </head> <body> <div id="root"> Test css rel. </div> </body></html> /* index.css */ div { color: blue; }* 样式表中不能包含HTML标记语言，只能有CSS规则和CSS注释，一旦出现标记，标记后面的样式都不会起动作用。
* 注释的格式只能是上面的//。
文档样式表
使用<style></style>包含的样式被称为文档样式表（document style sheet）或者嵌套样式表（embedded style sheet）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="index.css" media="all" />
<title>Document</title>
<style type="text/css">
div {
color: blue;
}
</style>
</head>
<body>
<div id="root">
Test css rel.
</div>
</body>
</html> @import
与link类似，@import指令用于指示Web浏览器加载一个外部样式表，并在表现HTML文档时使用其样式。唯一的区别在于命令的具体语法和位置。假如上面的文档元素表需要引入外部css文件。
<style type="text/css"> @import url(style1.css); div { color: blue; } </style>* @import必须出现在style元素中，且要放在其他CSS规则之前，否则将根本不起作用。（尽管IE不会忽略放在css规则之后的@import标记，但是为了兼容其他浏览器，还是要遵守规则）
* 在老版本的浏览器（低于ie5）不支持@import（）兼容性
* link混合@import会破坏并行下载，这是一个很严重的问题，这会导致原本并行下载的样式变成一个一个的同步下载
* @import可以使用media来限制应用场景
<style type="text/css"> @import url(style1.css) all; @import url(style2.css) screen; div { color: blue; } </style>行间样式
如果只是想为单个元素指定一些样式，可以使用HTML的style属性来设置一个行间样式。并且如果出现过个，只会识别第一个。
<div id="root" style="color: yellow"> Test css rel. </div>CSS 模块化
因为本人没有深刻了解过CSS模块化，所以这里只是将自己的一些想法，简单的说明一下。CSS模块化的发展是伴随着页面组件化的发展而来。组件的开发对于开发人员来说可能大家可以自己工作自己的任务，但是css的样式可能会影响到全局，所以CSS组件化也是解放协同工作的一个方面。以我们目前看到的知识来说，CSS组件化的引入不会跳出上面的范围，唯一的处理是对于组件内的元素进行页面的唯一标记，这里的唯一标记是组件在文档中渲染的时候会有这不同的唯一的标记说明。举个例子（Angular4的组件化开发）
如图可以看到红色框内为随着路由变化渲染的不同组件，注意其中的_nghost-c8，这个属性是标记当前组件，当我点击left menu渲染其他组件之后，这个标记会变化。这样就导致所有的组件的最高权重都是具有对应唯一标记的style才会显示在页面上。
至于CSS属性的优先级权重后面会有文章去学习！
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/231154.html原文链接：https://javaforall.net
