13.CSS 打印样式表 & 悬停下划线动画

CSS 打印样式表

虽然我们不经常从网上实际打印内容,但打印样式表不应被忽视。它们可以用来确保你的网站内容以一种易读和适合打印的方式呈现。这里有一个简单的、独特的打印样式表,你可以用它作为自己的基础:

go 复制代码
@media print {
 @page {
   size: A4;
 }

 body {
   margin: 0;
   padding: 0;
 }

 body, p, h1, h2, h3, h4, h5, h6, li {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 12pt;
   font-weight: normal;
 }

 h1, h2, h3, h4, h5, h6 {
   font-weight: bold;
   margin-bottom: 0.5em;
 }

 h1 {
   font-size: 24pt;
 }

 h2 {
   font-size: 18pt;
 }

 h3 {
   font-size: 14pt;
 }

 a:any-link {
   color: #0000FF;
   text-decoration: none;
 }

 a:any-link::after {
   content: " [" attr(href) "] ";
 }

 img {
   width: 100%;
 }

 header, footer, nav, aside, form, iframe, script {
   display: none;
 }
}
  • @media print - 打印媒体查询用于在页面打印时应用样式。

  • @page:

    • size - 指定页面大小。
  • body:

    • margin - 移除默认的外边距。

    • padding - 移除默认的内边距。

相关推荐
清幽竹客1 分钟前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim1 分钟前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿5 分钟前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
夏梦春蝉1 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室2 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子3 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W5 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端5 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~5 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程6 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot