借助文本样式为网页赋予生命——WEB开发系列28

2024-09-04 04:36
文章标签 网页 开发 web 系列 生命 28 文本 样式 借助 赋予

本文主要是介绍借助文本样式为网页赋予生命——WEB开发系列28，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文本样式不仅仅是装饰，它对用户体验和网站的可读性有着重要影响。

一、基本文本和字体样式

1. 字体

CSS 中的字体属性定义了文本的外观，包括字体的类型、大小、粗细等。我们来详细了解这些属性：

字体颜色

使用 ​​color​​​ 属性可以设置文本的颜色。例如：

p {color: #333; /* 深灰色 */
}

字体种类

​​font-family​​ 属性指定文本的字体。可以设置多个字体，以确保在不同设备上都有合适的显示。例如：

body {font-family: 'Arial', 'Helvetica', sans-serif;
}

这里，浏览器会首先尝试使用 ​​Arial​​ 字体，如果不可用，则使用 ​​Helvetica​​，最后使用系统默认的无衬线字体 ​​sans-serif​​。

网页安全字体和字体栈

网页安全字体 是指在大多数操作系统中都可用的字体，如 ​​Arial​​ 和 ​​Times New Roman​​。字体栈 是指按照优先级排列的字体列表。例如：

h1 {font-family: 'Georgia', 'Times New Roman', serif;
}

在这里，​​Georgia​​ 是首选字体，如果不可用，则使用 ​​Times New Roman​​，最后使用 ​​serif​​​（衬线字体）作为备用。

字体大小

使用 ​​font-size​​​ 属性设置字体的大小。可以使用像素（px）、相对单位（em、rem）等。例如：

h1 {font-size: 2rem; /* 相对于根元素字体大小的两倍 */
}

2. 字体样式和粗细

字体样式

​​font-style​​​ 属性用于设置字体样式，例如斜体：

em {font-style: italic;
}

字体粗细

​​font-weight​​ 属性设置字体的粗细，可以使用关键词（如 ​​normal​​、​​bold​​）或数值（如 ​​400​​、​​700​​​）：

strong {font-weight: bold;
}

文本转换

​​text-transform​​​ 属性用于控制文本的大小写转换：

h2 {text-transform: uppercase; /* 全部大写 */
}

文本装饰

​​text-decoration​​​ 属性用于添加或移除文本装饰，例如下划线、删除线：

a {text-decoration: none; /* 去掉下划线 */
}

文字阴影

​​text-shadow​​​ 属性为文本添加阴影效果：

