CSS3新特性应用之字体排印
目录
一、插入换行
- ~：表示同辈元素之后指定类型的元素，如;elm1 ~ elm2表示,elm1之后的所有elm2元素，且elm1与elm2都是在同一个父级元素。
- +：表示同辈元素的兄弟元素。
- \A：一个空白换行符
- 解决方案：
- 在dd与dt相邻的dt上的子元素前面加入一个空白换行符
- 在相邻的dd与dd之间，加入一个逗号
- 示例代码：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
dt, dd{
display: inline;
}
dd{
font-weight: bold;
margin: 0px 0px 0px 5px;
}
dd + dt::before{
content: '\A';
white-space: pre; /*html默认换行符与其相邻的其他空白符合并,pre表示不合并空白符*/
}
dd + dd::before{
content: ',';
margin-left: -5px;
}
</style>
</head>
<body>
<dt>Name</dt><dd>Sam Long</dd>
<dt>Email</dt><dd>abc@163.com</dd><dd>bcd@163.com</dd>
<dt>Location</dt><dd>CQ</dd>
</body>
二、文本行的斑马条纹
- 背景尺寸是行高的2倍
- 注意em单位
- white-space：设置或检索对象内空格的处理方式
- normal：默认处理方式
- pre：用等宽字体显示预格式化的文本，空白字符会被浏览器保留
- nowrap：文本不会换行，直到遇到<br>标签为止
- pre-wrap：用等宽字体显示预格式化的文本，空白字符会被浏览器保留，文本会换行
- pre-line：保持换行符，合并空白符
- 示例代码：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
padding: .5em;
line-height: 1.5;
background: hsl(20, 50%, 95%);
background-image: linear-gradient(
rgba(120,0,0,.1) 50%, transparent 0);
background-size: auto 3em;
background-origin: content-box;
font-family: Consolas, Monaco, monospace;
}
.wrap code{
font: inherit;
}
</style>
</head>
<body>
<pre class="wrap"> <code> while(true){
i++;
if(i>10){
break;
}else{
console.log(i);
}
}</code></pre>
</body>
三、调整tab的宽度
- 注意Ide是否应用的tab替换为space的功能，必须要关闭。
- 利用tab-size指定tab的大小
- 示例代码
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
pre, code{
font-family: monospace;
}
pre{
white-space: pre;
background: red;
tab-size: 2;
display: block;
}
</style>
</head>
<body>
<pre><code>
while(true){
var d = new Date();
}
</code></pre>
</body>
四、自定义下划线
- linear-gradient的角度，默认是180deg
- text-shadow实现阴影效果，做出左右阴影偏移
- 存在兼容性问题，chrome50版本没有下划线显示
- 示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font: 250%/1.6 Baskerville, Palatino, serif;
} a {
background: -webkit-linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
background-position: 0 1.02em;
text-shadow: .05em 0 white, -.05em 0 white; /*水平左、右偏移一个背景色的阴影，用于降级字母的下半处理*/
} p:nth-child(2) a {
background: -webkit-linear-gradient(180deg, gray 66%, transparent 0) repeat-x; /*0,180deg都是可以的*/
background-size: .2em 2px;
background-position: 0 1em;
}
</style>
</head>
<body>
<p>The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.</p>
<p>The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.</p>
</body>
五、现实中的文字效果
- text-shadow实现的效果不能退化，如果浏览器不支持则看不见，可以用filter实现，但支持得更好（但可以退化样式）
- text-shadow设置多个值，并按递增规则偏移，可以制作出立体效果
- 凸版文字
- 字体太小text-shadow属性产生的效果不可接受
- 示例代码：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
font: 110%/1.6 Baskerville, Palatino, serif; /*字体过小表现不出样式*/
}
.wrap{
width: 200px;
background: hsl(210, 13%, 60%);
color: hsl(210, 13%, 30%);
padding: .1em;
text-shadow: 0 1px 1px hsla(0, 0%, 100%, .8);
}
.wrap02{
margin-top: 10px;
width: 200px;
background: hsl(210, 13%, 60%);
color: hsl(210, 13%, 30%);
padding: .1em;
text-shadow: 0 -1px 1px hsla(0, 0%, 100%, .8);
}
</style>
</head>
<body>
<div class="wrap">
<span>根据协议，四省（市）将深化教育综合改革合作交流.</span>
</div>
<div class="wrap02">
<span>根据协议，四省（市）将深化教育综合改革合作交流.</span>
</div>
</body>
- 其他效果示例代码：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
text-align: center;
font-size: 38px;
width: 200px;
background: deeppink;
color: white;
text-shadow: 1px 1px black, -1px 1px black, -1px -1px black, 1px -1px black;
}
.wrap02{
margin-top: 10px;
font-size: 38px;
width: 200px;
text-align: center;
background: #203;
color: #ffc;
transition: 1s;
}
.wrap02:hover{
text-shadow: 0 0 .1em, 0 0 .3em;
color:transparent;
}
.wrap03{
margin-top: 10px;
width: 200px;
font-size: 38px;
text-align: center;
color: white;
background: hsl(0,50%,45%);
text-shadow: 0 1px hsl(0, 0%, 85%),
0 2px hsl(0, 0%, 65%),
0 3px hsl(0, 0%, 45%),
0 4px hsl(0, 0%, 25%),
0 5px hsl(0, 0%, 5%),
0 5px 10px black;
}
.wrap04{
margin-top: 10px;
width: 200px;
font-size: 38px;
text-align: center;
color: white;
background: hsl(0,50%,45%);
text-shadow: 1px 1px black, 2px 2px black,
3px 3px black, 4px 4px black,
5px 5px black, 6px 6px black,
7px 7px black, 8px 8px black;
}
</style>
</head>
<body>
<div class="wrap">
<span>CSS</span>
</div>
<div class="wrap02">
<span>CSS</span>
</div>
<div class="wrap03">
<span>CSS</span>
</div>
<div class="wrap04">
<span>CSS</span>
</div>
</body>
六、自定义复选框
- 系统自带复选框美化
- 利用css3提供的:checked伪类选择器实现
- 宽、高、对齐等设置单位最好用em，让按钮变得更为灵活
- 示例代码：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input[type="checkbox"]{
display: none;
}
input[type="checkbox"] + label::before{
content: '\a0'; /*不换行空格*/
display: inline-block;
background: silver;
border-radius: .2em;
margin-right: .2em;
width: .8em;
height: .8em;
line-height: .65em;
text-indent: .15em;
}
input[type="checkbox"]:checked + label::before{
content: '\2713';
background: yellowgreen;
}
</style>
</head>
<body>
<input type="checkbox" id="anesome"/>
<label for="anesome">anesome</label>
</body>
- 开关按钮的实现
- 伪类选择器 + 修饰label元素实现
- 示例代码：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input[type="checkbox"]{
display: none;
}
input[type="checkbox"] + label{
display: inline-block;
padding: .3em .5em;
background: #ccc;
border: 1px solid rgba(0, 0, 0, .2);
background-image: linear-gradient(#ddd,#bbb);
text-align: center;
border-radius: .3em;
box-shadow: 0 1px white inset;
text-shadow: 0 1px 1px white;
}
input[type="checkbox"]:checked + label{
box-shadow: .05em .1em .2em rgba(0, 0, 0, .6) inset;
border-color: rgba(0, 0, 0, .3);
background: #bbb;
}
</style>
</head>
<body>
<input type="checkbox" id="anesome"/>
<label for="anesome">anesome</label>
</body>
CSS3新特性应用之字体排印的更多相关文章
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- css3新特性总结
一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- css css3新特性
css css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
- HTML5和CSS3新特性
1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- Atitti css3 新特性attilax总结
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- CSS3新特性（阴影、动画、渐变、变形、伪元素等）
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
随机推荐
- CSS笔记
初级篇===========================选择器============================元素选择器css:h1{color: red}html:<h1> ...
- BZOJ 1597: [Usaco2008 Mar]土地购买 [斜率优化DP]
1597: [Usaco2008 Mar]土地购买 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4026 Solved: 1473[Submit] ...
- 我的MYSQL学习心得（四） 数据类型
我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(五) 运 ...
- Linux学习日记-WCF RestFul的部署(三)
一.关于WCF 的部署 默认的wshttp风格的wcf是很容易部署上去的,但是这里给个建议尽量不要使用WCF的配置文件去部署尽管 我们都已经很熟悉了,在使用配置文件你会发现各种蛋疼的问题. 二.WCF ...
- 让ASP.NET5在Jexus上飞呀飞
就在最近一段时间,“Visual Studio 2015 CTP 5”(以下简称CTP5)发布了,CTP5的发布不仅标志着新一代的VisualStudio正式发布又向前迈出了一步,还标志着距离ASP. ...
- Nova PhoneGap框架 第一章 前言
Nova PhoneGap Framework诞生于2012年11月,从第一个版本的发布到现在,这个框架经历了多个项目的考验.一直以来我们也持续更新这个框架,使其不断完善.到现在,这个框架已比较稳定了 ...
- 周六搞事情，微信小程序开发文档已放出！
程序员们,你们有事干了! 个人感觉不管是什么形式的UI技术,都无法决定一个产品的生死,核心还是服务和模式的创新. 某些方面和ApiCloud好像,但发展前景远远胜过ApiCloud. 微信小程序可以为 ...
- 小丁带你走进git世界五-远程仓库
一.文件,指令讲解 首先讲一下远程仓库和本地仓库在文件上面的区别,首先我们来看下对比图(当然这里说的区别是在于.git文件下面的文件内容,至于里面内容我们不会关注)這裡我们进行了相同的操作就是本地仓库 ...
- React Native 环境搭建
1,安装 HomeBrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install ...
- C#中的Session
一: 网站开发中,为了保存用户信息我们就会用到session. Session具有以下特点:(1)Session中的数据保存在服务器端:(2)Session中可以保存任意类型的数据:(2)Sessio ...