• css培训二


    前面的培训其实讲了个大概。下面讲讲比较细节的东西。

    一.padding 和 margin

    理解的关键在于,padding就是内填充,margin只是外边距。给元素加了背景色,就可以查看出两者的差异了。

    而在盒模型计算上,padding是要计算的,margin是不用计算的,因而背景图的平铺可以铺到padding上。

    通常在使用这两者比较含糊的地方是:在没有边框或者背景色的情况下,padding和margin看不出有何差异。

    因而,如果为了扩展,避免将来又要加上边框或者背景色,对于元素和元素之间存在间距,请使用margin。

    还需要注意的一点是,内联元素的margin-top,margin-bottom通常不起作用,有时会使用padding来模拟margin。

    普通文档流存在margin边距叠加的问题,这个请看w3cschool的介绍,分析很详细,我就不多说了,链接:http://www.w3school.com.cn/css/css_margin_collapsing.asp

    所以,灵活使用才是关键。

    二.css拼图

    又称css sprites。就是把一些背景图标拼合到一张图上。使用的是css中的background-position定位技术。

    好处:

    减少对服务器端的图片请求数。

    坏处:

    • 图片比原先的大了
    • 维护困难,牵一发容易动全身
    • 可能需要多余的html标签来固定宽高

    建议:

    • 对使用的图标进行归类,公用的图标可以考虑放到一张图上,私有的页面级别的就单独放在一张图上
    • 重复平铺的图片在拼图时需要注意,有些是不能拼的,只能单独成为一张图
    • 适当拼图,一个页面的图标不一定都要放到一张图上,可以分为好几张图。避免图片过大导致页面渲染慢。

    详细参考文章推荐:

    前端观察的:css sprites 的一些技巧

    彬go的:最全的css sprites教程

    三.背景图和前景图的使用

    背景图和前景图的区别是什么?

    关键在于:背景图是修饰作用,可以没有,但是前景图必须要有,是为了数据的展示。裸奔页面时,必须体现出页面内容的完整性。

    导航条通常是有背景修饰的,但是不会用img标签;而产品展示列表中,产品图片的展示必须使用img了,这是需要后台输出的。

    思考这么一个问题,网站logo究竟使用图片img呢,还是不用img,只是使用链接?

    如下示例:

    1.使用前景图img展现logo

    <h1><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="270" height="129" alt="百度搜索" /></a></h1>

    2.logo只是修饰,使用背景图来展示

    <h1><a href="#">百度</a></h1>

    css:

    h1 a { display:block; width:270px; height:129px; background:url('http://www.baidu.com/img/baidu_sylogo1.gif') no-repeat; overflow:hidden; text-indent:-999em;}

     三.id和class的使用

    id和class是对语义的具体补充。因此,无论使用id还是class来进行命名,都应当描述清楚模块的功能。

    在实际使用上,由于id在同一页面具有唯一性,并且经常作为js的挂钩,个人以为,使用id来进行对模块的具体描述是最恰当的。

    而class在描述上应当偏向于功能的描述,而不是位置,颜色等描述。class由于可以有多个(在交互上可以对应多个状态),因此,在描述上应当更宽泛,而不是太具体。具体这件事情可以交给id来做。

    这样就不影响class的模块化了。

    废话不多说,看一个html和css实例:

    html:

    <div id="fiance" class="list_item">
        <h1>财经模块</h1>
    </div>
    <div id="entertainment" class="list_item">
        <h1>娱乐模块</h1>
    </div>
    <div id="news" class="list_item">
        <h1>新闻模块</h1>
    </div>

    css:

    .list_item { width:200px; height:140px; padding:10px; overflow:hidden; border-style:solid; border-width:2px; }
    .list_item h1 { font-size:16px; color:#333; padding-left:10px; }
    #finance { border-color:gray; }
    #entertainment { border-color:orange; }
    #news { border-color:blue; }

    通常不是很建议在样式表中出现id。这样担心的原因在于,一个页面的前端可能并非一个人写的,而是多人维护的。你在html中定义的id可能会被他人改掉。然后样式就挂了。

    所以,上面的示例我们也可以这么改:

    html:

    <div id="finance" class="finance list_item">
        <h1>财经模块</h1>
    </div>
    <div id="entertainment" class="entertainment list_item">
        <h1>娱乐模块</h1>
    </div>
    <div id="news" class="news list_item">
        <h1>新闻模块</h1>
    </div>

    css:

    .list_item { width:200px; height:140px; padding:10px; overflow:hidden; border-style:solid; border-width:2px; }
    .list_item h1 { font-size:16px; color:#333; padding-left:10px; }
    .finance { border-color:gray; }
    .entertainment { border-color:orange; }
    .news { border-color:blue; }

    解决方案更换了,但是会存在一定的问题。若是需要样式的覆盖和重定义,那就对选择器的权重有要求了。这里得格外注意下。

    尽管我们这么建议,但是特例始终是存在的。所以,不必死磕。

    例如:一个按钮,存在多个状态,在某些情况下,切换到对应的状态。

    html:

    <button type="button" id="add" class="abled">添加</button>

    css:

    #add { height:30px; width:100px; }
    /*分为可用和不可用状态*/
    #add.abled { background:blue; cursor:pointer; }
    #add.disabled { background:#333; cursor:text; }

    id和class配合,绝对爽歪了。

    其他特例则是为了css权重问题,而使用了id。

    四.css长命名和短命名

    什么是长命名,什么是短命名,看例子,你就彻底明白了。

    短命名示例:

    html:

    <div class="news">
        <header class="hd">
            <h1>新闻</h1>
        </header>
        <div class="bd">
            <ul>
                <li><a href="#">新闻一</a></li>
                <li><a href="#">新闻二</a></li>
                <li><a href="#">新闻三</a></li>
            </ul>
        </div>
        <footer class="ft"><a href="#">更多</a></footer>
    </div>

    css:

    .news .hd {}
    .news .bd {}
    .news .ft {}

    长命名示例:

    <div class="news">
        <header class="news_hd">
            <h1>新闻</h1>
        </header>
        <div class="news_bd">
            <ul>
                <li><a href="#">新闻一</a></li>
                <li><a href="#">新闻二</a></li>
                <li><a href="#">新闻三</a></li>
            </ul>
        </div>
        <footer class="news_ft"><a href="#">更多</a></footer>
    </div>

    css:

    .news_hd {}
    .news_bd {}
    .news_ft {}

    那么,两者之间的差异在哪里?

    长命名自然能够降低重名的可能性,短命名容易产生命名冲突。短命名可以扩展层级,长命名意味着层级只有一个。

    因此,短命名适合模块化扩展,长命名适合不变化固定的模块。

    看如下示例:

    html:

    <div class="news">
        <header class="news_hd">
            <h1>新闻</h1>
        </header>
        <div class="news_bd">
            <ul>
                <li><a href="#">新闻一</a></li>
                <li><a href="#">新闻二</a></li>
                <li><a href="#">新闻三</a></li>
            </ul>
        </div>
        <footer class="news_ft"><a href="#">更多</a></footer>
    </div>
    <div class="fiance">
        <header class="fiance_hd">
            <h1>新闻</h1>
        </header>
        <div class="fiance_bd">
            <ul>
                <li><a href="#">新闻一</a></li>
                <li><a href="#">新闻二</a></li>
                <li><a href="#">新闻三</a></li>
            </ul>
        </div>
        <footer class="fiance_ft"><a href="#">更多</a></footer>
    </div>

    虽然是两个不同的模块,新闻和财经,但是结构,样式一致。长命名就哭吧,骚年。要不,就合并css样式。

    css:

    .news_hd,.fiance_hd  {}
    .news_bd,.fiance_bd {}
    .news_ft,.fiance_ft{}

    看看短命名如何处理这个问题:

    html:

    <div class="news list_item">
        <header class="hd">
            <h1>新闻</h1>
        </header>
        <div class="bd">
            <ul>
                <li><a href="#">新闻一</a></li>
                <li><a href="#">新闻二</a></li>
                <li><a href="#">新闻三</a></li>
            </ul>
        </div>
        <footer class="ft"><a href="#">更多</a></footer>
    </div>
    <div class="fiance list_item">
        <header class="hd">
            <h1>新闻</h1>
        </header>
        <div class="bd">
            <ul>
                <li><a href="#">新闻一</a></li>
                <li><a href="#">新闻二</a></li>
                <li><a href="#">新闻三</a></li>
            </ul>
        </div>
        <footer class="ft"><a href="#">更多</a></footer>
    </div>

    css:

    /*公用样式*/
    .list_item {}
    .list_item .hd {}
    .list_item .bd {}
    .list_item .ft {}
    /*订制样式*/
    .news .hd {}
    .news .bd {}
    .news .ft {}
    
    .fiance .hd {}
    .fiance .bd {}
    .fiance .ft {}

    使用短命名,扩展性和可重用性大大提高了。爽吧。

  • 相关阅读:
    还是不能偷懒ForEach陷阱
    备忘ForEach方法与foreach迭代器使用小区别
    备忘反射调用Private方法
    机器人也会梦见电子羊吗
    Windows 7 下Skype最小化到系统托盘
    编译Boost_1_37_0 For VS2008
    使用API判断网络是否连通(InternetGetConnectedState / IsNetworkAlive)
    SVN中“txncurrentlock:拒绝访问”错误
    幂函数的非递归算法
    Visual Studio中的文件类型(sln vcproj suo user ncb)
  • 原文地址:https://www.cnblogs.com/my_front_research/p/2849084.html
Copyright © 2020-2023  润新知