css如何让网站首字放大?

来自:互联网
时间:2019-11-11
阅读:

本章给大家介绍CSS如何设置首字放大效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

在很多的文章中,都有一个首字放大的效果,在CSS中同样可以实现该效果。

CSS中通过对第一个字,进行单独的设置从而实现该效果。

<html>
    <head>
        <title>首字放大</title>
        <style>
        body{
           background-color:black;
        }
        p{
            font-size:15px;
            color:white;
        }
        p span{
            font-size:60px;
            float:left;
            padding-right:5px;
            font-weight:bold;
            font-family:黑体;
            color:yellow;
        }
         </style>
    </head>
    <body>
        <p><span>首</span>字放大示例,首字放大示例,首字放大示例,首字放大示例,</p>
        <p>首字放大示例,首字放大示例,首字放大示例,首字放大示例,首字放大示例,</p>
    </body>
</html>

效果如下:

1.jpg

主要是通过float与对首字下沉进行控制,并且用<span>标记,对首字设置单独的样式,从而到达突出显示的目的。

在CSS中还可以通过设置伪类别first-letter,来控制段落的第一个字母,也可以实现首字放大的效果,将如上代码的pspan改为p:first-letter。

<html>
    <head>
        <title>首字放大</title>
        <style>
 body{
background-color:black;
}
p{
font-size:15px;
color:white;
}
p:first-letter{
font-size:60px;
float:left;
padding-right:5px;
font-weight:bold;
font-family:黑体;
color:yellow;
}
         </style>
    </head>
    <body>
        <p><span>首</span>字放大示例,首字放大示例,首字放大示例,
            首字放大示例,首字放大示例,首字放大示例,首字放大示例,
            首字放大示例,首字放大示例,首字放大示例,首字放大示例,
            首字放大示例,</p>
        <p>首字放大示例,首字放大示例,首字放大示例,首字放大示例,首字放大示例,</p>
    </body>
</html>

效果如下:

2.jpg

但是,设置了该属性的文字对一些其他的CSS样式支持得不好,所以,不推荐使用这种方法。

除了first-letter之外,伪类别first-line可以设置元素内第一行的样式风格,给如上代码添加一行代码。

<html>
    <head>
        <title>首字放大</title>
        <style>
body{
background-color:black;
}
p{
font-size:15px;
color:white;
}
p:first-letter{
font-size:60px;
float:left;
padding-right:5px;
font-weight:bold;
font-family:黑体;
color:yellow;
}
p:first-line{
text-decoration:underline;
}
         </style>
    </head>
    <body>
        <p><span>首</span>字放大示例,首字放大示例,首字放大示例,
            首字放大示例,首字放大示例,首字放大示例,首字放大示例,
            首字放大示例,首字放大示例,首字放大示例,首字放大示例,
            首字放大示例,</p>
        <p>首字放大示例,首字放大示例,首字放大示例,首字放大示例,首字放大示例,</p>
    </body>
</html>

效果如下:

3.jpg

返回顶部
顶部