国际艺术界  
国际艺术界首页
 
    国际美术网 国际书法网
国际音乐网                    
国际影视网
 
国际设计网
  国际摄影网   国际广告网    
书画装裱|配框 国际文学网
国际艺术市场       LOGO标志设计  
 
艺术原创区
 
   
   
 艺术家库 | 人体艺术 | 会员中心 | 资源下载 | LOGO设计 | 艺术展厅 | 艺术家排行榜 | 艺术设计 | 作品欣赏库 | 在线投稿
  您的位置:国际艺术界-->国际设计网-->网页多媒体  
国际设计网   
每期榜上星闻   
热点推荐    
  标志设计欣赏    
  平面设计欣赏    
  设计精品    
  设计师加盟    
  包装设计欣赏    
视觉识别    
  标志设计    
  平面设计    
  包装设计    
  服装设计    
  名片设计    
工业设计    
  交通工具    
  电子产品    
  日常用品    
  其他用品    
  设计作品欣赏    
网页多媒体    
  网页设计    
  多媒体作品    
  酷站收录    
  网页理念    
  作品欣赏    
CG 动画    
  CG 插画    
  手绘插画    
  动漫Flash    
  素材与教程    
  作品欣赏    
建筑与环境    
  城市景观    
  园林园艺    
  室内艺术    
  建筑艺术    
  作品欣赏    
学艺沙龙    
  高考辅导    
  设计教程    
  学习院校    
  推荐图书    
  设计对话    
设计服务商    
  设计资讯    
  人才中心    
  设计公司    
  个人与团体    
  设计书籍    
  广告作品欣赏图库   
  媒体广告欣赏   
  室内外广告欣赏   
  展览展示欣赏   
  广告礼品欣赏   
  优秀广告欣赏   
  广告设计   
  公益广告   
  化妆品品牌   
  设计作品欣赏图库   
  LOGO-标志设计欣赏   
  平面设计欣赏   
  包装设计欣赏   
  服装设计欣赏   
  交通工具欣赏   
  电子产品欣赏   
  日常用品欣赏   
  其他用品欣赏   
  网页设计欣赏   
  多媒体作品欣赏   
  CG插画欣赏   
  手绘插画欣赏   
  动漫Flash欣赏   
  城市景观欣赏   
  园林园艺欣赏   
  室内设计 室内装修   
  建筑艺术欣赏   
  精品海报欣赏   
  QQ头像   
  QQ网名   
  名片设计欣赏   
  字体设计   
  画册封面|画册设计   
  商标设计商标转让查询   
  书法作品欣赏图库   
  毛笔(软笔)书法欣赏   
  硬笔书法欣赏   
  篆刻艺术欣赏   
  美术作品欣赏图库   
  国画欣赏   
  油画欣赏   
  工艺美术欣赏   
  雕塑浮雕欣赏   
  装饰画图片素材   
  素描头像素描静物   
  景泰蓝工艺画   
  摄影作品欣赏图库   
  老照片欣赏   
  新闻摄影欣赏   
  人体艺术|人体摄影   
  广告摄影欣赏   
  人物摄影欣赏   
  体育摄影欣赏   
  风光摄影欣赏   
  婚纱照片欣赏   
  影视曲艺作品图库   
  影视精彩片段欣赏   
  戏剧艺术片段欣赏   
  曲艺艺术片段欣赏   
  戏曲艺术片段欣赏   
  音乐作品欣赏图库   
  声乐欣赏   
  器乐欣赏   
  FlashMV欣赏   
  音乐作品(MV)欣赏   
  非主流图片   
  非主流图片素材   
  非主流图片设计   
  非主流签名   
  非主流闪图   
  非主流头像   
  非主流动画   
  非主流歌曲   
  桌面壁纸欣赏图库   
  WINDOWS主题壁纸   
  苹果主题壁纸   
  动物植物风光   
  经典设计壁纸   
  人物主题壁纸   
  高分辨率壁纸   
  游戏卡通壁纸   
  其他类别壁纸   
  个性图标头像   
 
网页制作样式 CSS的常规使用技巧
2006/5/16 10:10:13   
 
  本篇总结了一些CSS常用技巧,为网站重构打下基础,但愿您能学到一点有用的东西。

