触手生春【4.13】CSS中的伪元素选择符
作者:ximicc 来源:CSS Beauty 发布时间:2008-11-11 13:10:00
同伪类的方式类似,伪元素通过对插人到文档中的虚构元素进行触发,从而达到某种效果。在CSS1里,有两个伪元素,即:first-letter和first-line。它们将样式分别应用于首字母或首行,而首字母和首行位于像段这样的块级元素中。例如:
程序源码
P:first-letter {color:red;}
这会使每个段落的首字符变为红色,是不是显得很简单?还可以使H2标题的首字母比其他的字母大两倍,结果如下图所示:
程序源码
H2:first-letter {font-size:200%;}
同理,:first-line可用于元素中文本的首行。例如,可以让文档中每个段落的首行显示为灰色:
程序源码
P:first-line { color:gray; }
在下图中可以看到样式应用于每个段落的首行。不管其显示的区域有多宽或多窄,样式都会准确地应用于首行。如果段落的首行只包含五个单词,则只有那五个单词会变灰。如果首行包含30个单词,那么所有的30个单词都会变灰:
之所以:first-line和:first-letter被当作伪元素引用,是因为它们在效果上使文档中产生了一个临时的元素。这是应用“虚构标记”的一个最典型的实例,正如CSS规范中所描述的那样。假设有如下标记:
程序源码
P:first-line { color:gray; }
<P>ximicc is a website about CSS design ,include examples in CSS gallery, CSS beauty, CSS tutorials, CSS news, jobs and the latest from the web design standards community. Welcome to ximicc.com .</P>
进而假设用户代理显示的文本如下:
既然从"ximicc"到"examples"的文本应该是灰色,那么用户代理就可以使用类似于下面的虚构标记:
程序源码
<P><P:first-line>ximicc is a website about CSS design ,include examples</P:first-line> in CSS gallery, CSS beauty, CSS tutorials...</P>
而<P:first-line>元素并没有出现在源文档中,甚至于它根本就不是一个有效的元素。它的存在是建筑在用户代理之上的,其作用是将:first-line样式应用于合适的文本块上。换句话说,<P:first-line>不是一个真正意义上的元素,而是一个伪元素。记住,不必再添加任何新标签,用户代理会完成余下的工作。
:first-letter伪元素的情况类似:
程序源码
P:first-letter { color:red; }
<p>Learn the basics of CSS design in ximicc.com . Positioning and the formatting of link text is covered.You also can download free Website templates, CSS Templates, Blogger Templates .</p>
猜你喜欢
- MySQL字符集多种多样,下面为列举了其中三种最常见的字符集查看方法,该方法供您参考,希望对学习MySQL数据库能有所启迪。一、查看MySQ
- 用法: 按住鼠标左键拖拽一个框后释放洗洗睡了<!DOCTYPE html public "-//W3C//DTD XHTML
- 问题:导入数据时是否需要禁用索引?解答:在使用load data导入数据时,如果导入的表是MyISAM的,对于空表,MySQL数据库会把所有
- 很多网站需要将好的会员号留着,或用于日后的盈利。实现方法不是本文讨论范围,本文仅列出用于检测靓号类型的一些正则。靓号检测:主要可以检测连号(
- 最近碰到一个mysql5数据库的问题。就是一个标准的servlet/tomcat网络应用,后台使用mysql数据库。问题是待机一晚上后,第二
- MySQL安全性指南(2) 作 者: 晏子2.1.3 数据库和表权限下列权限运用于数据库和表上的操作。ALTER允许你使用ALTER TAB
- 之前有写过一篇浏览器的tab设计,这回说说网站的tab设计。一说到tab很自然地就想到了导航、信息架构。随着网站信息结构的复杂化,选择tab
- 怎么增大MySQL数据库连接数,MYSQL数据库安装完成后,默认连接数是100,流量稍微大一点的论坛或网站这个连接数是不够哟用
- 在网站或软件的策划和设计过程中,我们经常听到这样的讨论:“这个功能设计得太重了”又或“我们希望能够处理得轻一些”。似乎轻设计是时下炙手可热的
- ASP实现即时显示当前页面浏览人数online.asp文件 <!--#include file="dbconn.a
- 我们可以利用 Cookie collection 来刪除客户端的Cookies: <%
- jQuery.sheet 是一个用于创建 Web 电子表格的 jQuery插件,其功能及界面风格和微软的 Excel 非常相似,使得用户不至
- 很久没有发表文章了,最近一直在研究产品设计标准的问题,之前有发过一篇关于 Axure的教程 ,相信很多人已经学会如何使用,这次我给大家介绍一
- Access 操作很简单,具体不步骤如下:打开你mdb数据库,工具-->数据库实用工具-->压缩和修复数据库(c)... SQL SERVE
- 访问phpmyadmin时总是出现 “无法载入 mysql 扩展,请检查 PHP 配置”。查看原因是“php_mysql.dll”无法载如。
- Office家族成员中,人们对于Access 2000的了解,往往只局限在它的操作界面中,对于数据库管理的功能仍只是停留在建立表、数据输入、
- 如何修改NT的登录密码? 代码见下:<%Sub ChangeUserPassword(C
- 在添加新记录时,有时候我们需要将部分动态内容自动添加到指定的文本域,例如上传一个文件后,将文件名自动添加到一个独立的记录框内,以
- 1、IIS为一个死循的执行过程设定执行时间(缺省为90秒)超时事件:<%response.buffer=true%><BO
- 或许你已经看过很多关于CSS3动画的技术,包括前端观察之前发表的一些,那么现在就情看一看CSS3动画的魅力吧。这里是一辑47个令人瞠目结舌的