魏艾斯笔记CSS 提供了对网站元素的精细控制，可以根据需要来定义元素的位置、效果等。Elementor除了提供现成的页面元素和小部件之外，还提供了可添加自定义 CSS 的选项。本文分享如何使用 5 种方法把自定义 CSS 添加到 Elementor 搭建的网站中，给使用 Elementor 的朋友提供一些参考。
CSS是什么
CSS就是常说的样式表，使用 CSS 把 HTML 页面转换为具有现代外观的布局设计。
当你访问一个 html页面时，会自动加载所有 CSS代码的单独样式表，网站的所有页面都可以调用这个样式表。还可以把 CSS代码放在单独的 html页面，称之为“内联”。
我们可以在 WordPress 和 Elementor 中无需手动编辑php文件，就能添加 CSS。下面看看是如何操作的。
Elementor页面编辑器 点我直达 Elementor pro插件官网，快速建站，容易上手。入门点击购买Elementor Pro插件和下载安装激活_WordPress页面编辑器。 更多Elementor插件内容请看Elementor专题学习、小网站选择 1核2g配置的服务器起步，国外主题建站选择 2核4g配置，适当搭配运行流畅。
国内服务器：阿里云、腾讯云（都有代金券，付款时抵用省钱） 不知道如何选择地域、配置请在页面右侧+老魏的联系研究。
外贸、B2C/C2C等网站在国外注册域名。打开namesilo官网，在搜索框里输入并选择好后注册，记得使用优惠码省钱。优惠码点击国外域名商Namesilo域名注册教程获取。
外贸网站建议选择Hostinger虚拟主机，价格便宜，性价比极高！Hostinger专题
SiteGround虚拟主机价格适中服务好！SiteGround专题
Elementor 自定义 CSS
Elementor 在每个元素的高级选项中，提供了自定义CSS选项，你可以把 CSS代码粘贴进来，保存即可生效。
这种CSS样式仅适用于添加的元素本身，如果想 自定义 CSS 影响整个站点，就需要用下面的方法。
Elementor HTML 小部件
如果需要使用 html和CSS手动添加元素，可以使用 Elementor HTML 小部件。
HTML小部件能解析 HTML、CSS 和JavaScript。在HTML 代码字段中添加任何代码，Elementor 会显示为小部件的效果。
HTML小部件支持内联和独立 CSS，与上面 Elementor 高级选项卡中的自定义 CSS一样，使用小部件添加的任何代码都只会影响这个元素。
Elementor 站点设置菜单
如果想要让 CSS代码全局生效（整个站点有效），打开 Elementor站点设置菜单，进入编辑状态，点击屏幕左上角的汉堡菜单，选择站点设置选项，在这里面添加的 CSS代码能自定义全站的样式，在此菜单中所添加的任何代码都将应用于整个网站。
这里添加的任何自定义 CSS 都会影响整个网站。如果你只想自定义某一个特定元素，建议还是使用上面提到的，把 CSS 直接添加到小部件的办法。
用 WordPress 定制器
WordPress 定制器能在整个站点范围内添加自定义 CSS。在 WordPress后台 > 外观 > 自定义，在左侧菜单中选择附加 CSS选项，粘贴代码即可。
但在 Elementor 中添加代码字段比 WordPress定制器中更友好。所以更建议在 Elementor 中添加自定义CSS代码。
使用 CSS 插件
Simple Custom CSS and JS插件可以在不使用 WordPress定制器或 Elementor页面构建器的前提下，把自定义 CSS 添加到网站中。
在插件中点击 自定义 CSS 和 JS > 添加自定义 CSS，然后点击添加 CSS 代码。
可以配置是在外部样式表还是在内部加载 CSS 代码，还可以决定代码放在页眉还是页脚。
点击发布按钮，切换到前端页面查看代码运行结果。
使用 function.php文件
你可以在 WordPress 的 functions.php文件中添加 CSS代码，一般多用于子主题中添加。如果在主题中添加，那么容易在下次主题更新时被覆盖掉，丢失自定义CSS代码样式，所以并不是主要推荐方法。
总结
以上 6 种方法，老魏推荐使用 Elementor 添加 CSS代码，这样可以按需添加到网站某个特定元素，或者全局站点生效。