MindTouch成功中心"></a>
    </div>
    <nav class=

CSS的指导方针

适用于:
所有办公产品版本
角色要求:
管理
在MindTouch环境中添加CSS (CSS3)和LESS CSS。

样式不正确或破坏代码的站点是不可逆转的,所有更改立即生效。看到品牌指导方针

全站CSS

从MindTouch工具栏中,选择网站工具>控制面板>品牌>自定义网站的CSS

有6个CSS字段,它们根据查看页面的用户有条件地加载CSS。

将代码放入Admin CSS部分以验证代码的效果,并在将代码放入All Roles CSS部分之前测试样式更改。

自定义站点CSS没有修订历史,更改是最终的,不能恢复

  • 所有角色的CSS—所有用户类型。CSS或LESS输入到All Roles CSS部分,显示给每个用户,无论类型。
  • 匿名的CSS-未登录MindTouch并匿名浏览网站的用户。
  • 社区成员的CSS—以Community Members身份登录的用户。
  • 箴成员CSS—以专业会员身份登录的用户。进入专业会员CSS部分将显示给除管理员以外的所有专业会员。
  • 管理CSS—仅对管理员有效
  • 遗留CSS的浏览器-使您的网站品牌遗留的浏览器
    cp-custom-site-css.png"class=根据用户角色添加自定义CSS

CSS和少

自定义站点CSS支持常规CSS和

更少的优势:

  • 扩展CSS中的默认功能。LESS语法与CSS相同,这意味着常规CSS将像以前一样工作。
  • 因为LESS文件在作为有效的CSS提供给web浏览器之前被处理,所以可以在CSS代码中使用其他功能,如变量、mixin、规则集嵌套和函数。
  • 使用变量,通过改变一个变量来改变网站上的所有颜色。
  • 将语句嵌套在一起,重用代码,以及更多诸如将所有媒体查询嵌套在一个选择器中,而不是为每个屏幕大小需要做的每一次调整重复它。

看到更少的变量为选项。

CSS和更少的验证保存-为了避免使用LESS预处理器编译错误,在控制面板中提交的所有CSS或LESS代码在保存之前都会被验证。

更少的例子将以下LESS变量添加到您选择的自定义CSS部分,以将站点的基础颜色从蓝色更改为橙色。

  • 突出显示变量

    @highlight-color: # faa319;

  • 之前

    MindTouch默认基本颜色的图像"class=



  • MindTouch自定义基本颜色的图像"class=

单个页面的CSS

单个页面上的CSS只支持CSS3,而不支持LESS CSS。如果试图从控制面板中使用页面变量或在单个页面级别上嵌套阻塞,它们将不起作用。

在一个页面上操作用户界面通过MindTouch编辑器添加CSS.如果你只需要在一个页面上加载CSS,那么你就不应该在网站的其他页面上增加额外的加载时间。

单个特殊页面可能无法编辑以直接添加CSS,但每个特殊页面都包含一个注入到主体中的类,它列出了您所处的特殊页面。如果你需要在一个特殊的页面上设置样式,比如“/ special:Search”,插入类。在你想要的选择器之前进行哥伦比亚特殊搜索。是指的体类的完整列表。

订购和呈现

样式会根据你放置它们的位置以特定的顺序注入到你的代码中,从而相应地覆盖之前的样式,并尽可能地避免许多重要的项。

CSS编译的顺序(后面放置的东西将替换下面提到的图层样式):

  1. 网络浏览器的基本样式(如Chrome, Firefox, Edge等)
  2. CSS应用于单个页面
  3. 默认MindTouch样式
  4. CSS应用于控制面板

在标题中应用的CSS将覆盖在页面上应用的CSS。必要时使用不同的选择器或!重要的关键字。

CSS的建议

不要对页眉、页脚或内容页眉等模板应用CSS。添加适当的体类使它只针对呈现的页面,并在您的所有角色的CSS字段,以描述代码应用的位置。此方法支持添加LESS,编译时不呈现注释,并最小化代码。

自定义站点CSS中的CSS层次结构示例

