CSS3 备忘录

现代CSS网站的一些特征

渐进增强

渐进式的增强意味着可以创建一个可靠的页面,对其中的内容可以以恰当的方式进行标记,同时也为这个页面添加一些高级的样式或者脚本处理,使得各种浏览器都可以进行处理。

这样做使得网页可以被所有浏览器使用,但看起来未必是一样的。使用高级浏览器的新用户可以因此看到更酷炫的视觉效果,也能够体验到更出色的可用性。

好处:

  • 页面更加稳健
  • 用户更加愉悦
  • 减少了开发时间
  • 减少了维护时间
  • 更加有乐趣

适应不同的用户

现代基于CSS的网页能够广泛地适应各种浏览器、设备、屏幕分辨率、字体大小、辅助技术和其他一些用户所特有的需求。

在创建CSS布局的时候应当考虑的因素:

  • 浏览器: 是否兼容老版本的浏览器
  • 平台: 在PC、Mac、Linux等机器上是否都可用
  • 设备: 是否适应低分辨率或者全分辨率的移动设备
  • 屏幕分辨率: 在多种视口(viewport)宽度下是否内容保持正确并且易于阅读。
  • 字体尺寸: 是否适应默认字体尺寸,字体发生改变时对整个布局的影响,是否利于阅读和理解。
  • 颜色: 考虑黑白颜色下,内容是否可阅读,考虑色盲或者弱视或者色弱群体的用户体验
  • JavaScript: 是否需要JavaScript,考虑没有JS的情况下的页面布局
  • 图片: 保证没有图片时,内容依旧可读且有意义
  • 辅助技术和残疾人士: 考虑无法使用鼠标或者使用屏幕阅读器的条件

模块化

模块化的CSS,从广义上讲,就是被分解的独立工作的CSS块,用来创建能被单独重用的设计组件。可以把设计样式分割到多个样式表中,例:layout.css、type.css、color.css等。

这意味着可以为表单布局创建一系列通用的CSS类,而这些类可以应用到网站的任何表单上,而不是为每一个表单都单独地进行样式化。

丰富的字体排版

@font-face规则允许网站去连接服务器上的字体,即网页字体,就如同连接服务器上的图片一样。这样的设计就不局限于大多数人在本地机器上安装的字体,可以用适合设计的独特字体来做设计。

IE过滤

  • 使用条件注释:

为每一个存在问题的IE版本创建一个单独地样式表,只有特定版本的IE可以看到特定的样式表。那一部分特定的IE样式表仅仅包含一小部分浏览器所需要的解决方法和hack。

  • 使用JavaScript来“修复”IE:

可以让IE6模拟支持CSS3、透明PNG图片或者其他一些原本不能支持的东西。例如:[ie7-js][Modernizr]和ie-css3.js。

属性选择器

[ att = value ]

属性必须要有指定的确切的值。

[ att ~= value ]

属性的值必须是以空格隔开的单词列表,其中一个单词具有确切的指定值。

**[ att = value ]**

属性的值正好是”value”,或者是”value-“。

[ att ^= value ]

属性的值以指定的值为起始。

[ att $= value ]

属性的值以指定的值结尾。

[ att *= value ]

属性的值包含了指定的值。

除IE6以外,所有浏览器都支持属性选择器。

CSS3使用注意事项

<meta> 标签

  • 使IE采用最新渲染模式,以支持CSS3效果

      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
  • 移动端处理:页面宽度=设备宽度,缩放为1,不放大

      <meta name="viewport" content="width=device-width,inital-scale=1">
    

CSS3 动画属性

transform属性

  • 功能:向元素应用2D或者3D转换

  • 语法:transform: none transform-function
  • 参数:

      translate3d(x,y,z) //定义3D转化
    
      rotate3d(x,y,z,angle) //定义3D旋转
    
      scale3d(x,y,z,flex) //定义3D缩放
    

transition属性

  • 功能:在一定时间区间内平滑地过度指定的属性值

  • 语法:transform: property duration timing-function delay

  • 参数:

      property //规定设置过度效果的CSS属性名称
    
      duration //规定完成过度效果需要多少时间(秒或毫秒)
    
      timing-function //规定速度效果的速度曲线
    
      transition-delay //定义过度效果何时开始
    

