CSS基础教程:让WordPress文章的段落首行自动空两格

前端之家收集整理的这篇文章主要介绍了CSS基础教程:让WordPress文章的段落首行自动空两格前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

wordpress建站并且对CSS不熟的新手站长朋友。为了节约您的宝贵时间,老司机请绕过。

站长朋友们在使用wordpress建站完成以后,通常会发布很多文章,有些时候我们希望段落首行能空两格,可是wordpress自带的编辑器却没有考虑到这一点,导致发布的文章首行都是顶格的,看起来很不习惯。

通常我们的解决方法是在发布文章时把编辑器切换到“文本”模式,然后再在首行手动键入两个全角的空格来实现。但是这有两个弊端,一是麻烦,编辑不方便;再一个就是如果日后更换成首行会自动空两格的主题,就会变成了首行空四格。

所以,最好的解决方法不是手动键入空格,而是通过CSS样式代码实现。下面我们来简单介绍一下实现的方法

切换到主题目录,找到对应的样式文件,通常是主题根目录下的style.css,找到段落对应的样式,通常为***** p{},然后在样式中加入 text-indent:2em;效果如下:

Crayon-5c891cc99fded676017736" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">style.css
Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">
Crayon-button Crayon-nums-button" title="Toggle Line Numbers">
Crayon-button-icon">
Crayon-button Crayon-plain-button" title="Toggle Plain Code">
Crayon-button-icon">
Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">
Crayon-button-icon">
Crayon-button Crayon-expand-button" title="Expand Code">
Crayon-button-icon">
Crayon-button Crayon-copy-button" title="Copy">
Crayon-button-icon">
Crayon-button Crayon-popup-button" title="Open Code In New Window">
Crayon-button-icon">
Crayon-language">CSS
Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">
Crayon-plain-wrap">
Crayon-main" style="">Crayon-table">Crayon-row">
Crayon-nums " data-settings="show">
Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">
Crayon-num" data-line="Crayon-5c891cc99fded676017736-1">1
Crayon-num Crayon-striped-num" data-line="Crayon-5c891cc99fded676017736-2">2
Crayon-num" data-line="Crayon-5c891cc99fded676017736-3">3
Crayon-code">
Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
Crayon-line" id="Crayon-5c891cc99fded676017736-1">Crayon-k ">***** p Crayon-sy">{
Crayon-line Crayon-striped-line" id="Crayon-5c891cc99fded676017736-2">Crayon-h"> Crayon-e ">text-indentCrayon-sy">:Crayon-i ">2emCrayon-sy">;
Crayon-line" id="Crayon-5c891cc99fded676017736-3">Crayon-sy">}

这样再发布文章时,段落首行就会自动缩进两个空格了,感兴趣的新手朋友们可以尝试一下。

原文链接:https://www.f2er.com/wordpress/238380.html

猜你在找的wordpress相关文章