你应该知道的3个CSS技巧
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新、最先进的W3C Web标准的设备,以一种更具交互性的方式来访问互联网。这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁,更好维护的浏览器前端代码。现在让我们来看一看一些也许你还不知道的让人兴奋的CSS 功能。
在CSS中用attr()显示HTML属性值
attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行。它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮你省去了以往需要Javascript处理的过程。
要想使用这个功能,你需要用到三种元素:一个:before 或 :after CSS伪类样式, .content属性,和一个带有你想使用的HTML属性名称的attr()表达式。例如,想去显示<h3>标题上的data-prefix属性的值,你可以写成这样:
- h3:before {
- content: attr(data-prefix) " ";
- }
- <h3 data-prefix="Custom prefix">This is a heading</h3>
显然,这个例子并没有展示它有多大用处,只是展示了它的基本用法。让我们来试一个更有用的例子,attr()的一个极好的应用就是当用户打印页面时将页面链接显示出来。为了实现这个,你可以这样写:
- @media print {
- a:after {
- content: " (link to " attr(href) ") ";
- }
- }
- <a href="http://example.com">Visit our home page</a>
一旦你知道了这个技巧,你就会吃惊于很多时候它能给你的工作带来的方便!
提示:在新版的CSS3标准中,attr()功能被扩展,可以用在各种CSS标记中。
使用counter()在列表中自动添加序号
另外一个在CSS 2.1在就已经支持的功能是counter(),使用它,你能方便的在页面标题,区块和其它各种连续出现的页面内容上添加序号。有了它,你就不必限制于只能使用<ol>来实现这个效果,你可以更灵活的在页面上使用自定义数字序列。
关键就是它真的很简单:在:before伪类里的content属性加入counter():
- body {
- countercounter-reset: heading;
- }
- h4:before {
- countercounter-increment: heading;
- content: "Heading #" counter(heading) ".";
- }
如果你想知道更多关于这个counter归零和自增方法的知识
使用calc()做算术
最后,但不是最不重要的,让我们来说说calc()功能。这个函数能让你执行简单的算术计算,例如计算元素的长宽,免去了你写不易维护的Javascript代码。这个函数支持所有简单的基本算术运算,包括加减乘除。
比方说,你想创建一个元素,使它的宽度占满它的父元素,但还要留出一部分像素宽做其它用处:
- .parent {
- width: 100%;
- border: solid black 1px;
- position: relative;
- }
- .child {
- position: absolute;
- left: 100px;
- width: calc(90% - 100px);
- background-color: #ff8;
- text-align: center;
- }
以上就是本文的全部内容,希望对大家的学习有所帮助
相关文章
- css优化已被我们所关注,根据个人实践整理了几条金规玉律,大家可以在使用过程中做下参考,希望对大家有所帮助2013-09-09
- 简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读,下面为大家介绍下CSS简写规则,喜欢优化的朋友可以参考下,希望对大家有所帮助2013-09-30
- 掌握一些CSS技巧,在布局过程中就会提高工作效率,本文以个人经验整理了一些关于居中的技巧,大家可以参考下2013-10-29
- css背景图优化合并包括图片本身的优化,使用多张图片的合并:CSS Sprites技术或者是分类合并等等,都可以,下面一一为大家介绍下2014-09-06
- 这篇文章主要介绍了CSS Hack技术介绍及常用的Hack技巧集锦,本文讲解了什么是CSS Hack、常用的CSS Hack、IE6对!important的支持、IE6下的多选择符等内容,需要的朋友可以参考2014-10-08
- 本文给大家推荐了29个常用的CSS小技巧,均是本人项目中使用过的,经过检测的代码,大家可以放心使用2014-12-03
淘宝店铺导航装修怎么编辑?淘宝新旺铺导航CSS代码使用修改技巧
今天和大家分享淘宝导航栏css代码,直接在淘宝店铺导航设置中加入代码就可以用了。那么,新旺铺该如何编辑店铺导航呢?2015-03-13- 这篇文章主要介绍了10个必备的CSS技巧总结,随看随记,敬请收藏~需要的朋友可以参考下2015-06-29
- 这篇文章主要介绍了CSS中的inherit使用技巧小结,CSS中的继承关键字的使用是CSS入门学习中的基础知识,需要的朋友可以参考下2015-07-09
- 这篇文章主要介绍了CSS中行高line-height属性的一些使用技巧,包括为每行文本指定不同颜色和文本中间添加线时用到的一些操作方法,需要的朋友可以参考下2015-08-21
最新评论