iText7高级教程之html2pdf——2.使用CSS定义样式
Posted CuteXiaoKe
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iText7高级教程之html2pdf——2.使用CSS定义样式相关的知识，希望对你有一定的参考价值。
在前一章中，我们使用了不同的Java代码片段。
在本章中，我们将对每个示例使用相同的代码片段：
public void createPdf(String html, String dest) throws IOException
HtmlConverter.convertToPdf(html, new FileOutputStream(dest));
我们不看不同的Java代码片段，而是看不同的HTML和CSS片段。
1. 老式HTML
在第一个实例中，我们通过使用诸如<i>和<font>的html标签，将样式定义为斜体和不同的字体大小，HTML代码如下：
<html>
<head>
<title>Colossal</title>
<meta name="description" content="Gloria is an out-of-work party girl ..." />
</head>
<body>
<img src="img/colossal.jpg" width="120px" align="right" />
<h1>Colossal (2016)</h1>
<i>Directed by Nacho Vigalondo</i>
<div>
Gloria is an out-of-work party girl forced to leave her life in New York City,
and move back home. When reports surface that a giant creature is
destroying Seoul, she gradually comes to the realization that she is
somehow connected to this phenomenon.
</div>
<font size="-1">Read more about this movie on
<a href="www.imdb.com/title/tt4680182">IMDB</a></font>
</body>
</html>
基于该HTML文件创建的HTML页面和PDF如图2.1所示。
我们称之为老式的——有些人认为很low——因为现在HTML只用于定义内容及其结构。现在，所有样式（如宽度、高度、字体选择、字体大小、字体颜色、字体粗细等）都是使用层叠样式表（CSS）定义的。这是一种更优雅的方法，因为它在内容和表示之间创建了一个清晰的分隔。
让我们重写HTML页面，并介绍一些CSS。
2. 内嵌CSS
在浏览器中打开时，HTML文件与前面的示例没有明显区别，第二个HTML的代码如下：
<html>
<head>
<title>Colossal</title>
<meta name="description" content="Gloria is an out-of-work party girl ..." />
</head>
<body>
<img src="img/colossal.jpg" style="width: 120px;float: right" />
<h1>Colossal (2016)</h1>
<div style="font-style: italic">Directed by Nacho Vigalondo</div>
<div>
Gloria is an out-of-work party girl forced to leave her life in New York City,
and move back home. When reports surface that a giant creature is
destroying Seoul, she gradually comes to the realization that she is
somehow connected to this phenomenon.
</div>
<div style="font-size: 0.8em">Read more about this movie on
<a href="www.imdb.com/title/tt4680182">IMDB</a></div>
</body>
</html>
图像的宽度及其位置现在在style属性中定义。导演（director）使用的字体样式以及IMDB链接的字体大小也是如此。从图2.2可以看出，这个示例的输出与前一个示例的输出没有区别。
除了使用style属性，我们还可以使用id或class属性。pdfHTML支持两者.
3. id和class有什么区别？
id是唯一的：每个元素只能有一个id；每个页面只能有一个具有该id的元素。class不是唯一的：可以在多个元素上使用同一类；可以在同一元素上使用多个类。
4. 内部CSS
如下代码的HTML文件中，我们将所有样式捆绑在HTML文件头的style部分中：
<html>
<head>
<title>Colossal</title>
<meta name="description" content="Gloria is an out-of-work party girl ..." />
<style>
.poster width: 120px;float: right;
.director font-style: italic;
.description font-family: serif;
.imdb font-size: 0.8em;
a color: red;
</style>
</head>
<body>
<img src="img/colossal.jpg" class="poster" />
<h1>Colossal (2016)</h1>
<div class="director">Directed by Nacho Vigalondo</div>
<div class="description">
Gloria is an out-of-work party girl forced to leave her life in New York City,
and move back home. When reports surface that a giant creature is
destroying Seoul, she gradually comes to the realization that she is
somehow connected to this phenomenon.
</div>
<div class="imdb">Read more about this movie on
<a href="www.imdb.com/title/tt4680182">IMDB</a></div>
</body>
</html>
与前两个示例相比，我们做了一些更改。将链接的颜色更改为红色（而不是使用默认颜色，即蓝色），并为description选择了serif字体（而不是默认字体）。
当您没有在HTML文件中定义字体时，大多数浏览器将以serif字体显示文档。过去，iText使用的默认字体一直是Helvetica，它是一种sans-serif字体。这就解释了迄今为止示例中原始HTML文件和生成的PDF之间的差异。
您可以在body元素级别将字体系列定义为serif，以便更好地匹配HTML和PDF。在这个简单的例子中，我们选择不这样做；因此，我们可以清楚地看到serif和sans-serif字体之间的差异，如图2.3所示：
标题(title)、带有导演姓名的行(director)和IMDB段落仍使用Helvetica字体，但描述(description)使用Serif字体。
将CSS放在标题中很好，但一旦涉及到更多样式，最好将CSS放到HTML文件外部的单独文件中。
5. 外部CSS
我们在标题部分没有<style>块。相反，我们使用<link>标记引用名为movie.css的样式表。代码如下：
<html>
<head>
<title>Colossal</title>
<meta name="description" content="Gloria is an out-of-work party girl ..." />
<link rel="stylesheet" type="text/css" href="css/movie.css">
</head>
<body>
<img src="img/colossal.jpg" class="poster" />
<h1>Colossal (2016)</h1>
<div class="director">Directed by Nacho Vigalondo</div>
<div class="description">
Gloria is an out-of-work party girl forced to leave her life in New York City,
and move back home. When reports surface that a giant creature is
destroying Seoul, she gradually comes to the realization that she is
somehow connected to this phenomenon.
</div>
<div class="imdb">Read more about this movie on
<a href="www.imdb.com/title/tt4680182">IMDB</a></div>
</body>
</html>
外部CSS文件movie.css的代码如下：
.poster
width: 120px;
float: right;
.director
font-style: italic;
.description
font-family: serif;
.imdb
font-size: 0.8em;
a
color: green;
除了我们将]<a>标签的内容颜色更改为绿色之外，图2.4和图2.3之间没有太大区别。
您可以混合和匹配内嵌CSS、header中的CSS和外部CSS。您甚至可以在一个位置定义样式，该样式在另一个位置被覆盖.
6. 当CSS在不同的地方定义时，哪个CSS优先？
CSS代表层叠样式表(Cascading Style Sheets)，不同级别上定义的样式“层叠”(cascade)到一个新的虚拟样式表中，按照以下规则组合样式：
- 首先是浏览器使用的样式表。此样式表用于缺少特定样式的情况。pdfHTML插件附带了自己的样式表，例如，它解释了为什么
<a>标记的内容呈现为蓝色。 - 浏览器使用的样式表可以被外部样式表推翻复写。
- HTML文件的header部分中存在的内部样式表可以推翻以前定义的所有样式。
- 内嵌样式（HTML元素内）具有最高优先级。当在样式属性中定义样式时，它会覆盖以前定义的样式属性。
在这些例子中，我们通过创建一个名为poster的类来定位图像。我们使用CSS来定义宽度，并使用float将图像定位到右侧。在下一个示例中，我们将使用绝对位置。
7. 使用绝对位置
在第5个例子中，我们使用距页面顶部和左侧的距离来定义绝对位置。代码如下：
<html>
<head><title>SXSW movies</title></head>
<body>
<img src="img/68_kill.jpg"
style="position: absolute; top: 5; left: 5; width: 60;">
<img src="img/a_bad_idea_gone_wrong.jpg"
style="position: absolute; top: 5; left: 70; width: 60;">
<img src="img/a_critically_endangered_species.jpg"
style="position: absolute; top: 5; left: 135; width: 60;">
<img src="img/big_sick.jpg"
style="position: absolute; top: 5; left: 200; width: 60;">
<img src="img/california_dreams.jpg"
style="position: absolute; top: 5; left: 265; width: 60;">
<img src="img/colossal.jpg"
style="position: absolute; top: 5; left: 330; width: 60;">
<img src="img/daraju.jpg"
style="position: absolute; top: 5; left: 395; width: 60;">
<img src="img/drib.jpg"
style="position: absolute; top: 5; left: 460; width: 60;">
<img src="img/hot_summer_nights.jpg"
style="position: absolute; top: 5; left: 525; width: 60;">
<img src="img/unrest.jpg"
style="position: absolute; top: 5; left: 590; width: 60;">
<img src="img/hounds_of_love.jpg"
style="position: absolute; top: 120; left: 5; width: 60;">
<img src="img/lane1974.jpg"
style="position: absolute; top: 120; left: 70; width: 60;">
<img src="img/madre.jpg"
style="position: absolute; top: 120; left: 135; width: 60;">
<img src="img/mfa.jpg"
style="position: absolute; top: 120; left: 200; width: 60;">
<img src="img/mr_roosevelt.jpg"
style="position: absolute; top: 120; left: 265; width: 60;">
<img src="img/nobody_speak.jpg"
style="position: absolute; top: 120; left: 330; width: 60;">
<img src="img/prevenge.jpg"
style="position: absolute; top: 120; left: 395; width: 60;">
<img src="img/the_archer.jpg"
style="position: absolute; top: 120; left: 460; width: 60;">
<img src="img/the_most_hated_woman_in_america.jpg"
style="position: absolute; top: 120; left: 525; width: 60;">
<img src="img/this_is_your_death.jpg"
style="position: absolute; top: 120; left: 590; width: 60;">
</body>
</html>
结果如图2.5所示：
使用此功能时要小心。为HTML页面选择的位置并不总是适合PDF页面。无论是在设计HTML时，还是在定义PDF文档的默认页面大小时，都必须考虑到这一点。
pdfHTML还支持@规则（at规则）。
8. 使用@Page规则添加“Page X of Y”
在下面的html中，我们有一个使用以movie.css样式呈现的20部电影的列表。此外，我们还在页面标题中定义了CSS @规则。
<html>
<head>
<title>Movies</title>
<meta name="description" content="Selection of movies screened at SXSW 2017" />
<link rel="stylesheet" type="text/css" href="css/movie.css">
<style>
@page
@bottom-right
content: "Page " counter(page) " of " counter(pages);
</style>
</head>
<body>
<div style="width: 320pt;">
<img src="img/68_kill.jpg" class="poster" />
以上是关于iText7高级教程之html2pdf——2.使用CSS定义样式的主要内容，如果未能解决你的问题，请参考以下文章
iText7高级教程之html2pdf——2.使用CSS定义样式
iText7高级教程之html2pdf——6.在pdfHTML中使用字体
iText7高级教程之html2pdf——6.在pdfHTML中使用字体