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插入图片
css之content的更多相关文章
- css 中content内容特殊形状
用到的一些特殊字符和图标html代码<div class="cross"></div>css代码.cross{ width: 20px; hei ...
- CSS中content属性的妙用
前言 本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...
- CSS网页使用Font Awesome图标字体时,css定义 content 属性
原文地址: http://blog.csdn.net/laurel_y/article/details/70842157
- CSS content内容生成技术以及应用(转)
一.哗啦哗啦的简介 zxx://这里“哗啦哗啦”的作用是为了渲染一种氛围.content属性早在 CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部 ...
- css系列教程--overflow min/maxheight content
outline:这只轮廓样式,与border类似.写法参考border. overflow/overflow-x/overflow-y:visible/hidden/scroll/auto/no-di ...
- CSS实现三角形方法二--border+content
方法说明: 1.将一个div块的内容设置为空(content=" "), 2.设置它的边框(上下左右)颜色为透明(transparent), 3.设置它的左侧边框颜色为pink. ...
- 知道css有个content属性吗?有什么作用?有什么应用?
css的content属性专门应用在 before/after 伪元素上,用来插入生成内容.最常见的应用是利用伪类清除浮动. //一种常见利用伪类清除浮动的代码 .clearfix:after { c ...
- CSS知识总结(二)
CSS的选择符分成: 1. 通配选择符 2. 元素选择符 3. 群组选择符 4. 关系选择符 5. id及class选择符 6. 伪类选择符 7. 属性选择符 8. 伪对象选择符 1.通配选择符(*) ...
- CSS系列——前端进阶之路:初涉Less
前言:最近帮一个朋友解决点问题,在查看组件源码的时候涉及到了less语法,这可难倒博主了.没办法,既然用到就要学呗,谁让咱是无所不能的程序猿呢!所以今天来学习下Less,算是笔记,也希望给初学less ...
随机推荐
- python的map与reduce与filter
map(f, Itera) # 对每一个元素都使用f(x) >>> sq = lambda x:x**2 >>> l = map(sq,[-1,0,1,2,-3] ...
- Tensorflow搭建神经网络及使用Tensorboard进行可视化
创建神经网络模型 1.构建神经网络结构,并进行模型训练 import tensorflow as tfimport numpy as npimport matplotlib.pyplot as plt ...
- js的set和get
'use strict' class Student { constructor(_name,age){ this.name = _name; this.age = age; } set name(_ ...
- 在CentOS6.4中安装配置LAMP环境的详细步骤 - Leroy-LIZH
本文详细介绍了CentOS6.4系统中安装LAMP服务并对其进行配置的过程,即安装Apache+PHP+Mysql,参照了网上大神的设置,其他Linux发行系统可以参考~ 在本文中部分命令操作需要ro ...
- 命令——WPF学习之深入浅出
WPF学习之深入浅出话命令 WPF为我们准备了完善的命令系统,你可能会问:“有了路由事件为什么还需要命令系统呢?”.事件的作用是发布.传播一些消息,消息传达到了接收者,事件的指令也就算完成了,至于 ...
- Xcode Developer Tools
打开Xcode,执行菜单命令 Xcode - Open Developer Tool - More Developer Tools... 会打开苹果开发者中心的工具下载页面. 这里包含了xcode未安 ...
- Spring_总结_04_高级配置(二)_条件注解@Conditional
一.前言 本文承接上一节:Spring_总结_04_高级配置(一)之Profile 在上一节,我们了解到 Profile 为不同环境下使用不同的配置提供了支持,那么Profile到底是如何实现的呢?其 ...
- CodeForces - 650D:Zip-line (LIS & DP)
Vasya has decided to build a zip-line on trees of a nearby forest. He wants the line to be as long a ...
- AtCoder Beginner Contest 087 D - People on a Line
Time limit : 2sec / Memory limit : 256MB Score : 400 points Problem Statement There are N people sta ...
- poj2411 Mondriaan's Dream[简单状压dp]
$11*11$格子板上铺$1*2$地砖方案.以前做过?权当复习算了,毕竟以前学都是浅尝辄止的..常规题,注意两个条件:上一行铺竖着的则这一行同一位一定要铺上竖的,这一行单独铺横的要求枚举集合中出现连续 ...