在使用jquery.PrintArea.js打印局部网页样式的时候，发现样式打印不出来，在网上找了好多资料，整理一下分享给大家

一、先看看css的引用文件方式

　　1、直接在内部的元素中使用”style”属性来定义样式，比如：<div style=”width:800px;”></div>

　　2、在<head>元素中使用”style”元素来指定

　　3、使用<link>元素链接到外部的样式文件，比如：<link rel=”stylesheet” type=”text/css” href=”default.css”>

　　这三种是比较常见的方式

二、第一种方式：

　　直接在内部的元素中使用”style”属性来定义样式，然后调用printArea()函数，可打印全屏，可打印局部，样式都是起作用的，代码如下：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>index</title>
</head>
<body>
    <div>
        <div id="printArea">
            <div style="font-size:18px;color:#ff0000;">......文本打印区域......</div>
            <div style="font-size:24px;color:#ff0000;">......文本打印区域......</div>
            <div style="font-size:36px;color:#ff0000;">......文本打印区域......</div>
        </div>
        <br>
        <br>
        <input id="btnPrint" type="button" value="打印文本区域" />
        <input id="btnPrintFull" type="button" value="全屏打印" />
    </div>
    <script>
        $("#btnPrint").click(function () {
            $("#printArea").printArea();
        });
        $("#btnPrintFull").click(function () {
            $("body").printArea();
        });
    </script>
    </body>

第二种方式：

在<head>元素中使用”style”元素来指定，你会发现打印局部网页预览的时候，样式并不起作用，在网上找到得资料是，在<style type="text/css" media="print"></style>

但是你会发现，这样做之后，样式并不起效，不知道是我用错了还是什么，贴上代码

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>index</title>
    <style type="text/css" media="print">
        .content{font-size:36px;color:#ff0000;}
    </style>
</head>
<body>
    <div>
        <div id="printArea">
            <div class="content">......文本打印区域......</div>
            <div class="content">......文本打印区域......</div>
            <div class="content">......文本打印区域......</div>
        </div>
        <br>
        <br>
        <input id="btnPrint" type="button" value="打印文本区域" />
        <input id="btnPrintFull" type="button" value="全屏打印" />
    </div>
    <script>
        $("#btnPrint").click(function () {
            $("#printArea").printArea();
        });
        $("#btnPrintFull").click(function () {
            $("body").printArea();
        });
    </script>
    </body>后来弄了好久，才摸索出了解决办法，直接贴上代码
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>index</title>
</head>
<body>
    <div>
        <div id="printArea">
            <style type="text/css">
                .content { font-size: 36px; color: #ff0000; }
            </style>
            <div class="content">......文本打印区域......</div>
            <div class="content">......文本打印区域......</div>
            <div class="content">......文本打印区域......</div>
        </div>
        <br>
        <br>
        <input id="btnPrint" type="button" value="打印文本区域" />
        <input id="btnPrintFull" type="button" value="全屏打印" />
    </div>
    <script>
        $("#btnPrint").click(function () {
            $("#printArea").printArea();
        });
        $("#btnPrintFull").click(function () {
            $("body").printArea();
        });
    </script>
    </body>

　　把你要打印那块区域的样式放到你要打印的那块区域里面，打印的时候样式就有效了，不需要加media="print"

第三种方式和第二种方式是一样的道理