首页 > 试题广场 >

请简化以下的CSS代码，并给出简单的说明。

[问答题]
请简化以下的CSS代码，并给出简单的说明。 
div.container {
	width: 500px;
	background-image: url(/img/sprite.png);
        background-repeat: no-repeat; 
        background-position: 0px -78px;
}
div.container ul#news-list, div.container ul#news-list li {
	margin: 0px;
	padding: 0px;
}
div.container ul#news-list li {
	padding-left: 20px;
	background-image: url(/img/sprite.png);
        background-repeat: no-repeat;
        background-position: -120px 0px;
}
a {
	font-size: 14px;
        font-weight：bold；
	line-height: 150%;
	color: #000000;
}
添加回答
zmnk头像 zmnk
/*没有必要在class加上标签，会影响页面加载性能*/
.container {
    width: 500px;
    background: url(/img/sprite.png) 0 -78px no-repeat;/*背景实现可以缩写为一句话，以空格隔开，当为0像素时可将单位去掉，能精简两个字节。*/ 
}
/*当使用id选择器的时候没有必要加父级class,id选择器是唯一的，不会在同一个页面中出现多次，同样前面的ul也没有必要，影响性能，为0时的单位可以省略。*/
#news-list,
#news-list li {
    margin: 0;
    padding: 0;
}
#news-list li {
    padding-left: 20px; 
    background: url(/img/sprite.png) -120px 0 no-repeat;
}
/*所有标签均为小写*/ 
a{
   font-size: 14px;
    font-weight：bold；
    line-height: 150%;/*文字如果没有设置字体的时候不能进行缩写*/
    color: #000;/*色彩每两位相同可以缩写为一位*/
}

发表于 2015-01-09 11:15:08 回复(0)
牛客681400号头像 牛客681400号
.container {
    width: 500px;
    background-image: url(/img/sprite.png) no-repeat 0px-78px;
}
#news-list,#news-list li {
    margin: 0px;
    padding: 0px;
}
#news-list li {
    padding-left: 20px;
    background-image: url(/img/sprite.png) no-repeat -120px0px;
}
a{
    font-size: 14px;
    font-weight：bold；
    line-height: 150%;
    color: #000;
}
发表于 2016-04-16 14:59:55 回复(0)
晕头像 晕 
div.container { width: 500px; background-image: url(/img/sprite.png); background-repeat: no-repeat; background-position: 0px -78px; } div.container ul#news-list, div.container ul#news-list li { margin: 0px; padding: 0px; } div.container ul#news-list li { padding-left: 20px; background-image: url(/img/sprite.png); background-repeat: no-repeat; background-position: -120px 0px; } A { font-size: 14px; font-weight：bold； line-height: 150%; color: #000000; }
发表于 2014-12-25 23:06:55 回复(0)
牛客224199号头像 牛客224199号
*{
    padding:0;
    margin:0;
    color:#000000;
}
A{
    font-size:14px;
    font-weight:bold;
    line-height:150%;
}
div.container{
    width:500px;
    background:url(/img/sprite.png) no-repeat 0px -78px;
}
div.container ul#news-list li{
    padding-left:20px;
    background:url(/img/sprite.png) no-repeat -120px 0px;
}

发表于 2014-12-22 21:43:54 回复(0)
lenrinfvck头像 lenrinfvck
div.container,#news-list li{
    width:500px;
    background: url ( /img/ sprite . png) no-reapeat 0 -78px;
}
#news-list i{margin:0;padding:0}
#news-list li{
    width:auto;
    padding: 0 0 0 -20px;
background-position:-120px 0;
}
a{
    font:14px/150% bold #000;
}
发表于 2014-12-16 21:59:25 回复(0)
刘剑锋_F2E头像 刘剑锋_F2E 
div.container { width: 500px; background: url(/img/sprite.png) no-repeat 0px -78px; }
div.container ul#news-list, div.container ul#news-list li { margin: 0; padding: 0; }

