在Sharepoint 2010 中给HTML内容编辑器部件自定义CSS样式

最新推荐文章于 2021-06-19 05:31:18 发布

转载最新推荐文章于 2021-06-19 05:31:18 发布 · 218 阅读

本文详细介绍了如何创建并使用自定义CSS类来丰富编辑器样式，包括颜色、字体大小、字体风格和布局调整，以实现个性化文本显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面的代码是默认的样式定义,这定义可以在自定义的CSS中被重用,创建这些自定义CSS类就可以在高级文本编辑器中使用,

如下面的例子就创建了一个AppleRed的样式:

ms-rteElement-appleRed { color:red; -ms-name:"appleRed"; }

注意:如果您想让上面的自定义的样式的名字在编辑器中出现, 它必须在母板页的CSS文件中直接存在,而不能去使用@import再去引用一个其它的CSS文件．

h1.ms-rteElement-H1 {
}
.ms-rteElement-H1 {
font-size:2em;
font-weight:normal;
}

h2.ms-rteElement-H2 {
}
.ms-rteElement-H2 {
font-size:1.3em;
font-weight:normal;
}
h3.ms-rteElement-H3 {
}
.ms-rteElement-H3 {
font-size:1em;
}
h4.ms-rteElement-H4 {
}
.ms-rteElement-H4 {
font-size:1em;
font-style:italic;
font-weight:normal;
}
h1.ms-rteElement-H1B {
}
.ms-rteElement-H1B {
color:#0072BC;
font-size:2em;
font-weight:normal;
}
h2.ms-rteElement-H2B {
}
.ms-rteElement-H2B {
color:#CA0078;
font-size:1.3em;
font-weight:normal;
}
h3.ms-rteElement-H3B {
}
.ms-rteElement-H3B {
color:#0093CA;
font-size:2.2em;
}
h4.ms-rteElement-H4B {
}
.ms-rteElement-H4B {
color:#058036;
font-size:1em;
font-style:italic;
font-weight:normal;
}
hr.ms-rteElement-Hr {
}
.ms-rteElement-Hr {
background-color:#B6B6B6;
height:1px;
}
p.ms-rteElement-P {
}
.ms-rteElement-P {
color:#576170;
}
div.ms-rteElement-Callout1 {
}
.ms-rteElement-Callout1 {
background-color:#FEF4E4;
border:1px solid #FD9F08;
float:left;
padding:10px;
width:25em;
}
div.ms-rteElement-Callout2 {
}
.ms-rteElement-Callout2 {
background-color:#F2F2F2;
border:1px solid #36B000;
color:#353738;
float:right;
padding:10px;
width:25em;
}
div.ms-rteElement-Callout3 {
}
.ms-rteElement-Callout3 {
color:#CA0078;
float:right;
font-style:italic;
padding:10px;
width:25em;
}
div.ms-rteElement-Callout4 {
}
.ms-rteElement-Callout4 {
background-color:#D8F4FF;
border:1px solid #00ADEE;
color:#005677;
float:right;
font-family:Verdana,Geneva,sans-serif;
padding:10px;
width:20em;
}
.ms-rteStyle-Normal {
background-color:#FFFFFF;
color:#676767;
font-family:Verdana,Arial,sans-serif;
font-size:8pt;
}
.ms-rteStyle-Highlight {
background-color:#FAE032;
color:#312A26;
}
.ms-rteStyle-Byline {
color:#B6B6B6;
}
.ms-rteStyle-Tagline {
color:#8B8B8B;
font-size:1.3em;
}
.ms-rteStyle-Comment {
color:#36B000;
font-style:italic;
text-shadow:0 0 5px #000000;
}
.ms-rteStyle-References {
color:#828282;
}
.ms-rteStyle-Caption {
color:#00ADEE;
}