谁能告诉我header里的字体粗细在哪里改?

汗马 发布于 2015/01/09 22:51
阅读 748
收藏 0

刚开始学JQM,做了一个简单的页面,代码类似下面这样,我现在的问题是,头部header的第一个连接<a.......>广西</a>的字体不管怎么改都显示粗体的,而且粗体的效果也别扭,笔画之间好像粘在一起,看似超级简单的问题折腾了我1天时间,我就想把它弄成普通字体:

font-size:13px;font-weight:normal;

<div data-role="page">

    <div data-role="header" data-position="fixed">
        <a href="#" data-role="none" style="font-size:13px;font-weight:normal;line-height:33px;color:#fff;text-decoration:none;font-family:Helvetica,Arial,sans-serif">广西</a>
        <h1>我的测试网页</h1>
        <div data-role="navbar">
                <ul>
                    <li><a href="#" class="ui-btn-active">区域</a></li>
                    <li><a href="#">总价</a></li>
                    <li><a href="#">房型</a></li>
                    <li><a href="#">面积</a></li>
                </ul>
         </div>
     </div>
        
    <div data-role="content">
   
    </div>

</div>




















加载中
0
汗马
等了那么久,最后还是得靠自己,问题解决了得贴方法出来:

原来是文字阴影在捣鬼,直接设置a标签style=text-shadow:none;

<div data-role="page">
 
    <div data-role="header" data-position="fixed">
        <a href="#" data-role="none" style="text-shadow:none;font-size:13px;font-weight:normal;line-height:33px;color:#fff;text-decoration:none;font-family:Helvetica,Arial,sans-serif">广西</a>
        <h1 style="text-shadow:none;">我的测试网页</h1>
        <div data-role="navbar">
                <ul>
                    <li><a href="#" class="ui-btn-active">区域</a></li>
                    <li><a href="#">总价</a></li>
                    <li><a href="#">房型</a></li>
                    <li><a href="#">面积</a></li>
                </ul>
         </div>
     </div>
         
    <div data-role="content">
    
    </div>
 
</div>



虽然又土又笨,但还是解决了

有个问题很郁闷,我已经设置a的data-role=none了,但是还是被JQM渲染了文字阴影。
还有,我在CSS文件里的相关类.ui-bar-×里把text-shadow都注释掉了,还是没能去掉阴影,只能直接在标签的style=text-shadow:none;
希望哪位前辈指点一下。
0
陈阳阳阳
陈阳阳阳
嗯,以后你可以用chrome之类的审查元素,一下就能看出来这个a标签到底是为什么会有“边框”了
0
frantic1048
frantic1048

引用来自“汗马”的评论

等了那么久,最后还是得靠自己,问题解决了得贴方法出来:

原来是文字阴影在捣鬼,直接设置a标签style=text-shadow:none;

<div data-role="page">
 
    <div data-role="header" data-position="fixed">
        <a href="#" data-role="none" style="text-shadow:none;font-size:13px;font-weight:normal;line-height:33px;color:#fff;text-decoration:none;font-family:Helvetica,Arial,sans-serif">广西</a>
        <h1 style="text-shadow:none;">我的测试网页</h1>
        <div data-role="navbar">
                <ul>
                    <li><a href="#" class="ui-btn-active">区域</a></li>
                    <li><a href="#">总价</a></li>
                    <li><a href="#">房型</a></li>
                    <li><a href="#">面积</a></li>
                </ul>
         </div>
     </div>
         
    <div data-role="content">
    
    </div>
 
</div>



虽然又土又笨,但还是解决了

有个问题很郁闷,我已经设置a的data-role=none了,但是还是被JQM渲染了文字阴影。
还有,我在CSS文件里的相关类.ui-bar-×里把text-shadow都注释掉了,还是没能去掉阴影,只能直接在标签的style=text-shadow:none;
希望哪位前辈指点一下。

文字阴影就是text-shadow属性造成的。

HTML标签上的style属性里面写的CSS拥有比外部CSS规则更高的优先级,所以即使你改了CSS也 多半 不会有效果。

另外仅从你给的这段代码看,.ui-bar-x并不会选中任何上面代码里面的元素,所以你注释再多都不会产生任何变化 (:з」∠)


  • 你可以删除掉“广西”那个标签里面的text-shadow属性。

  • 也可以在CSS里面使用text-shadow:none !important;这种形式来搞个更高的优先级把标签里面的那个text-shadow给覆盖掉。

这些方法不土也不笨,都是很直接的解决你的需求的方法,因为你并不需要text-shadow,理所当然地就干掉它就可以啦呀 ˊ_>ˋ


最后建议题主到这里转一圈 –> CSS 入门指南 - Web开发者指南 | MDN

这样很多同类问题就都能够得到解决了 ╮( ̄▽ ̄)╭

0
汗马

引用来自“汗马”的评论

等了那么久,最后还是得靠自己,问题解决了得贴方法出来:

原来是文字阴影在捣鬼,直接设置a标签style=text-shadow:none;

<div data-role="page">
 
    <div data-role="header" data-position="fixed">
        <a href="#" data-role="none" style="text-shadow:none;font-size:13px;font-weight:normal;line-height:33px;color:#fff;text-decoration:none;font-family:Helvetica,Arial,sans-serif">广西</a>
        <h1 style="text-shadow:none;">我的测试网页</h1>
        <div data-role="navbar">
                <ul>
                    <li><a href="#" class="ui-btn-active">区域</a></li>
                    <li><a href="#">总价</a></li>
                    <li><a href="#">房型</a></li>
                    <li><a href="#">面积</a></li>
                </ul>
         </div>
     </div>
         
    <div data-role="content">
    
    </div>
 
</div>



虽然又土又笨,但还是解决了

有个问题很郁闷,我已经设置a的data-role=none了,但是还是被JQM渲染了文字阴影。
还有,我在CSS文件里的相关类.ui-bar-×里把text-shadow都注释掉了,还是没能去掉阴影,只能直接在标签的style=text-shadow:none;
希望哪位前辈指点一下。

引用来自“frantic1048”的评论

文字阴影就是text-shadow属性造成的。

HTML标签上的style属性里面写的CSS拥有比外部CSS规则更高的优先级,所以即使你改了CSS也 多半 不会有效果。

另外仅从你给的这段代码看,.ui-bar-x并不会选中任何上面代码里面的元素,所以你注释再多都不会产生任何变化 (:з」∠)


  • 你可以删除掉“广西”那个标签里面的text-shadow属性。

  • 也可以在CSS里面使用text-shadow:none !important;这种形式来搞个更高的优先级把标签里面的那个text-shadow给覆盖掉。

这些方法不土也不笨,都是很直接的解决你的需求的方法,因为你并不需要text-shadow,理所当然地就干掉它就可以啦呀 ˊ_>ˋ


最后建议题主到这里转一圈 –> CSS 入门指南 - Web开发者指南 | MDN

这样很多同类问题就都能够得到解决了 ╮( ̄▽ ̄)╭

谢谢前辈的解答

我现在碰到新问题,能否指点一下。就是在a.html页面,转到b.html页面,不管是用changePage()方法还是直接在a标签里加链接,到达目标页面后它竟然自动返回a.html页面,就算是从b.html页面回退a.html页面,也有这种情况发生。真实奇怪,是什么原因呢?

frantic1048
frantic1048
可以检查一下你在 b 页面是否是在不合适的时机触发了任何能够改变页面的函数。。
返回顶部
顶部