CSS样式更改-字体设置Font&amp;边框Border

篇文章主要讲述了CSS样式更改中的背景Background，这篇文章我们来谈谈字体设置Font&边框Border的基础用法。

1.字体设置Font

1).字体系列

<div style='font-family: sans-serif normal'></div>
可用字体：
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier

2).字体风格

<div style='font-style:normal'></div>
文本倾斜:
normal   文本正常显示
italic   文本斜体显示
oblique  文本倾斜显示

3).字体变形

<div style='font-variant:small-caps'></div>
normal          显示标准字体。
small-caps      显示小型大写字母的字体。

4).字体加粗

<div style='font-weight:normal'></div>
normal    标准的字符
bold      粗体字符
bolder    更粗的字符
lighter   更细的字符
也可以使用数字表示，范围为100~900

5).字体大小

<div style='font-size:60px'></div>
smaller 变小
larger  变大
length  固定值
而且还支持百分比

2.边框Border

首先说一下边框风格，它的风格比较多，常用的一般是实线为主：

<div style='border-style:none'></div>
hidden     隐藏边框
dotted     点状边框
dashed     虚线边框
solid      实线边框
double     双线边框
groove     3D凹槽边框
ridge      3D垄状边框
inset      3D inset边框
outset     3D outset边框
边框也有四面，所以也会有上下左右
所以有时候为了更精确定位并修改样式可以使用：
border-top-style     上边框样式
border-right-style   右边框样式
border-bottom-style  下边框样式
border-left-style    左边框样式

先定义边框的宽度风格和颜色，然后定义边框的其它属性。

1).边框形状

<div style='border-radius:25px;'></div>

2).边框阴影

<div style='box-shadow:1px 2px 2px 2px red'></div>
参数含义：
边框各个方向的大小和颜色

3).边框图片

<div style='border-image:url(1.png) 30 30 10 round'></div>
参数含义：
边框图片的路径
图片边框向内偏移
图片边框的宽度
边框图像区域超出边框的量
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

总结

这篇文章主要介绍了CSS样式更改篇中的字体设置Font&边框Border设置，希望让大家对CSS选择器有个简单的认识和了解。
****看完本文有收获？请转发分享给更多的人****

IT共享之家

想要学习更多，请前往Python爬虫与数据挖掘专用网站：http://pdcfighting.com/

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

天不言而四时行，

地不语而百物生。

- 2024.03.11 -

在数字世界的构建中，字体不仅仅是文字的外衣，更是情感和风格的传递者。作为网页设计师和前端开发者，掌握HTML中的字体标签，能够让我们创造出更加丰富和吸引人的用户体验。

今天，就让我们一起走进HTML字体标签的世界，探索它们如何让网页变得生动有趣。

一、认识基本字体标签

语法结构：<标签属性=“值”> 内容 </标签>

标签通常是成对出现的，分为开始标签（p）和结束标签(/p)，结束标签只是在开始标签前加一个斜杠“/”。
标签可以有属性，属性必须有值(align=“center” )。
开始标签与结束标签中包含的内容称之为区域。
标签不区分大小写，p和P是相同的。

1、标题标签< h1> - < h6>

标题标签的默认样式是自动加粗的，字体一级标题最大，六级标题最小，每个标题标签独占一行。

标题标签是块元素

示例：

<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>

2、字体标签<font>

在HTML中，最常用的字体标签非<font>莫属，虽然现代开发中更推荐使用CSS来控制字体样式，但了解它的历史仍然有其必要性。<font>标签允许我们通过color、size和face属性来改变字体的颜色、大小和类型。

例如，如果我们想要显示红色Arial字体的文字，我们可以这样写：

<font color="red" size="5" face="Arial">这是红色Arial字体的文字</font>

这行代码的意思是：

<font> 开始一个字体样式的定义。
color="red" 设置字体颜色为红色。
size="5" 设置字体大小为5。
face="Arial" 设置字体类型为Arial。
这是红色Arial字体的文字是我们要显示的文字。
</font> 结束字体样式的定义。

注意：虽然标签在HTML4.01中是有效的，但在HTML5中已经被废弃，建议使用CSS来进行样式定义。

3、字号大小：<font size="n">

字号大小在网页设计中同样重要，它直接影响着阅读体验。HTML允许我们通过<font size="n">来调整字体的大小，其中“n”可以是1到7的数字。

例如：

<!DOCTYPE html>
<html>
<head>
<title>Font Size Example</title>
</head>
<body>
<p><font size="5">This is a paragraph with font size 5.</font></p>
<p><font size="10">This is a paragraph with font size 10.</font></p>
<p><font size="15">This is a paragraph with font size 15.</font></p>
</body>
</html>

运行结果：

不过，现代网页设计更倾向于使用CSS来控制字号，以便更精细地调整字体大小。

4、粗体标签

<b>：这个标签用于将文本加粗显示，相当于英文中的bold。它不会改变字体，只是使文本看起来更粗体。

<p><b>这是加粗的文本</b></p>

<strong>：与<b>标签类似，<strong>标签也用于表示加粗的文本。

<p><strong>这是重要的文本</strong></p>

但在HTML5中，<strong>标签被赋予了语义，用来表示重要的文本内容。

5、斜体字标签

<i>：这个标签用于将文本设置为斜体，相当于英文中的italic。

<p><i>这是斜体的文本</i></p>

<em>：与<i>标签类似，<em>标签也用于表示斜体文本。

<p><em>这是强调的文本</em></p>

但在HTML5中，<em>标签被赋予了语义，用来表示强调的文本内容。

6、删除字标签

