当我尝试渲染pdf文件时，css在渲染插件中不起作用

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

这是我的模板

<!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。

尽量只使用${resource(dir:'css',file:'main.css')}，这就足够了:

<link rel="stylesheet" href="${resource(dir:'css', file:'main.css')}" />

相关内容

最新更新

热门标签：