学习笔记：应用视觉设计

学习笔记：应用视觉设计

1. 简介

• 视觉设计在 Web 开发中是一个非常广泛的话题。它结合了排版、色彩理论、图形、动画和页面布局等内容。

• 如何定义什么是好设计呢？

  没有一个标准的答案，但好设计背后都隐藏着相同的设计原则，这些原则在很多设计方面的书籍中都有所体现。

• 在日常生活中，我们每天接触着大量的 Web 内容。这些内容的视觉设计会影响页面的呈现和保证用户体验。在 Web 开发中，HTML 为页面的内容提供结构和语义，CSS 控制页面的布局和外观。

2. 基础属性

• text-align属性

  取值	效果
  left	默认：文本左对齐
  right	文本右对齐
  center	文本居中对齐
  justify	除最后一行之外的文字两端对齐， 即每行的左右两端都紧贴行的边缘

• width属性：指定元素的宽度

• height属性：指定元素的高度

• line-height属性：设置行间的距离。即行高，每行文字所占据的垂直空间。

• font-size属性：设置元素内文字的大小

• font-weight属性：设置文本中所用的字体的粗细

• box-shadow属性：给元素添加阴影

  该属性值是由逗号分隔的一个或多个阴影列表，每个阴影列表包括以下内容：

  属性	用途
  offset-x	阴影的水平偏移量
  offset-y	阴影的垂直偏移量
  blur-radius（模糊半径）	模糊距离
  spread-radius（辐射半径）	阴影尺寸
  color	颜色

  注意：其中blur-raduis和spread-raduis是可选项。

• opacity属性：设置元素的透明度

  其中值为 1 代表完全不透明。
  值为 0.5 代表半透明。
  值为 0 代表完全透明。

• text-transform属性：改变英文中字母的大小写

  通常用来统一页面里英文的显示，且无需直接改变 HTML 元素中的文本。

  取值	效果
  lowercase	“transform me”
  uppercase	“TRANSFORM ME”
  capitalize	“Transform Me”
  initial	使用默认值
  inherit	使用父元素的text-transform值。
  none	默认：不改变文字。

  
  

• position：relative：指定该元素在当前普通流页面下的相对偏移量。

  • CSS 里控制各个方向偏移量的对应的属性是left、right、top和bottom。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者 ems。（指向远离目标属性的方向偏移，实际上就是往相反方向偏移）

  • 把元素的 position 设置成 relative 并不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响。

  • h2{
        position: relative;
        bottom:10px;
    }
    /*向上偏移10px*/
    

    盒模型：在CSS里，一切的HTML元素皆为盒子（可以对元素进行方向上的修饰）

    文档的普通流：块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照上述方式布局称为文档的普通流

• position：absolute ：指定该元素在当前普通流页面下的相对偏移量。

  • 把元素的 position 设置成 absolute ，定位会将元素从当前的文档流里面移除，周围的元素会忽略它。且元素的定位参照于最近的已定位祖先元素。

  • #searchbar {
        position: relative;
        top:5px;
        right:50px;    
    }
    

    

  • #searchbar {
        position: absolute;
        top:50px;
        right:50px;    
      }
    

    

• position：fixed ：是一种特殊的绝对（absolute）定位

• 两者的区别是：把元素的 position 设置成 absolute 下的元素的定位参照于最近的已定位祖先元素。而把元素的 position 设置成fixed下的元素定位是基于浏览器窗口的，且fixed定位的元素不会随着屏幕滚动而移动。

  
  

• float属性：一种定位机制，浮动元素不在文档流当中，控制元素向左或向右浮动，知道外边缘碰到包含框或另一个浮动框的边款为止。通常需要用width属性来指定浮动元素占据的水平空间。

• z-index属性：指定元素的堆叠次序。

  z-index的取值是整数，数值大的元素优先于数值小的元素显示。

• argin：auto：将块级元素水平居中显示。

  这个方法也对图片奏效。图片默认是内联元素，但是可以通过设置其display属性为block来把它变成块级元素。

• background属性：支持使用url()函数通过链接的方式引入一个指定纹理或样式的图片。图片链接地址在括号内，一般会用引号包起来。

