前端开发基础3:CSS3常见显示属性

简介: 本实验将介绍CSS3中的常见显示属性。

前端开发基础3:CSS3常见显示属性


1.  创建资源

开始实验之前,您需要先创建实验相关资源。

  1. 在实验室页面,单击创建资源
  2. (可选)在实验室页面左侧导航栏中,单击云产品资源列表,可查看本次实验资源相关信息(例如IP地址、子用户信息等)。

说明:资源创建过程需要3~5分钟视资源不同开通时间有所差异,ACK等资源开通时间较长。完成实验资源的创建后,您可以在云产品资源列表查看已创建的资源信息,例如:子用户名称、子用户密码、AK ID、AK Secret、资源中的项目名称等。

实验环境一旦开始创建则进入计时阶段,建议学员先基本了解实验具体的步骤、目的,真正开始做实验时再进行创建。

资源创建成功,可在左侧的资源卡片中查看相关资源信息以及RAM子账号信息

2.  进入VNC实验环境

  1. 进入网页环境

1.1 资源创建成功后,我们在右侧选择切换到远程桌面

1.2 在远程桌面页面中,点击Chromium网页浏览器

  1. 登录RAM用户

2.1 浏览器启动后会默认打开阿里云的RAM用户登录页。在登录页面中我们点击下一步按钮。

2.2 接下来我们需要输入RAM用户的密码。密码显示在实验控制台左侧,我们点击子用户密码右侧的复制按钮。

复制完成后,我们在用户密码框中按Ctrl + V 复制密码,然后点击登录按钮

  1. 进入ECS的远程连接。

3.1 登录成功后,页面跳转到控制台,我们在控制台的搜索框中输入ECS,然后点击云服务器ECS进入云服务器控制台。

3.2 在ECS控制台中,我们找到实验创建的ECS,点击右侧的远程连接按钮。

3.3 在远程连接中选择通过VNC远程连接中的立即登录如果没有显示该选项,则可点击展开其他登录方式按钮。

  1. 登录VNC远程连接

4.1 初次登录VNC远程连接时需要先设置VNC密码。点击重置VNC密码按钮。

4.2 输入两次新的VNC密码,并点击确认

4.3 VNC密码设置成功后,输入密码并点击确认。

4.4 VNC登录成功后会看到实验ECS的登录界面。

3.  边框属性

从2000年开始CSS进入了第三个版本也就是俗称的CSS3,CSS3的特点是新功能以模块化的方式逐步加入规范。经过了20多年的发展,CSS3中已经添加了30多个模块。在本实验中我们将会为大家介绍CSS3中一些常用的功能。

CSS3为元素提供了新的边框和尺寸属性,通过这些属性可以实现一些以前必须通过JavaScript才能实现的功能。这里挑选三个比较有特色的属性为大家介绍。

  1. 贴图边框

传统的CSS只支持实线、虚线等简单风格的边框,但是现代网页设计中往往会对Html中的元素进行专门设计,使用贴图来代替简单风格的边框,这时候就需要使用贴图边框属性border-image

1.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    button {
        border: 40px solid transparent;
        border-image: url(bg.png) 40 stretch;
        background-color: #143A59;
        color: white;
        margin: 10px;
    }
</style>
<title>Web dev</title>
<body>
    <div>
        <button />
        <button> 较短的按钮 </button>
        <button> 较长的按钮。。。。。。。。。。 </button>
    </div>
</body>
</html>

1.2 刷新网页,会看到按钮会根据长度进行自动拉伸。

1.3  除了拉伸模式之外,border-image属性还支持复制模式。我们修改index.html样式部分的内容为如下.

<style type="text/css">
    button {
        border: 40px solid transparent;
        border-image: url(bg_round.png) 40 round;
        background-color: #143A59;
        color: white;
        margin: 10px;
    }
</style>

1.4 刷新网页,会看到按钮采用了复制模式。

  1. 轮廓

传统的CSS样式可以通过border属性在元素的外侧绘制边框。在CSS3中除了支持border属性之外,还支持outline属性来绘制轮廓。

2.1 我们修改index.html得内容为如下。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    button {
        border: 10px solid red;
        outline: 10px solid green;
        background-color: #143A59;
        padding: 10px;
    }
</style>
<title>Web dev</title>
<body>
    <button></button>
    <button></button>
</body>
</html>

2.2 刷新网页。会看到按钮得外侧出现了两层颜色框。分别是borderoutline。但是我们可以发现outline存在重叠得现象。这是由于outline不计入元素得尺寸计算导致得。这时我们可以通过margin属性来加入outline尺寸。我们修改index.html样式部分的内容为如下。

<style type="text/css">
    button {
        border: 10px solid red;
        outline: 10px solid green;
        background-color: #143A59;
        margin: 10px;
        padding: 10px;
    }
</style>

  1. outline-offset

3.1 和border属性相比,outline除了不计算入尺寸之外。还可以通过outline-offset属性灵活调整在元素中得显示位置。我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    button {
        background-color: #143A59;
        outline: 5px solid brown;
        outline-style: dotted;
        outline-offset: 5px;
        margin: 10px;
        padding: 10px; 
    }
</style>
<title>Web dev</title>
<body>
    <button style="width: 100px; height: 100px;"></button>
</body>
</html>

3.2 刷新网页。会看到outline和元素本体保留了一段距离。

3.3 outline-offset除了可以设置为正值之外,还可以设置为负值。设置为负值时,outline会显示在元素本体得内部,我们修改index.html样式部分的内容为如下

<style type="text/css">
    button {
        background-color: #143A59;
        color: white;
        outline: 5px solid white;
        outline-style: dotted;
        outline-offset: -10px;
        padding: 10px; 
    }
</style>

3.4 刷新网页。会看到outline出现在元素本体内部。

4.  渐变属性

上一个小节中我们学习了CSS3中通用得边框和轮廓属性。除了边框之外CSS3还为通用元素提供了多种背景设置属性。

对于需要渐变风格背景属性,传统CSS得做法是使用背景图片,这种方式需要额外得网络访问下载图片。同时图片拉伸得效果也存在清晰度得问题。因此CSS3中提供了linear-gradient线性渐变和radial-gradient放射性渐变属性。提供原生得渐变背景

  1. 线性渐变背景

在使用线性渐变背景色linear-gradient属性时,我们需要提供至少两个颜色,作为渐变色得过渡。

1.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    button {
        width: 100px; height: 100px;
    }
</style>
<title>Web dev</title>
<body>
    <button style="background-image: linear-gradient(red, orange);"></button>
    <button style="background-image: linear-gradient(red, orange,yellow, greenyellow, green);"></button>
</body>
</html>

1.2 刷新网页。会看到button的背景采用了多种颜色的渐变。

  1. 指定渐变背景方向

渐变色属性默认采用从上到下的渐变色,除了可以设置颜色之外,还可以可选设置渐变方向。渐变方向可以使用预设值,也可以使用具体角度值。

2.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    button {
        width: 100px; height: 100px;
    }
</style>
<title>Web dev</title>
<body>
    <button style="background-image: linear-gradient(to right, red, orange, yellow);"></button>
    <button style="background-image: linear-gradient(to bottom right, orange,yellow, greenyellow);"></button>
    <button style="background-image: linear-gradient(15deg, yellow, greenyellow, green);"></button>
</body>
</html>

2.2 刷新网页。会看到三种不同的渐变角度设置方式。

  1. 放射渐变背景

除了线性渐变背景色linear-gradient属性,CSS3还提供了放射性渐变属性radial-gradient,放射性渐变从中心开始像四周渐变。

3.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    button {
        width: 100px; height: 200px;
    }
</style>
<title>Web dev</title>
<body>
    <button style="background-image: radial-gradient(red, orange, yellow);"></button>
    <button style="background-image: radial-gradient(orange,yellow, greenyellow);"></button>
    <button style="background-image: radial-gradient(circle, yellow, greenyellow, green);"></button>
</body>
</html>

3.2 刷新网页。会看到默认使用radial-gradient属性时。渐变会从元素的中心开始,按照元素的长宽比,以椭圆的形式向外渐变,如果添加了circle参数,则会按照圆形的方式进行渐变。

5.  文本属性

  1. 单行文字剪裁模式

当元素中的单行文字内容过长,超过元素的显示尺寸时,CSS默认的处理方式是截断文字,在CSS3中提供了新的属性text-overflow来空值文本的剪裁,将这个属性设置为ellipsis之后超过部分的文字会用...进行代替。