<del>：这个标签用于表示删除的文本，常用于表示不再准确或已过时的内容。比如原价与现价。

<p>原价：<del>100元</del></p>
<p>现价：80元</p>

运行之后是这样子的：

在上述示例中，原价为100元，但已被删除，因此使用标签将其包围起来。这样，浏览器会显示删除线来表示该文本已被删除。

7、文本格式化标签 < div> < span>

< div> 标签用来布局，但是一行只能放一个< div> //大盒子，块元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>这是一个div</div>
<div>这是一个div</div>
<div>
<p>这是一个div</p>
</div>
<p>
<div>云端源想</div>
</p>
</body>
</html>

<div>标签可以看出是一个盒子容器，这里面可以放别的标签。
<div>标签是一个块元素。

如上图控制台所示（打开控制台的方式：F12）：<div>标签里面可以包含<p>标签，<p>标签，里面不可以放<div>标签。

< span> 标签用来布局，一行上可以多个 < span>//小盒子，行元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>1234</span>
<span>5678</span>
</body>
</html>

<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
<span>标签不同于<p>标签是一个行内元素（不独占一行）。

8、其它字体标签

<mark>：这个标签用于突出显示文本，通常用于表示高亮的部分。

<ins>：这个标签用于表示插入的文本，常用于表示新增的内容。

<sub> 和 <sup>：这两个标签分别用于表示下标和上标文本，常用于数学公式或化学方程式中。

二、总结与建议

尽管上述标签可以直接在HTML中使用，但现代网页设计越来越倾向于使用CSS来控制文本的样式，因为CSS提供了更多灵活性和控制能力。

使用CSS类和样式规则可以更有效地管理网站的整体样式，并且可以更容易地适应不同设备和屏幕尺寸。

因此，如果您正在学习或更新您的网页设计知识，建议学习和使用CSS来控制字体和其他文本样式，关于HTML的这些标签了解一下就可以了。

总之，字体是网页设计中不可或缺的元素，它们就像是网页的语言，传递着信息和情感。通过HTML字体标签的学习和应用，我们可以让我们的网页“字”得其乐，让每一位访问者都能享受到更加美妙的网络体验。不断探索和实践，让我们的网页在字体的世界里绽放光彩吧！

今天就先讲到这里了，

更多前端开发基础知识点击文末阅读原文查看哦！

记得关注【云端源想IT】一起学编程！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

签属性命名规范

下划线连接符命名法“hello_world”

中杠连接符命名法“hello-world”

骆驼式命名法“helloWorld”

　　内容：content/container 导航：nav 侧栏：sidebar 　　
　　栏目：column 标志：logo 页面主体：main 　　
　　广告：banner 热点：hot 新闻：news
　　下载：download 子导航：subnav 菜单：menu
　　搜索：search 页脚：footer 滚动：scroll
　　版权：copyright 友情链接：friendlink 子菜单：submenu
　　内容：content 标签页：tab 文章列表：list
　　注册：regsiter 提示信息：msg 小技巧：tips
　　加入：joinus 栏目标题：title 指南：guild
　　服务：service 状态：status 投票：vote
　　尾：footer 合作伙伴：partner 登录条：loginbar
　　页面外围控制整体布局宽度：wrapper 左右中：left right center 　　
　　
　　(二)注释的写法:
　　/* Footer */
　　内容区
　　/* End Footer */
　　
　　(三)id(具有唯一性)的命名:
　　
　　(1)页面结构
　　容器: container 页头：header 内容：content/container
　　页面主体：main 页尾：footer 导航：nav
　　侧栏：sidebar 栏目：column 左右中：left right center
　　页面外围控制整体布局宽度：wrapper
　　(2)导航
　　导航：nav
　　主导航：mainbav
　　子导航：subnav
　　顶导航：topnav
　　边导航：sidebar
　　左导航：leftsidebar
　　右导航：rightsidebar
　　菜单：menu 子菜单：submenu 标题: title 摘要: summary
　　
　　(3)功能
　　标志：logo
　　广告：banner
　　登陆：login
　　登录条：loginbar
　　注册：regsiter
　　搜索：search
　　功能区：shop
　　标题：title
　　加入：joinus
　　状态：status
　　按钮：btn
　　滚动：scroll
　　标签页：tab
　　文章列表：list
　　提示信息：msg
　　当前的: current
　　小技巧：tips
　　图标: icon
　　注释：note
　　指南：guild
　　服务：service
　　热点：hot
　　新闻：news
　　下载：download
　　投票：vote
　　合作伙伴：partner
　　友情链接：link
　　版权：copyright
　　
　　(四)class的命名:
　　(1)颜色:使用颜色的名称或者16进制代码,如
　　.red { color: red; }
　　.f60 { color: #f60; }
　　.ff8600 { color: #ff8600; }
　　(2)字体大小,直接使用"font+字体大小"作为名称,如
　　.font12px { font-size: 12px; }
　　.font9pt {font-size: 9pt; }
　　(3)对齐样式,使用对齐目标的英文名称,如
　　.left { float:left; }
　　.bottom { float:bottom; }
　　(4)标题栏样式,使用"类别+功能"的方式命名,如
　　.barnews { }
　　.barproduct { }
　　
　　注意事项:
　　1.一律小写;
　　2.尽量用英文;
　　3.不加中杠和下划线; （我倒是经常加）
　　4.尽量不缩写，除非一看就明白的单词. （偷懒经常缩写）
　　主要的 master.css 模块 module.css 基本共用 base.css
　　主题 themes.css 专栏 columns.css 打印 print.css
　　文字 font.css 表单 forms.css 补丁 mend.css
　　布局，版面 layout.css