学习笔记:应用视觉设计
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
规则控制动画中各阶段的变化-
animation-name
:设置动画的名称, 也就是要绑定的选择器的@keyframes
的名称。 -
animation-duration
设置动画所花费的时间(或频率)。button:hover { animation-name: background-color; animation-duration: 2000ms; } @keyframes background-color { 100% { background-color: #4791d0; } }
-
animation-fill-mode
指定了在动画结束时元素的样式。上图可以通过添加语句animation-fill-mode:forwards
来实现如下效果 -
animation-iteration-count
属性:控制动画循环的次数。其中infinite
是一直运行。 -
animation-timing-function
属性:规定动画的速度曲线(即运动过程中的加速和减速等过程)有如:-
默认的值是
ease
,动画以低速开始,然后加快,在结束前变慢; -
常用的值包括
ease-out
,动画以高速开始,以低速结束; -
ease-in
,动画以低速开始,以高速结束; -
linear
,动画从头到尾的速度是相同的。 -
cubic-bezier()
,贝塞尔曲线,曲线的形状代表了动画的速度。曲线在 1 ∗ 1 1*1 1∗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; } /*效果:当鼠标停留在超链接上时,超链接的颜色会变为红色。*/