一.使用css缩写

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看网页制作样式入门级教程 CSS的基本语法规则。

二.明确定义单位,除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em。 只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。

三.区分大小写

当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。

四.取消class和id前的元素限定

当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如:

div#content { /* declarations */ }
fieldset.details { /* declarations */ }

可以写成

#content { /* declarations */ }
.details { /* declarations */ }
这样可以节省一些字节。 五.默认值

通常padding的默认值为0,background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,象这样:

* {
margin:0;
padding:0;
}
六.不需要重复定义可继承的值

CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。但是要注意,浏览器可能用一些默认值覆盖你的定义。

七.最近优先原则

如果对同一个元素的定义有多种,以最接近(最小一级)的定义为最优先,例如有这么一段代码

Update: Lorem ipsum dolor set

在CSS文件中,你已经定义了元素p,又定义了一个classupdate

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

这两个定义中,class=update将被使用,因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。

八.多重class定义

一个标签可以同时定义多个class。例如:我们先定义两个样式,第一个样式背景为#666;第二个样式有10 px的边框。

.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在页面代码中,我们可以这样调用
<div class=one two></div>

这样最终的显示效果是这个div既有#666的背景,也有10px的边框。是的,这样做是可以的,你可以尝试一下。

九.使用子选择器(descendant selectors)

CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码:

<div id=subnav>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>Item 1</a></li>>
<li class=subnavitemselected> <a href=# class=subnavitemselected> Item 1</a> </li>
<li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </li>
</ul>
</div>

这段代码的CSS定义是:

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }
你可以用下面的方法替代上面的代码
<ul id=subnav>
<li> <a href=#> Item 1</a> </li>
<li class=sel> <a href=#> Item 1</a> </li>
<li> <a href=#> Item 1</a> </li>
</ul>

样式定义是:

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

 
编辑:国际艺术界  
设计大师帮扶:标志logo设计 包装设计 画册设计 广告设计 平面设计等VI系统设计 在线QQ:104601249
上一篇】   【下一篇】    【字体: 】【打印


      
   
《国际艺术界名家大典》征稿  弘扬中国梦传递“真正美”免费送名人书法题字QQ:306646416  
本站文章、作品、留言只代表作者和留言者本人,不代表国际艺术界网观点……
 
 
精品标志设计
点击 696039 次
 
六安瓜片茶包装
点击 226575 次
 
法国巴黎铁塔夜景
点击 114976 次
 
国外书籍装帧封面设计[15]
点击 114704 次
 
电影海报-欧美创意篇
点击 113225 次
 
丹麦--陶瓷灯具品欣赏[7]
点击 92264 次
 


图片素材 平面设计欣赏 标志设计欣赏 包装设计欣赏 书法欣赏 名片设计 人体艺术 油画欣赏 国画欣赏

 推荐文章
 文章标题 点击次数 发布日期
==>  如何下载 设计 制作极简网站 24600 2010/3/23 13:52:10
==>  国外摄影网站网页设计欣赏 23517 2011/6/3 15:20:57
==>  国外优秀的室内设计网站 21140 2010/9/28 13:40:40
==>  黑白经典网页设计欣赏 20982 2010/12/10 10:22:05
==>  时尚服装电子商务网站设计 17592 2011/4/20 13:01:59
 相关文章
 资讯标题 点击次数 发布日期
==>  如何下载 设计 制作极简网站 24600 2010/3/23 13:52:10
==>  国外摄影网站网页设计欣赏 23517 2011/6/3 15:20:57
==>  国外优秀的室内设计网站 21140 2010/9/28 13:40:40
==>  黑白经典网页设计欣赏 20982 2010/12/10 10:22:05
==>  时尚服装电子商务网站设计 17592 2011/4/20 13:01:59
 
   
关于我们 | 诚邀合作 | 免责声明 | 意见反馈 | 招贤纳士 | 法律顾问 | 在线投稿 | 友情链接 | 联系站长
  CEL:131-2105-8796 QQ: 306646416 
  版权:中国.国际艺术界网 美国-国际艺术界联合会G.J.Art (USA) Association