什么是 Joomla css类后缀

相信很多 Joomla 新同学看到过模块设置界面和菜单项设置界面有【模块CSS类后缀】和【页面CSS类】，如下图：

那么，它们究竟是什么？有什么作用？

这里说的CSS类是指CSS的class类选择器，关于什么是class类选择器请参考：http://www.w3school.com.cn/css/css_selector_class.asp，Joomla的这个功能允许我们在不修改源文件的情况下为模块和菜单添加额外的class，以方便我们灵活的控制网页的样式。

我们举个例子，还是用Joomla 3自带protostar模板来示范。系统默认的login模块，默认的HTML代码结构是这样的：

<div class="well ">
 <h3 class="page-header">Login Form</h3>
 <form action="/j32/index.php/news" method="post" id="login-form" class="form-inline">
 <div class="userdata">
 <div id="form-login-username" class="control-group">

我们在Login模块的设置界面的【高级】选项卡下面的【模块CSS类后缀】里面随便填个class，比如：red，保存，刷新，然后HTML结构就变成这样了：

<div class="well red">
 <h3 class="page-header">Login Form</h3>
 <form action="/j32/index.php/news" method="post" id="login-form" class="form-inline">
 <div class="userdata">
 <div id="form-login-username" class="control-group">

这样我们就可以在CSS文件里面使用.red或者.well.red来单独为login模块定义样式了。很多Joomla商业模板内置了很多样式，允许用户通过添加预设的class来激活。

同样的道理，Joomla的菜单项也是可以添加class的，不过要注意class前面有可能需要添加空格，因为不同的模板开发商可能会有不同的处理方式，只需要查看网页生成的class就知道是否需要添加空格了，毕竟well red和wellred是完全不同的。