Skip to content

This topic was updated for the Orchard 1.0 release.

本主题已针对Orchard 1.0版本进行了更新。

This article presents recommendations for coding and formatting HTML markup and CSS that will help you keep your themes organized.

本文介绍了对HTML标记和CSS进行编码和格式化的建议，这些建议将帮助您保持主题的有序性。

General Guidelines

一般准则

This section contains guidelines for a number of design topics, such as browser testing, file names, HTML elements, JavaScript and images.

本节包含许多设计主题的指南，例如浏览器测试，文件名，HTML元素，JavaScript和图像。

Browser Testing

浏览器测试

You should test all templates using the latest versions of the following browsers. For older versions of browsers, such as Internet Explorer 6, you should ensure that your site and templates remain functional, but don't attempt to resolve rendering issue that do not affect the user's ability to consume the content.

您应该使用以下浏览器的最新版本测试所有模板。对于旧版本的浏览器（如Internet Explorer 6），应确保您的站点和模板保持正常运行，但不要尝试解决不影响用户使用内容的渲染问题。

  • Microsoft Internet Explorer

  • Microsoft Internet Explorer *

  • Google Chrome

  • 谷歌浏览器 *

  • Mozilla Firefox

  • 火狐浏览器 *

  • Apple Safari

  • Apple Safari *

  • Opera

  • 歌剧 *

File Names

文件名

The following lists file naming rules followed by the Orchard development team.

以下列出了Orchard开发团队遵循的文件命名规则。

  • Include files use an underscore (_) as a prefix

  • 包含文件使用下划线（_）作为前缀 *

  • .cshtml, .vbhtml, HTML, and CSS files should be named using camel casing.

  • 应使用驼峰套管命名_.cshtml ，。vbhtml_，HTML和CSS文件。 *

HTML doctype Directive

HTML doctype指令

Use the HTML5 doctype declaration, because it lets you use HTML5 markup but is also compatible with existing markup that complies to HTML 4.01 and XHTML.

使用HTML5doctype声明，因为它允许您使用HTML5标记，但也兼容符合HTML 4.01和XHTML的现有标记。 

<!DOCTYPE html>

HTML Elements

HTML元素

Orchard assumes the use of HTML5. Although you are not required to use HTML5, it is a strong recommendation. One reason is that templates from different modules and parent themes might be used on a single page, where there is only one doctype declaration.

Orchard假定使用HTML5。虽然您不需要使用HTML5，但这是一个强烈的建议。一个原因是来自不同模块和父主题的模板可能在单个页面上使用，其中只有一个doctype声明。

The following tables lists some commonly used HTML5 elements that provide for better structure in web pages than earlier versions of HTML did. For more information about HTML5, see the W3C article HTML5 difference from HTML4.

下表列出了一些常用的HTML5元素，这些元素提供了比早期版本的HTML更好的网页结构。有关HTML5的更多信息，请参阅W3C文章[HTML5与HTML4的区别]（http://dev.w3.org/html5/html4-differences/）。

  • <section>

  • <节> *

  • <article>

  • <文章> *

  • <aside>

  • <预留> *

  • <hgroup>

  • <hgroup> *

  • <header>

  • <报头> *

  • <footer>

  • <页脚> *

  • <nav>

  • <NAV> *

  • <figure>

  • <图> *

  • <figcaption>

  • <figcaption> *

Example:

例： 

<figure>

      <video src="tgif.vid"></video>

      <figcaption>Example</figcaption>

</figure>

If you are using any of these new elements, in order to avoid breaking script libraries in older versions of Internet Explorer, we recommend that you use the workaround described in Styling New HTML5 Elements.

如果您使用这些新元素中的任何一个，为了避免破坏旧版Internet Explorer中的脚本库，我们建议您使用[样式化新HTML5元素]中描述的解决方法（http://blogs.msdn.com/ b /即/存档/ 2010/06/10 /相同的标记-说明-QUOT-JScript的版本-QUOT和造型新-HTML5-elements.aspx）。

JavaScript and jQuery

JavaScript和jQuery

Your web pages should work even if JavaScript is disabled in the browser. Scripts should be used only to enhance the experience of the page, which is referred to as progressive enhancement. For more information, see Progressive Enhancement with JavaScript.

即使在浏览器中禁用了JavaScript，您的网页也应该有效。脚本应该仅用于增强页面的体验，这被称为_progressive enhancement_。有关更多信息，请参阅[使用JavaScript进行渐进增强]（http://www.alistapart.com/articles/progressiveenhancementwithjavascript/）。

