动态网站制作指南 [  QQ表情  ]
[ 投票调查 ]
[ 企业邮箱 ]
[ 网站空间 ]
网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 手机学院 | 邮件系统 | 网络安全 | 认证考试
ASP源码 | .Net源码 | PHP源码 | JSP源码 | JAVA源码 | CGI源码 | VB源码 | C++源码 | Delphi源码 | PB源码 | VF源码 | 汇编 | 服务器
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS教程
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
文章搜索服务
邮件订阅
输入你的邮件地址,
你将不会错过任何关于:
[ CSS教程 ]的信息

本月文章推荐
.四种CSS链接按钮示例.
.运筹帷幄 用CSS控制网站总“队形.
.CSS制作的阴影链接文字.
.网页布局中CSS的Class灵活应用.
..NET 中部分常用的CSS .
.学习CSS了解单位em和px的区别.
.SPAN和DIV的区别.
.用CSS控制IE下中英文字体显示对齐.
.CSS在IE和Nascape的显示差别.
.firefox浏览器支持的CSS鼠标样式.
.CSS下拉菜单的制作.
.Firefox CSS私有属性备忘记录.
.CSS网页布局开发小技巧24则.
.澄清DIV+CSS设计的误区.
.CSS中慎用中文注释.
.精通 CSS 滤镜(二).
.CSS样式文件优化 更整洁而清晰.
.XHTML+CSS制作样式风格切换的WEB.
.文字超出显示省略号==CSS制作.
.CSS实现鼠标滑过表格变色.

稀为人知的几个有用的Css技巧

发表日期:2008-9-10 |


1. 关于background的写法
 

DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}
1)您可以看到background的第一个定义是一个颜色值这表示在背景图片失效的时候颜色将起作用。
 
2)url括号中的引号是没有必要的,我们可以不写引号
2.  关于Border的写法,如果您想定义div的四个边的颜色不同,而粗度和样式都一样,您可以这样写:
DIV.special{border:1px solid; border-color:color1 color2 color3 color4}
四种颜色一次是上,右,下,左的颜色
 
3. 为了兼容所有的浏览器都可以显示半透明效果的写法
.tranparent{
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
        -moz-opacity:0.5;
        -kHTML-opacity:0.5;
        opacity: 50%;
        position:absolute;/*注意必须是absolute的*/
        top:100px;
        left:100px;
}
 
4.  _height,_width的作用
使用_height解决float的div不闭合的问题,您可以将_height属性去掉就可以开到效果了。
#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}
.column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}
 
<div id="wrap">
 <div class="column_left">
 <h1>Float left</h1>
 </div>
 <div class="column_right">
 <h1>Float right</h1>
 </div>
</div>
 
5.       使用min-height min-width解决div,或者span的固定高度问题
有时候我们需要设定某个元素固定高度,但是在firefox或者opera下面只设置高度,在内容不够多的时候,达不到预想的效果,这时候我们可以使用min-height
 
6.       使用!important改变样式的优先级
所谓的样式优先级是指,浏览器在应用样式时总是根据就近原则来应用样式,假定我们在一个页面中有三处都有对某个元素的定义,一处是在外部的CSS文件中,一处是在文件的head标签中定义内联CSS,另一处是在这个元素的标签内,那么根据就近原则此元素最终使用的样式是在标签内定义的样式,如果我们需要打破这种规则我们就可以使用!important指令
a.test{color:red!important}
这样即使在A元素内定义了color也不会应用,而是应用上面的定义
 
7.       使用media指令引入两种CSS:打印版本的CSS和屏幕显示的CSS
<link type="text/CSS" rel="stylesheet" href="url " media="screen" charset="utf-8" />
<link type="text/CSS" rel="stylesheet" href="url" media="print" charset="utf-8" />
8.       > 符号(目前ie不支持)
我们可以使用DIV A的方式来定义所有在div里面的所有A标签的样式,包括div下面的span中的div;如果我们只想定义DIV下面一级子节点的A标签我们可以使用“>”符号,例如:
DIV>A{color:red}
现在只有是DIV的直接子节点A标签的颜色是红色
9.:first-child :last-child 在非ie的浏览器下面可以通过这两个指示符,取到父元素的第一个元素或者最后一个元素
 
 
20070412 21:05增加
10. :hover等伪类可以这样使用
    <style type="text/CSS">
    .menu{}
    .menu ul{display:none}
    .menu:hover{}
    .menu:hover ul{display:block}
    </style>
 
