你可以通过CSS（级联样式表）来更改 MediaWiki 网站上文本的大小、颜色和字体样式。为此，你不必编辑任何文件的代码。它可以通过编辑页面MediaWiki:Common.css（例如yourdomain.com/index.php/MediaWiki:Common.css）并在此添加代码来在网站的前端执行。如果代码中指定的元素与主题（Skin）之一相同，则此页面上的更改会影响所有皮肤。还有一个单独的页面，用于仅修改特定的皮肤（例如MediaWiki:Vector.css针对Vector主题）；使用外观的CSS页面，你可以确保所做的更改不会应用于其他外观。有关此的更多常规信息，请查看有关如何在MediaWiki中进行CSS更改的文章。
在本文中，我们将集中于如何设置文本样式。所有主题的代码本身通常是相同的。你只需更改要受影响的元素的ID。例如，它可以是页面的全部内容，也可以是标题等。例如，文本的颜色更改为：
element { color: #5a7425 ; }
文字大小：
element { font-size: 12px; }
字体系列/样式，包括：
element { font-family: "Courier New"; }
如果字体系列的名称包含多个单词，则应将其用引号引起来。
你可以将两个或多个属性组合为一段代码。例如：
element { color: #5a7425; font-size: 12px; font-family: Verdana; }
当然，必须将元素替换为将要受影响的实际标记、类或ID。这些值也仅是示例。这里的大小设置为12像素，字体系列为Verdana。你可以将它们替换为所需的任何东西。对于颜色，通常使用相应的十六进制值。在我们的示例中，其＃5a7425是绿色阴影。在不同的地方，你可以检查不同颜色阴影的十六进制值。w3schools.com网站上的颜色选择器是一个非常有用的工具；Wikipedia中有关网页颜色的页面也非常有用。根据要更改其样式的确切元素（例如，菜单标题），其ID在不同的外观中可能会有所不同。在这里，我们将列出MediaWiki内置的某些主题ID。在每个示例中，我们将使用相同的值；你可以根据需要更改它们。在大多数示例中，我们还使用了所有三个属性（用于颜色，大小，字体系列），但是你可以删除其中任何一个，而仅添加所需的属性。
要记住的一点是，当你更改某些文本元素的大小时，这可能会更改页面的布局。例如，在某些主题中，对于菜单链接，页面选项卡等而言，将字体大小增加太多可能会更改容纳这些元素的容器的大小，从而更改整个布局。
要注意的另一件事是，链接的颜色是专门设置的，并且不受本文建议的代码更改的影响。链接的颜色用不同的代码更改（这意味着带有代码的方括号前面的标签和ID是不同的）。整篇文章中都对此有所提醒。这就是为什么在某些仅影响链接的示例中，从代码中删除了color属性的原因。
更改所有页面文本元素的字体、大小和颜色
无论皮肤如何，都可以通过指定body标签的样式来设置屏幕上出现的所有文本元素的样式：
body { color: #5a7425; font-size: 12px; font-family: "Courier New"; }
这不仅影响文章的内容（包括标题），还影响屏幕上的菜单和其他文本。
但是请注意，实际上这不会影响页面上的所有文本元素，或者至少并非所有属性都会起作用。例如，对于屏幕上的所有或大多数文本元素，字体系列和大小可能会更改，但是颜色很可能不会更改。请注意，大小将针对不同的元素按比例进行更改，这意味着并非所有内容都将具有相同的大小，但比如，标题仍将大于内容文本。
每个用其自己的值显式配置的元素都不会受到页面正文的常规更改的影响。例如，可以将所有链接的文本专门设置为蓝色，而将文章的文本设置为灰色。
Vector和MonoBook
两种外观中，不同页面元素的大多数ID都相同。只有很少的一种可以与另一种相互配合。如果在此列表中，代码仅适用于其中一种外观，则将明确提及。如果没有特别说明，则ID可以同时使用两种外观。
这些示例也可以与其他皮肤一起使用，但这取决于特定的主题。#content { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 通常，这会影响文章/页面的整个内容（例如文本，标题等），但实际上，某些元素不会受到影响，至少不会影响代码中的每个属性。例如，标题的颜色不变。大小按比例更改（例如，标题保持大于内容文本）。#content p { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 这会影响文章正文中的所有段落。标题和章节标题以及诸如编号或项目符号列表之类的元素均不受影响。#content h1 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 影响页面标题。章节标题/副标题不受影响。#content h2 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 影响所有第二级子标题。这也会影响目录的目录标签。为了避免这种情况，并且仅更改第2级标题的样式，而不会影响目录的标签，可以使用代码#content h2 .mw-headline { color: #5a7425; font-size: 12px; font-family: "Courier New"; }。
如你所知，你可以将副标题添加到页面。它们可以是不同的级别。作为页面标题的直接子标题的部分标题为2级。例如，子标题的子标题为3级。你可以通过更改代码中的数字来设置子标题的各自级别；例如，#content h4将影响节标题4。#mw-panel .portal { font-size: 12px; font-family: "Courier New"; } - 仅适用于Vector。这将更改左侧的字体大小和菜单族。这些是“工具”菜单以及具有“最近的更改”和“随机”页面链接的菜单。我们没有故意包含color属性，因为这些菜单中的条目都是链接，它们不会受到此代码设置的颜色的影响。所有链接的颜色都用不同的代码专门设置。#p-navigation { font-size: 12px; font-family: "Courier New"; } - 影响左侧的导航菜单。该菜单包含链接主页，最近更改，随机页面，帮助。但是请注意，更改字体大小也会更改菜单块的大小，这反过来会影响页面的布局。对于MonoBook外观，此代码会影响菜单的标题和链接。在“Vector”外观中，此菜单没有标签，因此仅菜单链接会受到影响。#p-navigation h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 仅适用于MonoBook。更改导航菜单标题的颜色，大小和字体系列，而不影响菜单条目。#p-navigation .pBody { font-size: 12px; font-family: "Courier New"; } - 仅适用于MonoBook。仅更改导航菜单的菜单项的字体大小和字体，而不影响菜单的标题。#p-tb { font-size: 12px; font-family: "Courier New"; } - 影响左栏中的“工具”菜单。那是带有链接的菜单此处链接，相关更改，特殊页面等。菜单标签和菜单链接会受到影响。#mw-panel #p-tb h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 仅适用于Vector。这将仅更改“工具”菜单的标题/标签的颜色，大小和字体系列。#p-tb h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 仅适用于MonoBook。仅影响“工具”菜单标签的颜色，大小和字体系列（菜单项不受影响）。如果此代码与Vector外观一起使用，则只会影响“工具”菜单标题的字体系列；若要使用Vector外观获得更好的结果，请改用此列表中的先前代码。#p-tb .body { font-size: 12px; font-family: "Courier New"; } - 仅适用于Vector。仅更改“工具”菜单中菜单链接的字体大小和字体，而不更改菜单标签。#p-tb .pBody { font-size: 12px; font-family: "Courier New"; } - 仅适用于MonoBook。在“工具”菜单中更改字体大小和菜单链接的族，而不会影响菜单的标题。#p-search { font-size: 12px; font-family: "Courier New"; } - -影响搜索框。在“Vector”主题中，它只是右上角的一个文本字段；没有文本会受到影响，更改字体大小将影响文本字段的大小。在MonoBook中，这是左列中的一个块。唯一的文本是块的标题，而按钮Go和Search中的文本。更改字体大小不仅会影响块的标题，还会影响按钮和文本字段以及整个块的大小。使用此ID设置字体颜色不会影响此块中的任何文本，这就是为什么我们没有在示例中包含它的原因。#p-search h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 仅适用于MonoBook。仅更改搜索框标题的字体颜色，大小和家族。块本身的大小不受影响#left-navigation { font-size: 12px; font-family: "Courier New"; } - 仅适用于Vector。这将更改左上方页面标签的字体大小和样式。这些是“页面”和“讨论”选项卡。由于它们是链接，因此不受此代码指定的颜色更改的影响。#right-navigation { font-size: 12px; font-family: "Courier New"; } - 仅适用于Vector。更改右上角页面标签的文本的大小和字体系列（例如，读取，编辑，查看历史记录等）。#p-cactions .pBody { font-size: 12px; font-family: "Courier New"; } - 仅适用于MonoBook。它会更改顶部所有页面选项卡的字体大小和样式（例如，消息，讨论，编辑，历史记录，删除，移动，监视/取消监视）。#p-personal { font-size: 12px; font-family: "Courier New"; } - 这将更改屏幕右上角用户链接的大小和字体样式。这些是为匿名用户创建帐户和登录的链接；登录用户的首选项，监视列表，贡献等。div#footer ul li { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 这会影响页脚中的文本。这是有关页面的最后修改的文本，有关网站上使用的许可证的信息，链接隐私政策，免责声明等。
Modern
以下是适用于Modern皮肤的列表。不同页面元素的许多ID与MonoBook或Vector外观的ID相同，但有些不同。#mw_header h1 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 更改页面标题的颜色，大小和样式。#mw_content { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 更改文章文本的颜色，大小和字体系列。它会影响内容中的所有元素：例如段落，节标题，列表等。#mw_content p { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 仅影响文章内容中的段落。本节标题，列表和其他此类元素不受影响。#mw_content h2 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 更改字体颜色、大小和副标题级别2的族。这些是节标题，它们是页面标题的层次结构直接子标题。请注意，此示例代码还将更改目录的Contents标题的样式。为了避免在方括号前面出现此问题，你可以改用#mw_content h2 .mw-headline。
你可以通过更改代码中的数字来更改子标题级别。例如，#mw_content h3将影响子标题的子标题。#mw_portlets { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 这会影响左栏中的所有菜单块（“导航”菜单，“搜索”块，“工具”菜单）。颜色更改将仅应用于菜单标题。菜单条目是链接，它们的颜色是用不同的代码设置和更改的。#p-navigation { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 样式更改仅应用于左列中的“导航”菜单——那是带有链接主页，最近更改等的菜单。标题和菜单链接都受到影响，但是颜色更改仅应用于标题。此代码不会更改菜单中链接的颜色。#p-navigation h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 仅更改导航菜单标题的字体颜色，大小和字体；菜单链接不受影响。#p-navigation .pBody { font-size: 12px; font-family: "Courier New"; } - 仅将更改应用于“导航”菜单中的链接，不包括菜单标题。#p-search { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 在左栏中更改“搜索”块的样式。唯一的文本是该块的标题，因此这是唯一受影响的内容。块中的“搜索”和“搜索”按钮不受影响。#p-tb { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 这只会将更改应用于左列的“工具”菜单。所做的更改将同时应用于菜单的标题和菜单链接（但是链接的颜色不会更改）。#p-tb h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 仅更改“工具”菜单标题的字体颜色，大小和字体。#p-tb .pBody { font-size: 12px; font-family: "Courier New"; } - 仅将样式更改应用于“工具”菜单中的链接，不包括菜单标题。#p-personal { font-size: 12px; font-family: "Courier New"; } - 这会更改页面顶部用户链接的样式。这些是位于页面标题正下方的链接。对于匿名用户，这些是创建帐户和登录的链接，对于已登录用户是：首选项，贡献等。如上所述，由于这些都是链接，因此这些代码不会受到颜色变化的影响，这样我们就从本示例中删除了color属性。#p-cactions .pBody { font-size: 12px; font-family: "Courier New"; } - 更改页面标签文本的样式（例如，讨论，编辑，历史记录，删除等）。#footer { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 影响页脚中文本的样式（例如，页面的最后修改，隐私权政策链接，免责声明链接等）。
Cologne Blue
#article p { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 这会影响文章文字的样式。标题，小节标题和其他一些元素（如编号/项目符号列表和表格）将不受影响。#article h1 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 更改页面标题的样式。#article h2 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 这会影响文章的章节标题。这些是2级子标题，这意味着它们在层次上是页面标题的直接子标题。请注意，这也会影响目录的目录标签。为避免这种情况，仅更改2级子标题的样式，请使用代码#article h2 .mw-headline { color: #5a7425; font-size: 12px; font-family: "Courier New"; }。
要更改3、4等级别的子标题的样式，只需使用相应的数字即可：例如，#article h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; }将影响子标题的子标题。#article p.tagline { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 这将更改标语的字体颜色，大小和系列。在Cologne Blue主题中，每个页面标题下都有一个标语。它具有“站点名称”形式，其中“站点名称”被替换为你的站点的实际名称。#sitetitle { font-size: 12px; font-family: "Courier New"; } - 这将更改位于左上角的网站标题的大小和字体样式。它也是一个链接，使用此特定代码设置其颜色将不起作用。#toplinks { font-size: 12px; font-family: "Courier New"; } - 这会影响屏幕右上角的链接。这些是顶部横幅中的链接（例如，主页，关于，帮助，常见问题，登录/注销）。#titlelinks { font-size: 12px; font-family: "Courier New"; } - 更改屏幕右上方的元链接的大小和样式。这些是顶部横幅下的链接（例如，隐私策略，关于，免责声明）。#quickbar { font-size: 12px; font-family: "Courier New"; } - 这将更改左列中所有菜单的字体大小和系列。这些是名为“浏览”，“编辑”，“本页”，“我的页面”，“工具”的菜单。但是请注意，菜单标题不会受到影响。#quickbar h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 这只会更改左侧列中所有菜单标题的颜色，大小和字体系列。#p-search h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 更改左侧“搜索”块标题的样式（标为“查找”）。这是该块中唯一要修改的文本元素。#p-navigation { font-size: 12px; font-family: "Courier New"; } - 影响左列中“浏览”菜单的样式。菜单标题不受影响。#p-navigation h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 仅影响左栏中的“浏览”菜单的标题。#p-cactions { font-size: 12px; font-family: "Courier New"; } - 更改左栏中“编辑”菜单的字体大小和字体。菜单标题不受影响。#p-cactions h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 仅更改左栏中“编辑”菜单标题的样式。#p-pageoptions { font-size: 12px; font-family: "Courier New"; } - 影响左栏中标有此菜单的菜单中条目的文本大小和样式。菜单标题不受影响。#p-pageoptions h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 改变外观只有菜单的标题的这个菜单。#p-personal { font-size: 12px; font-family: "Courier New"; } - 这会影响菜单中“我的页面”（左侧菜单中）的大小和样式，不包括菜单标题。#p-personal h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 仅设置“我的页面”菜单标题的颜色，大小和字体系列。#p-tb { font-size: 12px; font-family: "Courier New"; } - 更改左栏中菜单“工具”中的字体大小和链接族（不影响菜单标题）。#p-tb h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 仅更改“工具”菜单的标题。#footer { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 更改网站页脚区域中所有文本的样式。这些按钮包括用于对页面执行操作的按钮（例如，编辑此页面，讨论此页面，页面历史记录等），以及位于其下的页面信息（例如，最后修改，许可协议信息）。#footer-navigation { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 更改页脚中用于执行页面操作的所有按钮的样式；这还包括页面底部的“查找”块的标题。有关上次修改的页面信息和有关许可协议的信息不受影响。#footer-info { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - 仅影响页面底部的页脚信息。这是有关对该页面的最后修改以及该站点上使用的许可协议的信息。
更改每个命名空间的字体颜色、大小和类型
当你进行上述更改时，它们将影响MediaWiki网站上的所有页面。也可以仅将更改应用于特定命名空间中的所有页面，也可以对特定页面进行更改。
如果你不想更改所有名称空间的页面上的样式，而只想更改特定名称空间的页面上的样式，则可以使用前面几节中所示的相同代码；你只需在代码的开头添加具有特定名称空间的ID号的代码即可。例如，要仅从Main名称空间（即包含所有文章的名称空间）更改页面标题的Vector和MonoBooks外观的样式，可以将以下内容添加到页面MediaWiki:Common.css或CSS特定皮肤的页面（例如MediaWiki:Vector.css）：
.ns-0 #content h1 { color: #5a7425; font-size: 12px; font-family: "Courier New"; }
唯一的区别是，一开始你必须添加.ns-0，它指定更改应仅应用于ID号为0的名称空间中的页面。这就是Main名称空间。例如，如果添加以下代码：
.ns-2 #content h1 { color: #5a7425; font-size: 12px; font-family: "Courier New"; }
这会将更改应用于ID号为2的名称空间；那是包含个人用户页面的名称空间。
有关名称空间及其ID号的列表，请查看MediaWiki名称空间参考列表。
更改每一页的字体颜色，大小和字体
你可以添加仅适用于特定页面的文本样式更改。与更改所有页面上的样式相比，唯一的区别是，在代码的开头，您必须添加带有页面名称的代码。例如，以下内容将更改所有页面上的页面标题样式（使用Vector和MonoBook外观时）：
#content h1 { color: #5a7425; font-size: 12px; font-family: "Courier New"; }
如果只想更改名为Example Page的页面的标题样式，则必须使用以下代码：
body.page-Example_Page #content h1 { color: #5a7425; font-size: 12px; font-family: "Courier New"; }
要更改其他页面，只需在代码中替换页面名称即可。如果名称包含多个单词，请用下划线将其分开。这也适用于属于除Main名称空间之外的其他名称空间的页面的名称。如您所知，此类页面的全名由名称空间前缀和页面名称组成。在这些页面的URL地址中，名称空间前缀与页面名称之间用冒号分隔（例如Talk:Main_Page），而在CSS代码中使用此名称时，所有单词都应使用下划线分隔（例如Talk_Main_Page）。