Orchard has jQuery built in. The Orchard team has standardized on jQuery as its JavaScript framework.

Orchard内置了jQuery.Orchard团队将jQuery标准化为JavaScript框架。

Images

图片

Use the appropriate image format for the scenario, as described in the following list:

对场景使用适当的图像格式，如以下列表中所述：

  • Photos and gradients should use the jpeg format.

  • 照片和渐变应使用_jpeg_格式。 *

  • Graphical elements should use the png format.

  • 图形元素应使用_png_格式。 *

  • Use alpha transparency via the 24-bit png format.

  • 通过_24位png_格式使用alpha透明度。 *

  • Use sprites where possible to improve load time and to reduce the number of requests made to the server.

  • 尽可能使用精灵来缩短加载时间并减少对服务器的请求数量。 *

For more information about sprites, see CSS Sprites: Image Slicing's Kiss of Death.

有关精灵的更多信息，请参阅[CSS Sprites：图像切片的死亡之吻]（http://www.alistapart.com/articles/sprites）。

Accessibility

无障碍

Your HTML and CSS templates should pass the accessibility tests provided by Wave the web accessibility evaluation tool. Your templates should satisfy the requirements of WCAG 2.0 level AA.

您的HTML和CSS模板应通过[Wave the web accessibility evaluation tool]（http://wave.webaim.org/）提供的辅助功能测试。您的模板应满足WCAG 2.0级AA的要求。

Markup Validation

标记验证

We recommend that you always strive for standards compliance. Ensure that your templates pass validation by using the W3C Markup Validation Service.

我们建议您始终致力于符合标准。使用[W3C标记验证服务]（http://validator.w3.org/）确保模板通过验证。

CSS Organization

CSS组织

To allow users to easily find and read styles for modification, we recommend that you standardize on a structure and coding format. The organizational structure that is introduced in this section is used by the Orchard team.

为了使用户能够轻松查找和读取样式以进行修改，我们建议您对结构和编码格式进行标准化。 Orchard团队使用本节中介绍的组织结构。

To help you abide by the CSS standards, keep the following guidelines in mind:

为帮助您遵守CSS标准，请牢记以下准则：

  • Do not use workarounds like conditional if statements in stylesheets.

  • 不要在样式表中使用类似条件if语句的变通办法。 *

  • CSS markup should be valid CSS 2.1 or higher. You can also use optional progressively enhanced CSS 3 markup.

  • CSS标记应该是有效的CSS 2.1或更高版本。您还可以使用可选的逐步增强的CSS 3标记。 *

CSS Format Rules

CSS格式规则

The following list contains guidelines for formatting CSS markup.

以下列表包含格式化CSS标记的准则。

  • Use four spaces instead of tabs for indentation. (This is the default setting in Visual Studio.)

  • 使用四个空格而不是制表符进行缩进。 （这是Visual Studio中的默认设置。） *

  • Use a hyphen (-) between words in selectors.

  • 在选择器中的单词之间使用连字符（ - ）。 *

  • Remove unused CSS selections (except for reset styles).

  • 删除未使用的CSS选择（重置样式除外）。 *

  • Use lowercase for color definitions.

  • 使用小写字母表示颜色定义。 *

  • Use shorthand notation where possible, such as for color codes; use collapsed properties when practical.

  • 尽可能使用简写表示法，例如颜色代码;实际使用折叠属性。 *

  • Use IDs instead of classes where possible. Using IDs for template elements makes it easy to identify the important selectors in CSS and HTML.

  • 尽可能使用ID而不是类。使用模板元素的ID可以轻松识别CSS和HTML中的重要选择器。 *

  • Use one line per property definition.

  • 每个属性定义使用一行。 *

  • Use "tab-nested" selectors. For more information, see CSS DIY Organization.

  • 使用“tab-nested”选择器。有关更多信息，请参阅[CSS DIY组织]（http://net.tutsplus.com/tutorials/html-css-techniques/css-diy-organization/）。 *

CSS File Structure

CSS文件结构

The recommended CSS structure was partly adapted from suggestions provided by Dan Cederholm of SimpleBits. This structure resides in the Style.css file. The file comprises the following sections:

推荐的CSS结构部分改编自SimpleBits的Dan Cederholm提供的建议。此结构驻留在Style.css文件中。该文件包含以下部分：

  1. Info - A commented section for the theme that the style is associated with, the author, website, and any copyright information.

1. 信息 - 与风格相关的主题，作者，网站和任何版权信息的评论部分。

  1. Color Palette - A commented section that defines the overall color scheme for the theme. It provides a single place to define colors and makes it easy for users to find, replace, and modify color definitions.

