Web系统设计【四】

一、CSS3新特性


CSS3具有一些新特性,由于w3c制定标准慢,尚未制定完毕,只是初稿时,浏览器厂商快速加入新属性的支持,加前缀。w3c确定标准后,才全面支持,去掉前缀。

具体属性的支持可在W3C网页查看

1、边框

(1)圆角边框

  • border-radius: 水平值,垂直值(填一个默认为圆形即所填=水平值=垂直值)
    • 左上角的形状border-top-left-radius: 水平值,垂直值
    • 右上角的形状border-top-right-radius: 水平值,垂直值
    • 左下角的形状border-bottom-left-radius: 水平值,垂直值
    • 右下角的形状border-bottom-right-radius: 水平值,垂直值

这里的水平值和垂直值,指的是一其为横轴,纵轴构造的椭圆或者圆 在相应位置的边线作为边框。

例如:

椭圆边线边框和圆形边线边框

胶囊状边框:上下的圆重合了

同理,修改宽度,构造正方向盒子,添加适合的值可以构造圆形内容区域

(2)阴影box-shadow

  • box-shadow:(方式)水平偏移 垂直偏移 模糊距离 阴影大小 颜色
    • 方式
      • outset 默认值,外部阴影
      • inset 可选,内部阴影
    • 水平偏移、垂直偏移:阴影以左上角为原点,向右向下为正方向偏移的距离。可为负值,即向左向上偏移
    • 模糊距离:阴影最外边模糊的范围
    • 阴影的大小:默认为0即为原大小。设置一个值表示四个方向增大或者减小的尺寸
    • 颜色:阴影的颜色

box-shadow详解

(3)图片边框

  • border-image:source slice width repeat

    • border-image-source 用在边框的图片的路径
    • border-image-slice 图片边框向内偏移。
      • 分为横向距离和纵向距离两个值,两条线将图片分割为九个区域
    • border-image-width 图片边框的宽度。
      • 若不设置则会继承
    • border-image-outset 边框图像区域超出边框的量。
      • 定义边框图像可超出边框盒的大小,默认为0。定义四个值和设置padding、margin一样
    • border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。
      • 由slice切割的四个角保留,四个方向上的边框进行相应的repeat方式操作

注意:border-image 必须与 border 配合使用。先指定出宽度和类型

2、文本与文字

(1)文本阴影text-shadow

类似边框阴影box-shadow

  • text-shadow:水平偏移 垂直偏移 阴影模糊大小 颜色
  • 常见几种设计:
    • 描边
    • 浮雕:字体白,阴影黑

(2)允许长单词、URL强制进行换行

表示如果行内没有多余的地方容纳该单词到结尾,则那些正常的不能被分割的单词会被强制分割换行。

  • word-wrap: 方式
    • normal:不换行
    • break-word:换行

(3)@font-face 规则

我们平显示的字体,都会在硬盘中有相应文件。而想要在Web上显示特殊的体系,需要用户自行下载对应的字体包,这样太过麻烦。我们将字体文件放入WEB站点目录下使用@font-face 进行调用。用户解析到时就会从服务器自动下载字体进行显示。

不同的浏览器对字体文件格式支持不同。假若下载字体只有一种.ttf格式,可以通过查阅一些网址或者软件,生成其他格式。

使用样例:

(4)其他文本控制

文本溢出处理:

  • white-space:规定段落中的文本不进行换行

    • normal:默认。空白会被浏览器忽略。
    • pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    • nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
    • pre-wrap:保留空白符序列,但是正常地进行换行。
    • pre-line:合并空白符序列,但是保留换行符。
  • text-overflow:当文本溢出包含元素时发生的事情

    • clip:修剪文本。
    • ellipsis:显示省略符号来代表被修剪的文本。
      • 通常配合下面使用
      • white-space: nowrap;
      • overflow: hidden;
    • string:使用给定的字符串来代表被修剪的文本。
  • 其他属性自行查阅

3、2D变换和3D变换

(1)2D变换:对元素进行旋转、缩放、移动、拉伸

  • transform:
    • 旋转rotate()
      • 值为 XXdeg,可正可负,代表顺时针和逆时针旋转
    • 放缩scale(x,y)
      • x:水平方向缩放的倍数
      • y:垂直方向缩放的倍数,若省略,同x
      • 0~1,缩小;>1放大
    • 倾斜skew(x_deg,y_deg)
      • 能够让元素倾斜显示,该函数包含两个参数值,分别用来定义X轴和Y轴坐标倾斜的角度。如果省略了第二个参数,则取默认值0。
    • 更改变换的中心点transform-origin: x-axis y-axis z-axis;
      • 默认值分别为50% 50% 0

