摘要：

　　段落首字母放大是指放大段落开头的字母或者汉字，主要使用了css的first-letter伪类选择器。

单行放大：

　　在第一行内放大，效果如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body {
  8.             background-color: #FFFFFF;
  9.             color: #595959;
  10.         }
  11.         .contain {
  12.             width: 150px;
  13.         }
  14.         .contain p {
  15.             font: 80%/1.6 Verdana, Geneva, Arial, Helvetica, sans-serif;
  16.         }
  17.         .contain p:first-letter {
  18.             font-size: 2em;
  19.             padding: 0.1em;
  20.             color: #000000;
  21.             vertical-align: middle;
  22.         }
  23.         .contain p:first-line {
  24.             color: red;
  25.         }
  26.         .contain p:first-child:first-letter {
  27.             color: red;
  28.         }
  29.         .contain p:first-child:first-line {
  30.             color: inherit;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="contain">
  36.         <p>This is a test article. This is a test article.</p>
  37.         <p>This is a test article. This is a test article.</p>
  38.         <p>这是一个测试</p>
  39.     </div>
  40. </body>
  41. </html>

注意：first-letter支持IE7+，first-line支持IE8+

多行放大：

　　效果如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7. </head>
  8. <body>
  9.     <style>
  10.     * {
  11.         margin:0;
  12.         padding:0;
  13.     }
  14.     body {
  15.         font-size:12px;
  16.         font-family: Tahoma, Geneva, sans-serif;
  17.         padding:200px;
  18.     }
  19.     p {
  20.         width:150px;
  21.         color:#000;
  22.         font-size:1em;
  23.         margin-bottom: 20px;
  24.     }
  25.     p:first-letter{
  26.         float: left;
  27.         font-size:2.5em;
  28.         padding-right:5px;
  29.         text-transform:uppercase;
  30.     }
  31.     p:first-line{
  32.         color:#f00;
  33.     }
  34.     </style>
  35.     <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>
  36.     <p>这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。</p>
  37. </body>
  38. </html>

css段落首字母下沉的更多相关文章

  1. css系列-段落首字符下沉、缩进及特殊显示

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS： 首字母字体变大时下划线不对齐的解决方法

    昨天在写2017年百度ife任务六的时候遇到了一个排版问题,需要首字母字体变大的同时,下划线对齐. 首先使用了 ::first-letter伪元素的选择器,将字体变大后,发现下划线没法对齐,代码如下: ...

  3. css first-letter实现首字(字母)下沉效果

    css 首字下沉效果原理 首字下沉主要使用到css的first-letter伪元素,然后配合使用font-size和float来设置文字的样式即可实现. first-letter选择器选取指定元素文本 ...

  4. CSS中使用text-transform实现首字母大写

    CSS中首字母大写怎么实现?日常生活中需求方对英文的要求比较多,有的时候需要让英文单词或拼音首个字母大写;有的时候需要让全文中英文单词全大写或小写.这时候我们就需要text-transform属性了. ...

  5. div+CSS实现段落首行缩进两个字符

    段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...

  6. CSS实现英文或拼音单词首字母大写

    CSS实现英文或拼音单词首字母大写,只需要在css样式中加入: text-transform: capitalize 即可. 测试代码如下: <!doctype html> <htm ...

  7. Css中如何使英文和拼音变成全大写、全小写和首字母大写？

    想要实现英文和中文拼音变成全大写.全小写和首个字母大写,需要用到 css中text-transform样式属性,接下来介绍一下 1.text-transform的值 1)Capitalize:英文拼音 ...

  8. Div+Css实现段落首行缩进两个字符（text-indent标签）

    段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...

  9. 小tips：JS/CSS实现字符串单词首字母大写

    css实现: text-transform:capitalize; JS代码一: String.prototype.firstUpperCase = function(){ return this.r ...

随机推荐

  1. pycharm 操作的一些设置，记录下

    机器学习中大量的用到了Python,因此需要有pycharm作为Python的编译工具,配合anconda环境进行配置,将macos,tensorflow ,python的配置记录下: We sugg ...

  2. hbase源码系列（二）HTable 探秘

    hbase的源码终于搞一个段落了,在接下来的一个月,着重于把看过的源码提炼一下,对一些有意思的主题进行分享一下.继上一篇讲了负载均衡之后,这一篇我们从client开始讲吧,从client到master ...

  3. 【oneday_onepage】——Tastes differ!

    You know Ian and Felton can be really boring sometimes. They're always arguing, like. like children. ...

  4. Altium Designer 正反面布元器件

    1.统一设置PCB中注释字体的大小:在PCB编辑状态,鼠标指向任一需要修改的丝印字符,右键选择find similar object,这时会弹出的对话框中将代表元件字符的选项右边对应选项改为same, ...

  5. PHP利用CURL_MULTI实现多线程

    PHP中的curl_multi一类函数可以实现同时请求多个url,而不是一个一个依次请求,这就类似一个进程实现了多个线程的功能,因此可以使用PHP利用CURL_MULTI实现完成多线程类的任务,下面就 ...

  6. Laravel 定时任务

    一 .创建Command文件 php artisan make:console RefreshToken 创建app/Console/Commands 下创建RefreshToken.php 取一个名 ...

  7. JSP字符集编码集合

    在这里,我们先说说JSP/Servlet中的几个编码的作用. 在JSP/Servlet 中主要有以下几个地方可以设置编码,pageEncoding="UTF-8".contentT ...

  8. idea破解，idea激活，使用破解补丁无需注册码

    dea激活,JetBrain旗下软件激活 前言 idea激活有多种方式,网上较多的是使用注册码或者填License server网址,目前(2017年8月19日)使用注册码的方式,亲测可用的只有lan ...

  9. 转载：案例用Excel对会员客户交易数据进行RFM分析

    案例:用Excel对会员客户交易数据进行RFM分析                                背景: 一个会员服务的企业,有近1年约1200个会员客户的收银数据.由于公司想针对不同 ...

  10. 锐捷 ac ap 连接 记录

    需要用到锐捷的ac管理2台ap.记录一下. 参考文档 锐捷WLAN无线产品一本通(V6.0): http://www.ruijie.com.cn/fw/wd/58033 1.确认AC无线交换机和AP是 ...