如何在HTML中集成CSS？
如何在HTML中集成CSS？
提问于 2018-05-28 20:00:56
我有一张发票，很好用。如果我在打开发票并打印时将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>但出于某种原因，当我打印页面时，它看起来很奇怪：
-How应该看起来(以及当.css文件在同一目录中时看起来是什么样子)：https://puu.sh/AusRL/01a54e24bd.jpeg
当我在html文件中集成css时，-How看起来是这样的：
https://puu.sh/AusTa/0ec954837d.jpeg
如何正确地将.css集成到html文件中？
提前感谢！任何帮助都将不胜感激。
回答 2
Stack Overflow用户
发布于 2018-05-28 20:09:24
一般来说，我们可以说，所有的样式都将按照以下规则“级联”到一个新的“虚拟”样式表中，其中第一个具有最高优先级：
Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default因此，内联样式(在特定HTML元素内)具有最高优先级，这意味着它将覆盖标记内定义的样式、外部样式表中定义的样式或浏览器默认值。
Stack Overflow用户
发布于 2018-05-28 21:04:41
你必须为内联css使用一个媒体查询，它会工作得很好。
<style type="text/css">
@media screen {
*{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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50565967
复制相关文章
相似问题