『我们可以很简单就拥有个人主页⑤』装修主页吧!·源代码篇

声明

  • 本系列教程是建立于「写意」平台基础上的个人博客主页建设指南,应该能应用于其他 Write Freely 的社区,内容基本上是我在建设主页过程里的笔记的归纳和一些资料的整理,目标是让没有编程基础的用户也能够看懂并使用,故大概不会涉及到较为复杂的部分。
  • 如果您是专业人士或已经有了不少利用 HTML/CSS 以及 Markdown 写作及建设个人主页的经验,我想这份教程或许对您并没有什么用处,但是欢迎指出任何错误或是遗漏的地方。

这篇文章主要关于如何通过阅读博客主页的 HTML 源代码来决定 CSS 选择器名称,继而更为灵活地自定义页面,主要参考了 HTML 及 CSS 基础教程的内容。

本篇覆盖内容
  • 自定义 CSS:通过阅读 HTML 源代码来填写选择器内容
上一篇装修主页吧!·基础篇 下一篇装修主页吧!·文字篇

『我们可以很简单就拥有个人主页』系列目录内容是主页的基础插入各类元素让文章丰富多彩·上插入各类元素让文章丰富多彩·下装修主页吧!·基础篇装修主页吧!·源代码篇装修主页吧!·文字篇装修主页吧!·图像篇装修主页吧!·技巧篇


虽然在上一篇教程里我提供了一份简单的包含了更改博客主页的几个主要组成部分(标题、简介、置顶等)的 CSS 代码,但是您或许会想要对其他网页元素进行自定义的格式设置,或是单纯好奇为什么这些选择器的内容对应了这些网页元素。 接下来,我会介绍如何在没有太多 HTML 的标签名称的知识的情况下,通过阅读博客主页的 HTML 源代码来找到自己想要更改的元素应当填写的选择器内容。

这篇文章涉及到的代码相关的内容比较多,可能稍微有些复杂。如果您对此不感兴趣或是对之前代码里提供的几个元素的选择器已经满意了的话可以跳过这一篇。


标签中的内容

我们已经知道,HTML 里的每个 <> 的开头就是一个 HTML 标签的名字。假设一个 HTML 标签名字为 a,那么 <a> 代表标签的开始,</a> 代表标签的结束(标签名字前面加上 / 代表标签结束),而放置在 <a></a> 之间的内容就是会以这个标签所代表的元素来呈现的内容。

万物皆可套娃。

标签中除了输入文本内容外,也可以增加别的标签。假设一段文本被放置在了 <a></a> 中,而标签 <a> 被放置在了 <body></body> 之中,变成了 <body><a>文本</a></body> 的形式,那么这段文本不但拥有 <a> 的特征,也会有 <body> 的特征。

用我们使用过的折叠功能的语法为例:

<details><summary>折叠处标题</summary>被折叠的内容</details>

<details> 这个标签代表文档中的某个会被折叠的细节,而 <summary> 则代表细节的标题。 「折叠处标题」同时被放置在了 <details></details><summary></summary> 之中,因此这串文字会以文档里的某个折叠的细节的标题的样式呈现在页面中。 而「被折叠的内容」仅被放置在 <details></details> 之中(注意这串文字在代码里是出现在了 </summary> 之后,因此并没有被 <summary> 标签所包括),所以这串文字仅仅是细节的文本,而非标题。

练习

来练习一下吧! 以下是一串虚拟的代码,我故意进行了无规律的换行。其中每个标签并不代表其在 HTML 中的含义,只是用来练习阅读标签包含的内容的。 您可以尝试阅读一下,并辨认每段文本分别被哪些标签所包括:

<a>
<b><c>文本 1</c>文本 2
<d>文本 3<e>文本 4</e>
</d></b>文本 5</a>

答案 文本 1:a、b、c 文本 2:a、b 文本 3:a、b、d 文本 4:a、b、d、e 文本 5:a

在您掌握了标签的读法,明白如何从代码中看出有哪些内容被某个标签所包括,或某个内容被包括在了哪些标签里之后,就可以从 HTML 源代码中找到某段文本对应的标签了。


标签的属性

然而,现实中的 HTML 代码(包括您的博客的源代码)往往更加复杂,因为每个标签除了它的名字和代表的含义以外还有其属性

还记得第一篇教程里提到的设置文字格式所用的代码吗?

<span style="文字格式声明">文字内容</span>

现在我们知道,<span> 是个 HTML 标签。但在这个标签的开始、标签名称之后,有一串 style="",这就是当前这个 <span> 标签的属性。

一个标签可以有很多个属性,所以您往往会发现,一份 HTML 的源代码中,不少标签的名字后面都有很长的一大串标签属性。 但这系列文章只是一个简易的装修主页教程,而非 HTML 编程教学,因此,您需要特别注意的只是其中的两个标签属性:classid。它们往往会以 class="名称"id="名称" 的形式出现。 在这里提到这两个 HTML 的标签属性是因为它们在接下来会提到的寻找选择器的内容里非常重要。


选择器类型

CSS 选择器也有多种类型,根据选择的对象不同,选择器的填写格式也有所区别。您需要注意的是以下三种:

请务必注意选择 classid 所使用的符号的区别。


通过阅读 HTML 源代码填写 CSS 选择器

掌握了基础的 HTML 标签的阅读方法和 CSS 的选择器类型后,就可以来实践了!

首先,您需要打开您的博客主页的 HTML 源代码:

  1. 复制您的博客主页的地址,包括开头的「https://」;
  2. 空白的浏览器地址栏输入「view-source:」,请使用半角符号
  3. 在「view-source:」后粘贴之前复制的主页地址;
  4. 按下回车键!

然后您就会看到类似这样的界面:

html 1

假如您的主页已经自定义了 CSS,那么您还会在我的这张截图的空白处所对应的位置那里看到您使用的 CSS 代码。 但前面的信息对我们来说并不太重要,我们需要往下滑。您会在几个空白行后看到一个 <script> 标签,标签下的内容是一片全是英文的代码,我们需要滑过这个部分直到 <\script> 出现。 紧接着,您会在 <\script> 之后看到 <\head>。再接着,您会看到 <body> 标签的开始,从这开始就是我们需要阅读的部分。

html 2

您会在这些 HTML 代码中看到一些对您而言或许非常眼熟的文字,譬如您所起的博客名称、简介、您的一些文章标题和内容等等。HTML 就是通过给这些文本加上标签,让它们按照标签所代表的含义来呈现在网页中的。

我们继续拿上一篇教程最后的 CSS 代码修改过的这个博客界面为例子,配合 HTML 代码和 CSS 代码来分析这些选择器是如何选择博客页面中的各个元素的。

template 3


body {
    background-color: aliceblue;
}

代码中的第一个选择器选择了 body。我们可以看到博客的内容都是出现在 <body> 标签之下的,这个标签的结尾 </body> 刚好出现在页面的最后一个元素,也就是页面最下方的那段「写意 Writee · powered by writefreely」之后,而 </body> 之后的内容则是一些 JavaScript 代码。

html 3

也就是说,<body> 标签下的内容基本上就是整个博客页面的内容,那么我们想要对整个博客进行某个修改的时候,就可以使用 body 作为选择器名称。 这也是为什么我们想要修改整个博客的背景颜色的时候是将 background-color: aliceblue 这句格式声明放置在了 body {} 之中。


#blog-title a {
    font-family: 'Hiragino Sans GB';
    font-weight: bold;
    color: midnightblue;
}

这个选择器选择了 #blog-title a,通过之前的注释,我们知道这个选择器作用的对象是博客的标题文字,为什么呢?

这个作为例子的博客的标题是「博客名称」,那么我们先在 HTML 代码里寻找「博客名称」这串文字出现在了哪里:

html 4

