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 {}

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

 

 

posted @ 2013-01-07 13:42  xmlovecss  阅读(186)  评论(0编辑  收藏  举报