2. 调色板 - 一个注释部分，定义主题的整体颜色方案。它提供了一个定义颜色的位置，使用户可以轻松查找，替换和修改颜色定义。

  1. Reset - Definitions that are used to normalize settings across browsers.

3. 重置 - 用于规范浏览器设置的定义。

  1. Clearing Floats - Definitions that are used to clear parent items that contain children that float.

4. 清除浮动 - 用于清除包含浮动子项的父项的定义。

  1. Typography - (Optional) Contains CSS code or a reference to a typography reset framework (such as YUI Fonts) that normalizes font sizes across browsers.

5. 排版 - （可选）包含CSS代码或对排版重置框架（如YUI字体）的引用，用于规范浏览器的字体大小。

  1. General - Definitions for global HTML elements such as <body>, headings, links, and any other elements where you want to apply a different style and override the reset. This can include styles for elements like <ul>, <p>, etc.

6. 常规 - 全局HTML元素的定义，例如<body>，标题，链接以及要应用不同样式并覆盖重置的任何其他元素。这可以包括像<ul>，<p>等元素的样式。

  1. Structure - Layout definitions for major structural components of your templates, such as containers, headers, footers, etc. This section can be subdivided with comments into sections such as navigation, header, etc.

7. 结构 - 模板的主要结构组件的布局定义，例如容器，页眉，页脚等。此部分可以通过注释细分为导航，页眉等部分。

  1. Main - Main styles related to your theme. This can contain definitions for blog posts, tags, etc.

8. 主要 - 与您的主题相关的主要风格。这可以包含博客文章，标签等的定义。

  1. Secondary - Secondary styles related to your theme for things like stylized text, errors, etc.

9. 次要 - 与您的主题相关的次要样式，例如程式化文本，错误等。

  1. Forms - All styling related to form items.

10. 表格 - 与表格项目相关的所有样式。

  1. Misc - Miscellaneous definitions that are needed to render the look of your template.

11. 杂项 - 呈现模板外观所需的其他定义。

The following example shows this structure applied to a CSS file.

以下示例显示了应用于CSS文件的此结构。 

/*

Theme: My Sample Theme

Author:

Copyright:

*/



/* Colors Palette

Background: #fff

Text: #434343

Main Accent: #999

Links: #443444

*/



/* Reset

***************************************************************/

YOUR CSS RESET CODE GOES HERE



/* Clearing Float

***************************************************************/

group:after {

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

}



.group {display: inline-block;}  /* for IE/Mac */



/* Typography (Optional)

***************************************************************/

@import url(http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css);





/* General

***************************************************************/

body {}



a {}

a:link {}

a:hover{}

a:visited{}



h1,h2,h3,h4,h5,h6 {}



/* Structure

***************************************************************/

#container {}



#header {}

       #logo {}



#footer {}



/* Main

***************************************************************/



/* Secondary

***************************************************************/



/* Forms

***************************************************************/



/* Misc

***************************************************************/

CSS Reset

CSS重置

You should always use a reset to normalize styling between browsers and then apply default markup manually. For more information about resets, see Reset Reloaded. You can optionally use a reset library.

您应始终使用重置来规范浏览器之间的样式，然后手动应用默认标记。有关重置的更多信息，请参阅[重置重置]（http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/）。您可以选择使用重置库。

To reset a global style

重置全局样式

  1. Apply the reset.

1.应用重置。

  1. Apply a default style to any global element (defined in the general section).

2.将默认样式应用于任何全局元素（在常规部分中定义）。

Example:

例： 

p {

   padding: 0 10px;

   line-height: 150%;

}

Typography

活版印刷

Use relative font sizes and set a default base size to ensure consistent font sizes across browsers, and to allow browser users to increase font size to enhance readability. However, remember that relative sizes are cumulative. For example, if you set the size of div tags to 2em, then you then embed a <div> element inside another <div> element and another inside that, you'll end up with an effective setting of 8em for the innermost <div> element.

使用相对字体大小并设置默认基本大小以确保跨浏览器的字体大小一致，并允许浏览器用户增加字体大小以增强可读性。但请记住，相对大小是累积的。例如，如果你将div标签的大小设置为2em，那么你然后在另一个<div>元素中嵌入一个<div>元素而在另一个里面嵌入一个<div>元素，你最终会得到一个有效的设置8em用于最里面的<div>元素。

The following list shows the methods by which you can enhance readability.