animation属性

@keyframes规则

这是一种特定的CSS@规则,后面应紧接着一个标识符,该标识符被CSS代码的其他部分引用。

@-webkit-keyframes sunrise {
    /*rule sets go here*/
    0% {
        bottom: 0;
        left: 340px;
        background: #F00;
    }
    33% {
        bottom: 340px;
        left: 340px;
        background: #FFD630;
    }
    66% {
        bottom: 340px;
        left: 40px;
        background: #FFD630;
    }
    100% {
        bottom: 0;
        left: 40px;
        background: #F00;
    }
}

在新规则的集合中,引入了关键帧选择器,上面的示例代码中,关键帧选择器是0%/33%/66%/100%。

0%和100%选择器相应地可以用关键字”from”和”to”来代替,可以得到相同效果。

将动画名称和元素相关联以及相关设置

#sun.animate {
    -webkit-animation-name: sunrise;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 5s;
}

animation-name:属性的值必须和已存在的@keyframe规则的标识符相匹配。

animation-duration:属性指定动画的持续时间。

animation-tinming-function:属性可以定义动画在一次独立的迭代过程中是如何进行的。其中的属性值可以是:ease、linear、ease-out、step-start以及其他值。

animation-iteration-count:属性设置为1,意味着动画将只会播放一次,这个值可以是一个整数值或者无限大的数。

animation-direction:normal为默认值,意味着动画在每一次迭代时将从相同的方向播放(从开始到结束)。alternate可以让动画在每一次循环的时候反向播放,设置时需要将循环次数达到2或者更大的数值。

animation-delay:属性设置一个时间来推迟动画的运行,可以设置负值,浏览器将根据这个负值把动画的播放起点移动到动画的中途。

支持CSS关键帧动画的浏览器

  • Chrome 2+
  • Safari 4+
  • Firefox 5+
  • iOS Safari 3.2+
  • Android 2.1+

字体排版

设置字体比例尺

基础字体为16px

  • h1 = 24px -> 24px/16px = 1.5em
  • h2 = 22px -> 22px/16px = 1.375em
  • h3 = 20px -> 20px/16px = 1.25em
  • h4 = 18px -> 18px/16px = 1.125em
  • h5 = 16px -> 16px/16px = 1em
  • h6 = 16px -> 16px/16px = 1em

每一行的高度为24px

/*---HEADINGS---*/
h1,h2,h3,h4,h5,h6{
    margin-bottom : 24px;
    font-weight: bold;
}
h1{
    font-size: 1.5em; // 24px -> 24/16 = 1.5
    line-height: 1em; // 24px -> 24/24 = 1
}
h2{
    font-size: 1.375em; // 22px -> 22/16 = 1.375
    line-height: 1.0909em; // 22px -> 24/22 = 1.0909
}
h3{
    font-size: 1.25em; // 20px -> 20/16 = 1.25
    line-height: 1.2em; // 24px -> 24/20 = 1.2
}
h4{
    font-size: 1.125em; // 18px -> 18/16 = 1.125
    line-height: 1.3333em; // 24px -> 24/18 = 1.3333
}
h5,h6{
    font-size: 1em; // 16px -> 16/16 = 1
    line-height: 1em; // 24px -> 24/16 = 1.5
}

文本设置

单词换行

word-wrap : normal / break-word

break-word:可以使某一个过长以致会溢出容器的单词将会在某一个随机的点中断,使之在容器内换行。

单词和字母间隔

word-spacing 和 letter-spacing , 最佳间隔为normal

控制溢出

text-overflow : 属性允许控制文本溢出所在容器时,要显示的内容。 可以使用CSS在溢出的地方添加省略号。这个属性在最新版本的Safari、Opera、IE6、IE7上起作用。

伪类

:after与:before用法

  • :after选择器:在被选元素的内容后面插入内容

  • :before选择器:在被选元素的内容前面插入内容

  • 说明: 需要使用content属性来指定要插入内容

  • 浏览器兼容:对IE8及更早版本的:after,必须声明<!DOCTYPE>