css入门教程 网页首字下沉,CSS制作首字下沉_CSS Inline Layout Module, initial-letter, CSS3 教程_w3cplus...
在杂志排版中,常常能看到首字下沉的效果。
在Web的排版中,也常常能看到上图这样的效果。并且常常看到的是首段首字下沉。那么今天这篇文章咱们来聊聊如何使用CSS实现首字下沉效果。
::first-letter实现首字下沉效果
早期中,实现首字下沉都是能过伪元素::first-letter来实现。其实现原重非常的简单,就是把首字font-size值设置较大,然后能过float来实现。比如:
p::first-letter {
color: #c69c6d;
float: left;
font-size: 5em;
margin: 0 .2em 0 0;
}
上面这段代码将会把所有段落的首字下沉,如果仅需要对首段首字下沉,那还需要配合其它的选择器来实现。
p:first-child::first-letter {
color: #c69c6d;
float: left;
font-size: 5em;
margin: 0 .2em 0 0;
}
Initial-Letter
前面看到的效果是老式的CSS实现的首字下沉效果。虽然是实现了,但借助float还是存在一定的缺陷,而且灵活度也并不强。不过值得庆幸的是,在CSS Inline Layout Module Level 3提供了一个新的思路和方案:采用initial-letter。
这个新属性能非常轻易的帮且我们实现首字下沉的效果,但他只能运用于块容器首行首字。同样需要配合::first-letter一起使用。比如:
.intro::first-letter {
initial-letter: 7;
}
得到的效果如下图所示:
initial-letter有一个非常灵活之处,它接受两个值:
initial-letter: 3 3
第一个值表示的行高,第二个表示沉度。将前面的示例换换:
.raised-cap::first-letter {
initial-letter: 3 1;
}
.sunken-cap::first-letter {
initial-letter: 3 2;
}
.drop-cap::first-letter {
initial-letter: 3;
}
最终得到的效果如下:
再来看看浏览器目前对initial-letter属性的支持力度。大家或许会很失望,但不用过于担心,我想不需要过多久浏览器会很快就对该属性支持。
虽然浏览器对该属性支持度还是满天红色,但我们可以借助早前介绍的@supports来做一些降级处理:
// 浏览器不支持采用以前的方案
@supports (not(initial-letter: 5)) and (not(-webkit-initial-letter: 5)) {
.intro::first-letter {
color: hsl(350, 50%, 50%);
font-size: $cap-size;
float: left;
line-height: .7;
margin: 17px 2px 0 0;
}
}
// 支持的浏览器采用下面的方案
@supports (initial-letter: 5) or (-webkit-initial-letter: 5) {
.intro:nth-of-type(1)::first-letter {
initial-letter: 3;
}
}
效果如下:
总结
文章简单介绍了如何使用CSS实现首字下沉效果。特别是CSS Inline Layout Module Level 3新模块中提供的initial-letter属性。该属性能更灵活的实现首字下沉效果。这篇文章只是简单的介绍了initial-letter属性,但该模块还提供了其它的一些属性,比如initial-letter-align和initial-letter-wrap。后面将花一个篇幅来介绍整个模块中相关属性的使用。
扩展阅读
常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。
css入门教程 网页首字下沉,CSS制作首字下沉_CSS Inline Layout Module, initial-letter, CSS3 教程_w3cplus...相关推荐
- html语言设置网页背景,HTML+CSS入门 设置网页中的背景图片的5个属性
本篇教程介绍了HTML+CSS入门 设置网页中的背景图片的5个属性,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 在css代码中设置背景图片的方法,包括背景图片.背景重复 ...
- vue html css,HTML+CSS入门 在vue中使用animate.css
本篇教程介绍了HTML+CSS入门 在vue中使用animate.css,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < animate.css是一款前端动画库,相似的有v ...
- CSS入门(网页皮肉)——知识汇总①
CSS知识汇总① 选择器 元素选择器: <style type="text/css">h1{color: (字体颜色);background-color: (背景颜色) ...
- web前端实训作业 html+css+javascript 水果网页设计实例 企业网站制作
web前端实训作业 html+css+javascript 仿果然新鲜水果(6页面)网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无 ...
- 基于HTML电商项目的设计与实现—— HTML+CSS+JavaScrip家具网页设计实例 企业网站制作...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
- 基于HTML电商项目的设计与实现—— HTML+CSS+JavaScrip家具网页设计实例 企业网站制作
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
- CSS入门笔记5(浏览器渲染,CSS动画全解)
CSS动画 要说的话 i.动画是什么呢? ii.怎么写出动画效果呢? iii.和动画息息相关的是浏览器的渲染 1) 浏览器渲染过程 2)怎么更新样式呢? 3)这些方式有三种不同的渲染方式* 4)三种更 ...
- web前端期末大作业 html+css+javascript化妆品网页设计实例 企业网站制作
- 圆点字、ps制作圆点字教程
(作者;邱锡纶 撰写时间:2019年6月28日星期五) 由上面图片可知,这次我们的主题是制作圆点文字, 第一步:首先,我们先来新建一个空白图层,也可以导进一张图片等作为背景 .文中我以深蓝色图片作为背 ...
最新文章
- 基于GAN的自动驾驶汽车语义分割
- 注册修复动态链接库DLL文件
- Deep Learning 26:读论文“Maxout Networks”——ICML 2013
- IntelliJ idea 给git下来的项目配置python环境(Anaconda)
- ConfigurableListableBeanFactory
- 开通博客园,新的网络生活的开始
- ios沙盒机制与文件操作
- 显示出eclipse文件层次
- HDUOJ3549 - Flow Problem(网络流+最大流最小割+模板)
- 视频过大怎么压缩变小
- 微信5.0安卓内测版下载
- spring教程笔记2
- boostrap框架学习
- python折痕检测_无纺布折痕检测(2)· 基于Laws纹理滤波的折痕检测
- 谈谈我在创业公司的感悟
- word中方框中打钩
- Brother打印机无线连接电脑端脱机状态解决方法
- 自动提交flag-python
- MAC结合LINUX进行Jmeter进行java代码压力测试
- 1.3-聊天机器人的模块和框架