摘要：

　　段落首字母放大是指放大段落开头的字母或者汉字，主要使用了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段落首字母下沉的更多相关文章

  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. maven配置阿里云仓库

    在mirrors的节点中添加: <mirror> <!--This sends everything else to /public --> <id>nexus-a ...

  2. Java 9中的 9个 新特性

    Java 9 中的 9个 新特性 java 7 2011发布,Java 8 2014发布,java9发布于2017年9月21日. 你可能已经听说过 Java 9 的模块系统,但是这个新版本还有许多其它 ...

  3. MFC函数——CWnd::OnEraseBkgnd

    CWnd::OnEraseBkgnd afx_msg BOOL OnEraseBkgnd( CDC* pDC ); 返回值: 如果它擦除了背景,则返回非零值:否则返回0. 参数: pDC 指定了设备环 ...

  4. 用stringr包处理字符串

    <Machine Learning for Hackers>一书的合著者John Myles White近日接受了一个访谈.在访谈中他提到了自己在R中常用的几个扩展包,其中包括用ggplo ...

  5. 使用 pv 命令监控 linux 命令的执行进度

    如果你是一个 linux 系统管理员,那么毫无疑问你必须花费大量的工作时间在命令行上:安装和卸载软件,监视系统状态,复制.移动.删除文件,查错,等等.很多时候都是你输入一个命令,然后等待很长时间直到执 ...

  6. 《FPGA全程进阶---实战演练》第一章之如何学习FPGA

    对于很多初学者,大部分都是急于求成,熟不知越是急于求成,最终越是学无所成,到头来两手空空,要学好FPGA,必须弄懂FPGA本质的一些内容. 1.FPGA内部结构及基本原理 FPGA是可以编程的,必须通 ...

  7. static为什么一般与final一起用？

    static和final的意义是不同的,static修饰的时候代表对象是静态的,而final修饰的时候代表对象只能赋值一次,他们连用的时候是因为定义的那个对象既要它是静态的,也要求它的值不能再被修改. ...

  8. 第一个shell程序

    前言:我为什么又来学习shell呢?因为这个轻量级的编程小脚本语言能够帮我处理一些基于linux的复杂手工工作.真是一言难尽,学会一门又来一门!! 看了2天这个教程,试着写了一个小脚本,没啥技术含量, ...

  9. (笔记)Mysql实例：建库建表并插入数据1

    drop database if exists school;  // 如果存在school则删除create database school;  // 建立库schooluse school;  / ...

  10. Android 8 wifi 扫描时间间隔

    wifi setting界面扫描时间间隔:10s 不在wifi setting界面,扫描时间间隔,最小20s,然后按找2倍的间隔进行递增,40s,60s..., 最大160s PNO 即Preferr ...