BetterCSSforRun-inHeadings
创始人
2024-12-01 01:01:48
0

在HTML文档中,我们可以使用“Run-in Headings”将标题直接嵌入到正文内容中。然而,在默认的情况下,这样嵌入的标题的样式可能与正文样式不太符合要求,为此我们需要针对这种情况进行特别的CSS设置。

为了美化Run-in Heading的样式,我们可以如下设置CSS:

.runin { font-weight: bold; display: inline; margin: 0; border-bottom: none; }

这里,“runin”可以是您HTML中使用的任何名称,只需确保其与相应的HTML标记匹配即可。其余编码可以跟随您原来的样式,如改变字体、颜色等等。

我们还可以改变Run-in Heading的样式,以便更好的实现与正文内容间的区分:

.runin:before { content: "("; font-weight: normal; }

.runin:after { content: ") "; font-weight: normal; }

在这里,我们为Run-in Heading设置了括号(包括左右括号),并使其主要内容稍微打印出来,以便更好地与正文相区别。如果您希望进一步定制样式,可以通过CSSselector等等进行更高效的实现。

在HTML中使用的完整示例代码如下:

Better CSS for Run-in Headings Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt massa at mi et placerat mi faucibus at. Integer tempor vestibulum ullamcorper. Morbi posuere ornare magna, sit amet sapien ornare nec. Ut enim odio, vehicula vitae pretium nec, commodo eu velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt massa at mi et placerat mi faucibus at. Integer tempor vestibulum ullamcorper. Pellentes

相关内容

热门资讯

前端-session、jwt 目录:   (1)session (2&#x...
linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
关于测试,我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语,但并没有使用过测试工具。偶然看到编程老师...
前缀和与对数器与二分法 1. 前缀和 假设有一个数组,我们想大量频繁的去访问L到R这个区间的和,...
nodejs:本地安装nvm实... 一、背景-使用不同版本node的原因 vue3+ts、nuxt3版本,node...
JAVA集合知识整理 Java集合知识整理 HashMap相关 HashMap的底层数据结构:jdk1.8之...
无刷直流电机介绍及单片机控制实... 无刷直流电机介绍及单片机控制实例前言基本概念优势与劣势使用寿命基本结构使用单片机控制实例电子调速器&...
fwdiary(2) dp2 1.传纸条  AcWing 275. 传纸条 - AcWing 走两条路,走一条最大的...
常用的DOS命令 常用的DOS命令 DOS(Disk Operating System,磁...
<C++> 类和对象(下) 1.const成员函数将const修饰的“成员函数”称之为const成员函数,cons...