<ul>
    <li class="menu">
        menu title
        <ul>
            <li>first</li>
            <li>last</li>
        </ul>
    </li>
</ul>
这样我们就可以做只用CSS控制的菜单,在ie6,ie7,firefox1.5,opera9.0下面测试通过
 
11.我们可以使用page-break-after,page-break-before控制打印时的分页
 
20070413 12:13
12. * HTML{}的作用是为了兼容6.0以下的IE版本,对HTML节点的选取,其他的浏览器都认为HTML标签是文档的根节点,而ie6以下的ie版本却认为在HTML标签的上面还有一个根节点
---感谢calmzeal的解释

13. CSS 的class可以有多个值,我们只需要将多个值用空格隔开就可以了

14. 颜色的缩写 我们可以将#ff0033缩写成#f03

15. 使用text-indent显示图片,而隐藏文字(这种做法据说有助于SEO)
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
<h1>Buy widgets</h1>
16. 为了避免不同浏览器对不同标签的padding,margin不同的解释可以在样式表的前面定义
*{margin:0px;padding:0px;}

上一篇:用css使单行超出指定宽度的内容切去并在结尾出现省略号(IE FF 通过) 人气:1178
下一篇:深入了解CSS 解决浮动元素消失BUG 人气:1017
浏览全部Css的内容 Dreamweaver插件下载 网页广告代码 2009年新年快乐
  最新网站源码 最新软件下载
2009-1-8 SMF论坛Simple Machines Forum v
2009-1-8 SMF论坛Simple Machines Forum v
2009-1-8 深度学习(asp)拼图游戏 v0.2.3
2009-1-8 纵横B2B电子商务系统XYECS!B2B v
2009-1-8 马克斯CMS v2.0 bulid 090105 be
2009-1-8 淘宝妈妈_淘客推广系统 v1.0
2009-1-8 淄博某企业网站源码
2009-1-8 silverlight制作的手机功能演示
2009-1-8 大型WEB束鹿三国游戏 特别版
2009-1-7 汉字任意点阵字库制作软件 V2.6
2009-1-7 书法家毛笔字生成器 Ougishi V4.
2009-1-7 字体修复大师
2009-1-7 微雨字体效果浏览器 1.0
2009-1-7 字体试衣间 2.9.6.8 豪华版
2008-11-29 Tencent Traveler 4.4
2008-11-29 龙卷风网络收音机 v3.0.0.0
2008-11-29 Intel Chipset Software Install
2008-11-29 TweakVI 1.0 Build 1100
  发表评论
姓 名: 验证码: [ 查看评论 ]
内 容:
站长工具:网站收录查询 | Google PR查询 | ALEXA排名查询 | CSS在线编辑器 | OPEN参数生成器 | 弹出式窗口代码产生器 | 密码登录生成器 | 在线按钮生成器 | Meta标签生成器 | 多色彩特效字代码生成器 | 网页代码调试器 | 在线FTP登陆 | Flash取色器 | 配色代码对照表 | 配色辞典 | CSS生成器 | 广告代码 | 框架网页代码生成器 | js/vbs加密 | md5加密 | 进制转换 | UTF-8 转换工具 | 在线调色板 | Html转换js | Html转换asp | Html转换php | Html转换perl
实用工具:汉字翻译拼音 | 拼音字典 | 符号对照表 | 个税计算 | 公积金贷款计算 | 购房银行按揭利率计算 | 实时汇率查询换算 | 经典小工具 | 汉字简繁转换 | 普通单位换算 | 公制单位换算 | 生辰老黄历 | 国内电话区号 | 国家代码与域名缩写 | 文字加密解密 | 元素周期表 | 健康查询 | 世界时间 | 全国各地车牌查询 | 全国车辆交通违章查询 | 万年历 | 二十四节气 | 汉字横竖排版 | 手机号码查询 | 计算器 | ip搜索
业务联系 | 广告刊登 | 频道合作 | 投稿荐稿 | 联系方式 | 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号
ホームページ制作 不動産検索システム 求人情報
防水工事·改修工事 フットサル大会 探偵
SEO対策 中国語教室 ホームページ作成