html - 如何在 HTML 中集成 CSS？

Question

我有一张很好用的发票。如果我在打开发票并打印时将 css 文件和 html 保存在同一个文件夹中，则打印效果很好。

在 .html 文件中有以下几行：

<link rel="stylesheet" href="https://s3.amazonaws.com/appforest_uf/f1527345073203x732458357233554200/pos.css" media="print">

<link rel="stylesheet" href="style.css" media="screen">

实际上工作正常，但我需要将 style.css 文件集成到 HTML 文件中，因为在 style.css 中有一个 logo.png 文件，我需要为每个用户动态更改。

我试过这个：打开 style.css 文件并复制其中的所有内容，然后将其放入文件中的<style>标签内，如下所示：

<link rel="stylesheet" href="https://s3.amazonaws.com/appforest_uf/f1527345073203x732458357233554200/pos.css" media="print">
<style>
*{font-family:'Lato', sans-serif}.container{max-width:1200px;margin:90px auto 5px;color:#212121}.jim-invoice-header .logo{display:inline-block;width:55%;float:right;background-image:url("https://s3.amazonaws.com/appforest_uf/f1527344318135x217536157462745920/logo.png");background-repeat:no-repeat;background-position:100% 1%;height:200px}.jim-invoice-header .title{display:inline-block;width:44%;font-size:3.236em;clear:left;font-weight:bold;text-transform:uppercase}.jim-invoice-header .title:after{content:"";display:block;height:5px;width:1.618em;background-color:#059CCE;margin-top:3px}.jim-invoice-header .customer-info{width:43%;font-size:3.236em;clear:left;float:left;font-weight:normal;font-size:1.2135em;margin-top:101.934px}.jim-invoice-header .customer-info .info-container{display:block;width:100%;margin:8.09px auto}.jim-invoice-header .customer-info .info-container .to{text-transform:uppercase;font-size:16.18px}.jim-invoice-header .customer-info .info-container .name{text-transform:capitalize;font-size:32.36px;margin-top:6.472px;font-weight:bold;padding-left:40.45px}.jim-invoice-header .customer-info .info-container .label{text-transform:uppercase;font-size:16.18px;font-weight:bold;display:inline-block}.jim-invoice-header .customer-info .info-container .info{display:inline-block}.jim-invoice-header .invoice-total-info{display:inline-block;width:55%;margin-top:16.18px;float:right}.jim-invoice-header .invoice-total-info .total-info-section{width:29%;display:inline-block;float:right;text-transform:capitalize;text-align:center;padding:29.124px 3.236px;font-size:21.034px;font-weight:bold;border-top:2px solid #059CCE;border-bottom:2px solid #059CCE}.jim-invoice-header .invoice-total-info .total-info-section .info{margin-top:12.944px}.jim-invoice-header .invoice-total-info .total-info-section:last-child{background-color:#059CCE;color:#F5F5F5;width:29%}.jim-invoice-header .invoice-total-info .total-info-section:nth-child(2){min-width:250px;border-right:2px solid #059CCE}.jim-invoice-header .invoice-total-info .total-info-section:first-child{text-align:right;width:19%}.jim-invoice-body{display:block;width:100%;float:left;margin-top:48.54px;margin-bottom:48.54px}.jim-invoice-body .invoice-table{border-collapse:collapse}.jim-invoice-body .invoice-table thead{text-transform:uppercase;background-color:#059CCE;text-align:center}.jim-invoice-body .invoice-table thead tr td{padding:16.18px 0;color:#F5F5F5;font-weight:bold}.jim-invoice-body .invoice-table thead tr td:nth-child(2){max-width:600px}.jim-invoice-body .invoice-table thead tr td:nth-child(4){min-width:150px}.jim-invoice-body .invoice-table thead tr td:first-child{width:70px}.jim-invoice-body .invoice-table tbody tr{border-bottom:solid 2px #059CCE}.jim-invoice-body .invoice-table tbody tr td{padding:16.18px 16.18px;text-align:center}.jim-invoice-body .invoice-table tbody tr td:first-child,.jim-invoice-body .invoice-table tbody tr td:nth-child(3),.jim-invoice-body .invoice-table tbody tr td:nth-child(5){background-color:#E0E0E0}.jim-invoice-body .invoice-table tbody tr td:nth-child(2){text-align:left;font-size:1.618em;font-weight:bold;padding:16.18px 40.45px}.jim-invoice-body .invoice-table tfoot tr td{text-align:center;font-weight:bold;padding:14.562px 0;font-size:17.798px}.jim-invoice-body .invoice-table tfoot .due td:nth-child(2){background-color:#059CCE;color:#F5F5F5}.jim-invoice-body .invoice-table tfoot .due td:nth-child(3){background-color:#059CCE;color:#F5F5F5}.jim-invoice-body .invoice-table tfoot .terms-and-condtions{text-align:left;vertical-align:bottom}.jim-invoice-body .invoice-table tfoot .terms-and-condtions .title{color:#059CCE;font-size:24.27px;margin-bottom:16.18px}.jim-invoice-body .invoice-table tfoot .terms-and-condtions .content{font-weight:normal;line-height:25.888px;padding-right:323.6px;text-align:justify}.jim-invoice-footer{width:100%;margin-bottom:48.54px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap}.jim-invoice-footer .footern-section{max-width:250px;float:left;display:inline-block}.jim-invoice-footer .footern-section .footer-title{font-size:32.36px;font-weight:bold;text-transform:uppercase}.jim-invoice-footer .footern-section .footer-title i{font-size:22.652px}.jim-invoice-footer .footern-section .footer-content{padding:16.18px 0 0 24.27px;font-size:17.798px;line-height:27.506px}
</style>

但由于某种原因，当我打印页面时，它看起来很奇怪：

- 外观应该如何（以及 .css 文件在同一目录中时的外观）： https ://puu.sh/AusRL/01a54e24bd.jpeg

-当我将 css 集成到 html 文件中时的样子：
https ://puu.sh/AusTa/0ec954837d.jpeg

我如何在 html 文件中正确集成 .css？

提前致谢！任何帮助将不胜感激。

标签： htmlcss

Answer 1

将内部样式标记保留在 print css 的导入之上。你的风格pos.css被你的内部风格所覆盖。

<style>
*{font-family:'Lato', sans-serif}.container{max-width:1200px;margin:90px auto 5px;color:#212121}.jim-invoice-header .logo{display:inline-block;width:55%;float:right;background-image:url("https://s3.amazonaws.com/appforest_uf/f1527344318135x217536157462745920/logo.png");background-repeat:no-repeat;background-position:100% 1%;height:200px}.jim-invoice-header .title{display:inline-block;width:44%;font-size:3.236em;clear:left;font-weight:bold;text-transform:uppercase}.jim-invoice-header .title:after{content:"";display:block;height:5px;width:1.618em;background-color:#059CCE;margin-top:3px}.jim-invoice-header .customer-info{width:43%;font-size:3.236em;clear:left;float:left;font-weight:normal;font-size:1.2135em;margin-top:101.934px}.jim-invoice-header .customer-info .info-container{display:block;width:100%;margin:8.09px auto}.jim-invoice-header .customer-info .info-container .to{text-transform:uppercase;font-size:16.18px}.jim-invoice-header .customer-info .info-container .name{text-transform:capitalize;font-size:32.36px;margin-top:6.472px;font-weight:bold;padding-left:40.45px}.jim-invoice-header .customer-info .info-container .label{text-transform:uppercase;font-size:16.18px;font-weight:bold;display:inline-block}.jim-invoice-header .customer-info .info-container .info{display:inline-block}.jim-invoice-header .invoice-total-info{display:inline-block;width:55%;margin-top:16.18px;float:right}.jim-invoice-header .invoice-total-info .total-info-section{width:29%;display:inline-block;float:right;text-transform:capitalize;text-align:center;padding:29.124px 3.236px;font-size:21.034px;font-weight:bold;border-top:2px solid #059CCE;border-bottom:2px solid #059CCE}.jim-invoice-header .invoice-total-info .total-info-section .info{margin-top:12.944px}.jim-invoice-header .invoice-total-info .total-info-section:last-child{background-color:#059CCE;color:#F5F5F5;width:29%}.jim-invoice-header .invoice-total-info .total-info-section:nth-child(2){min-width:250px;border-right:2px solid #059CCE}.jim-invoice-header .invoice-total-info .total-info-section:first-child{text-align:right;width:19%}.jim-invoice-body{display:block;width:100%;float:left;margin-top:48.54px;margin-bottom:48.54px}.jim-invoice-body .invoice-table{border-collapse:collapse}.jim-invoice-body .invoice-table thead{text-transform:uppercase;background-color:#059CCE;text-align:center}.jim-invoice-body .invoice-table thead tr td{padding:16.18px 0;color:#F5F5F5;font-weight:bold}.jim-invoice-body .invoice-table thead tr td:nth-child(2){max-width:600px}.jim-invoice-body .invoice-table thead tr td:nth-child(4){min-width:150px}.jim-invoice-body .invoice-table thead tr td:first-child{width:70px}.jim-invoice-body .invoice-table tbody tr{border-bottom:solid 2px #059CCE}.jim-invoice-body .invoice-table tbody tr td{padding:16.18px 16.18px;text-align:center}.jim-invoice-body .invoice-table tbody tr td:first-child,.jim-invoice-body .invoice-table tbody tr td:nth-child(3),.jim-invoice-body .invoice-table tbody tr td:nth-child(5){background-color:#E0E0E0}.jim-invoice-body .invoice-table tbody tr td:nth-child(2){text-align:left;font-size:1.618em;font-weight:bold;padding:16.18px 40.45px}.jim-invoice-body .invoice-table tfoot tr td{text-align:center;font-weight:bold;padding:14.562px 0;font-size:17.798px}.jim-invoice-body .invoice-table tfoot .due td:nth-child(2){background-color:#059CCE;color:#F5F5F5}.jim-invoice-body .invoice-table tfoot .due td:nth-child(3){background-color:#059CCE;color:#F5F5F5}.jim-invoice-body .invoice-table tfoot .terms-and-condtions{text-align:left;vertical-align:bottom}.jim-invoice-body .invoice-table tfoot .terms-and-condtions .title{color:#059CCE;font-size:24.27px;margin-bottom:16.18px}.jim-invoice-body .invoice-table tfoot .terms-and-condtions .content{font-weight:normal;line-height:25.888px;padding-right:323.6px;text-align:justify}.jim-invoice-footer{width:100%;margin-bottom:48.54px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap}.jim-invoice-footer .footern-section{max-width:250px;float:left;display:inline-block}.jim-invoice-footer .footern-section .footer-title{font-size:32.36px;font-weight:bold;text-transform:uppercase}.jim-invoice-footer .footern-section .footer-title i{font-size:22.652px}.jim-invoice-footer .footern-section .footer-content{padding:16.18px 0 0 24.27px;font-size:17.798px;line-height:27.506px}
</style>
<link rel="stylesheet" href="https://s3.amazonaws.com/appforest_uf/f1527345073203x732458357233554200/pos.css" media="print">