海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

任何拥有 WordPress 网站的人都会在某些时候遇到需要更改某些代码的情况。 这并不是说您应该成为一名 Web 开发人员,像专业人士一样编写 JavaScript 和 PHP。 更有可能的是,您需要修改 HTML 和基本 CSS,任何网页的基础知识,WordPress 与否。

我们有一个很棒的教程,介绍您将需要的最常见和对初学者友好的 HTML 代码。 看看并阅读它。 这一次,我们想向您介绍一些最基本的 CSS 片段和想法,它们将帮助您调整您的网站,使其外观和行为完全符合您的要求。

https://www.youtube.com/watch?v=lOciP_hh0sk

订阅我们的 YouTube 频道

1. 选择器、类和 ID

css 选择器

在 CSS 中,一切的基础都是 选择器. 简而言之,它是一个缩写,它告诉代码要定位什么。 您可以使用 {}. (适用于选择器的任何代码都放在大括号之间。)在许多情况下,这些 元素选择器 将与您构建网页所用的 HTML 标记对齐(例如 {} 瞄准

或者 h2{}

)。

海外社媒SNS代运营Tiktok代运营公司

在那之后,你有 班级. 这些是您(或您的主题/WP 本身)定义的特定类型的选择器。 如果您只想针对帖子的 H1 标题,您可能有 。帖子标题 {}。 CSS 类选择器由选择器本身前面的点/句点表示。 这些用于定位站点范围的元素,而不是基本元素,例如简单的 H1。 请注意,基本选择器没有点或其他指示符,这意味着它们是基本 HTML。

身份证 在 CSS 中的工作与类完全相同。 除了两个细微的差别。 它们由一个 # 在选择器的前面,它们以需要特殊样式的元素的单个特定实例(或有限数量的实例)命名。 如 #email-subscribe-about-page {} 或者 #email-subscribe-after-post {}。 这些 ID 表明不是针对特定的 类型 元素,他们自己选择单个元素。

p {
	color: red;
}

.class {
	color: white;
}

#id {
	color: blue;
}

其他选择器

由于我们正在讨论 CSS 基础知识,因此我们不会深入研究更复杂的选择器,但它们确实存在。 您还可以针对所谓的 伪类 这可能仅适用于链接悬停在上方的情况。 或者一个 属性选择器 这只会针对附加了特定参数的元素。 此外,您可以使用使 CSS 相对于元素的位置 p::之后 img::之前。

这些可能非常先进且复杂,因此要学习基础知识,您不必担心。 但是,我们确实想让您知道,您可以通过更具体的方式与文档进行交互。

2. 冒号和分号

我们在上面提到所有 CSS 代码都在花括号之间。 然而,在这些大括号内,每一行定制 必须 以分号结尾 (;). 这向浏览器表明特定样式已完成。 除了可读性之外,间距与 CSS 无关,但分号本身是不可协商的。

此外,在实际 CSS 样式和值之间,放置一个常规冒号 (:). 再次, 这里的间距根本不重要. 你可以在它的一侧有空格,也可以没有,而且 CSS 仍然会呈现。

冒号和分号的间距

请注意,当您 能够 离开这些空间,人们普遍认为你不应该这样做。 但是,对于大多数提供 CSS 缩小的网站和主题,无论如何都会删除所有空格。

3. CSS 注释

如果您需要在 CSS 代码中包含文档,您可以使用注释来实现。 CSS 注释被打开和关闭 /* */ 符号。 注释您的代码不仅对您以后返回 CSS 很重要,而且对以后的开发人员也很重要。 通常,CSS 注释用于指示特定代码段的作用。

删除内容

您可以在上面看到代码只是说明了下一个代码段的作用。 继续这样做非常重要,因为随着时间的推移,您的 CSS 文件可能会变得非常复杂。

/* This is what a CSS Comment Looks Like */

img {
	display:none;
}

4.重要的

css很重要

很难夸大其重要性 !重要的 标签可以用于 CSS。 双关意。 它是 CSS 中最常用的元素之一,但它也是最被误用和过度使用的元素之一。

你看, !重要的 声明它所在的任何行都将覆盖该选择器的任何其他样式。 样式表中的任何位置。 因此,如果您想确保特定元素始终具有特定颜色,您可以使用 !重要的 这样做。 请务必注意,整个 !重要的 标签在值和分号之间,而不是在分号之后。


