0

0

鲜为人知的CSS用法技巧

巴扎黑

巴扎黑

发布时间:2017-08-09 15:50:34

|

1444人浏览过

|

来源于php中文网

原创

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 lefth1>
 div>
 div class="column_right">
 h1>Float righth1>
 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等伪类可以这样使用
h1>Buy widgetsh1>

16. 为了避免不同浏览器对不同标签的padding,margin不同的解释可以在样式表的前面定义
*{}{margin:0px;padding:0px;}
20070422 12:00添加
17. 关闭输入法状态,使用户只能输入英文状态下的字符,类似输入密码
input {}{ime-mode: disabled ; } 

20070423 09:08
18. 死都不换行,摘录(作者)
   1) white-space:nowrap; overflow: hidden; width: 17em !important ; width: 18em;
   注意: white-space不支持td,th等。
   2) 用.fixTable{ table-layout: fixed; overflow:hidden; }加上nobr标签实现隐藏
    nobr标签非标准。
20070426 0848
19. 同比改变图片大小
img.style.zoom = 0.5;
 
    {}{}
    .menu ul
{}{display:none}
    .menu:hover
{}{}
    .menu:hover ul
{}{display:block}
    
 
ul>
    
li class="menu">
        menu title
        
ul>
            
li>firstli>
            
li>lastli>
        
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 }

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

XML教程
XML教程

共142课时 | 6.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号