论文自定义CSS简介

所以,我们已经安装了论文,我们已经了解了如何向布局中添加自定义元素。现在,是时候将定制升级到高速档了。让我们来看看一些定制样式。

很明显,论文提供了一些非常棒的定制工具。你可以改变颜色,添加和删除边框,更改边栏布局,还有更多。在你用任何css/html/php代码弄脏你的手之前,查看此视频以获取有关基本的帮助使用论文选项进行自定义.

了解CSS

为了帮助您清楚地了解什么是HTML和CSS,我们将其分解。

  • HTML是Web浏览器(如firefox或internet explorer)读取的内容,用于查找每个页面上的内容。这纯粹是页面上显示的文本和图像。
  • CSS是网页的设计方面。浏览器使用CSS来确定HTML中文本/图像的显示方式。

简而言之,HTML就是“你所看到的”,CSS是“你怎么看的”。

如果你有设计感的话,你可以用标准的论文设计选项在15分钟内创建一个看起来很专业的博客。然而,为了让你的设计真正脱颖而出,你需要超越默认论文控制的范围,深入研究其中的一些内容。“可怕的代码。”幸运的是,论文很容易(注意到一个发展趋势?)管理所有这些东西。

论文附带了一个内置的编辑器,用于定制.css文件和定制的\u functions.php文件。您可以通过WordPress管理中的“论文选项”选项卡来访问该文件。亚博yabo88app 下载您的custom.css文件是您对论文设计进行所有样式编辑的地方。

[后图像]

CSS基础

如果你对整个CSS都不熟悉,你需要了解一些事情。您网站的元素会被授予类和/或ID。为特定类和ID设置样式亚博yabo88app 下载WordPress主题的style.css文件(每个wordpress主亚博yabo88app 下载题都有一个)。我们使用“.”表示类,使用“”表示ID。因此,如果一个对象被归类为“红色按钮”,我们在style.css中将其称为“.red_button”。如果一个对象被赋予了id“white_box”,我们称之为“白盒子”。

CSS基于特定性。如果一个元素被另一个元素包含,我们可以为子元素指定仅在父元素包含它时才影响它的样式。例如,如果我们的红色按钮被白盒子包围,我们可以把它称为“白诳框,红诳按钮”。如果我们有另一个元素与白盒外的红色按钮类相同,它不会受此影响,因为我们指定它只引用白盒中的红色按钮。有道理?

CSSDemo公司

请记住,CSS将始终显示最具体的代码。所以,如果您有“.red_button”和“white_box.red_button”的代码,后者是控制白框中红色按钮显示的代码。

有关CSS基础的详细信息,检查W3Schools网站.

定制CSS

所以,整个custom.css文件是如何工作的?论文的所有默认样式都包含在style.css和layout.css中。这个<体>标记控制日志的所有HTML内容,从标题的顶部向下到页脚的底部。论文在body标签中添加了一个“custom”类。正文.自定义.因此,如果将“.custom”添加到自定义文件夹中custom.css文件中的任何css代码之前,它将比默认样式表中的CSS代码更具体,并且将覆盖用style.css或layout.css编写的、引用同一对象的任何内容。

例如,如果我们将以下代码添加到custom.css中:

.自定义a颜色:cc0000;}

所有链接都将变为红色。我们将用这个来演示几个CSS定制,这些定制可以通过主题主题完成。你需要一些基本的CSS知识,其余的应该是直的。这真是一种令人惊奇的方式。这不是论文独有的,但这无疑是一个很好的特点。

注意:请确保在“论文设计选项”面板中启用了custom.css样式表,否则这些都不起作用。

可点击的自定义徽标

为了在页眉添加自定义徽标,我们将把博客名和标语放在最左边。除非有人有一个绝对巨大的分辨率计算机显示器,他们永远不会知道它在那里。下一步,还记得我们在本指南第一部分学到的FTP技能吗?我们需要上传我们的标志图片(logo.jpg)到我们的论文自定义文件夹中的图片文件夹。通常可以在“主页/wp内容/论文(版本)/custom/images”中找到。

我们还需要为徽标区域和超链接本身设置高度和宽度属性。这将确保在正确的位置显示完整的徽标。这是CSS代码:

.custom logo background image:url(‘images/logo.jpg’)无重复;宽度:300 px;高度:150px;文本缩进量:-9999px;}.custom logo A宽度:300px;高度:150px;显示:块;}

高度和宽度显然只是设置了标志的大小。“文本缩进”是将标题和标记行输出到最左边的属性。

向正文添加背景图像

这个很容易!第一,我们将背景图像上传到论文自定义文件夹中的图像文件夹。然后,我们需要说明我们指的是尸体,所以我们使用“body.custom”,它实际上只是一行CSS代码来完成:

body.custom_background:fff url(images/body_bg.gif)repeat-x;}

这会让你有个好的开始!我真的希望本教程能帮助您开始学习。如果你有任何问题,请在评论中留言,我很乐意回答。也,如果这其中任何一个看起来有点吓人,别担心!论文拥有业内最好的支持论坛之一。那里的社区令人惊叹,如果你有问题,只要问问题,你就会得到很好的答案。

亚当有十年的WordPress设计师经验,亚博yabo88app 下载“artofblog”(博客的前身)的开发者和最初的撰稿人之一