如何使用 CSS – 面向初学者的网页设计提示和技巧

您甚至可以通过这些面向初学者的 CSS 技巧来学习如何使用 CSS 来设计网页样式。

您不需要了解任何有关计算机代码的知识。 您只需要知道如何复制和粘贴即可。

但首先，什么是 CSS？

层叠样式表 (CSS) 是一种样式表语言代码，主题开发人员使用它来描述和更改 HTML 文档的呈现或外观。

CSS 是做什么的？

简单来说，CSS 文件使 HTML 页面看起来更漂亮。

无论您使用什么博客平台，您都可以更改 CSS 属性以使您的博客看起来更好。

您使用什么博客平台并不重要。

您将在主题设置中选择Custom CSS或Additional CSS 。

您可能从未看过此选项。

或者，如果有的话，您可能会认为学习如何编码太难了。

但这非常容易。

我对 Web 开发或 CSS 语法一无所知，但我可以在几秒钟内更改样式属性。

您需要做的就是使用 Chrome 或 Firefox 网络浏览器开发人员工具并学习一些简单的 CSS 技巧和技巧。

让我们看看它是多么容易。

为什么要学习如何编辑博客的 CSS？

您的博客主题中可能有很多设置。

但是有许多较小的元素可能会丢失。

即使在 WordPress 的高级主题中，某些选项在标准选项中也不可用。

这就是为什么您可以通过自己的编辑和更改来帮助您的 CSS 更好地工作。

通过更改外部样式表，它可以引用您所有的 HTML 页面。

如果您更改了一个页面上的 HTML 标题，它会更改所有页面上的 HTML 标记。

该引用称为伪元素。

这意味着如果您更改 H2 标题的外观，它将更改您网站上的所有 H2 标题。

但您无需了解所有这些并发症。

您需要知道的只是它的工作原理，并且您可以在完全不了解编码的情况下将您的博客设计成您想要的样子。

让我们开始为初学者介绍一些简单的 CSS 技巧。

如何轻松更改内联 CSS

第一步是在 Firefox、Chrome 或 Microsoft Edge 中打开您的博客。

在下面的示例中，我使用了 Firefox。 我发现它比 Chrome 使用起来更友好一些。

但两者的工作方式相似。

在新选项卡或窗口中打开您的博客。 您可以导航到要更改的页面。

现在从 Firefox 的“工具”菜单或 Chrome 的“查看”菜单打开开发人员工具、Inspector。

单击检查器以打开工具窗格。

您可以使用工具窗格左上角的选择器箭头来选择页面上的任何内联样式元素。

在页面上移动光标以选择一个元素。 或者您可以单击列表中的单个元素。

您将在网页的浏览器视图中看到您选择的每个元素以蓝色突出显示。

现在您已准备好更改页面的外观。

使用 CSS 选择器

在我的示例中，我将更改 H2 标题元素的外观。

您可以选择更改 H1 元素、正文或图片标题。

我想从更改字体大小开始。 您需要做的就是单击样式标签字体大小，然后更改数字。

我将大小从 33px 更改为 56px。 您可以看到标题的大小现在变大了。

不用担心。 您还没有更改您的实时博客页面。 您在浏览器窗格中看到的只是更改的预览。

您可以随心所欲地使用任何 HTML 元素。

您在浏览器窗格中看到的所有内容都只是您对 CSS 规则所做更改的预览。

现在我想改变文本的颜色。

如果单击颜色标签和数字之间的颜色点，则会打开颜色选择器。

现在只需选择您要使用的颜色。

更改 HTML 属性颜色很简单。 这里我已经从黑色变成了蓝色。

看起来不错，但行高可能会更好。 我会改变它。

当前设置为 1.2，行与行之间的间距太大。 我想让线条靠得更近。

所以，我将其更改为 1.0。

这样看起来好多了。

我对 H2 标题在预览模式下的外观进行了三处更改。 我更改了字体大小、颜色和行间距。

现在是时候将这些更改添加到我的实时站点中了。

如何获取您网站的代码

您需要复制已修改的代码行。

选择并复制所有代码。 确保复制所有行，包括最后一个括号。

现在将其粘贴到文本编辑器中。 您可以在 PC 上使用记事本，或在 Mac 上使用文本编辑器。

我们所做的另一个改变是颜色。 我们也需要复制这一行。

您只需要复制颜色线。

您可以在上图中看到 H2 元素以粗体显示。 这意味着它与我们的第一个代码是相同的伪元素。 所以你可以一起使用它们。

复制该行。

现在将该行添加到您的文本编辑器中。

您可能需要添加或删除一些空格，以便您的颜色线缩进相同。

现在您已准备好将这三项更改添加到您的实时站点。

将代码添加到您的站点

转到您的主题选项并选择您的 CSS 选项。

在 WordPress 主题中，它位于主题定制器中，称为附加 CSS 或自定义 CSS。

它将在其他博客平台上被称为类似的东西。

现在从您的文本编辑器中复制所有代码，并将其粘贴到您的定制程序选项卡中。

一旦您粘贴代码，您的预览器就会显示您所做的更改。

点击发布，你就完成了。

这是我更改前后的比较。

你可以做更多

我的初学者 CSS 技巧逐步介绍编辑 HTML CSS 样式只是一个开始。

如果您想尝试并尝试更改其他元素，您可以做更多的事情。

向图像添加边框或阴影、向左或向右移动文本或调整正文宽度都很容易。

您可以移动边距或减少或增加填充并修改对齐方式。

您可以选择数百个选项进行编辑。

请记住，当您在开发人员工具中工作时，您不会影响您的网站。

您所做的任何更改都是预览，并且仅在该浏览器窗口中可见。

无论您尝试什么，或者它是否有效，都没有关系。

把它想象成一个游乐场，让您了解如何为您的网站或博客设计风格。

保持好奇心，通过这些针对初学者的 CSS 技巧，您将乐于学习这项新技能。

Developer Tools 的一大奖励提示

现在您已经打开了 Developer Tools 框架，您可以做一件非常巧妙的事情。

您可以测试您的站点速度。

您需要做的就是单击“网络”选项卡。

然后单击 CTRL + R。

您会在底部标有箭头的线上看到红色的完全加载页面速度时间。