它在这儿!但是它究竟被 <body> 以外的哪些标签包括呢?我们从 <body> 开始逐个标签阅读: <body> 标签开始之后出现的第二个标签是 <nav>,但是这个标签已经在「博客名称」出现之前就结束了(</nav> 出现在了「博客名称」之前),也就是说,包括在 <nav></nav> 之中的所有标签我们都不需要考虑。

html 5

</nav> 之后的下一个标签是 <header>,然后是 <h1>,再接着是 <a>。这三个标签都是在「博客名称」四个字之后才结束的,也就是说我们的博客标题的文字被包含在了这三个标签中

html 6

那么把所有无关的内容和标签属性都暂时移除,总结一下的话,博客标题的文字是处于这样的标签层次里的:

<body>
<header>
<h1><a>博客名称</a></h1>
</header>
</body>

这里有标签之中包含了别的标签套娃递进的关系,而在 CSS 中,这样的关系主要通过在标签名字之间空格来表现:

body header h1 a {
}

您或许会想知道,为什么我们不直接使用最后的 <a> 标签作为选择器选择的内容。这是因为在网页中可能会出现复数个相同标签,您可以在代码的其他地方找到别的 <a> 标签,因此,简单的一个 a {} 所覆盖的内容不仅仅是我们想要自定义的博客标题文字

所以,为了精确定位到具体的元素,还是写完整的选择器更为保险。当然,如果您能确定您所写的选择器只会覆盖到您想要修改的元素,那么您大可以放心省略掉一些标签名称。

但是,body header h1 a {} 和我们使用的 #blog-title a {} 显然不同。 如果您还记得前文提到的选择器类型,那么您可以看出 #blog-title 所代表的是某个标签的属性 id="blog-title"。我们再回过头去看源代码,发现 id="blog-title" 确实出现了:

html 7

比起很容易重复出现的标签名称,classid 这两个标签属性在被赋予具体数值(即引号之中的它们的名称)后会更具有指向性。也就是说,我们可以通过选择器选择 classid 的名称来达到更加精确的定位效果,同时也可以在多个标签递进的时候减少需要写的选择器内容。 id="blog-title" 出现在了 <h1> 标签里,所以我们可以直接用 #blog-title 替换掉 body header h1,最后得到了我们所使用的 #blog-title a {}

虽然选择器填写的内容不同,但这两种写法在当前博客主页里起到的作用是相同的,您可以亲自尝试一下。换言之,只要您知道某个选择器中的内容究竟是如何得出的,并确保某种写法的选择器所选择的内容一定是您想要修改的内容,那么您可以使用任何写法。

但也有例外:假如其他地方也出现了拥有相同名称的 class,那么选择器单纯选择 class 的名称会对复数个对象起作用,其中可能也包括了您不想修改的部分。

但同时,只要利用好这个机制,直接选择 class 的名称可以帮助您快速地给多个相似的元素赋予格式。


.description {
    font-family: 'Hiragino Sans GB';
    font-style: italic;
}

明白了 classid 在填写选择器时起到的作用后,我们可以省下不少心力了。第三个选择器选择了 .description,而 . 代表的是 class="",所以这个选择器选择的是一个标签里有 class="description" 的元素。

让我们在源代码里寻找一下:

html 8

它出现在了一个 <p> 标签的属性里,而这个标签内的文本是「博客描述」。通过观察博客界面,我们发现这正好是博客的简介所在的位置。也就是说,这个选择器对应的元素就是博客简介的文本


.pinned {
    font-family: 'Hiragino Sans GB';
    font-size: 18px;
    color: white;
    background-color: #191970;
}

.post-title {
    font-family: 'Microsoft Yahei';
    font-size: 18px;
    font-weight: bold;
}

接下来的两个选择器与上一个类似,都是选择了某个 class,我们来寻找一下 class="pinned"class="post-title"

html 9

它们所在的标签包含的文本分别是「置顶」和「文章标题」,我们可以从博客界面中看出这是置顶标题博客主页的文章标题所对应的内容,因此这两个选择器就是用来分别修改这两个元素的。

