umbraco学习4：Stylesheets

最新推荐文章于 2024-09-02 09:16:38 发布

yanxk888

最新推荐文章于 2024-09-02 09:16:38 发布

阅读量1.3k

点赞数

分类专栏： umbraco 文章标签： css CSS Css stylesheet umbraco umbraco cms

本文链接：https://blog.csdn.net/yanxk888/article/details/8520965

版权

umbraco 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前文中笔者已经介绍了通过document type和template创建页面的简单步骤，页面内容显示出来后，接下来就是为这些内容添加样式，让内容看起来更加友好和美观。接下来笔者将介绍在umbraco中如何添加css文件，以及如何为Richtext editor编辑界面添加预定义的样式。

选中settings section，右键点击Stylesheets，选择create，创建名为main的css文件，如下图所示：

我们可以像平时我们会做的那样直接编辑main.css文件，例如：

body {
font-size: 12px;
background-color:#000;
color: #fff;
}

接下来，要将css文件，添加到已经创建好的master template中，代码如下：

 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title><umbraco:Item field="pageTitle" runat="server" /></title>
    <link rel="stylesheet" href="/css/main.css"/>
  </head>

打开home页面，我们会看到样式已经应用，这里我们就不贴图了。除了直接编辑css文件以外，我们还可以为创建的style sheet创建属性，右键点击main，选择create，创建名为big red header的属性，其中alias选择h2, 即该样式将应用在h2标签上，如下图所示：

打开main.css，我们可以看到文件中增加了一下一段代码：

/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */
h2{
font-size:24px; color:red;
}

接下来笔者将介绍如何在richtext editor中使用我们添加的属性，首先要将我们创建的main和richtext editor关联，选中developer section，选中Data Type下的richtext editor，在related stylesheets处选中main，如下图所示：