新设计人网[www.sjidea.com],努力打造为新设计服务综合资讯第一网!
全新域名:[www.sjidea.com]

新设计人资源网

首页 /教程/网页设计/CSS教程 / 正文

css3怎么改首字母颜色

创始人 2022-05-22 23:10:51 0 次浏览

本教程操作环境:windows7系统、CSS3&&HTML5版、 电脑。

css3修改首字母颜色

实现思想:

  • 使用“:first-letter”选择器选中元素的首字母

  • 使用color属性给选中的字母修改文本颜色。

    Color属性可以指定文本的颜色。

实现代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style type="text/css">

            .first {

                width: 200px;

                height: 100px;

                border: 1px solid red;

            }

 

            .first p::first-letter {

                color: red;

            }

        </style>

    </head>

    <body>

        <div class="first">

            <p>aksadjklahkljasklf</p>

        </div>

 

    </body>

1.png

扩展知识:

:first-letter选择器可以使用以下属性:

  • font

  • color

  • background

  • margin

  • padding

  • border

  • text-decoration

  • vertical-align (only if float is 'none')

  • text-transform

  • line-height

  • float

  • clear

上一篇:没有了

下一篇:关于 CSS 变量的一些你可能不了解的事!

热门资讯
css3怎么改首字母颜色
实现思想:使用“:first-letter”选择器选中元素的首字母使用color属性给选中的字母修改...
关于 CSS 变量的一些你可能...
本篇文章带大家了解一下CSS 变量,介绍下没人告诉你关于 CSS 变量的那些事。有一定的参考价值,有...
快速提升开发技能的 20 个 ...
本篇文章给大家分享20 个 CSS 小技巧,用于快速提升开发技能,快来收藏吧,希望对大家有所帮助!
css3如何让animatio...
在css3中,可用animation-play-state属性来让运行的animation动画停止,...
值得收藏的CSS盒子模型属性详...
本篇文章给大家带来了css中关于盒子模型的诸多属性详细解析,其中包括边框、边距、圆角等等,希望对大家...
要过年了,使用CSS实现一个喜...
要过年了,下面本篇文章带大家用CSS画了个灯笼,并添加动画效果,实现灯笼左右摇摆的效果,希望对大家有...
css怎么实现鼠标移上去旋转效...
方法:1、用“@keyframes 动画名{100% {transform:rotate(角度)}”...
利用纯CSS实现旋转React...
本篇文章手把手带大家利用纯CSS实现旋转React图标的动画效果,希望对大家有所帮助!
css怎么实现图片放大缩小动画
方法:1、使用“@keyframes 动画名称{}”规则和“transform:scale(缩放比例...
使用CSS实现一个吃豆人的Lo...
本篇文章给大家介绍一下使用纯CSS怎么实现一个吃豆人的Loading加载效果,希望对大家有所帮助!