zencart css 文件加载规则

The CSS files are sent to the browser in this order: (and alphabetically within each case of more than one match):

             style*.css   // are always loaded and at least ONE should contain site-wide properties.【总是加载，作用全站】
language_stylesheet.css   // changes to ALL pages, when that language is used【只作用于某个语言的样式】
         index_home.css   // specifically affects the home page only【只影响首页】
          page_name.css   // changes to one page, ie: index.php?main_page=page_name【具体页面，比如index.php?main_page=contact_us，则contact_us.css】
 language_page_name.css   // changes to one page, when that language is used
            c_??_??.css   // changes to all info pages in a category
   language_c_??_??.css   // changes to all info pages in a category, when that language is used
   c_??_??_children.css   // changes for all children of the specified parent. Also supports a language prefix.
               m_??.css   // changes to a manufacturer's listing page
      language_m_??.css   // changes to a manufacturer's listing page, when that language is used
               p_??.css   // changes to a product's info page【具体产品页】
      language_p_??.css   // changes to a product's info page, when that language is used
             print*.css   // printer-friendly global usage site-wide changes for printing-only
             page##.css   // EZ-Page -- css specific to a numbered EZ-page ... ie:  page21.css would be for EZ-Page number 21 ... ie: for the URL index.php?main_page=page&id=21

The 'stylesheet.css' is expected to load first and should contain the bulk of your CSS selectors. Each file loaded takes priority over previously loaded file(s). To save loading time, only new selectors or

selectors whose properties you wish to change should be in the optional CSS files. You can have different overrides for the same page, in different languages, because the two would never be called at the

same time.

If someone selected the French language on your site, the 'french_stylesheet.css' would also be loaded. It should only contain the site-wide changes you want to make to 'stylesheet.css'. For example, change

a 'background-image' for your French customers.

If someone went to any of the other pages, that page's CSS file would be loaded. Possibly you want different 'background-image' & 'background-color' on each of 'page_x' pages. Possibly you do not want a

border around '.plainBox' most of the time, but on a couple of pages you do... and on one of those pages you want it in black and the other in red.

Possibly you created a NEW tag and did a <span class="newtag"> in your Privacy Statement. It is defined in only one CSS file, 'german_privacy.css' as '.newtag { text-transform: uppercase }' Because, in

Germany, that phrase must be in all CAPS, but not in other countries.

Use your CSS files and the standard tags as much as possible, just change their properties when needed. If possible, DON'T HACK the core code. Use your CSS files to do the work for you. When the style coding

has been removed from the ZenCart code and people have to decide if they want to go without the upgrade ~or~ undo all their hacks and finally learn about CSS... your site will still be up and running.

Additional information is contained in the Zen Cart wiki.


Adapted from ideas presented by
Juxi Zoza
03/15/05

【翻译】
Zen Cart的stylesheet是放在这个文件夹里面的:/includes/templates/YOUR_TEMPLATE/css
接下来我们看一下如何使用Zen Cart内置的功能实现为某些页面引入特定的stylesheets.
CSS文件将按以下顺序发送到浏览器:(如果存在多个属于相同情况的css，它们将会按字母顺序被发送到浏览器，举例来说，如果同时存在stylea.css和styleb.css，那么Zen Cart 将按stylea.css，styleb.css的顺序发送css文件到浏览

器):
style*.css // 这样的css文件会在所有页面被加载，一般是把网站大部分的css写在stylesheet.css里面
language_stylesheet.css // 当网站使用的语言是此css文件指定的语言时，该css文件对所有页面有效。例如english_stylesheet.css在网站使用的语言是英文时将对网站的所有页面有效。
page_name.css // 仅在网站当前页面是page_name时,这个css文件才起作用。比如login.css只在登录页面起作用。 (如果你想让你的css只在首页起作用，那你就用index_home.css)
language_page_name.css // 当网站使用的语言是这个css文件指定的语言,并且网站当前页面是page_name时，这个css文件将被调用。
c_??.css // 将在目录页面被调用
language_c_??.css // 当网站使用的语言是这个css文件指定的语言时，这个css文件将在目录页面被调用
m_??.css // 将在制造商列表页面被调用
language_m_??.css // 当网站使用的语言是这个css文件指定的语言时，这个css文件将在制造商列表被调用
p_??.css // 将在某一特定的产品页面被调用。举个例子,p_1.css,这个文件只对product_id为1的产品页起作用
language_p_??.css // 当网站使用的语言是这个css文件指定的语言时，这个css文件将在产品页面被调用
print*.css // 只有在用打印机打印页面时，这个css文件才会起作用。