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 ...
随机推荐
- [uart]linux串口的阻塞非阻塞切换
比如写的时候设置为阻塞,读的时候设置为非阻塞,就需要下面的切换方式 1.获取文件的flags,即open函数的第二个参数: flags = fcntl(fd,F_GETFL,0); 2.设置文件的fl ...
- mybatis注解方式批量插入数据
@Insert("<script>" + "INSERT INTO cms_portal_menu(name,service_type,index_code) ...
- php 验证码代码
1.js代码 function fleshVerify(type){ //重载验证码 var timenow = new Date().getTime(); if (type) { $('verify ...
- jQuery（六）：value值操作
val()可以获取或设置元素的value属性值.语法如下: 示例: <!DOCTYPE html> <html lang="en"> <head> ...
- Jquery函数大全 - 案例说明
function(){$(this).addClass(”out”);}); toggle( fn, fn ) 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二 ...
- 解决android studio上“com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65935”问题
我是在更换应用的一个jar包时发生的这个错误,网上查到说是因为同时在工程中引入了多个第三方jar包,导致调用的方法数超过了android设定的65935个(DEX 64K problem),进而导致d ...
- SparkR初体验2.0
突然有个想法,R只能处理百万级别的数据,如果R能运行在Spark上多好!搜了下发现13年SparkR这个项目就启动了,感谢美帝! 1.你肯定得先装个spark吧.看这:Spark本地模式与Spark ...
- 自然语言交流系统 phxnet团队 创新实训 项目博客 （七）
在本项目中使用到的“语音转文本”的技术总结: 语音转文本部分是调用的科大讯飞的在线语音,它的激发方式是按键,通过按钮触发开启安卓设备的录音,此部分需要在源码中写入关于安卓权限的要求,来调用安卓的录音权 ...
- USB2.0学习笔记连载（十）：关于WIN8及以上系统哈希值问题
笔者上一篇博客讲解了关于驱动的安装,笔者使用的系统是win8.1系统,那么对于win8系统及以上系统,会对外部设备,没有在windows系统中进行签名过的,都是不允许在windows系统中进行安装的, ...
- matlab中生成随机数的相关知识
randperm()函数: 功能:用于生成从1到N的随机整数,并且没有重复,它本质上是一个随机排序的函数: 用法:1. randperm(n) 随机生成从1到n的不重复的整数: 2. ran ...