umbraco学习4：Stylesheets

来源：互联网发布：mac application在哪编辑：程序博客网时间：2024/06/13 05:10

前文中笔者已经介绍了通过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，如下图所示：

关联好了之后，选中content section，选中home节点，定位到homeText属性的编辑框中，选中要添加样式的文字，在style下拉框中选择big red header，如下图所示：

打开home页面，我们可以看到main.css和big red text属性都有生效。如下图所示：

下一章我们将介绍macro，macro类似于宏定义，用来定义网页的部分展示控件，该控件可以插入到template的任何地方。