任何拥有 WordPress 网站的人都会在某些时候遇到需要更改某些代码的情况。这并不是说您应该像专家一样成为编写 JavaScript 和 PHP 的 Web 开发人员。更有可能的是，您需要修改 HTML 和基本 CSS，这是任何网页的基础，无论是否使用 WordPress。
我们为您需要的最常见代码提供了初学者友好的 HTML 代码。查看并继续阅读。这一次，我们想向您介绍一些最基本的 CSS 片段和想法，它们将帮助您调整网站的外观和行为以完全符合您的期望。
1.选择器、类和ID
在 CSS 中，一切的基础都是选择器。简而言之，它是一个首字母缩写词，告诉代码目标是什么。您可以使用 p{} 来定位您网站上的所有单独段落。 （任何适用于选择器的代码都放在大括号之间。）在许多情况下，这些元素选择器将与用于构建页面的 HTML 标记对齐（例如 p{}position
或 h2 {} 和
）。
在那之后，你有一个课程。这些是您（或主题/WP 本身）定义的特定类型的选择器。如果你只想定位帖子的 H1 标题，你可以使用 .post-title{}。 CSS 类选择器由选择器本身前面的点/句点表示。这些用于在整个站点中定位元素，但不作为基本元素（例如简单的 H1）。请注意，基本选择器没有点或其他指示符，这意味着它们是基本 HTML。
CSS 中的 ID 与类完全相同。除了两个小的区别。它们由选择器前面的 # 表示，并命名需要特定样式的元素的单个特定实例（或有限数量的实例）。例如#email-subscribe-about-page{} 或#email-subscribe-after-post{}。这些 ID 表明它们不是选择特定类型的元素，而是选择单个元素本身。
p {颜色：红色； } .class {颜色：白色； } #id {颜色：蓝色；
其他选择器
由于我们是讨论 CSS 基础知识，所以我们不会深入研究更复杂的选择器，但它们确实存在。您还可以定位仅适用于链接悬停的所谓伪类。或者一个属性选择器，它只会以附加了特定参数的元素为目标。此外，您可以使用 p::after 和 img::before 使 CSS 位置相对于元素。
这些可能非常先进和复杂，因此对于学习基础知识，您不必担心。但是，我们确实希望您了解与文档交互的更具体方法。
2.冒号和分号
正如我们上面提到的，所有的 CSS 代码都在花括号之间。但是，在这些大括号内，每行定制必须以分号 (;) 结尾。这向浏览器表明特定样式已完成。除了可读性之外，CSS 间距无关紧要，但分号本身是不可协商的。
同样，在实际 CSS 样式和值之间放置一个常规冒号 (:)。同样，这里的间距根本不重要。你可以在它的一侧有空格，无论有没有空格，CSS 仍然会呈现。
请注意，虽然您这些空格可以保留，但一般不应该这样做。然而，大多数网站和主题都提供 CSS 压缩，无论如何都会删除所有空格。
3. CSS 注释
如果您需要在 CSS 代码中包含文档，您可以使用注释来实现。使用 /* 和 */ 符号打开和关闭 CSS 注释。注释你的代码 这不仅对你以后回归 CSS 很重要，对未来的开发人员也很重要。通常，CSS 注释用于指示特定代码段的功能。
上面可以看直到该代码仅说明下一个代码片段的作用。继续这样做很重要，因为随着时间的推移，您的 CSS 文件会变得非常复杂。
/*这就是 CSS 注释的样子*/ img { display: none; } 4.!重要
不夸张！ important 标签对于 CSS 的重要性。双关语。这是 CSS 中最常用的元素之一，但也是最常被误用和过度使用的元素之一。
你会看到！ important 在行中声明它会覆盖该选择器的任何其他样式。样式表中的任何位置。所以如果你想确保一个特定的元素总是有一个特定的颜色，你可以使用 !重要的是要实现。注意是整！重要标记位于值和分号之间，而不是在分号之后。
#author-name {颜色：红色！重要的; } #author-name {颜色：蓝色； } 5. Display: none;
对于新手来说，这个特殊的 CSS 片段是最重要的片段之一。它所做的只是使您定位的任何元素消失。例如，如果你需要一个没有标题菜单的页面，你可以简单地把下面的代码放在：
对几乎出现在每个页面上的类执行此操作可以将其从站点中完全删除。所以你需要小心你应用它的地方。
您可以在特定的 WordPress 帖子或页面上使用此功能从帖子本身中删除单个元素，例如元数据。在Divi中，您可以使用以下代码自定义单个博客模块以不包含帖子摘录：
.home-page-blog.post-content {display: none;} 6.可见性：隐藏;
总之，你也可以使用可见性：隐藏； CSS 从屏幕上删除一个元素。请记住，此显示与显示之间没有区别：none;。在你的代码中。
显示；无；代码将从页面中完全删除该元素。浏览器根本不会呈现该元素，因为它已被完全删除。具有可见性：隐藏；该元素仍然呈现并加载到页面中，但它是不可见的。出于所有功能目的，它仍然存在。用户只是看不到它。
因此，该功能一般只在需要而不显示的情况下使用。就像跟踪像素或与屏幕上其他元素交互的其他片段一样。
#code-module { 可见性：隐藏； } 7.边距和填充
初次使用 CSS 的用户会误解边距和填充。乍一看它们是相同的，但深入挖掘后，它们就大不相同了。
边距是元素周围的空间。它是无形的、透明的，甚至可以是负面的。较大的左边距会将元素推向右侧。然后，较大的上边距将元素推向底部。负边距则相反。例如，负的上边距会拉长元素。
然后填充将缓冲元素的大小。左侧填充会将元素的背景扩展到左侧。它本质上是在增加它的体重。这就像在寒冷的日子里添加第二件毛衣。你的身体变得更饱满。你比以前厚了。这也是填充在 CSS 中的工作方式，因此，您不能使用负填充。
将其用作代码时，您可以使用以下默认边距：15px；或填充：1vw；保持选择器周围的间距均匀。或者，您可以使用上边距、左上边距、右上边距或底部下边距来只影响那一侧，并且每一侧都有不同的级别。内边距、左内边距等也是如此。
h2 {margin-bottom: 25px;左填充：15vh； } 8.着色元素
从创建网站的第一天起，改变各种元素的颜色就是其中之一。在 CSS 中，您可以通过两种方式定义颜色。
主要的方法是使用它的6位十六进制代码：比如#ffffff代表白色，#000000代表黑色。您可以使用十六进制代码定义任何 RGB 颜色，如果您不知道它们，请不要担心。有大量的网站和工具可以帮助解决这个问题。
第二种方法是使用预定义的颜色词。蓝色、黑色和红色等基本颜色是预定义的，您无需记住任何十六进制代码即可使用它们。但是，如果您不需要大调，最好使用十六进制代码。
使用颜色代码
有几种实际使用颜色代码的方法。对于任何需要更改的文本，只需使用颜色：#ffffff；该选择器中的所有文本都将更改。您可以对彩色标题标题（例如 H1 和 H2）执行相同的操作。
p {颜色：白色；背景色：#000； } h3 {背景：绿色；边框：#110011； }
改变背景颜色：红色；或背景：绿色；一个元素一样简单。添加颜色值。您还可以使用颜色：#000；选择器的值，例如 a:hover，它将在鼠标悬停时更改链接的颜色。均匀边框：蓝色；在您想要的任何元素周围放置彩色边框。
总结 CSS 基础知识
CSS 可能让人不知所措。您可以做的不仅仅是交换颜色和显示/隐藏元素。但是，如果您只是学习 CSS 以及如何通过代码操作网站，那么即使您以前从未打开过代码编辑器，掌握这些特定的基础知识也会让您轻松阅读和调整代码。
您在网站上经常使用哪些基本 CSS？
文章特色图片由 darkwark/shutterstock.com 提供
来源
