本文主要简要介绍 CSS 在 WordPress 中的应用，供小白理解，大神可以绕道了，有什么错误之处请指出！大家首先要明白，wp 是使用模板文件、模板标签和 CSS 文件的组合来生成控制 WordPress 站点的外观。
Template Files 模板文件
它是组成你的网站的基石，你下载的主题结构中的页眉、侧边栏、内容和页脚都包含在这个文件夹的单个文件中。它们连接在一起作用创建你的页面，这也允许你定制构建相关的模块。例如，在默认的 WordPress 主题中，在首页、类别 archives 等页面,你可以控制特定的内容在特定的地方出现，比如你控制某些文章只在侧边栏出现等操作…..
Template Tags 模板标签
模板标签是也是代码的一部分，它存储了在 WordPress 数据库中的信息的指令和请求。其中一些是需要你配置的，允许你自定义网站上显示的日期、时间、列表和其他元素。
Stylesheet 样式表
这个 CSS 文件是所有这些元素的集合体，很多 css 都放在这个文件里，在你们下载的每个主题中的样式表中都有控制每个 HTML 元素的设计和布局的规则。如果没有这些说明，你的页面看起来就像一个打印页面，很丑。有了这些css规则，你就可以控制构建模块结构，比如标题加长，网页布局图形或照片，网页空间留空格拉伸等。或者你的侧边栏可以在右边也可以在左边，至于如何设计页面就取决于你自己了。
在 WordPress 中自定义 CSS
从 WordPress 4.7 开始，就可以通过主题外观自定义界面为你的主题添加自定义 CSS 了，而不需要额外的插件或直接编辑主题和子主题。只要选择附加的 CSS 标签时，就可以自定义当前的主题了！你每次所做的任何 CSS 改动都会出现在预览中，这样你就有很多时间去调整和完善你的网站的外观，而不需要实际改动任何东西，直到你对它们感到满意为止！点击仪表盘中‘编辑 css’，即可进入自定义界面，例如：
请记住，CSS 的改变是与你的主题相关联的。也就是说如果你换了一个新的主题，那么之前自定义 CSS 样式将不再是有效的 (当然，如果你换回以前的主题，它们还是生效的 ) 。
为什么要使用定制自定义的 CSS ？
1、如果你直接修改一个主题并且更新，那么你的主题可能会报错，甚至网站打不开的情况。通过使用自定义 CSS，你就可以将确保修改得到保留，并且可以直接预览
2、使用自定义 CSS 可以适当地加快开发时间（对于开发者来说）
3、自定义 CSS 是在主题的最初始 CSS 之后加载的，因此允许覆盖特定的 CSS 语句，而不必从头开始编写整个 CSS 集
WordPress 修改的 css 去哪里找？
在这个问题之前，大家最好先了解下wordpress 主题的文件构成：
wordpress基本主题文件包括：
style.css：样式表文件，用于DIV+CSS布局
functions.php：模板函数
index.php：首页模板，很重要
single.php：文章页面模板
page.php：页面模板，比如About页面
archive.php：文章归档/分类目录模板
search.php：搜索结果模板
404.php：404模板，链接无效时显示的内容
header.php：顶部模板
sidebar.php：侧栏模板
comments.php：显示和发表评论的模板
footer.php：底部模板
可将文件分为三个部分：
一、第一部分主要用于控制页面和内容的，有html基础的朋友应该知道style.css是用来规划网页的布局的，如果想对网页某个位置进行调整的话可以在style.css中修改，一些特效也可以用css来实现，functions.php里包含了很多函数用于控制内容，比如你想记录文章被查看了几次，就可以在这用函数来实现。
二、第二部分是页面，也就是浏览器所看到的部分。当进入首页时会显示index.php所定义的内容，打开文章就会显示single.php的内容，点了下搜索就进入了search.php页面。
三、第三部分是第二部分的组成元素，我们都知道wordpress的顶部、右边侧栏以及底部大都是不变的，所以为了节省代码，把他们拿出来放入特定的文件中，需要的时候再调用。比如打开首页后index.php会先调用header.php，有了头部后就是正文了，这个需要自定义，然后就是sidebar.php，最后footer.php，这样一个完整的首页就出现了。进入文章后也是如此，只不过多了个comments.php，加个留言功能。
有了这些基础，那么就好办了，直接去找 .css 文件即可，首先要找的就是主题的 style.css ，直接 ctr + f 查询即可，或者打开谷歌浏览器，F12 进入调试，点击 network ，在选择 css，也可以查看：
注意：如果你使用了合并 js/css 等之类的插件，那么这个时候，就可以去相关插件的 css 文件夹去找了，或者通过以上 F12 方法直接查找相应的插件名称也行！