div.container ul#news-list li { padding-left: 20px; background: url(/img/sprite.png) no-repeat -120px 0px; }
A { font: 14px/1.5 bold #000000; }

发表于 2014-12-11 22:06:59 回复(0)
牛客501870号头像 牛客501870号
.container { width: 500px; background-position: 0px -78px; } .container,#new-list li{ background-image: url(/img/sprite.png) no-repeat; } #news-list,#news-list li { margin: 0px; padding: 0px; } #news-list li { padding-left: 20px; background-position: -120px 0px; } a { font-size: 14px; font-weight：bold； line-height: 150%; color: #000000; }
发表于 2014-12-08 12:43:32 回复(0)
牛客352579号头像 牛客352579号
background: url ( /img/ sprite . png ) no-repeat -120px 0px;
font: 14px bold;
color: #000;
发表于 2014-12-02 10:44:30 回复(0)
字母-if头像 字母-if
div.container,div.container ul#news-list li{
background:url(/img/sprite.png) no-repeat;
/*同一图片、属性合并，减少字符，但是几年前看过文章，这样的速度没有单写快*/
}
div.container {
width: 500px;
        background-position: 0px -78px;
}
div.container ul#news-list, div.container ul#news-list li {
margin: 0px;
padding: 0px;
}
div.container ul#news-list li {
padding-left: 20px;
        background-position: -120px 0px;
}
A {
color: #000000;
font:bold 14px/150% '';
/*font复合属性*/
}
发表于 2014-11-29 23:12:54 回复(0)
靠谱男青年奖得主头像 靠谱男青年奖得主
div.container {
width: 500px;
background: url(/img/sprite.png) no-repeat  0px -78px;
}
#news-list li {
margin: 0px;
padding: 0px;
padding-left: 20px;
background url(/img/sprite.png) no-repeat -120px 0px;
}
a{
font-size: 14px;
      font-weight：bold；
line-height: 150%;
color: #000000;
}
发表于 2014-11-23 14:13:00 回复(0)
比目小鱼鱼头像 比目小鱼鱼
div.container {
width: 500px;
background: url(/img/sprite.png) no-repeat 0px -78px;       /*根据语法background可以简写*成background：url repeat position/
}
div.container ul#news-list, div.container ul#news-list li {
margin: 0px;
padding: 0px;
}
div.container ul#news-list li {
padding-left: 20px;
background: url(/img/sprite.png) no-repeat  -120px 0px;       /*根据语法background可以简写*成background：url repeat position/  
}
A {
font:bold 14px/150% ； /*根据语法font可以简写*成font：font-style font-weight font-size line-height font-family；而color设定文字颜色需要单独进行定义。
color: #000;
}
发表于 2014-11-20 11:56:40 回复(1)
@@头像 @@
div . container { width : 500px ; background: url ( /img/ sprite . png ) 0px -78px no-repeat;}
div . container ul #news-list{margin : 0px ; padding : 0px ;}

发表于 2014-11-14 17:00:30 回复(0)
小睿瑞头像 小睿瑞 
div.container { width: 500px; background: url(/img/sprite.png )

0px -78px

 no-repeat; } 

#news-list, #news-list li { margin: 0px; padding: 0px; } 

#news-list li { padding-left: 20px; background: url(/img/sprite.png) no-repeat -120px 0px; } 

A { font:bold 14px/1.5em #000000; }

发表于 2014-11-12 16:34:44 回复(0)
雨鐹之后头像 雨鐹之后
div.container{width:500px; background:url(/img/sprite.png) no-repeat 0px -78px;}
div.container ul#news-list li{margin:0; padding:0; padding-left：20px; background:url(/img/sprite.png) no-repeat -120px 0px;}
A{font-size:14px font-weight:bold; line-height:150%; color:#000;}
发表于 2014-11-10 17:21:43 回复(0)
苏小西头像 苏小西
div.container { width: 500px; background-image: url(/img/sprite.png); background-repeat: no-repeat; background-position: 0px -78px; } div.container ul#news-list, div.container ul#news-list li { margin: 0px; padding: 0px; } div.container ul#news-list li { padding-left: 20px; } A { font-size: 14px bold 150% #000; font-weight：bold； line-height: 150%; color: #000000; }
发表于 2014-11-10 16:46:13 回复(0)
oxyflour头像 oxyflour
/* div 太多啦 */
.container {
  width: 500px;
  /* 可写成一行，且稍微规范一些 */
  background: url('/img/sprite.png') no-repeat 0 -78px;
}
/* id 选择符已足够 */
#news-list,
#news-list li {
  padding: 0;
  margin: 0;
}
#news-list li {
  padding-left: 20px;
 background: url('/img/sprite.png') no-repeat -120px 0px;
}
a {
  font-size: 14px;
  font-weight: bold;
  line-height: 150%;
  color: black;
}
发表于 2014-11-06 20:48:29 回复(0)
老菜鸟头像 老菜鸟

<html>
 <head></head>
 <body>
 <style>
  div.container {
  width: 500px;
  background: url (/img/sprite.png) 0px - 78px no-repeat;
 }

  #news-list, #news-list li {
  margin: 0;
  padding: 0;
 }

 #news-list li {
  padding-left: 20px;
  background: url(/img/sprite.png) -120px 0px no-repeat;
 }

 a {
  font:bold 14px/150% normal;
  color:#000;
 }
</style>


 </body>
</html>
观点：
1、首先没有把图片提取出来，是因为考虑到如果把图片提取出来，应该有更好的方法，比如说新增一个class，如果需要背景的直接调用这个class就可以，便于后期维护，当然这边也可以把，container的div和li的功用样式提取出来。
2、去掉了层级的选择器，在符合规范的基础上一个页面只可能出现一个id名字。所以直接去掉。
请各位指教
发表于 2014-11-04 12:00:49 回复(0)
好奇猫头像 好奇猫
div.container {width: 500px;background: url(/img/sprite.png) no-repeat 0px -78px;}/*合并背景属性*/
div.container ul#news-list, div.container ul#news-list li {margin: 0px;padding: 0px;}/*已是缩写 无需修改*/
div.container ul#news-list li {padding:0 0 0 20px;background-image: url(/img/sprite.png) no-repeat -120px 0px;}/*合并背景属性*/
a{font-size: 14px/150%; font-weight: bold; color: #000000;}/*选择器统一使用小写 合并字体属性 修正标点符号位半角符号*/
发表于 2014-11-04 10:07:12 回复(1)
提交观点

问题信息

前端工程师 阿里巴巴 HTML 2011
来自：阿里巴巴2011前端工...
上传者：一道风
难度：
18条回答 8659浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号