• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    CSS 美化段落文本之首字下沉
    Selector:first-letter {font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00;}

        如果你觉得还不是很清楚,那么这里就细细讲述一下:

        首先要在HTML中有一段自己的文本,是在p>/p>中的也好,在其它块标签中都可以。给他个ID也好,class也好,直接的标签也可以,先找到这个选择符,这里假设一段文字的id为article,那么给这段的CSS一开始就写成:

    #article:first-letter {……}

        :first-letter 是个伪类,用途是设置对象内的第一个字符的样式表属性。该语法属CSS2范围。详细见《CSS2中文手册》

        这里再细说语句中的一个个属性,首先我们要让这个字大于正文中的字,那么给他的字体大小是正文内容的2.5倍。当然你也可以选择3倍,4倍,这个根据自己的需要来作修改。

    #article:first-letter { font-size:2.5em }

        为什么要用em这个标签呢?因为有时候我们的读者们会需要通过浏览器缩放的功能改变文字的大小,如果设为一个具体的大小,那么自然就会比例失调。这个大家可以动手变动一下看看找找感觉。有了大小了,但是字体不对,那么这里应增加字体与字体加粗。

    #article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold;  }

        好了,到现在为此这个首字似乎还并没有打算下沉的意思,那么这里的关键点就是 float:left; 对的,就是左浮动。我们要知道,当一个对象被设为浮动属性之后,不论原来是否是块级元素都会具备块级元素的特性。而周围没有被设定的文本流侧会环绕着这个对象。图片在文本中的环绕也是这个属性。

    #article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left;  }

        动手试试看,是不是已经看到首字下沉了?当然或许你看出来了,有点不那么整齐上面是不是多了一点出来?不用担心,用padding来设置一下让这个字顶部多点空间出来,让这个首字和第一行齐平。

        最后我还能说点什么?我想到了,有一次我试图让div id="acticle">p>……/p>/div>中的P也能实现首字下沉,可是结果却失败了,得出的结论是:我们并不能隔着一层标签去控制子对象中的第一个字符。

        当然如果你对这个伪类产生兴趣的话那么也推荐你接着研究一下:
        Selector : first-line { sRules } 
        Selector1 Selector2 : first-child { sRules }

    您可能感兴趣的文章:
    • 使用JavaScript和CSS实现文本隔行换色的方法
    • CSS小例子(只显示下划线的文本框,像文字一样的按钮)
    • css文本框与按钮美化效果代码
    • 文本框css关闭输入法
    • CSS渐变文本效果的两种方法比较
    • 用css实现隐藏文本框
    • CSS控制文本自动换行的问题
    • 用CSS动态控制文本属性
    • 详解CSS不定宽溢出文本适配滚动
    上一篇:css设置字间距
    下一篇:浅谈html中id和name的区别实例代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    CSS 美化段落文本之首字下沉 CSS,美化,段落,文本,之,首字,