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 ...
随机推荐
- [phy]在uboot阶段失能phy芯片
在uboot阶段power down掉phy芯片 uenvcmd=mdio 0x800; mmc rescan mdio为uboot支持命令 7:phy芯片地址 0:phy芯片工作模式寄存器地址 0x ...
- if 语句练习 身高体重问题
public class d { /** * @param args */ public static void main(String[] args) { // TODO 自动生成的方法存根 int ...
- vba的一个DB操作类
Option Explicit '-------------------------------------------------------- '[Class Name]: DBHelper '[ ...
- PCL点云配准（2）
(1)正态分布变换进行配准(normal Distributions Transform) 介绍关于如何使用正态分布算法来确定两个大型点云之间的刚体变换,正态分布变换算法是一个配准算法,它应用于三维点 ...
- eclipse创建文件夹河包
资源的平常使用的主要有三种source/fold/package
- 代码动态设置edittext输入类型为密码类型
开发中常常会用到EditText输入框,要将他的输入类型设置为密码输入,但是直接在布局文件中设置时,hint字体风格就会不一样 例如,在布局文件中直接设置是这样的(如下图),字体风格明显跟上一行的不一 ...
- 你应该知道的CSS2.0中最常用的18条技巧
一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读. 具体内容请浏览:CSS常用缩写语法 二.明确定义单位,除非值为0. 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中 ...
- [hadoop读书笔记]前言
hadoop2.0+主要变化: 全新的MapReduce 2,它建立在一个新的分布式资源管理系统之上,该系统称之为YARN. YARN:分布式资源管理系统
- 《Qt数据类型》--QByteArray,QString,int,hex之间的转化
对于QString和QByteArray,他们都有一个toInt的静态函数,QString::toInt()是根据string的字面值转化为int类型,比如string:"123" ...
- Selenium常用操作汇总二——如何得到弹出窗口
在selenium 1.X里面得到弹出窗口是一件比较麻烦的事,特别是新开窗口没有id.name的时候.当时还整理了处理了几种方法,详见:http://seleniumcn.cn/read.php?ti ...