2. CSS颜色取值
-
基本颜色关键字
- red：红色，black：黑色，yellow：黄色，blue：蓝色，purple：紫色，white：白色
-
RGB颜色
- rgb(red, green, blue)
-
RGBA颜色
- rgba(red, green, blue, alpha)
- alpha：设置***透明度***, 取值范围是0.0~1.0
-
transparent表示颜色为透明，不可见
3. Emmet语法
-
Emmet语法的作用：
-
快速生成HTML结构语法
-
快速生成CSS样式语法
-
-
快速生成***HTML结构***语法：
-
如果想要生成多个相同标签 加上 * 就可以了，快速生成3个div ：
div*3+tab键 -
如果有父子级关系的标签，可以用 > 比如 ul > li：
ul>li+tab键 -
如果有兄弟关系的标签，用 + 就可以了 比如：
div+p+tab键 -
如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
div.demo || div#two
-
如果生成的div 类名是有顺序的， 可以用 自增符号 $
div.$*5
-
如果想要在生成的标签内部写内容可以用 { } 表示
div.$*5{$}
-
-
快速生成***CSS样式***语法：
-
w100 = width：100px；
-
w20+h30+m30 = width：20px；height:30px margin:30px
-
4. CSS Sprite(性能优化)
-
什么是CSS Sprite
- 是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后***利用CSS的背景定位来显示对应的图片部分***
-
使用CSS Sprite的好处
-
减少网页的http请求数量，加快网页响应速度，减轻服务器压力
-
减小图片总大小
-
解决了图片命名的困扰，只需要针对一张集合的图片命名
-
-
使用精灵图核心总结：
-
精灵图主要针对于小的背景图片使用。
-
主要借助于背景位置来实现—background-position 。
-
一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）
-
5. 理解浏览器前缀
-
问题：为什么有些CSS属性前面需要跟上浏览器前缀？
- 比如：***-moz-display:flex***
-
原因：有些浏览器的版本不支持一些CSS属性，需要加上前缀才能使用
-
注意：不需要手动添加，后面学习了模块化打包工具会自动添加浏览器前缀
6. 命名规范
-
常见的命名规范有
kebab-case：单词之间以-隔开，比如head-left大驼峰：每一个单词的首字母都采用大写字母，比如HeadLeft
-
小驼峰：第一个单词以小写字母开始，第二个单词的首字母大写。例如：firstName、lastName -
HTML中的类名、id 以及自定义属性等等，命名都与遵循
kebab-case规范 -
JS中的变量遵循
小驼峰命名规范 -
JS中的构造函数遵循
大驼峰命名规范
7. 元素的背景颜色
-
元素的背景颜色会填充元素的整个宽度，包括内边距，代码举例：
-
给img元素设置背景颜色有时会生效，为什么？
- 并不是所有图片都可以设置背景颜色，要保证图片是透明的才可以设置背景颜色
- 如果想让图片是透明的就要用到ps工具
8. CSS单位
-
CSS 有几个不同的单位用于表示尺寸大小。
- 参考文档：
https://www.runoob.com/cssref/css-units.html
- 参考文档：
-
一些设置 需要 CSS 尺寸大小的属性有 width, margin, padding, font-size, border-width, 等。
-
CSS尺寸大小由一个数字和单位组成如 10px, 2em, 等。
-
相对尺寸
-
绝对尺寸
