【黑马程序员济南】 前端与移动开发就业班笔记CSS进阶:Day03

1. 焦点图部分所用知识点

名称	说明
圆角矩形	border-radius: 左上角 右上角 右下角 左下角。

负值自己的宽度一半（固定定位也是如此）

2. 背景半透明

1.强烈推荐：盒子背景半透明 background: rgba(r,g,b,alpha);

r,g,b 是红绿蓝的颜色， alpha 是透明度的意思，取值范围是 0~1 之间。 这个是让盒子的背景半透明，盒子里面内容不半透明

2.元素半透明

此属性是盒子半透明，不是背景半透明哦，因为里面的内容也一起半透明了

正常浏览器： opacity:0.5; 取值范围是 0~1 之间 表示透明度 0% 到 100%

ie8及其以下的版本 用filter:Alpha(opacity=50) ； // opacity值为0 到 100

因此，低版本的 ie浏览器，我们不需要透明了，直接采用优雅降级的做法。

background: gray;

background: rgba(0,0,0,.2);

写上两句 背景， 低版本ie只执行gray， 其他浏览器执行 半透明下面这一句。

3. 优雅降级和渐进增强

什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

类似 爬山，由低出往高处爬

优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

类似蹦极，由高处往低处下落

区别：渐进增强是向上兼容，优雅降级是向下兼容。

个人建议： 现在互联网发展很快， 连微软公司都抛弃了ie浏览器，转而支持 edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。

ie6 以下的版本首页改动下： https://h5.m.jd.com/dev/3dm8aE4LDBNMkDfcCaRxLnVQ7rqo/index.html

等后面我们学了JavaScript 来检测用户浏览器版本，如果是ie6及其以下的版本，我们就跳到这个页面上。

4. CSS W3C 统一验证工具

CssStats 是一个在线的 CSS 代码分析工具

网址是：  http://www.cssstats.com/

如果你想要更全面的，这个神奇，你值得拥有：

W3C 统一验证工具： http://validator.w3.org/unicorn/ ☆☆☆☆☆

因为它可以检测本地文件哦！！

5. CSS 压缩

通过上面的检测没有错误，为了提高加载速度和节约空间（相对来说，css量很少的情况下，几乎没啥区别），可以通过css压缩工具把css进行压缩。

w3c css压缩 可以去站长之家进行快速压缩。

http://tool.chinaz.com/Tools/CssFormat.aspx

【黑马程序员济南】 前端与移动开发就业班笔记CSS进阶:Day03

1. 焦点图部分所用知识点

名称	说明
圆角矩形	border-radius: 左上角 右上角 右下角 左下角。

负值自己的宽度一半（固定定位也是如此）

2. 背景半透明

1.强烈推荐：盒子背景半透明 background: rgba(r,g,b,alpha);

r,g,b 是红绿蓝的颜色， alpha 是透明度的意思，取值范围是 0~1 之间。 这个是让盒子的背景半透明，盒子里面内容不半透明

2.元素半透明

此属性是盒子半透明，不是背景半透明哦，因为里面的内容也一起半透明了

正常浏览器： opacity:0.5; 取值范围是 0~1 之间 表示透明度 0% 到 100%

ie8及其以下的版本 用filter:Alpha(opacity=50) ； // opacity值为0 到 100

因此，低版本的 ie浏览器，我们不需要透明了，直接采用优雅降级的做法。

background: gray;

background: rgba(0,0,0,.2);

写上两句 背景， 低版本ie只执行gray， 其他浏览器执行 半透明下面这一句。

3. 优雅降级和渐进增强

什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

类似 爬山，由低出往高处爬

优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

类似蹦极，由高处往低处下落

区别：渐进增强是向上兼容，优雅降级是向下兼容。

个人建议： 现在互联网发展很快， 连微软公司都抛弃了ie浏览器，转而支持 edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。

ie6 以下的版本首页改动下： https://h5.m.jd.com/dev/3dm8aE4LDBNMkDfcCaRxLnVQ7rqo/index.html

等后面我们学了JavaScript 来检测用户浏览器版本，如果是ie6及其以下的版本，我们就跳到这个页面上。

4. CSS W3C 统一验证工具

CssStats 是一个在线的 CSS 代码分析工具

网址是：  http://www.cssstats.com/

如果你想要更全面的，这个神奇，你值得拥有：

W3C 统一验证工具： http://validator.w3.org/unicorn/ ☆☆☆☆☆

因为它可以检测本地文件哦！！

5. CSS 压缩

通过上面的检测没有错误，为了提高加载速度和节约空间（相对来说，css量很少的情况下，几乎没啥区别），可以通过css压缩工具把css进行压缩。

w3c css压缩 可以去站长之家进行快速压缩。

http://tool.chinaz.com/Tools/CssFormat.aspx