如何在 CSS 中使用带有状态伪类的链接和按钮

作者选择了 多样性在技术基金作为 写给捐款计划的一部分接受捐款。

介绍

网页开发的一个重要部分是提供用户与某个元素交互时的反馈,这种交互是通过改变 state 来实现的,这表明用户如何在页面上使用或使用某个元素。

在本教程中,您将使用 :hover、 :active 和 :focus 用户操作和 :visited 位置假类类类. 您将使用 <a> 和 <button> 作为教程中的交互元素。 这些元素都具有相似的交互状态,并且在功能上与用户相同。 从开发角度来看, <a> 元素专门用于与 URL 交互,而 <button>' 元素用于触发形式或 [JavaScript](https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript)] 函数。 除了与这四种不同的状态一起工作,您还将使用 transition` 属性来动画这些交互状态之间的风格。

前提条件

了解CSS(https://andsky.com/tech/tutorials/how-to-apply-css-styles-to-html-with-cascade-and-specificity)功能和盒子模型(https://andsky.com/tech/tutorials/how-to-work-with-the-box-model-in-css)。

设置初始HTML和CSS

要开始使用链接和按钮,您首先将设置必要的HTML和CSS作为教程的基础,在本节中,您将写出所有必要的HTML和一些初始CSS风格,以处理布局并开始视觉美学。

首先,在文本编辑器中打开index.html,然后将以下突出 HTML 添加到文件中:

1[label index.html]
2<!doctype html>
3<html>
4  <head>
5  </head>
6  <body>
7  </body>
8</html>

接下来,转到<head>标签并添加一个<meta>标签来定义HTML文件的字符集,然后设置页面的标题,添加一个<meta>标签,定义移动设备应该如何渲染页面,最后加载CSS文件以<link>标签。

 1[label index.html]
 2<!doctype html>
 3<html>
 4  <head>
 5    <meta charset="utf-8">
 6    <meta name="viewport" content="width=device-width, initial-scale=1">
 7    <title>Link and Buttons with State</title>
 8    <link rel="stylesheet" href="styles.css">
 9  </head>
10  <body>
11  </body>
12</html>

添加<head>内容后,再转到<body>元素中添加内容,以创建一个信息块,用<a>和<button>标签作为交互元素。

 1[label index.html]
 2<!doctype html>
 3<html>
 4  <head>
 5    <meta charset="utf-8">
 6    <meta name="viewport" content="width=device-width, initial-scale=1">
 7    <title>Link and Buttons with State</title>
 8    <link rel="stylesheet" href="styles.css">
 9  </head>
10  <body>
11    <section>
12      <header>
13        <button class="link" type="button">
14          Close Window
15        </button>
16      </header>
17      <div>
18        <p>
19          This is a demo paragraph for some demo content for a tutorial. By reading this text you are now informed that this is text for the demo in <a href="https://do.co/tutorials">this tutorial</a>. This means you can agree to use this content for the demo or not. If you wish to continue with this tutorial demo content, please select the appropriately styled interactive element below.
20        </p>
21        <div>
22          <button class="button" type="button">
23            Yes, Please
24          </button>
25          <a class="button" href="#">
26            No, Thank you
27          </a>
28        </div>
29      </div>
30    </section>
31  </body>
32</html>

将您的更改保存到 index.html,并打开您的 Web 浏览器,在那里打开 index.html 文件. 页面的内容将在白色背景上显示为黑色字体字体. <button> 元素风格将根据您的浏览器和操作系统而异,但页面将看起来类似于以下图像:

Black serif text on a white background with two blue underlined links and two interactive butons.

接下来,在与index.html文件相同的目录中创建一个名为 styles.css 的文件. 代码块中的下列风格将为容器设置一个包含您将在教程的剩余时间内使用的 <button> 和 <a> 元素的基本风格。

 1[label styles.css]
 2body {
 3  background-color: #454545;
 4  color: #333;
 5  font-family: sans-serif;
 6  line-height: 1.5;
 7}
 8
 9section {
10  margin: 2rem auto;
11  width: 90%;
12  max-width: 50rem;
13  box-sizing: border-box;
14  padding: 2rem;
15  border-radius: 2rem;
16  border: 0.25rem solid #777;
17  background-color: white;
18}
19
20header {
21  text-align: right;
22}

此代码块中的CSS为示范内容区域的三个部分添加了风格。第一个是体选择器,它应用暗灰色背景,然后定义默认字体属性。第二个选择器专注于<section>元素,该元素是示范内容的主要容器,并创建了一个具有大、圆的角落和最大宽度的白色区块,所以它只会增长到指定数量。最后,头部元素选择器将文本对齐到右边,所以关闭窗口按钮是<section>容器的极右上角。

如果您想了解有关如何使用 CSS 元素选择器的更多信息,请参阅 How To Select HTML Elements to Style with CSS。

将您的更改保存到 styles.css 文件,并在浏览器中重新加载 index.html 文件. 页面风格将从浏览器的默认设置转变为自定义风格,如下图所示:

Black sans serif text in a white container with rounded corners with two blue underlined links and two interactive butons.

您已经设置了您的HTML,并为页面的内容加载了基本风格,接下来您将创建一个自定义的默认链接风格,并提供一种方法来将该默认风格应用到按钮元素中。

创建文本链接的风格

在本节中,您将通过设置新颜色创建自定义的默认链接风格,然后将删除默认按钮风格,以使按钮看起来像默认链接。

对于本节的第一部分,您将设置默认的链接风格,用于一般的<a>元素和一个类的.link,然后可以将一般的链接风格应用到<按钮>元素。

1[label styles.css]
2...
3a,
4.link {
5  color: #25a;
6}

将您的更改保存到 styles.css,并在您的浏览器中打开 index.html。 页面上的 元素现在比默认浏览器链接蓝色更深蓝色。 此外,具有class="link的

Published At
Categories with 技术
Tagged with
comments powered by Disqus