#author-name {
	color:red!important;
}

#author-name {
	color:blue;
}

5.显示:无;

这个特殊的 CSS 片段是新手学习最重要的片段之一。 它所做的只是让您瞄准的任何元素消失。 例如,如果您需要一个没有标题菜单的页面,您只需将此代码放入:

不显示css

使用出现在几乎每个页面上的类来执行此操作可以将其从站点中完全删除。 所以你需要小心你把它应用到什么。

您可以在特定的 WordPress 帖子或页面上使用它来删除单个元素,例如帖子本身的元数据。 在 Divi 中,您可以使用以下代码自定义单个博客模块以不包含帖子摘录:

删除内容

.home-page-blog .post-content {
	display:none;
}

6.可见性:隐藏;

非常简单,您也可以使用 可见性:隐藏; CSS 从屏幕上删除一个元素。 请记住,this 和 显示:无; 在你的代码中。

显示;无; 代码将从页面中完全删除该元素。 浏览器根本不会渲染该元素,因为它已被完全删除。 和 可见性:隐藏; 该元素仍然呈现并加载到页面中,但它是不可见的。 对于所有功能意图,它仍然存在。 用户只是看不到它。

因此,您通常只会在需要某个功能的情况下使用它,但又不想显示它。 就像跟踪像素或其他会与屏幕上其他元素交互的部分。

#code-module { 
visibility:hidden; 
}

7. 边距和填充

填充和边距

边距和填充被 CSS 新手误解。 它们一开始看起来是一样的,但是一旦你深入研究,你会发现它们完全不同。

利润 是元素周围的空间。 它是不可见和透明的,甚至可以是负面的。 具有较大的左边距会将元素向右推。 较大的顶部边距将元素推向底部。 负边距则相反。 例如,负的上边距会将元素向上拉。

填充,然后缓冲元素的大小。 左边的填充会将元素的背景扩展到左边。 它实质上是在增加其物理质量。 就像在寒冷的日子里添加第二件毛衣一样。 你的身体有更多的填充物。 你比以前更厚了。 这也是 CSS 中的 padding 的工作方式,因此你 不能有负填充.

将其用作代码时,您可以使用默认值 边距:15px; 或者 填充:1vw; 选择器周围的均匀间距。 或者你可以使用 上边距、左边距、右边距、 或者 保证金底部 只影响那一侧,每一侧都有不同的水平。 填充也有 填充左, 等等。

h2 {
	margin-bottom:25px;
	padding-left:15vh;
}

8. 着色元素

css颜色基础

更改各种元素的颜色是您从创建网站的第一天起就可能开始调整的事情之一。 在 CSS 中,您可以通过两种方式定义颜色。

主要方法是使用其 6 位十六进制代码: #ffffff 对于白色或 #000000 以黑色为例。 您可以使用十六进制代码定义任何 RGB 颜色,如果您不知道它们,请不要担心。 有很多网站和工具可以帮助解决这个问题。

第二种方法是使用预定义的颜色词。 基本颜色如 蓝色黑色的红色的 是预定义的,您可以使用它们而无需记住任何十六进制代码。 但如果主音不是你所需要的,十六进制代码是最好的选择。

使用颜色代码

就实际使用颜色代码而言,有多种方法。 对于需要更改的任何文本,只需使用 颜色:#ffffff; 并且该选择器中的任何文本都会更改。 你可以对像 H1 和 H2 这样的标题做同样的事情 颜色.

p {
	color:white;
	background-color:#000;
}

h3	{
	background:green;
	border: #110011;
}

改变诸如 背景颜色:红色; 或者 背景:绿色; 一个元素也一样容易。 添加颜色值。 你也可以使用 颜色:#000; 选择器的值,例如 a:悬停 当鼠标悬停在上面时,它会改变链接的颜色。 甚至 边框:蓝色; 在您想要的任何元素周围放置彩色边缘。

总结 CSS 基础知识

CSS 可能是压倒性的。 您可以做的不仅仅是交换颜色和显示/隐藏元素。 但是,如果您只是在学习 CSS 以及如何通过代码操作网站,那么即使您以前从未打开过代码编辑器,内化这些特定的基础知识也会让您轻松阅读和调整代码。

您在网站上经常使用的一些基本 CSS 是什么?

文章特色图片来自darkwark/shutterstock.com

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts