首字下沉，第一行文字变色，选中文字样式

May 22, 2018

8228 views

1381 words

描述：每一段的第一个字变大下沉，每一段的第一行的文字颜色发生改变，无论屏幕多大，每一行显示多少文字，都是第一行文字颜色发生改变。鼠标选中文字之后，文字的样式发生改变。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首字下沉，第一行文字变色，选中文字样式</title>
    <style>
        body, ul, dl, dt, dd {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: '微软雅黑';
            background-color: #F7F7F7;
            color: #666;
        }

        .content {
            width: 960px;
            margin: 0 auto;
            font-size: 20px;
        }

        p {
            text-indent: 40px;
            line-height: 1.5;
        }

        p:first-child {
            text-indent: 0;
        }

        p:first-letter{
            font-size:40px;
            float: left;
            color:red;
        }

        p::first-line{
            color:blue;
        }
        /* ::selection 表示当前选中的区域 ， 通过设置 color  background*/
        p::selection{
            background-color: rgba(255,0,0,0.3);
            color:green;
        }
    </style>
</head>
<body>
<div class="content">
    <p>格物致知是中国古代儒家思想中的一个重要概念，源于《礼记‧大学》八目─格物、致知、诚意、正心、修身、齐家、治国、平天下─所论述的『欲诚其意者，先致其知；致知在格物。物格而后知至，知至而后意诚』此段。致知即获得知识而获得知识的途径在于在于认识。研究万事万物。致知在格物。 格物的意思是认识，研究万事万物的道理，通过对万事万物的认识，研究后才能获得知识，即格物而后知至。致知在格物，格物而后知至强调了格物，致知二着相辅相成，相得益彰的关系。</p>
    <p>美籍华裔物理学家，丁肇中先生的报告中的一篇漫谈式的议论文。作者先阐明格物致知精神在今天的重要性，而后揭示格物致知的真正意义。他曾在论文中提到。现代学术的基础就是实地的探察，就是现在所谓的实验。他在一系列论述中有着重提到科学进展的历史告诉我们，新的知识只能通过实地实验而得到。</p>
</div>
</body>
</html>

首字下沉，第一行文字变色，选中文字样式