css-应用视觉设计

CSS-应用视觉设计

视觉设计结合了排版、色彩理论、图形、动画、页面布局等，以表达独特的信息。
CSS 里面的 text-align 属性可以控制文本的对齐方式。

text-align: justify; 可以让除最后一行之外的文字两端对齐。

text-align: center; 可以让文本居中对齐。

text-align: right; 可以让文本右对齐。

text-align: left; 是默认值，它可以让文本左对齐。

可以使用 CSS 里的 width 属性来指定元素的宽度。 属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。
和 width 属性类似，可以使用 CSS 里面的 height 属性来指定元素的高度。

width:10px;
height:10px;

使用 strong 标签加粗文本
你可以使用 strong 标签来加粗文字。 粗体文字一般用来吸引读者注意或用来表示强调。 添加了 strong 标签后，浏览器会自动给元素添加这段样式：font-weight:bold;

<strong>你要加粗的文字</strong>

使用 u 标签给文本添加下划线
可以使用 u 标签来给文字添加下划线。 下划线通常用来表示重要内容或需要记忆的内容。 添加了 u 标签后，浏览器会自动给元素添加这段样式：text-decoration: underline;。

<u></u>

使用 em 标签强调文本
可以使用 em 标签来强调文本。 由于浏览器会自动给元素应用 font-style: italic;，所以文本会显示为斜体。

<em></em>

使用 s 标签给文本添加删除线
可以用 s 标签来给文字添加删除线。 删除线是位于文字水平中央的一条线，它代表着一段文字不再有效。 添加了 s 标签后，浏览器会自动给元素添加这段样式：text-decoration: line-through;。

<s></s>

使用 hr 标签创建水平线
可以用 hr 标签来创建一条宽度撑满父元素的水平线。 这种水平分割线一般用来表示内容主题的改变，或在视觉上将文档分隔成几个部分。

<hr>

给卡片元素添加 box-shadow
box-shadow 属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。
box-shadow 属性的阴影依次由下面这些值描述：

    offset-x :阴影的水平偏移量；
    offset-y :阴影的垂直偏移量；
    blur-radius :模糊半径；
    spread-radius: 阴影扩展半径；
    color

元素的透明度
CSS 里的 opacity 属性用来设置元素的透明度。

属性值为 1 代表完全不透明。
属性值为 0.5 代表半透明。
属性值为 0 代表完全透明。

text-transform 属性

lowercase	小写
uppercase	大写
initial	使用默认值
inherit	使用父元素的 text-transform 值。
none	Default:不改变文字。

调整锚点的悬停状态
伪类是可以添加到选择器上的关键字，用来选择特定状态的元素。
比如，可以使用 :hover 伪类选择器来选取超链接的悬停状态。 下面的代码可以在鼠标悬停在超链接上时将其 color 变成红色：

a:hover {
  color: red;
}

更改元素的相对位置
在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。 块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。 元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。
当元素的定位设置为 relative 时，它允许你通过 CSS 指定该元素在当前文档流页面下的相对偏移量。 CSS 里控制各个方向偏移量的属性是 left、right、top 和 bottom。 它们代表从原来位置向远离该方向偏移指定的像素、百分比或者 em。 下面的例子展示了段落向上偏移 10px：

p {
  position: relative;
  bottom: 10px;
}

使用 float 属性将元素左浮动或右浮动
通过元素的 float 属性来设置。 浮动元素不在文档流中，它向 left 或 right 浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 通常需要用 width 属性来指定浮动元素占据的水平空间。

使这两个元素按两列布局，section 和 aside 左右排列。 设置 #left 元素的 float 属性值为 left，设置 #right 元素的 float 属性值为 right。

使用 z-index 属性更改重叠元素的位置
当一些元素在位置上重叠时（例如，使用 position: absolute | relative | fixed | sticky 时），在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。 你可以使用 z-index 属性指定元素的堆叠次序。 z-index 的取值是整数，数值大的元素会叠放到数值小的元素上面。

创建一个 CSS 线性渐变
HTML 元素的背景色并不局限于单色。 CSS 还为我们提供了颜色渐变。 可通过 background 里的 linear-gradient() 实现线性渐变， 以下是它的语法：

background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);

第一个参数指定了颜色过渡的方向——它的值是角度，90deg 表示垂直渐变（从左到右），45deg 表示沿对角线渐变（从左下方到右上方）。 其他参数指定了渐变颜色的顺序。
例：

background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

使用 linear-gradient() 给 div 元素添加 background 渐变色，渐变角度为 35 度，从 #CCFFFF 过渡到 #FFCCCC。

使用 CSS 线性渐变创建条纹元素
repeating-linear-gradient() 函数和 linear-gradient() 很像，主要区别是前者会重复指定的渐变。 repeating-linear-gradient() 有很多参数，为了便于理解，本关只用到角度值和色标。

角度就是渐变的方向。 色标代表渐变颜色及发生渐变的位置，由百分比或者像素值表示。

0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px

在代码编辑器的例子里，渐变开始于 0 像素位置的 yellow，然后过渡到距离开始位置 40 像素的 blue。 由于下一个渐变颜色的起始位置也是 40 像素，所以颜色直接渐变成第三个颜色值 green，然后过渡到距离开始位置 80 像素的 red。