0

我正在使用渲染插件制作 pdf 文件。为此，我正在渲染插件。我尝试为我的模板添加一个 css 文件，但它不起作用。我有点困惑，我应该如何在我的 gsp 页面中导入 css 文件。

这是我的模板。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<div>
<link rel="stylesheet" href="${grailsApplication.config.grails.serverURL}/${resource(dir:'css',file:'main.css')}" />
<div id="wapper"  class="wapper">
    <div id="title">
        <div class="titleLeft"></div>

        <div class="titleContent">
        </div>

        <div class="titleRight"></div>
    </div>

    <div id="profilePic"></div>

    <div id="mainContent">
        <div id="leftContent">
          // some code here

        </div>

        <div id="rightContent">
                <h2>Contact</h2>

                <div class="content">
                    // some code here.
                </div>

            <div class="refrence">
                <div class="blockHeader">References</div>

               // some code here
            </div>
        </div>
        </div>
    </div>
</div>

这是我的css文件。

@charset "utf-8";


@font-face {
font-family: mixLight;
src: url('/images/templateImages/template8/TheMix Light Plain.ttf')
}

@font-face {
font-family: mixBold;
src: url('/images/templateImages/template8/TheMixBold-Plain.ttf');
}

@font-face {
font-family: mixSemiBold;
src: url('/images/templateImages/template8/TheMixSemiBold-Plain.ttf');
}

body, div, p, h1, h2, h3, h4 {
padding: 0;
margin: 0;

}

body {
font-family: mixLight;
color: #636466;
}

.wapper {
position: relative;
padding: 40px;
width: 85%;
background-color: #FFFFFF;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
-moz-box-shadow: 0 0 7px #d6d6d6;
-webkit-box-shadow: 0 0 7px #d6d6d6;
box-shadow: 0 0 7px #d6d6d6;
border-top-style: 1;
border-right-style: 1;
border-bottom-style: 1;
border-left-style: 1;

border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
margin-bottom: 60px;

}

.topBorder {
background-repeat: repeat-x;
background-position: left top;
}

#title {

color: #FFFFFF;
font-family: mixLight;
font-size: 35px;
height: 142px;
left: 70px;
padding-left: 43px;
margin-top: -8px;
position: absolute;
top: -23px;
width: auto;
background-repeat: none;
}

#title .titleLeft {
width: auto;
float: left;
}

#title .titleRight {
width: auto;
float: left;
 }

 #title .titleContent {
width: auto;
float: left;
background-image: url(/images/templateImages/template8/title_bg.gif);
background-repeat: x;
height: 82px;
padding-top: 60px;
}

#leftContent {
width: 65%;
float: left;
}

#rightContent {
float: right;
padding-left: 5%;
width: 30%;
}

.clearAll {
clear: both;
}

.blockHeader {
color: #119a9c;
background-color: #a5d9d0;
padding: 5px 5px 5px 25px;

font-family: mixBold;
font-size: 25px;

}

#mainContent {
margin-top: 100px;
}

 .rightContentColor {
background-color: #d1ece7;
}

.blockContent {
margin-top: 20px;
margin-left: 15px;
 }

 .block {
margin-top: 20px;

 }

.data {
margin-top: 5px;
 }

#profilePic {
float: right;
margin-right: -72px;
width: 187px;
height: 232px;
left: 790px;
top: 40px;
background-image: url(/images/templateImages/template8/profile_pic.gif);
 }

.blockContent .blockSubHeading .leftHeading {
float: left;
width: 50%;
}

.blockContent .blockSubHeading .dateTime {
float: right;
width: 30%;
}

.blockSubHeading {
margin-top: 25px;
}

h2 {
color: #009296;
}

.contactInfo {
width: 80%;
margin-left: 10px;
}

.contactInfo .content {
margin-left: 10px;
}

.refrence {
width: 92%;
margin-top: 73px;
 }

.refrence .content {
background-color: #d1ece7;
padding: 8%;
}

.dateTime {
padding-right: 20px;
}

.dateTime  h4 {
text-align: right;
}

我试图在模板的盯着添加样式标签。但我给出了错误。标签在这里。

<style type="text/css">
@import url("../../css/templateCss/template8.css");

p {
color: #f00;
}
</style>

但它给出了这个错误。

org.xml.sax.SAXParseException,    The markup in the document following the root element must be well-formed.

我没有得到我错的地方。谁能帮我解决这个错误，请提供一个运行示例，说明如何在模板中添加 css。

4

1 回答 1

1

尝试使用 just ${resource(dir:'css',file:'main.css')}，就足够了：

<link rel="stylesheet" href="${resource(dir:'css', file:'main.css')}" />
于 2013-05-09T07:03:02.700 回答