摘要：

　　段落首字母放大是指放大段落开头的字母或者汉字，主要使用了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. 看不懂深度Linux系统的文件管理器图标

    为了保持对Linux的熟悉度,MacBookPro一般放在公司,家里(每次用这个词是我觉得最纠结的时候,我现在有家吗?)用的是普通笔记本装了深度Linux. 之所以安装深度,主要的原因应该是支持国产吧 ...

  2. Charles proxy tools 移动开发调试

    简介 本文为InfoQ中文站特供稿件,首发地址为:文章链接.如需转载,请与InfoQ中文站联系. Charles是在Mac下常用的截取网络封包的工具,在做iOS开发时,我们为了调试与服务器端的网络通讯 ...

  3. SpringBoot2 启动报错 Failed to auto-configure a DataSource

    今天Spring Boot 2.0正式版发布,寻思着搭个小demo尝试一下Spring Boot的新特性,使用idea创建项目.在选择组件时添加了mysql.mybatis 然后在第一次启动的时候启动 ...

  4. ecshop常用的一些变量

    <!-- {if $smarty.session.user_rank gt 1}-->gt大于 lt小于1:ecshop模板中调用session的值 {$smarty.session.us ...

  5. Web服务端开发需要考虑的问题（续）

    方案汇总API设计应用架构代码库管理工具链工作计划目标预期关键过程service-driver接口定义及实现web样例 方案汇总 API设计 基于https. 只提供纯数据. 基于一开始提出的rest ...

  6. Java：集合与数组转换

    List,Set转换为数组的方法. toArray函数有两种形式,一种无参数,一种带参数,注意带参数形式中,要指明数组的大小. public void convertCollectionToArray ...

  7. Qt封装QTcpServer参考资料--QT4中构建多线程的服务器

    首先说一下对多线程这个名词的理解过程.以前听说过很多次多线程这个词,而且往往与服务器联系起来,因此一直把多线程误解为服务器特有的功能:直到这次课程设计,仔细学习了一下多线程的机制,才知道真正的意思.简 ...

  8. Qt之QLocalServer

    简述 QLocalServer提供了一个基于本地socket的server. QLocalServer可以接受来自本地socket的连接.通过调用listen(),让server监听来自特定key的连 ...

  9. tornado 的 define 和options方法解读

    一.源码解读 tornado是facebook开源的非阻塞web容器,类似java的netty,tornado.options是负责解析tornado容器的全局参数的,同时也能够解析命令行传递的参数和 ...

  10. RAP接口管理系统import进eclipse进行二次开发

    接口管理工具用了RAP,又是巴巴队伍的东西,开源的,需要进行二次开发方可被使用. 前几个月的时候鼓捣了一阵子,下来一片红,然后就没管它了.最近又捡起.直接git导入项目即可. 安装git插件,网上很多 ...