如果您的主页已经有了复数个置顶或者文章,那么您可以发现每个置顶所在的 <a> 标签都有 class="pinned" 这一属性,或每一篇文章的标题所在的 <h2> 标签都有 class="post-title" 这个属性。这也是为什么选择 class 的名称可以快速给多个同类型的元素赋予格式的原因。


#title {
    color: midnightblue;
}

这个选择器的符号变成了 id#,但是您会发现您无法在当前的源代码里找到 id="title"(您可以在源代码界面用 Ctrl+F 搜索看看)。 我们查看一下这几行代码的注释,可以发现它所修改的是文章页面的文章标题。没错,同样是文章标题,它在单独的文章页面和整个博客的主页里需要不一样的选择器。我们可以打开某篇文章界面的 HTML 源代码进行查证。

html 10

我们最后在文章页面的 HTML 代码中成功找到了 id="title":它同样也是某个 <h2> 标签的属性,而这个标签内的文字正是「文章标题」。 同样的文字,根据其出现的页面不同,需要用到的选择器也可能有所区别。当然,也有使用的选择器不会根据页面变化而变化的元素,比如我们之前修改的博客标题文本和置顶标题在主页和文章页面使用的选择器就是一样的。


time {
    font-family: 'AXIS Std';
    font-size: 13px !important;
    margin-bottom: 1em;
}

接下来的选择器又变成了最普通的标签选择器,选择的对象是 <time> 标签。想必根据标签名字也可以猜到,这个标签下的对象是时间。而事实确实与猜测相吻合:

html 11

这个选择器修改的对象是文章标题下方的发布日期


article p {
    font-family: 'SimSun';
    font-size: 15px;
    color: black;
}

同样是标签选择器,但是从中间的空格可以看出这个选择器里的标签名字存在递进的关系。我们可以在代码中找到它们:

html 12

这个选择器修改的是文章正文的普通文本的格式。

您可以发现,在这串代码中,<article> 之后、<p> 之前还有一个尚未结束<div> 标签,但是我们使用的选择器略过了它。这是因为 <p> 标签并没有出现在 <div> 标签之外的其他地方,也就是说就算我们只选择了 article p,事实上选择器所作用于的元素也仅限于 <div> 标签内的 <p> 标签,因此多选择一个 div 就显得可有可无。

这个原因也同样能解释为什么我们不在最开头选择 <body> 标签。上一个选择器只选择 time 也正因如此。

但是如果您对于阅读 HTML 代码和编写 CSS 还不够熟练,为了保险起见,还是建议您按照标签的出现和递进顺序一个一个将标签或属性名称填写在选择器中。


hr {
    border-top: 2px solid midnightblue;
} 

最后一个选择器选择了 <hr> 标签,这个标签代表的意思正是分割线这一元素。所以选择 hr 也代表对页面的所有分割线赋予格式。

同理,您可以直接用 h1 {}h6 {} 来给文章内使用的标题赋予格式。


排查问题

希望您通过以上这些例子能够掌握到如何通过阅读源代码来决定想要设置格式的元素所需的选择器内容。 写代码除了理论以外最重要的是亲自实践,即使是 HTML/CSS 这样的非编程语言也是如此。有时您可能会发现您写好的 CSS 代码似乎并没有起作用,这可能是以下几个原因中的一个或多个所导致的:

  1. 您的选择器缺少了某些必要的标签或属性,请再仔细阅读一下 HTML 源代码来看看是否有遗漏;
  2. 有其它格式声明优先于您写的格式声明,您可以通过在声明结尾的分号前空格并加上 !important 来看看是否能解决问题;
  3. 您的格式声明填写有误,需要搜索该声明的属性的相关内容来看看是否是属性数值或是属性本身的编写有问题。

感谢您的阅览。 下一篇教程将会介绍文字相关的格式声明的属性。


Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.