以下列表显示了可以增强可读性的方法。

  • (Method 1) Use ems and set the base font size on the <body> element. The default size for medium text in all modern browsers is 16px. First, reduce this size for the entire document by setting font size in the <body> element to 62.5%. You can then think in pixels but still set sizes in terms of ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc. For more information, see How to size text using ems.

  • （方法1）使用ems并在<body>元素上设置基本字体大小。所有现代浏览器中媒体文本的默认大小为“16px”。首先，通过将<body>元素中的字体大小设置为62.5％来减小整个文档的大小。然后你可以用像素来思考，但仍然用ems来设置大小：1em是10px，0.8em是8px，1.6em是16px等。有关更多信息，请参阅[如何使用ems调整文本大小]（http：// clagnut .COM /博客/ 348 /）。 *

  • (Method 2) Use a framework reset such as YUI 2 Fonts CSS.

  • （方法2）使用框架重置，例如[YUI 2 Fonts CSS]（http://developer.yahoo.com/yui/fonts/）。 *

Clearing Floats

清除浮动

There are two methods you can use to clear floats without adding markup.

您可以使用两种方法清除浮动而不添加标记。

  • (Method 1) Us the position if everything method with semantic modification as suggested by SimpleBits. This method involves applying a clear property to any parent element that contains items that you want to float.

    The SimpleBits modification changes the class name to group, which adds semantic value because you often float related items as a group.

  • （方法1）使用[SimpleBits]（http://simplebits.com/）建议的_position if everything_方法进行语义修改。此方法涉及将clear属性应用于包含要浮动的项的任何父元素。

    SimpleBits修改将类名更改为group，这会添加语义值，因为您经常浮动相关项目作为一个组。     *

  • (Method 2) Apply the overflow:auto property to the parent container.

    Certain combinations of margin and padding can force internal scrollbars. If you can't tweak things to remove the scrollbars, you can try using overflow:hidden, which has virtually the same effect without the scrollbars. The only drawback of hidden seems to be that some images are cropped if they're placed lower in the page.

  • （方法2）将overflow：auto属性应用于父容器。

    边距和填充的某些组合可以强制内部滚动条。如果您无法调整内容以删除滚动条，您可以尝试使用overflow：hidden，它在没有滚动条的情况下几乎具有相同的效果。 “隐藏”的唯一缺点似乎是，如果某些图像在页面中放置较低，则会被裁剪。     *

Forms

形式

Mark up form elements using the "ordered-list" method. This method describes form elements as a sequential list of inputs that the user needs to fill in. It provides both semantic meaning and order to the form, which aids accessibility. When forms are rendered without style sheets, they are clearly labeled in sequential order and have a count associated with them. The ordered list provides additional information for some screen readers that announce the number of list items when they first encounter the list.

使用“ordered-list”方法标记表单元素。此方法将表单元素描述为用户需要填写的输入的顺序列表。它为表单提供语义含义和顺序，这有助于可访问性。在没有样式表的情况下呈现表单时，它们会按顺序清晰标记并具有与之关联的计数。有序列表为某些屏幕阅读器提供了附加信息，这些屏幕阅读器在首次遇到列表时会公布列表项的数量。 

<fieldset>

  <legend>Delivery Details</legend>

  <ol>

    <li>

      <label for="name">Name<em>*</em></label>

      <input id="name" />

    </li>

    <li>

      <label for="address1">Address<em>*</em></label>

      <input id="address1" />

    </li>

    <li>

      <label for="town-city">Town/City</label>

      <input id="town-city" />

    </li>

    <li>

      <fieldset>

        <legend>Is this address also your invoice address?<em>*</em></legend>

        <label><input type="radio" name="invoice-address" /> Yes</label>

        <label><input type="radio" name="invoice-address" /> No</label>

      </fieldset>

    </li>

  </ol>

</fieldset>

Progressive Enhancements

渐进增强

Base your designs on modern browsers that implement up-to-date patterns, but without handicapping the experience of older browsers. If you feel it is important to the design, use known CSS techniques such as sliding door to achieve the desired effect.

将您的设计基于实现最新模式的现代浏览器，但不会妨碍旧浏览器的体验。如果您觉得它对设计很重要，请使用已知的CSS技术（如滑动门）来达到预期效果。

  1. Border radius

1.边界半径

  1. Multiple background images

2.多个背景图像

  1. Gradient

3.渐变

  1. Transparency (RGBA and opacity)

4.透明度（RGBA和不透明度）

  1. Shadows

5.阴影

  1. Text-Shadows

6.文字阴影