css段落首字母下沉
摘要：
段落首字母放大是指放大段落开头的字母或者汉字，主要使用了css的first-letter伪类选择器。
单行放大：
在第一行内放大，效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-color: #FFFFFF;
color: #595959;
}
.contain {
width: 150px;
}
.contain p {
font: 80%/1.6 Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.contain p:first-letter {
font-size: 2em;
padding: 0.1em;
color: #000000;
vertical-align: middle;
}
.contain p:first-line {
color: red;
}
.contain p:first-child:first-letter {
color: red;
}
.contain p:first-child:first-line {
color: inherit;
}
</style>
</head>
<body>
<div class="contain">
<p>This is a test article. This is a test article.</p>
<p>This is a test article. This is a test article.</p>
<p>这是一个测试</p>
</div>
</body>
</html>
注意：first-letter支持IE7+，first-line支持IE8+
多行放大：
效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> </head>
<body>
<style>
* {
margin:0;
padding:0;
}
body {
font-size:12px;
font-family: Tahoma, Geneva, sans-serif;
padding:200px;
}
p {
width:150px;
color:#000;
font-size:1em;
margin-bottom: 20px;
}
p:first-letter{
float: left;
font-size:2.5em;
padding-right:5px;
text-transform:uppercase;
}
p:first-line{
color:#f00;
}
</style>
<p>This is a test article. This is a test article.This is a test article. This is a test article.This is a test article. This is a test article.</p>
<p>这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。</p>
</body>
</html>
css段落首字母下沉的更多相关文章
- css系列-段落首字符下沉、缩进及特殊显示
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS： 首字母字体变大时下划线不对齐的解决方法
昨天在写2017年百度ife任务六的时候遇到了一个排版问题,需要首字母字体变大的同时,下划线对齐. 首先使用了 ::first-letter伪元素的选择器,将字体变大后,发现下划线没法对齐,代码如下: ...
- css first-letter实现首字(字母)下沉效果
css 首字下沉效果原理 首字下沉主要使用到css的first-letter伪元素,然后配合使用font-size和float来设置文字的样式即可实现. first-letter选择器选取指定元素文本 ...
- CSS中使用text-transform实现首字母大写
CSS中首字母大写怎么实现?日常生活中需求方对英文的要求比较多,有的时候需要让英文单词或拼音首个字母大写;有的时候需要让全文中英文单词全大写或小写.这时候我们就需要text-transform属性了. ...
- div+CSS实现段落首行缩进两个字符
段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...
- CSS实现英文或拼音单词首字母大写
CSS实现英文或拼音单词首字母大写,只需要在css样式中加入: text-transform: capitalize 即可. 测试代码如下: <!doctype html> <htm ...
- Css中如何使英文和拼音变成全大写、全小写和首字母大写？
想要实现英文和中文拼音变成全大写.全小写和首个字母大写,需要用到 css中text-transform样式属性,接下来介绍一下 1.text-transform的值 1)Capitalize:英文拼音 ...
- Div+Css实现段落首行缩进两个字符（text-indent标签）
段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...
- 小tips：JS/CSS实现字符串单词首字母大写
css实现: text-transform:capitalize; JS代码一: String.prototype.firstUpperCase = function(){ return this.r ...
随机推荐
- Android——继续深造——从安装Android Studio 2.0开始（详）
一.下载JDK,JRE,SDK http://jingyan.baidu.com/article/eb9f7b6d884ea7869364e8eb.html 二.配置环境变量: 我的电脑->属性 ...
- prepareEditor
@Override public Component prepareEditor(TableCellEditor editor, int row, int column) { final Compon ...
- log_bin_trust_function_creators
log_bin_trust_function_creators错误解决 当有mysql本地或远程建立function或procedure时报上面的错误 或者如果开启了二进制日志,但是用户没有suppe ...
- nfs挂载hdfs，实现云存储
本来不知道nfs是啥,因为群里的Harry童鞋有个问题,如何把本地目录挂载到hdfs上,搞什么云存储,说那么巧就是那么巧,HDP支持nfs,然后我就照着文档的说明去做,最后弄出来了. 1.修改机器上的 ...
- Android训练课程(Android Training) - 测试你的Android Activity
你应该开始编写和启动测试作为你的android程序开发周期的一部分.写的好的测试能够帮助你更早的发现bug和使你对你的代码有信心. 一个测试用例定义了一些对象和方法的集合,用于启动多样的彼此独立的测试 ...
- 30个开源电子商务系统(PHP)
osCommerce osCommerce是一款著名的PHP开源电子商务解决方案,提出“开箱即用”的强大功能,使网上商店安装非常方便快捷,并可以作为GNU通用公共授权的开源项目免费发布.osComme ...
- 百度地图Api进阶教程-实例高级操作8.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- scrapy 报错 no module named win32api 的解决方案
解决方案: 原因是缺少win32,到 http://sourceforge.net/projects/pywin32/files/ 找到对应的版本进行下载,直接安装即可 =============== ...
- SimpleDraweeView 设置圆角不生效问题
采用的是xml配置 roundedCornerRadius 参数方法 adverPic.setImageURI("http://xx.xx.xx.xx/123.jpg"); 设置c ...
- 在天河二号上对比Julia，Python和R语言
Julia是一款高级高效为技术计算(technical computing)而设计的编程语言,其语法与其他计算环境类似.其为分布式计算和并行所设计,最知名的地方在于其接近C语言的高效率. 按开发者的话 ...