CSS简介
css概述
css是一种用来表现HTML货XML等文件样式的计算机语言。提供了字体样式，文本样式，超链接样式，列表样式，背景样式及整体排版样式。
1.丰富的样式定义
css提供了丰富的文档样式外观，允许位任何元素创建边框，元素边框与其他元素间的距离，元素边框与其他元素间的距离。
2.丰富的样式定义
CSS样式表可以将所有的样式声明同意存放，进行统一管理。
3.多页面应用
css样式表上可以单独存放在一个css文件中，css样式表理论上不属于任何页面文件。
4.层叠
层叠就是对一个元素多次设置同一个样式，并使用最后一次设置的属性值。
5.页面压缩
将样式的声明单独放到css样式表中，可以大大的减少页面的体积。
CSS发展史
CSS(Cascading Style Sheets，层叠样式表)是用来为 HTML 文档添加样式的一种语言，是由 W3C 定义和维护的，现在大部分浏览器都已经支持 CSS3，而下一版本还在开发中。
CSS 一般都是和 HTML 一起工作的，为 HTML 元素添加样式，使得界面美观，CSS 可以使用 标签零散地添加在 HTML 文档中，也可以全部写入 .css 文件中，并引入文档中。
发明CSS
Tim Berners-Lee 在 1990 年创建了 HTML ，用于在万维网中方便的阅读网页，但是并没有样式来对 HTML 进行装饰，因此，并不美观。在 HTML 开发后，也陆续出现了各种形式的样式表，都是用户使用样式自己调节网页的显示。
在 1994 年，哈肯·维姆·莱提出了CSS的建议并与伯特·波斯合作设计，且在芝加哥会议上展示了 CSS 的建议。在 1995 年，W3C 也加入进来，并让它们两个负责这个项目，直到 1996 年 12月，发布了 CSS1 规范。也是哈肯·莱论文的一部分，新产品需要市场检验，在当时并不火的项目，在浏览器大战的时候，微软的 IE 先实现了该标准。
CSS 发展
CSS1 在 1996 年 12 月发布，但当时并不是太火，之后还有各种问题，因此，W3C 在 1997 年组织了专管 CSS 的工作组，对 CSS1 进行更新迭代，直到 1998 年 5月推出了 CSS2，其中包括许多新的内容，如支持的字体的大小等、字的颜色、背景颜色、文字的排列等多种功能，而 1998 年 5 月发布的 CSS2.1 是对 CSS2 中错误地填补和加入一些新的功能。
在之后的 CSS3 是对 CSS 的一次大改，将 CSS 分为不同的模块，每一个模块都有 CSS2 中额外增加的功能，以及向后兼容。它是在 1999年就开始制定了，里面增加了 border-radius、text-shadow 等功能，还支持动画及立体。2001年 5月 23 日才完成CSS3 的工作草案， 也是现代浏览器支持的版本。而 CSS4 2011 年 9月 29日开始设计，但只有极少数的功能被部分网页浏览器支持，离真正发布的距离还较遥远。
CSS3
CSS2 由于一些次要特性使得经历了较长时间的更新，因此在 CSS3 中，才使用模块的方式独立开发并实现标准化，将 CSS2 中的功能进行拆分成为现在的 CSS3 的基础上，在开发一些单独的模块，扩充 CSS3 的功能，使之丰满起来。
由于每个模块都独立标准化，在叫 CSS3 标准也不合适，但长称这次的更新版本为 CSS3，而有些在 CSS4 中实现的模块，现在也可以使用，但也只是草案阶段，因此，现在还是已 CSS3 为主。
总结
CSS 发展到现在，已经变得非常复杂，由于前端工程化的不断发展，使得前端开发也可以进入移动端，实现跨平台开发，CSS 也走到了这一步，但也使得前端业务复杂度越来越高，工程也越来越庞大，这也发展出了一些 CSS 框架和工具等来简化前端开发。希望未来的 CSS 发展能够更好吧。
Css3语法结构
使用Css3时与HTML5一样，要遵循规范。语法如下：
选择器 {属性1：属性1； 属性2：属性2； 属性3：属性3；}
上述语法中选择器用于指定css样式作用的HTML5对象，大括号内是由属性和属性值组成的声明。
css对<h2>标签进行设置，代码如下：
h2{ font-size: 20px; color: red;}
在HTML中映入CSS样式
行内样式
行内样式也叫作内联样式，它是通过标签内的style属性来设置元素的Css样式的，具体语法如下：
<标签名 style=“属性1：属性1； 属性2：属性2；”>内容<标签名>
内部样式表
内部样式表是将CSS代码集中写在HTML5文件的<head>标签中，并使用<style>标签为HTML5文件定义样式信息的，基本语法如下：
<head>
<meta charset=“UTF-8”>
<title>style标签语法</title>
</style>
</head>
外部用样式表
外部样式表的工作原理为先将所有的样式放在一个或多个以.css为扩展名的文件中，然后在页面中引入外部样式表。HTML5文件映入外部样式表有两种方式，分别是链接式和导入式。
1.链接外部样式表
链接外部样式表是通过<link>标签将外部样式表链接到HTML5文件中的，基本语法如下：
<head>
<meta charset="UTF-8">
<title>链接外部样式表</tetle>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
2.导入外部样式表
导入外部样式表的工作原理为在HTML5网页中使用@import关键字导入外部样式表文件。导入外部样式表的语句必须放在<style>标签中，而<style>标签必须放在<head>标签中，具体语法如下：
<head>
<meta charset="UTF-8">
<title>导入外部样式表</tetle>
<style>
@import url("style.css");
</style>
</head>
样式优先级
如果只有外部样式表，则显然只会显示外部样式表设置的颜色值，因此课得出结论：行内样式>内部样式>外部样式。
在浏览器中运行修改后的代码，会发现此时显示的是红色，即外部样式表设置的颜色值，这是因为现在外部样式表离标题标签更近一些，所以样式优先级还遵循“就近原则”，即当内部样式表，链接外部样式表和导入外部样式表在同一个文件头部，谁离相应的代码近，谁的优先级就高。
CSS3选择器
CSS3基础选择器
CSS3基础现择其包含标签选择器，类选择器和ID选择器
1.标签选择器
一个完整的HTML5页面是由很多不同的标签组成的，而标签选择器则决定标签应采用的CSS样式，基本语法如下：
标签名{属性1：属性值1； 属性2：属性值2； 属性3：属性值3；}
在上述语法中，所有的HTML5标签都可以作为标签选择器，如<body>,<h1>,<p>,<img/>,<a>等。如果一个页面中存在多个<p>标签，当选择器给其添加样式时，所有的<p>标签都会被添加样式。
2.类选择器
在标签选择器中，标签选择器一旦声明，那么页面中所有的该标签都会发生相应的变化。例如声明了<p>标签的字体为红色时，页面中所有的<p>标签的字体均为红色。
3.ID选择器
在CSS中，ID选择器使用“#”进行标识，后面紧跟id名，基本语法如下：
#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
高级选择器
CSS3高级选择器包含层次选择器，结构伪类选择器和属性选择器
1.增次选择器包含后代选择器，子选择器，相邻同胞选择器和通用兄弟选择器等。
（1）后代选择器
后代选择器被称为包含选择器，如id为a，b，c的三个元素，后代选择器可以写成#a#b#c{}的形式。
只要对祖先元素的选择在后代元素之前，中间以空格分开即可。
（2）子选择器
子选择器与后代选择器容易混淆，注意子选择器仅指它的直接后代，后代选择器通过空格进行选择，而子选择器通过“>”标识符进行选择。
（3）相邻同胞选择器
相邻同胞选择器使用“+”标识符进行选择。
（4）通用兄弟选择器
通用选择器使用“~”进行选择。
.结构伪类选择器
- first-child选择器
- last-child选择器
- nth-child(value)选择器
- nth-last-child(value)选择器
- only-child选择器
- first-of-type选择器
- last-of-type选择器
- nth-of-type(value)选择器
- nth-last-of-type(value)选择器
3.属性选择器
属性选择器可以根据元素的属性及属性值来选择元素的，CSS3中新增了以下5个常用的选择器：
E[att] 选择具有 att属性的E元素
E[att=“val”] 选择具有att属性、且属性值等于val的E元素
E[att^=“val”] 匹配具有val属性、且值以val开头的E元素
E[att = “ v a l ” ] 匹配具有 v a l 属性、且值以 v a l 结尾的 E 元素 E [ a t t =“val”] 匹配具有val属性、且值以val结尾的E元素 E[att =“val”]匹配具有val属性、且值以val结尾的E元素E[att=“val”] 匹配具有val属性、且值以val含有的E元素
扫一扫
5259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
