维基教科书/类和样式笔记
这篇简短的文章旨在向刚开始使用维基教科书的作者传达有关样式的一些基本要点。系统样式表对作者不可编辑,但通过在页面中添加 HTML 和维基文本标签,仍然可以进行大量的 CSS 样式设置。
- 样式: 这些有时被称为 CSS 样式规则。它们与维基教科书的网页一起交付到浏览器。它们存储在称为样式表的文本文件中,但幸运的是,它们也可以直接在维基教科书的编辑区域中键入。
- 用户样式表是一个例外。那些熟悉这种浏览器使用方式的人可以修改维基网页的本地显示,但不能修改其他人可以查看的存储版本。
- HTML 标签和维基文本标签可以添加到作品的编辑区域。作者可以在他们的作品中使用维基文本或 HTML 标签;事实上,许多常用的 HTML 标签都可以使用。维基教科书大部分时间使用维基文本标记,但在发送到浏览器使用之前,它会被翻译成 HTML。
- 维基教科书作者仅限于内联样式。作者无法访问维基教科书系统的样式表。他们必须将自己的样式写入添加到其页面编辑区域的维基文本标签或 HTML 标签中。但是,如果他们知道已经存在的样式类,他们也可以在标签中声明它们以供使用。
- 模板也可以包含样式。模板是预先准备好的文本命名块,带或不带样式,可以使用特殊格式插入作者的作品中。涉及内联样式的复杂任务,尤其是那些经常使用的任务,可以从使用模板中获益。其他人制作的模板对所有人可用。
- 内联样式具有相当高的优先级。事实上,对于熟悉该主题的人来说,每个内联样式声明的特殊性是简单标签选择器的 1000 倍,是类块内声明的 100 倍,是 ID 块内声明的 10 倍。也就是说,除非其他样式带有!important标记,否则它们会覆盖其他作者样式。
- HTML 属性也是样式。在使用 CSS 样式之前,HTML 属性是网页样式的主要方法。HTML5 中许多属性不再可用,但仍有一些可用。由于它们未来的不确定性,维基教科书更喜欢使用 CSS 样式。
- 使用 CSS 样式参考。要找到在你的作品中应用的样式,最好的方法是参考列表。在维基教科书本身和万维网联盟 CSS 参考中都可以找到 CSS 样式的全面列表和教程。
所有内联样式,无论是写在 HTML 标签中还是维基文本中,都使用Style属性。如果不想造成混乱,元素中应该只有一个样式声明。
以下代码是为已添加段落标签的文本设置内联样式声明的典型代码。它在这里用于设置字体名称及其间距。
<p style="font-family:"Times New Roman"; line-height:1.75em; letter-spacing:0.1em;">The text</p>
关于样式声明的主要要点是这些
- 样式块总是等于属性style。
- 整个样式块用括号括起来。.
- 每个属性与其值之间用冒号隔开。
- 单个声明用分号隔开。.
- 包含空格的值本身必须用引号括起来。
- 分号后可以存在空格。
- 最后一个分号是可选的。.
- 可以列出任意数量的属性。
一些用维基文本编写的结构,例如表格,使用略微不同的格式,但样式部分相同。那些对这种格式感兴趣的人应该参考页面表格,以及 CSS 样式的参考列表和教程,请参考网站万维网联盟 CSS 参考.
本节介绍新的维基教科书编写者遇到的更常见样式任务的基础知识。鼓励编写者用他们有用的发现来补充本节。因此,在健康的写作环境中,它应该随着时间的推移而增加。
在维基教科书样式中,最常见的一项任务是更改文本的外观。编写者可以使用两种主要方法,添加段落标签然后进行样式设置,或者类似地使用span标签。两种方法都使用前面描述的样式表达式,并且下面显示了每个方法的布局。
<p style="font-size:16pt; color:blue;">This is one whole paragraph....</p>
<span style="letter-spacing:0.15em; font-family:Garamond;">This is text within a paragraph....</span>
span技术通常保留用于简短的文本字符串,而样式化的段落则具有更广泛的用途。段落是块元素的示例,因此它们可以有宽度、边距和其他尺寸设置。span 标签是内联元素的示例,没有块样式。
如果要设置多个段落的样式,最好是在作品周围添加一组div标签并对其进行样式设置,而不是对每个段落进行样式设置。然后,如果可能的话,样式将从分隔标签继承。样式的继承超出了本节的范围,但在CSS 级联 - 样式继承中有介绍。
当我们需要保留文本的精确布局时,可以将Pre标签添加到文本中。也就是说,浏览器必须被阻止进行自己的格式化。例如,编写诗歌、歌词、代码列表和其他各种用途。这种文本被称为预格式化文本,以区别于非格式化文本,这是通常的情况,浏览器在行尾换行。这些标签还具有停用表格等功能代码以及所有其他标签的效果。基本代码就是
<pre> The time has come the walrus said to speak of many things... </pre>
除了所有块元素通用的完整宽度、填充、边距和对齐集之外,pre 标签还可以通过 CSS 样式设置来产生不同的字体、边框和背景。请参见下面的示例,其中添加了一些样式。white-space属性确保长行被换行,而不是强制页面宽度变宽。
<pre style="border:1px solid lightgrey; font-family:Arial; white-space:pre-wrap; background:beige;"> Text goes here... </pre>
更多预格式化文本的方法可以在预格式化文本中找到。
样式最有用的一件事是将目录(TOC)移动到页面上的某个精确位置。当列表出现在页面的顶部时,这变得至关重要。为了避免不可避免的项目符号点变形,目录可以简单地移动到页面的右侧,而不是它习惯的左侧位置。
通常的做法是将目录放在表格单元格中,然后将表格移动到页面上适合的任何位置。选择表格而不是分隔的原因是表格可以轻松地改变大小,以适应目录宽度的变化。已经制作了利用这个想法的模板,包括 Template:Tocright。使用 HTML 标签,一般形式就是
<table>
<td>
__TOC__
</td>
</table>
注意目录包含用大写字母写,并且有四个下划线,两边各两个。
为了在页面的右侧定位,表格可以像下面这样进行样式设置
<table style="float:right; margin:10px;">
<td>
__TOC__
</td>
</table>
float 属性将表格放置在容器(页面)的右侧,并允许文本围绕它环绕。文本将开始环绕,从表格代码块之后的文本行开始。margin 属性设置表格容器和环绕文本之间的间距。
更多信息可以在标题的目录中找到。
页面可以被分割成多个部分。这在对大段文本应用样式以及创建较小的盒状形状时很有用。
封闭部分的大小并不重要。例如,页面中作者部分可以分成两部分,如下所示。其中一部分的背景颜色与其他部分不同。
<div style="background:beige; border:1px solid lightgrey; padding:10px;">
First page part...
</div>
<div style="background:linen; border:1px solid lightgrey; padding:10px;">
Second page part...
</div>
现有的文本和结构将在这些新的彩色容器内缩进 10 像素,大约是十分之一英寸,具体取决于屏幕分辨率。
遗憾的是,几乎没有有用的类可以为作者的工作增加趣味性。对于一组表格类,存在真正的需求;Wikitable 类的屈尊降贵实际上是不够的。这是网页大师需要改进类可用性的问题,因为其他人无法访问样式表修改。然而,从基本的表格样式长期存在来看,他们是否认为这些样式已经足够好了?
参见
- CSS 参考 : 有用的外部 CSS 参考列表
- 沙盒 : WikiBooks 沙盒
- 模板 : WikiBooks 模板制作 101
- Opera 12.16 中的样式呈现模式 : Opera 浏览器样式模式的描述。
- CSS 级联 : CSS 级联的基本解释。