css段落首字母下沉
2014-12-31 14:55
381 查看
摘要:
段落首字母放大是指放大段落开头的字母或者汉字,主要使用了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 美化段落文本之首字下沉
- CSS 美化段落文本之首字下沉
- CSS控制段落首字母放大显示
- css系列-段落首字符下沉、缩进及特殊显示
- CSS设置文本——字母、单词、段落
- 【Html】段落排版--中文字间距、字母间距
- css实现文章每个段落开头自动缩进两个空格
- CSS段落间距调整 P标签段落上下距离如何设置
- CSS控制段落每段首空两格
- div 实现长英文字母自动换行CSS
- css 控制展示的字母的大小写
- div+CSS里长英文字母如何自动换行
- CSS设置文字和段落属性
- css控制字母间距,单词间距,行距
- CSS文字和段落排版
- CSS之设置p段落中的文字与页面左侧缩进两个字符!...
- css设置段落缩进、行距
- CSS 数字和字母将容器撑大问题解决
- css实现文章每个段落开头自动缩进两个空格