• transform属性：

  • 内部有很多函数，可以对元素进行调整大小、移动、旋转和翻转等操作；亦可使用伪类描述元素的指定状态，如:hover（鼠标悬停）时。
  • scale()函数：用来改变元素的显示比例。如scale(2)，将相应的元素放大了两倍。
  • skewX()函数：使得选择的元素沿着X轴（横向）翻转指定的角度。如：skewX(-32deg)
  • skewY()函数：使得选择的元素沿着Y轴（垂直方向）翻转指定的角度。如：skewY(12deg)

• border-radius属性：控制元素的圆角边框

• animation属性：控制动画的外观

  • 总共有 8 个animation属性，@keyframes规则控制动画中各阶段的变化

    1. animation-name：设置动画的名称， 也就是要绑定的选择器的@keyframes的名称。

    2. animation-duration设置动画所花费的时间（或频率）。

       button:hover {
           animation-name: background-color;
           animation-duration: 2000ms;
       }
       @keyframes background-color {
           100% {
           	background-color: #4791d0;
           }
       }
       

       

    3. animation-fill-mode指定了在动画结束时元素的样式。上图可以通过添加语句animation-fill-mode：forwards来实现如下效果

       

    4. animation-iteration-count属性：控制动画循环的次数。其中infinite是一直运行。

    5. animation-timing-function属性：规定动画的速度曲线（即运动过程中的加速和减速等过程）有如：

       • 默认的值是ease，动画以低速开始，然后加快，在结束前变慢；

       • 常用的值包括ease-out，动画以高速开始，以低速结束;

       • ease-in，动画以低速开始，以高速结束；

       • linear，动画从头到尾的速度是相同的。

       • cubic-bezier()，贝塞尔曲线，曲线的形状代表了动画的速度。曲线在 $1\ast 1$ 的坐标系统内，曲线的 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。

         cubic-bezier()函数包含了 4个点：p0、p1、p2和p3。其中p0是曲线起始点（0，0），p3是结束点 (1, 1)。你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线，其中 x 值范围在[0,1]，而 y 值可以大于1。语法为cubic-bezier(x1, y1, x2, y2)

  • 配合position和fixed等定位属性，可以在动画规则里创建多种类型的动作。同时可以和opacity形成渐隐

    

3. 修饰标签

• strong标签：加粗文字。

  添加了strong标签后，浏览器会自动给元素应用font-weight:bold;。

• u标签：给文字添加下划线。

  添加了u标签后，浏览器会自动给元素应用text-decoration: underline;。

  **注意：**锚点默认给文本添加下划线，如果u标签的下划线和页面的锚点混淆，请避免使用它。

• em标签：强调文本。

  浏览器会自动给元素应用font-style: italic;，所以文本会显示为斜体。

• s标签：给文字添加删除线。

  浏览器会自动给元素应用text-decoration: line-through;

• hr标签：创建一条宽度撑满父元素的水平线。

  一般用来表示文档主题的改变，在视觉上将文档分隔成几个部分。

4. 特殊设计

• rgba()颜色：

  名称	意义
  r	red 红色
  g	green 绿色
  b	blue 蓝色
  a	alpha 透明度

  • 注意：RGB取值在[0,255]，alpha取指在[0,1]

• HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标系中的表示法，描述了色相（hue）、饱和度（saturation）、亮度（lightness）

  属性	取值	描述
  色相	0-360°	色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 以颜色光谱为例，光谱左边从红色，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。 在hsl()里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的角度值。
  饱和度	0-100%	色彩的纯度，也就是颜色里灰色的占比，越高色彩越纯，低则逐渐变灰
  亮度	100% 亮度是白色 0% 亮度是黑色 50% 亮度是“一般的”	颜色的明暗程度，也就是颜色里白色或者黑色的占比

• 渐变：

  • 可以通过background里面的linear-gradient()来实现线性渐变，语法：background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);

  • 第一个参数指定了颜色过渡的方向，它的值是角度，90deg 代表垂直渐变，45deg 的渐变角度和反斜杠方向差不多。

    background:linear-gradient(35deg, #CCFFFF, #FFCCCC);
    

    

  • 重复指定的渐变：repeating-linear-gradient()

    样例：

    repeating-linear-gradient(
          45deg,
          yellow 0px,
          yellow 40px,
          black 40px,
          black 80px
        );
    

    

• 伪类选择器：伪类是可以添加到选择器上的关键字，用来选择元素的指定状态。如：

  a:hover {
    color: red;
  }
  /*效果：当鼠标停留在超链接上时，超链接的颜色会变为红色。*/