1.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    button {
        width: 65px;
        overflow: hidden;
        margin: 10px;
    }
    button.ellipsis{
        text-overflow:ellipsis;
    }
</style>
<title>Web dev</title>
<body>
    <div>
        <button class="ellipsis">1234567890</button>
    </div>
    <div>
        <button>1234567890</button>
    </div>
</body>
</html>

1.2 刷新网页。会看到使用text-overflow:ellipsis属性后的单行超长文字的尾端处理会更加的优雅。

  1. 长文本的换行模式

对于多行文字来说,CSS默认的换行模式在两个词之间进行换行,但是对于一些超长单词的文本,这种模式会导致文本超出元素,严重影响用户体验,因此在CSS3中增加了word-wrap属性,用于设置文本的换行模式。

2.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    div {
        width: 65px;
        border: 1px solid #000000;
        margin: 20px;
    }
    div.wordwrap{
        word-wrap:break-word;
    }
</style>
<title>Web dev</title>
<body>
    <div>ThisIsATextWithoutSeparation</div>
    <div class="wordwrap">ThisIsATextWithoutSeparation</div>
</body>
</html>

2.2 刷新网页。会看到使用word-wrap:break-word属性后,即使是没有分词多行超长文字也不再会超出元素的边界范围。

  1. 网络字体

传统CSS只能使用本地字体,对于本地不存在的字体,会使用默认字体代替,但是由于客户端安装的字体不一致,会导致用户显示效果的不一致,因此CSS3中引入了@font-face关键字,用于指定存放在网络上字体,当客户端本地找不到字体时,会通过@font-face中的src地址下载字体文件以实现显示效果的一致性。

3.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    @font-face {
        font-family: Alibaba-PuHuiTi-Heavy;
        src:url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi/Alibaba-PuHuiTi-Heavy/Alibaba-PuHuiTi-Heavy.ttf) format('TrueType');
    }
    div {
        border: 1px solid #000000;
        margin: 20px;
        width: 300px;
    }
</style>
<title>Web dev</title>
<body>
    <div>让天下没有难做的生意</div>
    <div style="font-family: Alibaba-PuHuiTi-Heavy;">让天下没有难做的生意</div>
</body>
</html>S

3.2 刷新网页。会看到使用使用了Alibaba-PuHuiTi-Heavy字体的第二行文字,会在短暂的下载字体的白屏时间之后显示出来。

6.  其他属性

  1. 用户调整尺寸

在使用传统的CSS时,如果需要设计用户可以拖拽修改元素大小的功能,需要进行复杂的JavaScript编程,而在CSS3中增加了resize属性。通过这个属性可以非常方便的实现可拖动的元素。

1.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    button {
        border: 1px solid transparent;
        background-color: #143A59;
        color: white;
        padding: 10px;
        resize: both;
        overflow: hidden;
        width: 300px;
    }
</style>
<title>Web dev</title>
<body>
    <button> 可拖动的按钮 </button>
</body>
</html>·

1.2 刷新网页。会看到按钮右下角出现了可拖动的手柄,点击之后拖动可以改变元素的尺寸。

  1. 多图片背景

传统的CSS样式表可以使用background-image设置背景图片,在CSS3中background-image属性可以设置,分隔的多个背景图片,多个背景图片会按照从上到小的顺序按层次显示,如果在background-image中设置了多个图片,同样可以在background-positionbackground-repeat等属性中为不同的背景图片进行配置,在配置时也使用,来分隔多个背景图片的配置内容。

2.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    #head {
        background-image: url(https://img.alicdn.com/tfs/TB13DzOjXP7gK0jSZFjXXc5aXXa-212-48.png),
            url(https://img.alicdn.com/imgextra/i1/19999999999999/O1CN01FdwufD2Njasx4YEgj_!!19999999999999-2-tps.png);
        background-position: right bottom, left top;
        background-repeat: no-repeat, repeat;
        color: orange;
        font-size: 150px;
    }
</style>
<title>Web dev</title>
<body style="background-color: gray;">
    <div id="head" style="width: 500px;height: 300px;"> Head</div>
</body>
</html>

2.2 刷新之后,我们看到background-image中第一个url为阿里云Logo,显示在所有背景的顶层,background-position属性中的一个配置,指定Logo显示在右下角,background-repeat的第一个配置指定Logo不重复。

  1. 阴影属性

3.1 CSS3还为提供了元素和文字提供了阴影属性。分别是box-shadowtext-shadow阴影属性的设置格式为x偏移 y偏移 (模糊度) (颜色)。我们修改index.html为如下内容。

<html lang="zh-CN">
<style type="text/css">
    #head {
        width: 500px;
        height: 300px;
        text-align: center;
        line-height: 300px;
        font-size: 100px;
        color: aquamarine;
        background-color: green;
        box-shadow: 0px 0px 30px gray;
        text-shadow: 10px 10px 10px black;
    }
