脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

你应该知道的3个CSS技巧

  发布时间：2016-03-17 10:02:15   作者：佚名   我要评论
如何利用更强大更灵活的CSS来创造更简洁，更好维护的浏览器前端代码，现在让我们来看一看一些也许你还不知道的让人兴奋的CSS 功能，感兴趣的小伙伴们可以参考一下

各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新、最先进的W3C Web标准的设备，以一种更具交互性的方式来访问互联网。这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁，更好维护的浏览器前端代码。现在让我们来看一看一些也许你还不知道的让人兴奋的CSS 功能。

　　在CSS中用attr()显示HTML属性值　

       attr()功能早在CSS 2.1标准中就已经出现，但现在才开始普遍流行。它提供了一个巧妙的方法在CSS中使用HTML标签上的属性，在很多情况下都能帮你省去了以往需要Javascript处理的过程。

　　要想使用这个功能，你需要用到三种元素：一个:before 或 :after CSS伪类样式， .content属性，和一个带有你想使用的HTML属性名称的attr()表达式。例如，想去显示<h3>标题上的data-prefix属性的值，你可以写成这样：

CSS Code复制内容到剪贴板
  1. h3:before {   
  2.     content: attr(data-prefix) " ";   
  3.     }   
  4.     
  5.     <h3 data-prefix="Custom prefix">This is a heading</h3>   

　　显然，这个例子并没有展示它有多大用处，只是展示了它的基本用法。让我们来试一个更有用的例子，attr()的一个极好的应用就是当用户打印页面时将页面链接显示出来。为了实现这个，你可以这样写：

CSS Code复制内容到剪贴板
  1. @media print {   
  2.     a:after {   
  3.     content: " (link to " attr(href) ") ";   
  4.     }   
  5.     }   
  6.     
  7.     <a href="http://example.com">Visit our home page</a>   　　

　　一旦你知道了这个技巧，你就会吃惊于很多时候它能给你的工作带来的方便！

　　提示：在新版的CSS3标准中，attr()功能被扩展，可以用在各种CSS标记中。

　　使用counter()在列表中自动添加序号

　　另外一个在CSS 2.1在就已经支持的功能是counter()，使用它，你能方便的在页面标题，区块和其它各种连续出现的页面内容上添加序号。有了它，你就不必限制于只能使用<ol>来实现这个效果，你可以更灵活的在页面上使用自定义数字序列。

　　关键就是它真的很简单：在:before伪类里的content属性加入counter()：

CSS Code复制内容到剪贴板
  1. body {   
  2.     countercounter-reset: heading;   
  3.     }   
  4.     
  5.     h4:before {   
  6.     countercounter-increment: heading;   
  7.     content: "Heading #" counter(heading) ".";   
  8.     }   　　

　　如果你想知道更多关于这个counter归零和自增方法的知识

　　使用calc()做算术

　　最后，但不是最不重要的，让我们来说说calc()功能。这个函数能让你执行简单的算术计算，例如计算元素的长宽，免去了你写不易维护的Javascript代码。这个函数支持所有简单的基本算术运算，包括加减乘除。

　　比方说，你想创建一个元素，使它的宽度占满它的父元素，但还要留出一部分像素宽做其它用处：

CSS Code复制内容到剪贴板
  1. .parent {   
  2.     width: 100%;   
  3.     border: solid black 1px;   
  4.     position: relative;   
  5.     }   
  6.     
  7.     .child {   
  8.     position: absolute;   
  9.     left: 100px;   
  10.     width: calc(90% - 100px);   
  11.     background-color: #ff8;   
  12.     text-align: center;   
  13.     }   
  14.   

以上就是本文的全部内容，希望对大家的学习有所帮助

相关文章

  • css优化技巧自己实践心得

    css优化已被我们所关注，根据个人实践整理了几条金规玉律，大家可以在使用过程中做下参考，希望对大家有所帮助
    2013-09-09

  • 10个CSS简写/优化技巧整理

    简写的最大好处就是能够显著减少CSS文件的大小，优化网站整体性能，更加容易阅读，下面为大家介绍下CSS简写规则，喜欢优化的朋友可以参考下，希望对大家有所帮助
    2013-09-30

  • CSS中关于居中的小技巧个人小结

    掌握一些CSS技巧，在布局过程中就会提高工作效率，本文以个人经验整理了一些关于居中的技巧，大家可以参考下
    2013-10-29

  • css(html)背景图优化合并技巧详解

    css背景图优化合并包括图片本身的优化，使用多张图片的合并：CSS Sprites技术或者是分类合并等等，都可以，下面一一为大家介绍下
    2014-09-06

  • CSS Hack技术介绍及常用的Hack技巧集锦

    这篇文章主要介绍了CSS Hack技术介绍及常用的Hack技巧集锦,本文讲解了什么是CSS Hack、常用的CSS Hack、IE6对!important的支持、IE6下的多选择符等内容,需要的朋友可以参考
    2014-10-08

  • 29个常用的CSS小技巧汇总

    本文给大家推荐了29个常用的CSS小技巧，均是本人项目中使用过的，经过检测的代码，大家可以放心使用
    2014-12-03

  • 淘宝店铺导航装修怎么编辑？淘宝新旺铺导航CSS代码使用修改技巧

    今天和大家分享淘宝导航栏css代码，直接在淘宝店铺导航设置中加入代码就可以用了。那么，新旺铺该如何编辑店铺导航呢？
    2015-03-13

  • 10个必备的CSS技巧总结

    这篇文章主要介绍了10个必备的CSS技巧总结,随看随记,敬请收藏~需要的朋友可以参考下
    2015-06-29

  • CSS中的inherit使用技巧小结

    这篇文章主要介绍了CSS中的inherit使用技巧小结,CSS中的继承关键字的使用是CSS入门学习中的基础知识,需要的朋友可以参考下
    2015-07-09

  • CSS中行高line-height属性的一些使用技巧

    这篇文章主要介绍了CSS中行高line-height属性的一些使用技巧,包括为每行文本指定不同颜色和文本中间添加线时用到的一些操作方法,需要的朋友可以参考下
    2015-08-21

最新评论

关注微信公众号

扫一扫