最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

鲜为人知的CSS用法技巧

来源:懂视网 责编:小采 时间:2020-11-27 18:50:18
文档

鲜为人知的CSS用法技巧

鲜为人知的CSS用法技巧:1. 关于background的写法DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}1)您可以看到background的第一个定义是一个颜色值这表示在背景图片失效的时候颜色将起作用。2)url括号中的引号是没有必要的,我们可以不写引号 2. 关于
推荐度:
导读鲜为人知的CSS用法技巧:1. 关于background的写法DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}1)您可以看到background的第一个定义是一个颜色值这表示在背景图片失效的时候颜色将起作用。2)url括号中的引号是没有必要的,我们可以不写引号 2. 关于
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等伪类可以这样使用
<h1>Buy widgets</h1>
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; <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:1312. * 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 }

文档

鲜为人知的CSS用法技巧

鲜为人知的CSS用法技巧:1. 关于background的写法DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}1)您可以看到background的第一个定义是一个颜色值这表示在背景图片失效的时候颜色将起作用。2)url括号中的引号是没有必要的,我们可以不写引号 2. 关于
推荐度:
标签: 使用 技巧 css
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top