CSS3初识

CSS3帮助手册

CSS3一直在持续进化中，我们可以通过帮助文档去学习CSS3,下面把常用的文档罗列一下：

• w3school_css3
• Mozilla开发者网络
• CSS参考手册

CSS3简介

CSS3为我们提供了很多让人兴奋的新样式,但是由于浏览器的兼容性问题,所以并不是所有的浏览器都能够使用
不过这并不影响我们学习以及使用它

前缀:

• 浏览器厂商在实现CSS3的效果时,有的还有的还在测试阶段,为了保证显示效果,我们在使用某些属性的时候需要添加额外的前缀
• 举个例子:我要使用属性xxx
  • -ms-xxx:ie浏览器
  • -moz-xxx:FireFox浏览器
  • -o-xxx:Opera浏览器
  • -webkit-xxx:Chrome以及Safari

Trident内核(IE)： 前缀为 -ms
Gecko内核(FireFox)： 前缀为 -moz
Presto内核(Opera)： 前缀为 -o
Webkit内核(Chrome,Safari)： 前缀为 -webkit

核心知识点

CSS3的所有样式都分为模块，其中最重要的是

• 选择器
• 框模型
• 背景和边框
• 文本效果
• 2D/3D 转换
• 动画
• 多列布局
• 用户界面

CSS中出现的新属性

selection

• 语法：
  • 选中时的样式
  • 只能设置的属性有background-color,color,text-shadow

E::selection

placeholder

该属性处于测试阶段，需要配合浏览器前缀使用

• 语法：
  • 设置input标签placeholder属性的显示颜色

E::selection

• 示例代码：

<input type="text" placeholder="占位符" />

input::-webkit-input-placeholder {
    color: #999;
}
input:-ms-input-placeholder { // IE10+
    color: #999;
}
input:-moz-placeholder { // Firefox4-18
    color: #999;
}
input::-moz-placeholder { // Firefox19+
    color: #999;
}

颜色

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，跟opacity相比，它们不具有继承性，即不会影响子元素的透明度。

• RGBA
  • Red：0-255
  • Green：0-255
  • Blue：0-255
  • Alpha：0-1（小数）
  • 注意，不使用A那么认为没有透明度

    color:RGBA(100,100,100,0.3);
    color:RGB(100,100,100);

• HSLA
  • Hue(色调):0-360
  • Saturation(饱和度):0-100%
  • Lightness(亮度):0-100%
  • Alpha(透明度):0-1（小数）

color: hsla(308, 85%, 58%, 1);
color: hsl(308, 85%, 58%);

• 取色：

  • 使用PS的拾色器即可
  • 在线颜色转换

• 透明度说明：

  • opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度 ，他是作为CSS的属性来使用的
  • transparent始终完全透明，他是作为颜色的取值来使用color:transparent

• 适用范围：

  • 所有可以使用颜色的地方，都能够使用RGBA 以及HSLA