网站制作     css教程     
导航: 好喜爱学习网 >> 网站制作 >> css教程 >> 用CSS属性选择器控制链接样式

用CSS属性选择器控制链接样式


好喜爱学习网 HaoXiAi.Net 分类:网站制作 css教程 来源:网络收集 录入:管理员
  • CSS制作标签卡Tab效果
  • 亚马逊网站应该不会陌生吧?对它页面上方标签卡(Tab)方式的导航条(
  • 五分钟快速制作CSS导航菜单
  • 随着网页标准化观念深入人心,越来越多的网站采用了CSS架构。CSS架构的
  • 让CSS使网页图片半透明
  • 你用过css么?当然,我是指你喜欢做网页的话,用过?很好,那你用过它的特
  • CSS边框的设定方法
  • 在HTML中对于边框的设定,在文字方面好象没有较详细的设定..至于图形方
  • 有时我们可能希望内部链接与外部链接显示不同的样式,如外部链接。我想在链接的旁边加上一个小图标,以表示其是一个外部的链接,来告诉来访者,让他们来确认是在新窗口打开还是在本窗口打开。我们可能会这样做:

    .external
    {
       background:url(images/external.gif) no-repeat right top;
      padding-right:12px;
    }

    然后给每一个外部的链接应用该CSS,当然,这样做并不是不可以,只是太繁琐。

    那有没有好的办法来实现呢?有。可以利用CSS3中的属性选择,但是在IE6及以下版本不支持该方法,在FireFox中已经实现了。

    属性选择器的基本语法为:[att^=val] 
    例如:
    a[href^="http://www.webjx.com"]
    {
    background-image:none;
    padding-right:0px;
    }

    会查找所有以http://www.webjx.com开头的链接,并且排除背景图片。有了上面的属性,就好办了。

    <style type="text/css">
    a
    {
    background:url(external.gif) no-repeat right top;
    padding-right:14px;
    font-size:12px;
    }
    a[href^="http://www.webjx.com"]
    {
    background-image:none;
    padding-right:0px;
    }
    </style>

    先给所有链接加上图标,然后去掉以http://www.webjx.com开头的链接图标,这样就实现了外部链接显示图标,内部链接不显示图标了。

    注:firefox中适用,IE就不行了。

        [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

    一、使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描述。 二、明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100pxwidth:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。 三、区分大小写 当在XHTML中使用CS......
    CSS布局常用的方法:float:none|left|right取值:none:默认值。对象不飘浮left:文本流向对象的右边right:文本流向对象的左边 它是怎样工作的,看个一行两列的例子xhtml:<divid="wrap"><divid="column1">这里是第一列</div><divid="column2">这里是第二列</div><divclass="clear"></div>/*......

    [网友推荐]
  • 网页制作技术CSS十八条优化与应用技巧
    一、使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参
  • CSS规范化命名的重要性及三种通用命名规
    我们在webjx.com以前的文章中,曾经多次提到CSS命名的问题,有些朋友依然不够重视这些问题。认
  • 简化网页 优化WEB应用的方法
    在最近的项目中,我发现许多过于臃肿的网页。对于内联网中的网站而言,这一般不会造成什么问题。不过,当你
  • 使用 DIV+CSS 创建固定宽度的布局
    我最近的几篇专栏文章讨论了使用XHTML和CSS实现两列或三列页面布局的各个方面。到目前为止,所有例
  • 把XHTML+CSS页面转换成为打印机页
    在以前,为Web页面创建一个打印机友好的版本意味着要设计一个布局和格式都经过修改的单独页面,这样才能
  • DIV+CSS网页布局中margin优化
    margin是我们在进行CSS布局中非常常用的属性之一,但如果运用不得当,往往会产生过多的垃圾代码,
  • CSS在IE与Firefox下不同的解析
    1、IE与Firefox下对CSS解析的区别对高度的解析IE:将根据内容的高度变化,包括未定义高度的
  • 完美网页设计应用:用CSS灵活设置字体
    用DIV+CSS来写网站结构也有一段时间,在此过程中发现有时候需要把字体设置成比12px,而比14p
  • 用DIV+CSS布局网页表单的一个例子
    这是一个例了,不知道有没有更好的解决办法,贴上来,随便看吧! CSS: body{font-si
  • 网页字体font-size的控制 em与
    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网
  • IE6浏览器网页文字溢出的解决办法
    <divstyle="width:400px"><divstyle="float:
  • 经验技巧:网页文字在div中垂直居中的问
    1.单行文字 设置div的高度与文字的行高一样就可以了,即line-height和height的数
  • CSS控制的内容超过容器宽度后显示省略号
    一般我们看到的比如新闻列表,为了使文字不回行,控制字数,会通过程序让多余的字符显示省略号,我们只使用
  • 实例详解网页制作中CSS元素的定位应用
    1.position:static|无定位position:static是所有元素定位的默认值,一般
  • [相关文章]
    [网站热点]
    好喜爱学习网 HaoXiAi.Net 联系方式 网站制作 css教程
    本站为非营利性质个人网站,建站只为个人爱好与学习,本页内容为用CSS属性选择器控制链接样式;
    网站内容来源于互联网收集整理,禁止用于非法途径,如发现本网站上有侵权的文章请联系我们,我们会尽快删除;
    本站不对站点内容准确性、完整性和真实性作任何承诺,由此产生的后果本站不承担任何责任,对以上引起的一切法律纠纷本站无权利承担。