（三）应用视觉设计（上）-阿里云开发者社区

（三）应用视觉设计（上）

2022-06-17 127

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： （三）应用视觉设计

前言

第一节：基础HTML

第二节：基础CSS

应用视觉设计结合了排版、色彩理论、图形、动画、页面布局等，以表达独特的信息。

text-align width height

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

值	描述
left	把文本排列到左边。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。

h4 {
    text-align: center;
    height: 25px;
}
p {
    text-align: justify;
}
.fullCard {
    width: 245px;
}
复制代码

strong u em s

strong 加粗文本，浏览器会自动给元素添加这段样式：font-weight:bold;

u 给文本添加下划线（可能会混淆文本和链接？避免使用），自动添加：text-decoration: underline;

em 强调文本（斜体），自动添加： font-style: italic;

s 给文本添加删除线，自动添加：text-decoration: line-through;

hr 创建水平线

<div class="cardText">
    <h4><s>Google</s>Alphabet</h4>
  <hr>
    <p>
        <em>Google was founded by Larry Page and Sergey Brin while they were 
        <u>Ph.D. students</u> at 
        <strong>Stanford University</strong>
        .</em>
    </p>
</div>
复制代码

rgba

RGB 值可以取在 0 到 255 之间。

alpha 值即透明度，可取在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。

h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 27px;
}
复制代码

box-shadow opactiy

CSS 里的box-shadow 属性用来给元素添加阴影，可以由逗号分隔添加多个阴影：

offset-x 阴影的水平偏移量

offset-y 阴影的垂直偏移量

blur-radius 模糊半径

spread-radius 阴影扩展半径

color

其中两个半径可选填。

opacity 属性用来设置元素的透明度，可取在 0 到 1 之间。

#thumbnail {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 
            0 6px 6px rgba(0, 0, 0, 0.23);
}
.links {
    text-align: left;
    color: black;
    opacity: 0.7;
}
复制代码

text-transform

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

h4 {
    text-transform: uppercase;
}
复制代码

font

font-size

font-weight 字体粗细

line-height 行高（行间距）

p {
    font-size: 16px;
    font-weight: 200;
    line-height: 25px;
}
复制代码

:hover

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

可以使用 :hover 伪类选择器来选取超链接的悬停状态。

<style>
    a {
        color: #000;
    }
    a:hover {
        color: blue;
    }
</style>
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
复制代码

position

在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。

块级元素自动从新的一行开始（比如 title、p 以及 div），行内(内联)元素排列在上一个元素后（比如 img 以及 span）。

元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。

各个方向偏移量的属性是 left、right、top 和 bottom，代表从原位置远离该方向。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

relative

当元素的定位设置为 relative 时，允许你通过 CSS 指定该元素在当前文档流页面下的相对偏移量。

这样并不会改变该元素在布局中所占的位置，也不会对其它元素的位置产生影响。

h2 {
    position: relative;
    bottom: 10px;
    left: 15px;
}
复制代码

absolute

绝对定位会将元素从当前的文档流里面移除，周围的元素会忽略它。

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

<style>
    #searchbar {
        position: absolute;
        top: 50px;
        right: 50px;
    }
    section {
        position: relative;
    }
</style>
<body>
    <section>
        <form id="searchbar">
            <label for="search">Search:</label>
            <input type="search" id="search" name="search">
            <input type="submit" name="submit" value="Go!">
        </form>
    </section>
</body>
复制代码

fixed

fixed 定位是一种特殊的 absolute 定位，将元素相对于浏览器窗口定位。

与 absoulte 相同的是：它与 CSS 偏移属性一起使用，并且也会将元素从当前的文档流里面移除。其它元素会忽略它的存在，这样也许需要调整其他位置的布局。

最大的不同：fixed 定位的元素不会随着屏幕滚动而移动。

#navbar {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: #767676;
}
复制代码

float

设置元素的 float 属性，浮动元素不在文档流中，它向 left 或 right 浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

通常需要用 width 属性来指定浮动元素占据的水平空间。

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