/* ===== FONTS ===== */ @default-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;@primary-font-color: # 000;@heading-color: @primary-font-color;.../ * = = = = =颜色  ===== */ @ highlight-color: # 30 b3f6;.../* ===== BASE STYLES ===== */ body{}…/* ===== HOME PAGE ===== */ -如果你决定把它存储在这里,而不是单独的页面上,/* ===== HEADER ===== */…/* ===== CONTENT HEADER ===== */ -Should you decide you even want one of these /* ===== CONTENT SIDETRAY ===== */ -Should you decide you even want one of these /* ===== BODY ===== */…/* ===== CONTENT FOOTER ===== */ -如果你决定你甚至想要这些/* ===== FOOTER ===== */…

首选十六进制编码格式

  • 小写(#fff, #b54c92,不是#fff)。
  • 尽可能减少到三个字符(#fff,而不是#ffffff)。
  • 用十六进制编码的颜色(#fff不是"white")。

首选间距格式

  • 使用空格代替制表符(直接在控制面板中输入新数据时,制表符不起作用)。
    • 4空格= TAB
  • 所有新编写的代码都应该用em、rem和%s来度量,而不是px或pt。
  • 字体大小应该以百分比表示。
  • 所有0的值,应该写成0,而不是0px, 0em,等等(例如填充:1.2em 0 0.5 em)
  • 所有的背景、字体、填充和边距都应该尽可能地合并和减少。padding-left: 1 em;padding-right 1 em;,padding-top1.2 em;应与填充:1.2em 1em 0;).

首选CSS设置

  • 在代码编辑工具中编写和编辑代码,然后将其移动到控制面板中。没有办法备份或撤销控制面板中的更改,因此使用另一个工具定期备份代码以进行更改控制,并帮助排除问题。
  • 在一个单独的页面上写的所有CSS不应该包含在页面上的多个CSS块中,而是应该包含在页面顶部或底部的一个CSS块中。

嵌套技术

  • 在Control面板中嵌套文章(使用LESS)时,尽量不要嵌套超过两层。超过两层可能会产生更多的压缩代码,但是通过选择器(Control/Command + F)或导航来找到代码就困难得多了。
  • 不要仅仅因为它们使用相同的选择器就将它们嵌套在一起。如果一个snibbet只应用于内容头,不要与应该属于主页或常规头部分的代码组合,因为它们都可以应用于相同的基础选择器。
  • 包括伪元素":hover"在内的所有选择器都应该包括body类"。为移动用户提供无触摸悬停效果的功能(例如,.elm-header div:徘徊应该是.no-touch .elm-header div:徘徊).它需要与其他主体类(例如,.elm-user-pro-member div:徘徊应该是.no-touch。elm-user-pro-member div:徘徊).
  • 嵌套悬停应该写成:
.elm-header {.no-touch & div:hover{…} }

&"是嵌套LESS语句中父选择器的占位符。要了解更多关于LESS的知识,请参阅LESS样式表语言

  • 当在一个父选择器下嵌套子选择器和媒体查询时,要清楚地将它们分开。首先,输入父选择器的所有属性,然后输入所有子选择器和属性,然后是媒体查询。
.header-holder{/*父选择器属性第一个*/ margin: 0 auto 1.5em;text-align:中心;宽度:100%;/*所有子选择器*/ h4 {margin-top: .5em;} span {background-color: #fff;显示:inline-block;字体大小:85%;粗细:600;保证金:5 px 0;填充:0 30 px; text-transform: uppercase; } .line-spacer { background-color: #9a9a9a; height: 1px; margin-top: -1.5em; width: 100%; } /* All media queries afterwards (all grouped together) */ @media (min-width: 50em) { width: 83.3%; } @media (min-width: 65.25em) { width: 66%; } @media (min-width: 80em) { width: 58%; } }

按字母顺序排列每个类的每个属性的开头

  • 不正确的:
font-size: 90%;margin-top: .7em;颜色:# 666;背景:无;边界:没有;}
  • 正确的:
Dd.mt-listing-detailed-subpages{背景:无;边界:没有;颜色:# 666;字体大小:90%;margin-top: .7em;}