`

::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元素中第一个字符下沉。

分享到:
评论

相关推荐

    IE6无法识别伪对象:first-letter和:first-line解决方法

    在网页设计和开发中,IE6(Internet Explorer 6)作为一个较旧的浏览器版本,存在很多兼容性问题,其中就包括对CSS伪对象`:first-letter`和`:first-line`的不支持。这两个伪对象在现代浏览器中是常用的设计工具,...

    部分CSS笔记.docx

    + 第一个字母选择器:::first-letter{ } + 第一行选择器:::first-line{ } + 选中文本样式选择器:::selection{ } 二、文字样式 * 字体定义:@font-face{ font-family : 自定义字体名称; src :url("字体路径...

    第37章 伪类选择器以及伪元素

    - `::first-letter` 和 `::first-line` - 第一个字母或第一行的特殊样式 - `:nth-child(n)` 和 `:nth-of-type(n)` - 选择父元素的第n个子元素或同类型第n个元素 - `:not()` - 选择不符合指定条件的元素 ### 2. 伪...

    Css Selectors Cheatsheet

    - `::first-line` - 选择元素的第一行。 - `::first-letter` - 选择元素的第一个字母。 - `::before` - 在元素之前插入内容。 - `::after` - 在元素之后插入内容。 #### 6. 其他选择器 - `:not(s)` - 不匹配...

    如何使用CSS创建首字下沉效果.docx

    line-height: 1; text-shadow: 2px 2px 6px #000; margin: -0.07em 0.1em -0.1em 0; } ``` 在上面的代码中,我们使用了 p 元素的 ::first-letter 伪元素,并将其 float 设置为 left,使其浮动在左侧。然后,我们...

    前端webcss3笔记.docx

    3. 第一个字母选择器:::first-letter{ } 4. 第一行选择器:::first-line{ } 5. 网页中被选文本的样式选择器:::selection{ } 四、阴影 1. 文本阴影:text-shadow:水平方向阴影偏移量 垂直方向阴影偏移量 [模糊...

    三星9305收索

    left:0}#pad-version{line-height:40px}.s_ipt_wr.bg,.s_btn_wr.bg,#su.bg{background-image:none}.s_btn_wr{width:auto;height:auto;border-bottom:1px solid transparent;*border-bottom:0}.s_btn{width:100px;...

    CSS3 伪元素选择器,例如(E::before、E::after)

    E::first-letter, 表示给元素中的第一个字母设置一个样式 E::first-line, 表示给元素的第一行设置一个样式 E::before, 用于CSS渲染中向元素逻辑上的头部添加内容,主要是用它开显示修饰的内容,比如元素左侧价格...

    react-style-components:用于样式元素的 React 组件

    :first-letter ::first-line 与内容相关的伪“元素” ::before ::after 基于位置/数字的伪类选择器 去做 很可能我们必须在这些选择器中使用React.Children方法和Array.prototype方法 :first-child :last-child :...

    css help sheet

    - `line-height`: 行高。 - `text-align`: 文本对齐方式。 - `text-decoration`: 文本装饰效果。 - `text-transform`: 文本转换(大写、小写等)。 - **盒模型 (Box Model)** - `width`: 元素的宽度。 - `...

    HTML 网页设计

    line-height:1.6em; padding:5px 0; } /* Panel Items */ div.bl-panel-items, div.bl-panel-items &gt; div { width: 100%; height: 100%; } div.bl-panel-items &gt; div &gt; div { margin: 0 auto; opacity: 1; ...

    文本样式设置.docx

    text-decoration: line-through; } ``` 2. **具体样式设置**: - 设置所有文本为宋体、14像素,行高为18像素。 - 设置标题“你若安好,便是晴天”为18像素、紫色、加粗、居中的效果。 - 设置第一段文本为红色...

    html作业文件lksjdlflajrfalwfiejliorae

    } .first-line-indent { text-indent: 2em; }` - **示例文本**: - 设置 `&lt;h2&gt;` 标题“春天在哪里”为 16px、红色、加粗、居中、上划线的效果。 - 设置文本首行缩进 2 个字符。 #### 案例 6:综合使用标记选择器...

    网页常用英语命令说明

    p.first-line-indent { text-indent: 20px; } ``` #### 12. `vertical-align` 垂直对齐方式 用于垂直对齐行内元素。 - `sub`: 下标。 - `super`: 上标。 **示例代码**: ```css p.superscript { vertical-align:...

    英文怎么排版整齐,CSS代码

    这可以通过 `::first-line` 和 `::first-letter` 伪元素来实现。 ```css p::first-line { font-size: 18px; color: blue; } p::first-letter { font-size: 24px; font-weight: bold; } ``` 4. **考虑...

    CSS样式代码大全

    - **示例**:`p:first-letter { font-size: 2em; }` **2. `:first-line`**:用于选择元素的第一行。 - **示例**:`p:first-line { color: blue; }` **3. `:before` / `:after`**:在元素内容之前或之后插入内容...

    01-p2.3:CSS 3 笔记.pdfc

    - E::first-letter 选择E容器内的第一个字母。 - E::first-line 选择E容器内的第一行文本。 属性选择器提供了一种根据属性或属性值来选择元素的方式。例如,可以直接选择具有特定属性的元素,或者匹配属性值以特定...

    第36章 CSS3中新增的属性选择器

    - `::first-letter`:选取元素内容的第一个字母。 - `::first-line`:选取元素内容的第一行。 4. **结构性伪类(Structural Pseudo-classes)** 这些选择器基于文档结构来选取元素,例如: - `:nth-child(an+b)...

    css-cheat-sheet-v2.pdf

    - **`line-height`**:设置行高。 #### 分页 - **`page-break-inside`**:控制分页符是否出现在元素内部。 - **`size`**:设置页面大小。 - **`marks`**:设置页面标记。 - **`page-break-before`**:控制分页符...

Global site tag (gtag.js) - Google Analytics