</style>
<title>Web dev</title>
<body>
    <div id="head"> Head</div>
</body>
</html>

3.2 刷新之后,我们看到文字阴影和元素阴影生效了。

3.3 CSS3中的阴影属性和background-image类似,也可以设置多个用,分隔的重叠阴影。体现更丰富的效果。我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    #head {
        width: 400px;
        height: 200px;
        margin: 30px;
        text-align: center;
        line-height: 200px;
        font-size: 100px;
        color: aquamarine;
        background-color: green;
        box-shadow: 0px 0px 5px black, 0px 0px 30px gray;
        text-shadow: 0px 0px 10px white, 10px 10px 10px black;
    }
</style>
<title>Web dev</title>
<body>
    <div id="head"> Head</div>
</body>
</html>

3.4 刷新之后,我们看到多重阴影效果让元素的边缘更加的立体和丰富。

实验地址:https://developer.aliyun.com/adc/scenario/28cf95154348444ca3e86e54e8752d7d

相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情:&nbsp;https://www.aliyun.com/product/ecs
相关文章
|
7天前
|
前端开发
了解 css中 backface-visibility 属性
了解 css中 backface-visibility 属性
13 0
|
5天前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
8天前
|
前端开发
CSS常用滤镜属性讲解
本文介绍了CSS滤镜的几种常用效果,包括高斯模糊、亮度和对比度调整、灰度化、图像反转、透明度调整、饱和度调整及复古滤镜等。例如,使用`blur(10px)`可使图像产生模糊效果,包裹层设置`overflow: hidden`可避免边缘模糊;`brightness(150%)`和`contrast(150%)`分别增强图像亮度和对比度;`grayscale(1)`将图像转为灰度;`invert(1)`实现图像颜色完全反转;`opacity(0.5)`调整图像半透明;`saturate(350%)`增加饱和度;`sepia(100%)`营造复古深褐色调;`hue-rotate(180deg)`改变
16 4
CSS常用滤镜属性讲解
|
8天前
|
前端开发
了解 css中 backface-visibility 属性
`backface-visibility` 是一个CSS属性,用于3D转换时控制元素背面的可见性,以优化渲染性能。默认情况下,背面被隐藏以减少不必要的渲染。此属性有两值:`visible` 表示背面可见;`hidden`(默认值)则隐藏背面。 通过双面卡片案例演示了其用法:两个重叠盒子,一个显示图片,另一个显示文字且初始状态为背面朝外。鼠标悬停时,图片盒子翻转显示背面,文字盒子翻转显示正面,同时设置 `backface-visibility: hidden` 以确保背面不被渲染。 兼容性良好,广泛支持现代浏览器。
18 2
了解 css中 backface-visibility 属性
|
7天前
|
存储 前端开发 安全
【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
17 2
|
7天前
|
Web App开发 前端开发
【海贼王航海日志:前端技术探索】CSS你了解多少?(二)
【海贼王航海日志:前端技术探索】CSS你了解多少?(二)
13 2
|
7天前
|
缓存 前端开发 JavaScript
【海贼王航海日志:前端技术探索】CSS你了解多少?(一)
【海贼王航海日志:前端技术探索】CSS你了解多少?(一)
11 2
|
5天前
|
前端开发 UED 开发者
使用 CSS 的 line-height 属性来提高可读性
使用 CSS 的 line-height 属性来提高可读性
6 0
|
7天前
|
前端开发
CSS常用滤镜属性讲解
CSS常用滤镜属性讲解
16 0
|
10天前
|
监控 数据可视化 前端开发
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
【前端】政务服务大数据可视化监控平台(源码+html+css+js)