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 ...
随机推荐
- Java并发编程：并发容器之CopyOnWriteArrayList<转>
原文链接: http://ifeve.com/java-copy-on-write/ Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容 ...
- openvpn push "route
①在openvpn的配置文件里增加push "route 192.168.4.0 255.255.255.0",目的是为客户端加一条路由,这样客户端才有可能访问到办公网络中出VPN ...
- Eureka 高可用
spring: profiles: eureka1 server: port: 8001 eureka: instance: hostname: eureka1 client: serviceUrl: ...
- Graph-BFS-图的广度优先遍历
#include <iostream> #include <queue> using namespace std; /* 5 5 1 2 1 3 1 5 2 4 3 5 1 2 ...
- eclipse format xml
eclipse版本信息:Version: Luna Release (4.4.0) eclipse默认使用Tab缩进,显得不是那么专业. 因为不同的系统对Tab的支持是不一样的,所以在不同的系统或者编 ...
- Android Studio生成keystore签名文件步骤讲解
Android App打包时要用到签名文件,Android Studio生成签名文件步骤如下: Build---Generate Signed Apk...如图: 如果你的project中有2个或者2 ...
- SpagoBI 教程 Lesson 2: OLAP with JPIVOT
SpagoBI Lesson 2: OLAP with JPIVOT Online Analytical Processing Online Analytical Processing (OLAP) ...
- GDB调试——常用的命令
首先说明一点,如果我们要使用GDB来调试我们的C/C++程序时,在使用GCC编译程序时,应该带上 –g 参数, 它负责生成 与GDB相关的调试信息: 1.如何对一个文件启动GDB调试? 方法一: 命令 ...
- C#基础---------------C#正则表达式2
C#正则表达式语法规则详解 正则表达式基础知识 一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式. 字母文本指的是普通文本如"a ...
- (原)在firefly_rk3288开发板上解决openGL在设置32位色深以后出现花屏的问题
转载请注明出处:http://www.cnblogs.com/lihaiping/p/5567141.html 在做openGL测试的过程中,根据论坛上的帖子,在使用/bin/fbset -a -no ...