(2)3D变换

transform-style: preserve(3d)

  • 向右X相上Y透过屏幕向客户Z

  • rotateX(deg)

    • 如果值为正,元素将围绕X轴顺时针旋转;反之,如果值为负,元素围绕X轴逆时针旋转。
  • rotateY(deg)

    • 如果值为正,元素将围绕X轴顺时针旋转;反之,如果值为负,元素围绕Y轴逆时针旋转。
  • rotateZ(deg)

    • 如果值为正,元素将围绕X轴顺时针旋转;反之,如果值为负,元素围绕Z轴逆时针旋转。
  • 无透视下旋转效果:

  • 透视(眼睛到舞台的距离)perspective: px

  • 透视下的旋转效果

设置3D变换,需要将内容放在父容器内,需要变换的父容器(可多个)再放入舞台内。父容器决定旋转关系,舞台决定透视关系。

还有更多的3D变换内容,自行查阅

4、过渡与动画

(1)过渡transition

  • transition:属性名 持续时间 过渡方法 何时开始;参数必须按照顺序进行定义,不能颠倒。
    • transition-property,规定应用过渡的 CSS 属性的名称。
      • none:没有属性会获得过渡效果。
      • all:所有属性都将获得过渡效果。
      • property:多个属性名称之间以逗号分隔。
    • transition-duration 定义过渡效果花费的时间。
      • 默认值为0,常用单位是秒(s)或者毫秒(ms)
    • transition-timing-function 规定过渡效果的时间曲线。
      • 实际上是定义了cubic-bezier(n,n,n,n)的四个特殊的值,也可以自己设置。
    • transition-delay 规定过渡效果何时开始。
      • 默认值为0,常用单位是秒(s)或者毫秒(ms)。当设置为负数时,过渡动作会从该时间点开始,之前的动作被截断;设置为正数时,过渡动作会延迟触发。

例如:

(2)动画animation

  • @keyframe name{}定义关键帧
    • 例如:帧的名字一般用%多少来设置
  • animation:引用 @keyframes 动画的名称 动画完成时间 规定动画的速度曲线 何时开始;和transition类似。就是属性改成了自己设置的动画关键帧
    • animation-name @keyframes 动画的名称
      • 填设置的动画的名称
    • animation-duration 动画完成时间
      • 默认值为0,常用单位是秒(s)或者毫秒(ms)
    • animation-timing-function 规定动画的速度曲线。默认是 “ease”。
      • 实际上是定义了cubic-bezier(n,n,n,n)的四个特殊的值,也可以自己设置。
    • animation-delay 规定动画何时开始。
      • 允许负值,例:-2s 使动画马上开始,但跳过 2 秒进入动画。
    • animation-play-state 规定动画是否正在运行或暂停。
      • running(运动)|paused(暂停)
      • 常用于鼠标进入盒子停止播放。
    • animation-iteration-count 规定动画被播放的次数。
      • n 定义动画播放次数的数值。
      • infinite 规定动画应该无限次播放。
    • animation-direction 规定动画是否在下一周期逆向地播放。
      • normal|alternate
      • 如果 animation-direction 值是 “alternate”,则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。
      • 注意:如果把动画设置为只播放一次,则该属性没有效果!
    • animation-fill-mode 规定对象动画时间之外的状态。
      • none 无
      • forward 动画结束(to里面的所有样式)时的状态
      • backward 动画开始(from里面的所有样式)时的状态
      • both 动画开始或者结束时的状态。

(3)过渡与动画的区别

过渡属性transition可以在一定的时间内实现元素的状态过渡为最终状态,用于模拟一种过渡动画效果,但是功能有限,只能用于制作简单的动画效果;而动画属性 animation 可以制作类似Flash动画,通过关键帧控制动画的每一步,控制更为精确,从而可以制作更为复杂的动画。

transition需要触发一个事件(大多是另一个CSS例如鼠标悬停)才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果

过渡只有一组(两个:开始-结束) 关键帧,动画可以设置多个。

5、滤镜filter

定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)

具体函数设定再查阅

二、HTML5


HTML5中具有很大的语义化倾向

有了header、nav、footer、aside、content等标签可直接使用,减少了使用div的语义不明。

有了em、strong取代i和b的语义不明确标签。

有了自定义列表dl、列表项dt、描述dd

具体请查询HTML5。

-----------------------本文结束 感谢阅读-----------------------
坚持原创技术分享,您的支持将鼓励我继续创作!恰饭^.^~