BetterCSSforRun-inHeadings
创始人
2024-12-01 01:00:57
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

相关内容

热门资讯

安卓换鸿蒙系统会卡吗,体验流畅... 最近手机圈可是热闹非凡呢!不少安卓用户都在议论纷纷,说鸿蒙系统要来啦!那么,安卓手机换上鸿蒙系统后,...
安卓系统拦截短信在哪,安卓系统... 你是不是也遇到了这种情况:手机里突然冒出了很多垃圾短信,烦不胜烦?别急,今天就来教你怎么在安卓系统里...
app安卓系统登录不了,解锁登... 最近是不是你也遇到了这样的烦恼:手机里那个心爱的APP,突然就登录不上了?别急,让我来帮你一步步排查...
安卓系统要维护多久,安卓系统维... 你有没有想过,你的安卓手机里那个陪伴你度过了无数日夜的安卓系统,它究竟要陪伴你多久呢?这个问题,估计...
windows官网系统多少钱 Windows官网系统价格一览:了解正版Windows的购买成本Windows 11官方价格解析微软...
安卓系统如何卸载app,轻松掌... 手机里的App越来越多,是不是感觉内存不够用了?别急,今天就来教你怎么轻松卸载安卓系统里的App,让...
怎么复制照片安卓系统,操作步骤... 亲爱的手机控们,是不是有时候想把自己的手机照片分享给朋友,或者备份到电脑上呢?别急,今天就来教你怎么...
安卓系统应用怎么重装,安卓应用... 手机里的安卓应用突然罢工了,是不是让你头疼不已?别急,今天就来手把手教你如何重装安卓系统应用,让你的...
iwatch怎么连接安卓系统,... 你有没有想过,那款时尚又实用的iWatch,竟然只能和iPhone好上好?别急,今天就来给你揭秘,怎...
安装了Anaconda之后找不... 在安装Anaconda后,如果找不到Jupyter Notebook,可以尝试以下解决方法:检查环境...