新的一年开始, 也该适当回顾一下知识点了,温故而知新。抓实基础才能更快更好构建上层建筑。
CSS:层叠样式表
英文全名：cascading style sheet
一种用来表现HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言
1. 内联样式（行间样式，行内样式，嵌入式样式、内嵌样式）
内联 CSS 也可称为行内 CSS 或者行级 CSS ，它直接在标签内部引入。内联样式通过 style 属性来设置，属性值可以任意的 CSS 样式。
内联样式显著的优点是十分的便捷、高效。但是不建议使用,内联样式权重过高,不利于后期维护。可以通常内联 CSS 作为测试使用，可以查找代码中 bug。
<div style="color:red;font-size: 16px;">
内联样式
</div>
2. 外部样式
也可称为外联式。就是把 css 代码写一个单独的外部文件中，这个 css 样式文件以“.css”为扩展名
外部样式有两种引入方式
-
- 链接方法
<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称/>
-
- @importurl(地址);
<style type="text/css">
@importurl(目标文件的路径及文件名全称);
</style>
两者间的差别：
当使用 js 控制 dom 去改变样式的时候，只能使用 link 标签，因为 @import 不是 dom 可以控制的。
- 本质区别：link 属于 html 方式，@import 是 css 方式。
- 加载顺序不一样，link 是同时加载，@import 先加载结构，后加载样式。
- @import 不支持 IE5 以下的浏览器
- 当使用 js 控制 dom 改变样式时，只能用 link
3. 内部样式
内部样式定义在文档的 head 部分，通过 style 标签来设置。
<style type="text/css">/*css语句*/</style>
CSS选择符(元素选择符)
1) 类型选择符(element选择器)
就是 HTML 文档中的元素[作用于 html 标记]
p{
/* p标签默认带margin */
margin: 0;
font-size: 14px;
line-height: 1.5em;
}
2) 通配符
通配符简单来说就是匹配所有元素，但不建议使用，如果页面标签较多会影响性能。CSS 选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免需要消耗更多匹配时间的选择器 语法：*{属性：属性值；}
*{
margin: 0;
padding: 0;
}
3) id 选择器
id 有高优先级、唯一性的特点，特指「个体」。而类就没这个特点了 语法：#id名{属性：属性值;}
#app{
font-size: 12px;
/* MacOS系统默认没有雅黑字体 */
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
line-height: 1.5em;
}
4) class 选择器
class 选择器也称之为类选择器，可以对“相同的元素” 或者 “不同的元素” 定义相同的 class 属性，然后对拥有相同 class 属性的元素进行 CSS 样式操作
语法：·class名{属性：属性值;}
.yg-ml20{
margin-bottom: 20px;
}
.yg-mt20{
margin-top: 20px;
}
5) 群主选择器
当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。
语法：选择符1，选择符2，选择符3{属性：属性值;}
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
6) 包含选择器（后代选择器）
包含选择器也称之为后代选择器，就是选择所有与前者存在“血缘关系”的元素 语法：选择符1 选择符2 选择符3{属性：属性值;}
<div class="box">
<p>没选中我</p>
<div class="content">
<p>选中元素中有我</p>
</div>
</div>
<div class="box">
<div class="content">
<p>选中元素中有我</p>
<div>
<p>选中元素中有我</p>
</div>
</div>
<p>没选中我</p>
</div>
.box .content p{
font-size: 14px;
color: blue;
}
7) 伪类选择器（伪类选择符）
CSS伪类是用来添加一些选择器的特殊效果。 常用伪类 | 选择器 | 示例 | 示例说明 | |---|---|---| |:checked | input:checked | 选择所有选中的表单元素 |:disabled | input:disabled | 选择所有禁用的表单元素 |:empty | p:empty | 选择所有没有子元素的p元素 |:enabled | input:enabled | 选择所有启用的表单元素 |:first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |:last-child | p:last-child | 选择所有p元素的最后一个子元素 |:last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |:not(selector) | :not(p) | 选择所有p以外的元素 |:nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |:nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |:nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |:nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |:only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |:only-child | p:only-child | 选择所有仅有一个子元素的p元素 |:read-only | input:read-only | 选择只读属性的元素属性 |:read-write | input:read-write | 选择没有只读属性的元素属性 |:required | input:required | 选择有"required"属性指定的元素属性 |:link | a:link | 选择所有未访问链接 |:visited | a:visited | 选择所有访问过的链接 |:active | a:active | 选择正在活动链接 |:hover | a:hover | 把鼠标放在链接上的状态 |:focus | input:focus | 选择元素输入后具有焦点 |:first-letter | p:first-letter | 选择每个< p> 元素的第一个字母 |:first-line | p:first-line | 选择每个 < p > 元素的第一行 |:first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 < p > 元素 |:before | p:before | 在每个 < p > 元素之前插入内容 |:after | p:after | 在每个 < p > 元素之后插入内容 :lang(language) | p:lang(it) | 为 < p > 元素的lang属性选择一个开始值
超链接伪类
当这4个超链接伪类选择符联合使用时，应注意他们的顺序
a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
- 为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
a{color:red;} a:hover{color:green;}
表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。
CSS选择符权重
- (1) 类型选择符（元素选择器）的权重为 0001
- (2) class选择符的权重为 0010
- (3) id选择符的权重为 0100
- (4) 伪类选择符的权重为 0010
- (5) 包含选择符的权重：为包含选择符的权重之和
- (6) 子选择符的权重为 0000(逐个对比)
- (7) 属性选择符的权重为 0010
- (8) 伪元素选择符的权重为 0001
- (9) 内联样式的权重为 1000
- (10) 继承样式的权重为 0000
图片格式
- 1.jpg: 有损压缩格式，靠损失图片本身的质量来减小图片的体积。
适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )。
- 2.gif 无损压缩格式，支持透明，支持动画。
适用于颜色数量较少的图像
- 3.png 无损压缩格式，支持透明，不支持动画，(是fireworks的 源文件格式)。
适用于颜色数量较少的图像
