SharePoint Online 开发:定义CSS元素

Blog链接:https://blog.51cto.com/13969817

之前的blog分享的都是针对现有的CSS元素进行更改,一直都是在重新定义它们,使他们满足我们的需求,也许有些人会问为什么我们不直接创建新CSS元素,然后按照我们想要的方式定义它们,再使用它们呢?
你可以这样操作,但并不是你想象的那么简单,在SharePoint站点上的HTML中代码是相当复杂的,有多个被调用的CSS表和多个元素类,它们可能都在一些地方被包装成一个单独的ID,这是一个复杂的网,如果修改现有的CSS,你只是在改变它的行为方式,则不会更改任何底层结构。
如果Microsoft对代码进行了更改,它们通常会重用元素名称,这意味着你自定义的CSS很有可能被保留,如果你创建自定义母版页时对站点的底层HTML进行了更改,有可能再下一次升级时它会失败或者阻止升级部署。
你只是在改变它的行为方式。如果Microsoft对代码进行了更改,它们通常会重用元素名称,这意味着您的自定义CSS定义很有可能被保留。如果你在创建自定义母版页时那样对站点的底层HTML进行更改,我几乎可以保证下一次升级时它将失败,或者阻止升级部署,这意味着要么停留在现在发行的SharePoint版本,而错过新版本的New Feature,要么需要更多的开发和维护时间。

但如果你想通过CSS更改网站一些外观也是可以的,比如你想定期通过网站的一个页面发布新闻,并且想保持所有页面外观一致,需求:

  • 发布新闻,归档旧的新闻
  • 一致的页面外观:需要两层标题;需要一些内容文本;需要项目符号列表;超链接上没有下划线

这些可以用CSS来说设置这些代码,我们来回到样式表,如下:

SharePoint Online 开发:定义CSS元素

示例代码:

.newheader1 {/这是新闻的主标题 /
font-size: x-large !important;
font-weight: bold !important;
color: darkred !important;
}

.newheader2 {/这是新闻的二级主标题 /
font-size: large !important;
color: darkred !important;
}

.newscontent {/这是内容文本/
font-family:"Times New Foman",Georgia,Serif;
}

Newhead1和2分别对应两个标题的设置,Newscontent是新闻内容的相关设置,示例代码仅供参考。

猜你喜欢

转载自blog.51cto.com/13969817/2451187