CSS教程 16、CSS的伪元素Pseudo Elements [翻译

　　
　　伪元素吸附在选择上和pseudo classes伪类很像，像这样selector:pseudoelement{property: value;}。有四种方式。
First letters and First lines 首字母和首行
　　first-letter伪元素作用到元素的第一个字母，first-line作用到元素的顶行。你可以，例如为段落创建一个drop caps和首行加粗。

 代码如下 复制代码
p:first-letter {
    font-size: 3em;
    float: left;
}
p:first-line {
    font-weight: bold;
}

Before and after 前后
　　before和after用来联系content属性不使用HTML确定一个元素的内容位置。
　　content属性值可以是：open-quote,close-quote,no-open-quote,no-close-quote，在引号标记里关闭任何字符串或使用url(imagename)图片。

 代码如下 复制代码
blockquote:before {
    content: open-quote;
}
blockquote:after {
    content: close-quote;
}
li:before {
    content: "POW: "
}
p:before {
    content: url(images/jam.jpg)
}

　　听起来不错吧，可惜大部分用户不能体会到before或after的效果，因为IE不支持。
　　

时间： 2024-09-30 21:15:53

CSS教程 16、CSS的伪元素Pseudo Elements [翻译的相关文章

CSS教程:block element与inline element元素详解

块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"."form"这个块元素比较特殊,它只能用来容纳其他块元素. 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout和css

css教程：关于CSS不透明的详细介绍

  近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释,以实现这项有用的CSS技术在您的项目中兼容所有浏览器. 关于CSS 透明度,有一点需要注意的是,它虽然使用了很多年,但它一直以来都不是一个标准属性.它是一种非标准技术,应该是CSS3规范的一部分. 1. 旧的Opacity设置 以下代码是Fire

经典实用CSS教程详细讲解

css|教程 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一.使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量.尤其是当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐! 前言 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具

CSS教程 2、CSS Selectors,Properties,an

CSS教程 2.CSS Selectors,Properties,and Values 选择器 .属性.值 [翻译Htmldog] HTML有标签,CSS有选择器.选择器是给内部和外部样式里面的样式命名. 每个选择器都有属性在{}里面,比如简单点像color,font-weight或background-color. 值在冒号(不是等号)后面,分号分离属性. body {    font-size: 0.8em;    color: navy;} 上面的意思是为body选择器设置font-siz

《响应式Web设计：HTML5和CSS3实践指南》——2.10节基于before及after伪元素添加字符

2.10 基于before及after伪元素添加字符 就像在电视剧<迷离时空>(The Twilight Zone)中遗失的一集一样,CSS提供的新属性赋予了使用者在内容中添加伪标记的能力.可能听起来会有点奇怪,但这种方法却有着众多的应用场景.例如一个场景是,需要在显示的时候把文本内容放进引号之中,但是同时不想在内容或者主题文件中添加这些引号,显然这样是比较明智的做法.或者你也想通过标签和@标记尝试时下流行的Twitter,例如想要在内容之前添加#或是@符号.采用CSS标记方法即可完成功能,呈

CSS教程:用伪元素控制网页表单样式

文章简介:然而,所有这些伪元素都是依赖于特定浏览器引擎的(所以要带有浏览器引擎前缀),这样方便区分特定的浏览器引擎.以下是我自己搜集整理的,在Trident, Gecko, 和 WebKit浏览器引擎下面都可用的伪元素列表.在我写这篇文章的同时,发布了一些webkit的伪元素,所以现在 当开发web应用程序时,表单样式是个头疼的问题.以前,web开发人员不得不接受一个现实,就是由客户端浏览器控制表单样式.然而,作者通过伪元素给web渲染引擎添加钩子,就可以控制表单的显示. 然而,所有这些伪元素都

CSS高级教程&amp;nbsp;伪元素

伪元素(pseudo elements)跟伪类一样吮吸选择符,使用selector:pseudoelement { property: value; }的形式.有四个吮吸器. 首字和首行 首字first-letter 伪元素应用到元素的第一个字,而首行first-line则是元素的顶行.你可以,比如,创建一个首行粗体和首字下沉的段落,像这样:  代码如下 复制代码 p:first-letter {  font-size: 3em; float: left;  }  p:first-line { 

网页制作教程：认识CSS的伪类

css|教程|网页 认识css的伪类 伪类(Pseudo classes)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态.它们的形式是selector:pseudo class { property: value; },简单地用一个半角英文冒号(:)来隔开选择符和伪类. CSS很多的建议并没有得到浏览器的支持,但有四个可以安全使用的用在连接上的伪类. link用在为访问的连接上. visited用在已经访问过的连接上. active用于获得焦点(比如,被点击)的连接上. hoverhov

学习网页技术CSS高级教程之CSS 伪元素

css|高级|教程|网页 CSS 伪元素被用来将特殊的效果添加到某些选择器. CSS 伪元素 (Pseudo-elements)实例: 制作首字母特效 本例演示如何向文本的首字母添加特效. <html><head><style type="text/css">p:first-letter {color: #ff0000;font-size:xx-large}</style></head><body><p>