应用视觉设计

一、设置文本样式
- 1.设置对齐方式
- 2.调整元素的宽度和高度
- 3.加粗、下划线、删除线、水平线、强调文本
- 4.调整文本的背景色
- 5.调整标题与段落的大小
- 6.给元素添加阴影、降低元素的透明度
- 7.给文本添加大写效果
- 8.设置多个标题元素的 font-size和font-width
- 9.设置段落的font-size和line-height
二、设置元素位置
- 1.调整锚点的悬停状态
- 2.更改元素的相对位置
- 3.绝对定位的参照物是元素的父元素
- 4.固定定位的参照物是浏览器的窗口
- 5.使用 float 属性将元素左浮动或右浮动
- 6.更改重叠元素的位置
- 7.将元素水平居中

一、设置文本样式

1.设置对齐方式

CSS 里面的 text-align 属性可以控制文本的对齐方式。

text-align: justify; 可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。
text-align: center; 可以让文本居中对齐。
text-align: right; 可以让文本右对齐。
text-align: left; 是默认值，它可以让文本左对齐。

2.调整元素的宽度和高度

宽度：width
高度：height
属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。

img {width:20px;height: 20px;
}

3.加粗、下划线、删除线、水平线、强调文本

(1)加粗：strong
添加了 strong 标签后，浏览器会自动给元素添加这段样式：font-weight:bold;
(2)下划线： u
添加了 u 标签后，浏览器会自动给元素添加这段样式：text-decoration: underline;
(3)添加删除线：
添加了 s 标签后，浏览器会自动给元素添加这段样式：text-decoration: line-through;
(4)创建水平线：hr
hr 标签用来创建一条宽度撑满父元素的水平线。这种水平分割线一般用来表示内容主题的改变，或在视觉上将文档分隔成几个部分。
hr标签是自闭合标签，也就是没有结束标签
(5)强调文本：em
使用 em 标签来强调文本，浏览器会自动给元素应用 font-style: italic;所以文本会显示为斜体。
注意：上面五个，出了hr标签，其他的都是将要设置样式的文本用开始标签和结束标签包围起来即可。

4.调整文本的背景色

设置background-color属性
rgba 代表：
r = red 红色
g = green 绿色
b = blue 蓝色
a = alpha 透明度
RGB 值可以取在 0 到 255 之间。 alpha 值可取在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。

background-color:rgba(45,45,45,0.1);

5.调整标题与段落的大小

使用 font-size 属性来设置元素内文字的大小

font-size:27px;

6.给元素添加阴影、降低元素的透明度

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

offset-x 阴影的水平偏移量；
offset-y 阴影的垂直偏移量；
blur-radius 模糊半径；
spread-radius 阴影扩展半径；
color
其中 blur-radius 和 spread-radius 是可选的。

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
<!--多个阴影列表用逗号分隔-->

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

属性值为 1 代表完全不透明。
属性值为 0.5 代表半透明。
属性值为 0 代表完全透明。
透明度可以应用到元素内的所有内容，不论是图片，还是文本，或是背景色。

7.给文本添加大写效果

CSS 里的 text-transform 属性可以改变英文字母的大小写。使用这个属性时，我们无需改变 HTML 元素中的文本也可以统一页面里英文的显示。
下面的表格展示了 text-transform 的不同值对文字 “Transform me” 的影响：

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

8.设置多个标题元素的 font-size和font-width

<style>h1 {font-size: 68px;font-weight:800;}h2 {font-size: 52px;font-weight:600;}h3 {font-size: 40px;font-weight:500;}h4 {font-size: 32px;font-weight:400;}h5 {font-size: 21px;font-weight:300;}h6 {font-size: 14px;font-weight:200;}
</style>

9.设置段落的font-size和line-height

p {font-size: 16px;line-height: 25px;}

二、设置元素位置

1.调整锚点的悬停状态

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

a:hover {color: red;
}

2.更改元素的相对位置

在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。

当元素的定位设置为 relative 时，它允许你通过 CSS 指定该元素在当前文档流页面下的相对偏移量。 CSS里控制各个方向偏移量的属性是 left、right、top 和 bottom。它们代表从原来位置向远离该方向偏移指定的像素、百分比或者em。
把元素的位置设置成相对，并不会改变该元素在布局中所占的位置，也不会对其它元素的位置产生影响。

h2 {position:relative;top:15px;<!--向上偏移了15px-->}

CSS 里面的 top、bottom、left 和 right 定义了元素在相应方位的偏移距离。
元素将从当前位置向属性相反的方向偏移。

3.绝对定位的参照物是元素的父元素

CSS position 属性的取值选项 absolute，它的含义是相对于其包含块定位。

绝对定位比较特殊的一点是元素的定位参照于最近的 positioned 祖先元素。如果它的父元素没有添加定位规则（默认是 position:relative;），浏览器会继续寻找直到默认的 body 标签。

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

4.固定定位的参照物是浏览器的窗口

fixed 定位，它是一种特殊的绝对（absolute）定位，将元素相对于浏览器窗口定位。类似于绝对位置，它与 CSS偏移属性一起使用，并且也会将元素从当前的文档流里面移除。其它元素会忽略它的存在，这样也许需要调整其他位置的布局。但 fixed 和 absolute 的最明显的区别在于，前者定位的元素不会随着屏幕滚动而移动。

#navbar {position:fixed;<!--将元素相对于浏览器窗口定位-->top:0px;left:0px;width: 100%;background-color: #767676;}

5.使用 float 属性将元素左浮动或右浮动

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

#left {float:left;width: 50%;}

6.更改重叠元素的位置

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

.first {z-index:2;
}
.second {z-index:1;
}
<!--first的z-index值大于second，所有first在上-->

7.将元素水平居中

在应用设计中经常需要把一个块级元素水平居中显示。一种常见的实现方式是把块级元素的 margin 值设置为 auto。
同样的，这个方法也对图片奏效。图片默认是内联元素，但是可以通过设置其 display 属性为 block来把它变成块级元素。

div {background-color: blue;height: 100px;width: 100px;margin:auto;}

谢谢你的坚持阅读ovo哟，让我们一起加油吖