当前位置: 代码迷 >> Web前端 >> :first-letter :first-line
  详细解决方案

:first-letter :first-line

热度:533   发布时间:2012-09-29 10:30:01.0
::first-letter ::first-line

CSS的伪元素::first-letter与::first-line分别是用来设置占一行的元素(display:block,如默认的div与p)内的首个字符的样式及第一行的样式,并且他们不会互相干扰,比如

?

? p::first-letter{?font-size:4em; color:Black;}

??p::first-line{font-size:smaller; color:Red;}

虽然第一行设置的字符大小与颜色都与第一个字符的设置不同,但第一个字符还是按照p::first-letter的设置显示,第一行其他字符则按照p::first-line的设置显示

前面说了这俩伪元素是对于display:block的元素来设置的,如果想对:Label控件设置,可以将其包在div或p里面

? <p><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></p>

?

?<div style="display:inline">

? ? 春眠不觉晓,<br />

? ? 处处为啼鸟。<br />

? ? 夜来风雨声,<br />

? ? 花落知多少。<br />

? ? </div>

像上面这样设置,由于该div的display:inline ?所以这俩伪元素的设置将不会起作用。

p::first-letter{float:left;}

以上设置p元素中第一个字符下沉。

  相关解决方案