- 1.CSS基本介绍
- 1.CSS与html、javascript的关系
- 2.CSS的发展
- 2.1-CSS3各模块的规范发展(截至2019年3月)
- 2."CSS5 ?"的误解
- 3.基本语法
- 3.1-CSS的引用
- 4. CSS选择器
- 4.1-标签选择器
- 4.2-类选择器
- 4.3-id选择器
- 4.4-全局选择器
- 4.5-群组选择器
- 4.6-后代选择器
- 4.x-伪类
- 5.CSS继承、层叠、优先级
- 5.1-CSS继承
- 5.2-CSS层叠
- 5.3-优先级
- CSS优先级规则
- 6.CSS的命名规则
- 6.1-常用的CSS样式命名
介绍：css基本语法、选择器、继承、层叠、优先级及CSS的引用、"CSS5的误解"、CSS的命名规则。
1.CSS基本介绍
CSS(英文全称：Cascading Style Sheets)：层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
1.CSS与html、javascript的关系
- html是网页内容的载体
- css样式是表现(外观的控制)
- javascript是行为，用来实现网页的特效效果
2.CSS的发展
参考链接：
- CSS 二十年发展简史：https://blog.csdn.net/csdnnews/article/details/93806799
- http://www.itheima.com/news/20190718/143002.html
1994 年，H?kon Wium Lie 最初提出了 CSS 的想法，联合当时正在设计 Argo 的浏览器的Bert Bos，他们决定一起合作设计 CSS，于是创造了 CSS 的最初版本。
紧接着，他们在芝加哥的Mosaic and the Web 大会上第一次正式提出了 CSS 的建议，1995 年他们一起再次展示了这个建议。当时 W3C 刚刚建立，W3C 对 CSS 很感兴趣，为此专门组织了一次讨论会。
1996 年 12 月，W3C 推出了 CSS 规范的第一版本。
1997 年，W3C 颁布 CSS1.0 版本 ，CSS1.0 较全面地规定了文档的显示样式，可分为选择器、样式属性、伪类 / 对象几个部分。
这一规范立即引起了各方的关注，随即微软和网景公司的浏览器均能支持 CSS1.0，这为 CSS 的发展奠定了基础。
1998 年，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准。
CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。
2005 年 12 月，W3C 开始 CSS3 标准的制定，到目前为止该标准还没有最终定稿。
2.1-CSS3各模块的规范发展(截至2019年3月)
来自：https://baike.baidu.com/item/CSS3/4059544?fr=aladdin
2."CSS5 ?"的误解
特别注意：所谓的"CSS5"并非指CSS-V5版本，因为截至2019.8 CSS3的标准仍在完善，没有最终确定。
实际上"CSS5"的名称是来源一个名叫divcss5的网站(它提供web前端技能学习),而其中的"5"是指"HTML5". 此网站的命名可能还有吸引用户眼球的用意把。
3.基本语法
CSS规则由2部分构成：选择器、声明。
css基本与法结构
3.1-CSS的引用
引用方式：4种
- 行内样式
- 内部(嵌入)样式
- 链接样式
- 导入样式
CSS 4种引入方式的比较：
<head>内<style>内
html内
同时
链入外部样式
<head>内<link>引用
css文件与html分离
页面加载时，同时加载CSS样式
导入式@import
在样式代码最开始处
css文件与html分离
读取html文件之后加载，存在浏览器的兼容问题,不建议使用。
行内样式
css在标签的style属性中定义,多个属性之间用";"隔开，属性与属性值之间用":"隔开。最后一个属性后的";"可以省略。
<p style="color:red; font-size:14px;">
内部(嵌入)样式
定义在<style type="text/css"> </style>内，style标签放在<head></head>标签内。
<head>
<title></title>
<style type="text/css"> p{color: red; font-size: 20px;} </style>
</head>
<body>
<p> 文字 </p>
</body>
链入外部样式
把css代码放在一个独立的文件：后缀名为.css
在html文件内<head>内<link>引用:
<head>
<link rel="stylesheet" type="text/css" href="jquery.min.css"/>
</head>
导入式@import
<head>内style标签内开头导入,否则无效。
<head>
<title></title>
<style type="text/css"> <!-- 导入方式1 --> @import "main.css" <!-- 导入方式2 --> @import url(head.css) p{ color: red; } <!-- 无效的导入方式 --> @import url(foot.css) </style>
</head>
4. CSS选择器
一般包含以下6种常用选择器 和 伪类选择器。
- 标签选择器
- 类选择器
- id选择器
- 全局选择器
- 群组选择器
- 后代选择器
4.1-标签选择器
有效范围内，所有相同指定标签的样式相同(前提是没有层叠样式的覆盖)。
p{color:red;}
有效范围内p标签颜色均为红色(前提是没有层叠样式的覆盖)。
4.2-类选择器
.font{color:red;...}
.post-body{margin:20px;...}
然后在标签的class属性中引用。
<p class="font"></p>
一个标签可引用多个类选择器，中间用空格隔开。
<p class="font post-body"></p>
4.3-id选择器
#head{color:red;...}
引用时指定标签的id属性为id选择器的名称(html文件中id具有唯一性)。
<div id="head"></div>
4.4-全局选择器
指定所有标签的样式。(一般主要用来覆盖所有标签默认的样式)
*{
margin:0px;
padding:0px;
}
4.5-群组选择器
群组中每个组员之间用逗号隔开，用于为所有组员设置相同的样式。
.head,p,h1,div,#right{
margin:0px;
}
4.6-后代选择器
又称为包含选择器。后代选择器可以选择作为某元素后代的元素(基于html文档层级结构)。
注意：标签1.styleName 表示class属性为styleName的标签，而标签1 styleName表示class属性为styleName的标签为标签1的子元素。
article.head p{
color: green;
font-size: 40px;
}
表示class属性为head的article标签子标签p的样式。
对应的文档结构：
<article class="head">
<p>文字</p>
</article>
而非：
<article>
<div class="head">
<p>文字</p>
</div>
</article>
这个结构文字的样式定义应为：
article .head p{
color: green;
font-size: 40px;
}
4.x-伪类
伪类选择器定义特殊状态下的样式，无法用标签、id、class及其他属性实现。
链接的4种状态：激活状态，已访问状态、未访问状态、鼠标悬停状态。
伪类hover和伪类active兼容
- IE6及更早版本，支持a标签的4种状态。
- IE6浏览器不支持其他元素的:hover和:active.
链接伪类的顺序
:link > :visited > :hover > :active.
伪类名称对大小写不敏感。
如果不按照此顺序定义，可能定义的样式无效。
a:link{color: blue;}
a:visited{color: orange;}
a:hover{color: green;}
a:active{color: red;}
5.CSS继承、层叠、优先级
5.1-CSS继承
继承的好处：
- 从父元素继承部分属性。
- 减少部分CSS代码。
5.2-CSS层叠
- 定义多个样式
- 不冲突时，多个样式层叠为1个
- 冲突时，按不同样式规则的优先级来采用样式。
5.3-优先级
CSS使用方法优先级：
行内样式 > 内部样式 > 外部样式。
说明：
- 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后。
- 最后定义的优先级最高(就近原则)
CSS优先级规则
同一样式表中：
- 权值相同
就近原则(离被设置元素越近，优先级越高) - 权值不同
根据权值来判断CSS样式，那种CSS样式权值高，使用那种样式。
CSS选择器权值
- 行内样式：权值为1000.
- ID选择器: 权值为100.
- 类选择器和伪类：权值为10.
- 标签选择器：权值为1.
- 通配符选择器：权值为0.
权值规则
- 统计不同选择器的个数。
- 每类选择器的个数乘以相应的权值
- 把所有的值相加得出选择器的权值。
eg:
#main div.warning h2{
...
}
id: 1,class: 1,标签：2。
权值为：100 + 10 + 1 * 2 = 112.
6.CSS的命名规则
- 采用英文字母、数字以及"-" or "_"命名。
- 以小写字母开头，不能以数字以及"-" or "_"开头。
- 命名形式：单字、连字符、下划线和驼峰
- 使用有意义命名。
6.1-常用的CSS样式命名
1.页面结构
2.导航
3.功能
id和class使用
- id不要滥用
- 适当使用class