越狱下载\越狱第二季\兴化沙沟\友情链接\美女图片\矢量下载\韩国像素,SOSOTOT'蛰伏沙龙
  2003-09-25
  沙沟主题站
  越狱全图文
 

热门专题

  会员中心
  杀毒不求人
  友情链接
加入收藏夹
  2006-10-15
网站首页
低价游戏点卡热卖
免费得Q币方法大全
在线收看电视剧电影
暴雪游戏中文网
我们的网络小美女
 
| 沙沟主题网 | 平面设计交流 | 摄影图片欣赏 | 游戏杂谈专题 | 网络娱乐快报 | 软件下载介绍 | 股票投资指南 | 混迹网络指导 | 我们的论坛
www.sosootot.com
   
 当前位置:蛰伏沙龙首页>平面设计交流>网页制作技巧>文章内容 
  | 文章标题:CSS实用使用技巧20则  
 
CSS实用使用技巧20则
来源:蛰伏沙龙 www.sosotot.com 作者:蛰伏沙龙网站 发布时间:2007-10-17  
              WWW.SOSOTOT.COM | 蛰伏沙龙 | 网站版权说明 盗用必究

CSS实用使用技巧20则

本篇详细介绍了CSS使用技巧20则的文章主题, 包括:在不同页面上使用同样的导航代码,3D效果的按钮,为手持设备设计专门的CSS,IE中图片文字消失的问题,box黑客方法,直通到屏幕底部的背景色,CSS在容器内定位,CSS border的缺省值,CSS字体属性简写规则等等。


1. CSS字体属性简写规则

一般用CSS设定字体属性是这样做的:

font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

但也可以把它们全部写到一行上去:

font: bold italic small-caps 1em/1.5em verdana,sans-serif

真不错!只有一点要提醒的:这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值,这点要记上。

2. 同时使用两个类

一般只能给一个元素设定一个类(Class),但这并不意味着不能用两个。事实上,你可以这样:

<p class="text side">...</p>

同时给P元素两个类,中间用空格格开,这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话,后设置的起作用,即在CSS文件中放在后面的类的属性起作用。
3. CSS border的缺省值

通常可以设定边界的颜色,宽度和风格,如:

border: 3px solid #000

这位把边界显示成3像素宽,黑色,实线。但实际上这里只需要指定风格即可。

如果只指定了风格,其他属性就会使用缺省值。一般地,Border的宽度缺省是medium,一般等于3到4个像素;缺省的颜色是其中文字的颜色。如果这个值正好合适的话,就不用设那么多了。
4. CSS用于文档打印

许多网站上都有一个针对打印的版本,但实际上这并不需要,因为可以用CSS来设定打印风格。

也就是说,可以为页面指定两个CSS文件,一个用于屏幕显示,一个用于打印:


<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />


<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />


第1行就是显示,第2行是打印,注意其中的media属性。

但 应该在打印CSS中写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片,再关掉一些导航按钮。要想了解更多,可以看“打印差异”这一篇。
5. 图片替换技巧

一般都建议用标准的HTML来显示文字,而不要使用图片,这样不但快,也更具可读性。但如果你想用一些特殊字体时,就只能用图片了。

比如你想整个卖东西的图标,你就用了这个图片:

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

这当然可以,但对搜索引擎来说,和正常文字相比,它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的:

<h1>Buy widgets</h1>

但这样就没有特殊字体了。要想达到同样效果,可以这样设计CSS:


h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}


注意把image height换成真的图片的高度。这里,图片会当作背景显示出来,而真正的文字由于设定了-2000像素这个缩进,它们会出现在屏幕左边2000点的地方,就看不见了。但这对于关闭图片的人来说,可能全部看不到了,这点要注意。

              WWW.SOSOTOT.COM | 蛰伏沙龙 | 网站版权说明 盗用必究
 
共4页: 上一页 1 [2] [3] [4] 下一页
上一篇:网页制作常见105个问题解答   下一篇:alt属性和title属性
[收藏] [推荐] [评论(0条)] [返回顶部] [打印本页] [关闭窗口]  
用户名: 新注册) 密码: 匿名评论
评论内容:(不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规。
 
越狱下载\越狱第二季\兴化沙沟\友情链接\美女图片\韩国像素 www.sosotot.com 蛰伏沙龙
  | 看官区
百度留言区
TellMe
 
Google
Baidu
  | 火热放送
在线看电视电影
屁屁猪小游戏
Google
  | 游戏专题区


  | 热点文章推荐
·HTML语言frame的使用|if
·Banner 设计手册
·网页广告标准尺寸|网页
·国外404页面设计全收集
·网页制作常见105个问题
·Exploring Design: Outs
·网站设计65条原则
·50 Beautiful CSS-Based
  | 相关文章推荐
·网页制作常见105个问题
·alt属性和title属性
·CSS层叠样式表 (基础篇
·网页广告标准尺寸|网页
·网站设计65条原则
·HTML语言frame的使用|if
·Exploring Design: Outs
·50 Beautiful CSS-Based
 

越狱下载\越狱第二季\兴化沙沟\友情链接\美女图片\韩国像素 www.sosotot.com 蛰伏沙龙
SOSOTOT'蛰伏沙龙
[将本站加入收藏夹]
建議使用IE4.0以上版本
及1024*768解析度瀏覽本網站
关于我们 | 网站导航 | 商务合作 | 合作伙伴 | 广告加盟 | 网站留言 | 免责申明
SOSOTOT.COM | Copyright SOSOTOT Inc All Rights Reserved ,2006  沪ICP备06060359号
特别声明:本站内容多为互联网收集,如有侵犯您的权益,请速与我们联系。E-mail:sosotot@gmail.com