css之content

content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。该属性用于定义元素之前或之后放置的生成内容。默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 display 控制。

应用:

(1) 清楚浮动

.clearfix:after {

content:"."; //这里利用到了content属性

display:block;

height:0;

visibility:hidden;

clear:both; }

.clearfix {*zoom:1;}

after伪元素通过 content 在元素的后面生成了内容为一个点的块级素,再利用clear:both清除浮动。

(2)插入文本

div:before {

content: "我是content添加的文字!";

}

在div元素开始插入“我是content添加的文字!”文本。

(3) 插入元素属性

content属性的值除了使用文本值外,还可以使用标签的一些属性值,方法是attr(),参见如下代码:

a.content:after {

content: attr(href);

}

<a class="content" href="http://www.zhangxinxu.com/">此标签的href值是:</a>

(4) 使用计数器创建号码内容

ul {

list-style-type:none;

counter-reset:sectioncounter;

}

ul li:before {

content:"美女" counter(sectioncounter) ": ";

counter-increment:sectioncounter;

}

css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现。

(5) 插入符号

不同的语言使用不同的引号字符。比如英文的引号就是"",而中文引号就是“”。使用content可以使得不同的语言使用对应的一些字符。例如,我们需要对下面的些文字添加其对应语言的引号,该怎么办呢?

<p lang="en"><q>It’s only work if somebody makes you do it.</q></p>

<p lang="no"><q>Hvis du forteller meg nok en vits, så skal jeg slå deg til jorden.</q></p>

<p lang="ch"><q>欢迎来到上海,欢迎参观世博会!</q></p>

:lang(en) > q {quotes:‘"‘ ‘"‘;}

:lang(no) > q {quotes:"«" "»";}

:lang(ch) > q {quotes:"“" "”";}

/* 在q标签的前后插入引号 */

q:before {content:open-quote;}

q:after  {content:close-quote;}

(6)图片代替文字

div.logo {

content:url(logo.png);

}

图片替换技术的优点在于文字内容确实被替换了。因此,您没有必要设定高宽为图片的显示创造空间,或是使用text-indent或是padding隐藏最初的文字。你不能对图片进行重复或平铺,或是使用image sprite。替换的图片无法应用alt属性,所以一些特殊的使用屏幕阅读器的用户可能无法理解您替换的图片的含义。

也可以使用:after或:before插入图片

时间: 2024-10-11 03:22:38

css之content的相关文章

css中content可以用到的字符编码

项目中用到的一些特殊字符和图标 html代码 <div class="cross"></div> css代码.cross{ width: 20px; height: 20px; background-color: #F3F9FF; border-radius: 10px; border: 1px solid #DBE6EF; display: inline-block; position: relative; bottom: 20px; right: 15px;

css属性 content

对css一直没有很系统得学习过,练习得也不是很多,纯小白.今天在写一个页面的时候,遇到一个问题,就是如何让外面的盒子适应里面的盒子大小,完美地把小盒子包在里面. 由于里面是一个列表 ul,为了让元素横排,我使用了float:right这个属性,所以列表悬浮了.如图: 其实当然可以直接给外层id为outer的盒子定义长和宽,但我不想这样.下面是解决方法:   #outer ul:after{ /*使用afer伪类,用content在ul后面随便添加一点内容*/ content:"."; 

[ css 伪对象添加 content ] css中content内容生成技术以及应用问题讲解及实例演示

小小的提醒 在进入正题之前,我要做一回啰嗦的老女人,讲点可有可无无伤大雅的提醒: 仅在CSS可用的现代浏览器下起作用 不可通过DOM使用,它只是纯粹的表象 最基本的 – 生成内容 content使用如下: h2:before { content: "我是额外文字!"; } 此段样式的作用是在每个h2标签的前面添加文字“我是额外文字”.您可以狠狠地点击这里:content最基本使用Demo content属性的值除了使用文本值外,还可以使用标签的一些属性值,方法是attr(),参见如下代

CSS实现三角形方法二--border+content

方法说明: 1.将一个div块的内容设置为空(content=" "), 2.设置它的边框(上下左右)颜色为透明(transparent), 3.设置它的左侧边框颜色为pink. tips:一个没有内容的div的上下左右的边框形状是下面这个样子的: 左右边框是三角形.上下边框是梯形. 具体代码如下: html: <body> <div class="test"></div> </body> css: <style

知道css有个content属性吗?有什么作用?有什么应用?

css的content属性专门应用在 before/after 伪元素上,用来插入生成内容.最常见的应用是利用伪类清除浮动. //一种常见利用伪类清除浮动的代码 .clearfix:after { content:"."; //这里利用到了content属性 display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } after伪元素通过 content 在元素的后面生成了内容为一个点

知道css有个content属性吗?有什么作用?有什么应用?可以伪类清除浮动

知道.css的content属性专门应用在 before/after 伪元素上,用来插入生成内容.最常见的应用是利用伪类清除浮动. .clearfix:after { content:"."; //这里利用到了content属性 display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } after伪元素通过 content 在元素的后面生成了内容为一个点的块级素,再利用clear:b

CSS进阶(二)content

content 什么是替换元素 表单元素Input button textarea select img iframe video 替换元素的特点 (1)内容的外观不受页面上的CSS影响 (2)有自己的尺寸 (3)在很多CSS属性上有自己的一套表现规则 替换元素的尺寸计算规则 (1)固有尺寸,及元素的默认尺寸 (2)HTML尺寸,即html元素上自带的属性尺寸 (3)CSS尺寸,即设置的CSS尺寸 <img>不设置src属性,是最高效的空表现方式 建议在css重置的时候加上img{displa

创建 MVC的模板页,引用多个Css(期间,产生 HTTP 错误 500.23 - Internal Server Error   检测到在集成的托管管道模式下不适用的 ASP.NET 设置。)

首先,创建一个_Layut.cshtml的模板页 @using System.Web.Optimization <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>666</title> @Styles.Render("~/Content/Css/css&q

关于前端CSS预处理器Sass的小知识!

前面的话 ??"CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工具,提 供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护.本文将详细介绍sass的使用 定义 ??Sass是一门高于CSS的元语言,它能用来清晰地.结构化地描述文件样式,有着比普通CSS更加强大的功能.Sass能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式