标题：详解HTML与CSS中的字体样式设置和优先级在本文中，我们将详细介绍HTML与CSS中如何设置字体样式、颜色，并探讨不同样式的优先级。通过两个代码示例，帮助您更好地理解和应用这些知识。

JDKINAKNXMKAM XAXXX

已于 2024-06-13 17:30:27 修改

阅读量864

点赞数 19

文章标签： html css 前端

于 2024-06-13 17:27:05 首次发布

本文链接：https://blog.csdn.net/PenggeNB/article/details/139660073

版权

一、HTML与CSS基础结构

1.1 HTML基础结构

HTML文档以<!DOCTYPE html>开头，声明文档类型和版本。<html lang="en">标签定义了HTML文档的语言类型。头部信息（meta标签、title标签）和样式信息（style标签或外部样式表链接）都放在<head>标签中。

1.2 CSS基础结构

CSS用于定义HTML元素的样式，通过选择器和样式属性的组合来指定具体的样式规则。

二、代码示例解析

示例1：优先级和颜色设置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
div {
/*color: aquamarine;*/
color: rgb(255, 0, 0, 0.5); /* 使用RGBa设置颜色，50%透明度 */
}
/* 选择器 {
样式名称:对应的样式值;
样式名称:对应的样式值;
样式名称:对应的样式值;
}*/
</style>
<link rel="stylesheet" href="./css练习-1.css">
</head>
<body>
<div>
赶赶干
</div>

</body>
</html>

总结与注释：

优先级原则：行内样式的优先级高于内部样式和外部样式。
颜色设置：使用color: rgb(255, 0, 0, 0.5);设置元素的颜色为红色并具有50%的透明度。

示例2：字体样式详细设置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* color: red; /* 使用关键字设置颜色 */
/* color: #FF0000; 使用十六进制设置颜色 */
/* color: rgb(255, 0, 0); 使用RGB设置颜色 */
color: rgba(255, 0, 0, 0.5); /* 使用RGBA设置颜色，50%透明度 */
font-size: 16px; /* 设置文本大小 */
font-weight: 900; /* 设置字体粗细 */
font-family: "华文彩云"; /* 设置字体族 */
}
</style>
</head>
<body>
<div>
世间不该有此人
</div>
</body>
</html>

总结与注释：

颜色设置：多种方式设置颜色，包括关键字、十六进制、RGB和RGBA。
字体样式：
- font-size：设置文本大小。
- font-weight：设置字体粗细，值范围从100到900。
- font-family：设置字体族，使用字体名称。

三、优先级详解

CSS样式优先级遵循以下规则：

行内样式：直接在HTML元素的style属性中定义，优先级最高。
内部样式：在<head>标签中的<style>标签内定义。
外部样式：通过<link>标签引入外部CSS文件，优先级最低。

四、总结

通过以上两个示例，我们了解了如何在HTML中使用CSS设置颜色和字体样式，以及不同样式的优先级规则。在实际开发中，合理使用和管理样式，可以使代码更加简洁、易读和可维护。

快捷键 ctrl+？注释

JDKINAKNXMKAM XAXXX

关注

19
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
标题：详解HTML与CSS中的字体样式设置和优先级在本文中，我们将详细介绍HTML与CSS中如何设置字体样式、颜色，并探讨不同样式的优先级。通过两个代码示例，帮助您更好地理解和应用这些知识。

通过以上两个示例，我们了解了如何在HTML中使用CSS设置颜色和字体样式，以及不同样式的优先级规则。在实际开发中，合理使用和管理样式，可以使代码更加简洁、易读和可维护。
复制链接

扫一扫