h3 {text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

这段代码给 ​​h3​​​ 元素的文本添加了一个 2px 的水平和垂直偏移的阴影，模糊半径为 4px，阴影颜色为半透明的黑色。

二、文本布局

1. 文本对齐

​​text-align​​​ 属性用于设置文本对齐方式：

p {text-align: center; /* 居中对齐 */
}

2. 行高

​​line-height​​​ 属性设置文本行之间的距离，通常用于改善文本的可读性：

p {line-height: 1.5; /* 1.5 倍的行高 */
}

3. 字母和单词间距

字母间距

​​letter-spacing​​​ 属性设置字母之间的间距：

h1 {letter-spacing: 1px;
}

单词间距

​​word-spacing​​​ 属性设置单词之间的间距：

p {word-spacing: 2px;
}

4. Font 简写

​​font​​​ 属性是一个简写属性，可以同时设置字体样式、粗细、大小、行高和字体家族。例如：

p {font: italic bold 16px/1.5 'Arial', sans-serif;
}

这段代码同时设置了字体样式为斜体、字体粗细为粗体、字体大小为 16px、行高为 1.5、字体家族为 ​​Arial​​ 或系统默认无衬线字体。

三、为列表添加样式

1. 列表间距

使用 ​​margin​​ 和 ​​padding​​​ 属性来调整列表项之间的间距。例如：

ul {padding-left: 20px; /* 列表项左侧内边距 */
}li {margin-bottom: 10px; /* 列表项底部外边距 */
}

2. 列表特定样式

符号样式

​​list-style-type​​​ 属性设置列表项的符号样式：

ul {list-style-type: square; /* 方形符号 */
}
项目符号位置

​​list-style-position​​​ 属性设置列表项符号的位置：

ul {list-style-position: inside; /* 符号位于列表项内容区域内 */
}
使用自定义的项目符号图片

​​list-style-image​​​ 属性允许你使用自定义图像作为列表符号：

ul {list-style-image: url('custom-icon.png');
}
list-style 简写

​​list-style​​​ 属性是一个简写属性，可以同时设置符号样式、符号位置和自定义图像。例如：

ul {list-style: square inside url('custom-icon.png');
}

3. 管理列表计数

start

​​list-style-type​​ 属性中的 ​​start​​​ 值允许你设置有序列表的起始数字：

ol {list-style-type: decimal;counter-reset: list 5; /* 从数字 5 开始 */
}
reversed

​​reversed​​​ 属性使有序列表倒序排列：

ol {list-style-type: decimal;list-style: reversed;
}
value

​​value​​​ 属性允许你指定有序列表的起始值：

ol {counter-reset: list 10; /* 从数字 10 开始 */
}

下面我们将上述的属性综合起来用一个例子展示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表样式示例</title>
<style>body {font-family: Arial, sans-serif;}/* 无序列表样式 */ul.custom-list {padding-left: 20px; /* 列表项左侧内边距 */list-style: square inside url('custom-icon.png'); /* 使用自定义图像和方形符号 */}ul.custom-list li {margin-bottom: 10px; /* 列表项底部外边距 */}/* 有序列表样式 */ol.custom-ordered-list {padding-left: 20px;list-style-type: decimal; /* 十进制数字 */counter-reset: list 5; /* 从数字 5 开始 */}ol.custom-ordered-list.reversed {list-style-type: decimal;list-style: reversed; /* 倒序排列 */}ol.custom-ordered-list .item {margin-bottom: 10px; /* 列表项底部外边距 */}.container {margin: 20px;}
</style>
</head>
<body><div class="container"><h2>无序列表样式</h2><ul class="custom-list"><li>项目一</li><li>项目二</li><li>项目三</li></ul><h2>有序列表样式</h2><ol class="custom-ordered-list"><li class="item">第一项</li><li class="item">第二项</li><li class="item">第三项</li></ol><h2>倒序有序列表样式</h2><ol class="custom-ordered-list reversed"><li class="item">第一项</li><li class="item">第二项</li><li class="item">第三项</li></ol></div>
</body>
</html>

四、样式化链接

1. 链接状态

使用 ​​:link​​、​​:visited​​、​​:hover​​ 和 ​​:active​​​ 伪类来样式化链接的不同状态：

a:link {color: blue; /* 未访问链接的颜色 */
}a:visited {color: purple; /* 已访问链接的颜色 */
}a:hover {color: red; /* 悬停时的颜色 */
}a:active {color: orange; /* 激活时的颜色 */
}

2. 链接中包含图标

可以使用 ​​::before​​​ 伪元素在链接前添加图标：

a::before {content: url('icon.png');margin-right: 5px;
}

3. 样式化链接为按钮

通过 CSS 可以将链接样式化为按钮：

a.button {display: inline-block;padding: 10px 20px;font-size: 16px;color: white;background-color: #007bff;text-align: center;border-radius: 5px;text-decoration: none;
}a.button:hover {background-color: #0056b3;
}

下面我们将上述的属性综合起来用一个例子展示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接样式示例</title>
<style>body {font-family: Arial, sans-serif;}/* 链接状态样式 */a:link {color: blue; /* 未访问链接的颜色 */text-decoration: none;}a:visited {color: purple; /* 已访问链接的颜色 */}a:hover {color: red; /* 悬停时的颜色 */text-decoration: underline;}a:active {color: orange; /* 激活时的颜色 */}/* 链接中包含图标 */a::before {content: url('icon.png');margin-right: 5px;}/* 样式化链接为按钮 */a.button {display: inline-block;padding: 10px 20px;font-size: 16px;color: white;background-color: #007bff;text-align: center;border-radius: 5px;text-decoration: none;transition: background-color 0.3s;}a.button:hover {background-color: #0056b3;}
</style>
</head>
<body><h2>链接样式示例</h2><p>这是一个 <a href="https://blog.51cto.com/wamtar">普通链接</a>。</p><p>这是一个 <a href="https://blog.51cto.com/wamtar" class="button">样式化按钮链接</a>。</p><p>这是一个 <a href="https://blog.51cto.com/wamtar">包含图标的链接</a>。</p>
</body>
</html>

五、Web 字体

1. Web 字体的使用

Web 字体允许你使用自定义字体，而不是依赖用户的系统字体。使用在线字体服务（如 Google Fonts）是实现这一功能的常见方法。

例如，通过 Google Fonts 引入字体：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

2. @font-face 的使用

​​@font-face​​​ 规则允许你定义自定义字体并在网页上使用它们：

@font-face {font-family: 'MyCustomFont';src: url('mycustomfont.woff2') format('woff2'),url('mycustomfont.woff') format('woff');
}body {font-family: 'MyCustomFont', sans-serif;
}

这段代码定义了一个名为 ​​MyCustomFont​​ 的字体，并在 ​​body​​ 元素中应用了它。​​src​​​ 属性指定了字体文件的位置和格式。

六、综合练习

题 1: 创建一个详细的网页设计

任务描述

创建一个网页，展示一个含有标题、描述、按钮、列表和链接的内容。使用 CSS 样式化这些元素，并确保它们在页面上美观且易于阅读。包括以下要求：

  1. 使用自定义字体和 Web 字体。
  2. 设置文本样式，包括字体、颜色、大小、行高、阴影等。
  3. 样式化有序和无序列表，包括自定义符号和列表间距。
  4. 样式化链接为按钮，并添加悬停效果。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合练习题</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<style>body {font-family: 'Roboto', sans-serif;background-color: #f0f0f0;color: #333;margin: 0;padding: 20px;}h1 {font-size: 2.5rem;color: #007bff;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);}p {font-size: 1rem;line-height: 1.6;}.button {display: inline-block;padding: 10px 20px;font-size: 16px;color: white;background-color: #007bff;text-align: center;border-radius: 5px;text-decoration: none;margin-top: 10px;}.button:hover {background-color: #0056b3;}ul {list-style: circle;padding-left: 20px;}ol {list-style-type: decimal;padding-left: 20px;}li {margin-bottom: 10px;}a {color: #007bff;text-decoration: none;}a:hover {text-decoration: underline;}
</style>
</head>
<body><h1>欢迎来到一条晒干的咸鱼的博客</h1><p>这是一个示例页面，展示了如何使用 CSS 样式化文本和其他元素。下面是一些列表和链接的示例：</p><a href="#" class="button">点击这里</a><h2>无序列表：</h2><ul><li>项目一</li><li>项目二</li><li>项目三</li></ul><h2>有序列表：</h2><ol><li>第一项</li><li>第二项</li><li>第三项</li></ol><p>更多信息，请访问 <a href="#">此链接</a>。</p>
</body>
</html>

练习题 2: 制作一个产品展示卡片

任务描述

创建一个产品展示卡片，包含产品图片、标题、描述、价格和一个购买按钮。使用 CSS 为卡片添加样式，包括背景、边框、阴影和字体样式。确保卡片在不同设备上都有良好的显示效果。

示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品展示卡片</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<style>.card {width: 300px;background-color: #fff;border: 1px solid #ddd;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);overflow: hidden;margin: 20px auto;text-align: center;font-family: 'Roboto', sans-serif;}.card img {width: 100%;height: auto;}.card-body {padding: 15px;}.card-title {font-size: 1.5rem;color: #333;margin: 0;}.card-description {font-size: 1rem;color: #666;margin: 10px 0;}.card-price {font-size: 1.25rem;color: #007bff;margin: 10px 0;}.card-button {display: inline-block;padding: 10px 20px;font-size: 16px;color: #fff;background-color: #007bff;border: none;border-radius: 5px;text-decoration: none;}.card-button:hover {background-color: #0056b3;}
</style>
</head>
<body><div class="card"><img src="product.gif" alt="Product Image"><div class="card-body"><h2 class="card-title">产品名称</h2><p class="card-description">这是一个产品的描述，简要介绍产品的主要特性和优点。</p><p class="card-price">￥99.99</p><a href="#" class="card-button">立即购买</a></div></div>
</body>
</html>

如有表述错误及欠缺之处敬请批评指正。

这篇关于借助文本样式为网页赋予生命——WEB开发系列28的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1135010。

相关文章

网页解析 lxml 库--实战

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
科研绘图系列：R语言扩展物种堆积图（Extended Stacked Barplot）

科研绘图系列：R语言扩展物种堆积图（Extended Stacked Barplot）

介绍 R语言的扩展物种堆积图是一种数据可视化工具，它不仅展示了物种的堆积结果，还整合了不同样本分组之间的差异性分析结果。这种图形表示方法能够直观地比较不同物种在各个分组中的显著性差异，为研究者提供了一种有效的数据解读方式。 加载R包 knitr::opts_chunk$set(warning = F, message = F)library(tidyverse)library(phyl
阅读更多...
Java Web指的是什么

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用，主要通过Java EE（Enterprise Edition）平台来实现。  主要特点和技术包括： 1. Servlets和JSP：     Servlets 是Java编写的服务器端程序，用于处理客户端请求和生成动态网页内容。     JSP（JavaServer Pages）
阅读更多...
【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入（Embedding）方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节：嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”，它将文本中的单词或短语转换成计算机能够理解的数学形式，即向量。 正如翻译机将一种语言
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2