转载:比较常用的样式

原创 2005年02月25日 17:02:00

在Web开发时,不可避免要用到CSS,把我这几年在Web开发过程中积累的一些不常用但是很实用的CSS整理了一下,希望对大家有所帮助!

filter:chroma(color:#FFFFFF);
让指定的背景色透明,例:

quickstart.gif quickstart.gif
未使用该滤镜 使用该滤镜

word-break:break-all;
强制换行,例:

当未使用该样式时,虽然我设置了表格宽度为100px,但是面对这样连续的字符,表格无法自动换行,表格会被撑破:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

再看看使用该样式后的效果:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

writing-mode:tb-rl;
用于设置文本的书写方向,可以有两个取值:
lr-tb:表示左右-上下,left right - top bottom
tb-rl:表示上下-右左,top bottom - right left
需要 IE 5.5+ 才支持,例:

第一组垂直文字第一组水平文字第二组水平文字
第二组水平文字第三组竖直文字第三组水平文字

text-indent:2em;
首行缩进,例:

有时候,我们需要将段落的首行缩进两个文字,一般我们都是用4个HTML的空格( )来实现,其实我们还可以用样式表来达到这种效果!

background-color: transparent;
transparent表示透明色,例:


border-collapse:collapse;
它会自动把相同的边框线合并,例:

不使用border-collapse:collapse;

1.1 1.2
2.1 2.2
使用border-collapse:collapse;
1.1 1.2
2.1 2.2

background-position: 0 -78;
设置背景图片的位置,例:

《background-position的妙用》

table-layout: fixed;
固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。也就是说,内容可能被裁切,例:

看看我以前写的一个仿msn的htc网格中应用这个属性的效果吧,仿照MSN的网格,单元格中文字过长会自动被截取(在Table中使用样式table-layout: fixed;),鼠标移上会全部显示(使用一个浮动的层覆盖在上面): 演示 下载

display:inline;
设置或检索对象是否及如何显示,inline表示内联,例:

大家都知道两个表格在一起,默认是会自动换行的,但是利用display:inline;属性可以让两个表格并排在一起:

表格1
 
表格2

overflow: auto;
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。auto : 在需要时剪切内容并添加滚动条,例:

使用前的TextArea 使用后的TextArea

font:12px/18px;
字体大小/行高,例:

未使用CSS 使用该CSS

在这里行高是系统默认的,不会受影响的

这里的12px就表示字体大小,18px其实就等价于css中的line-height。

clip : rect ( 0 64 64 0 )
字体大小/行高,例:

原图: girl.gif
裁减后: girl.gif 
可以利用这个来做动画:)

font-size: expression(document.body.clientWidth / 20);
expression是IE浏览器特有的功能,可以直接执行脚本而算出css的值,例:

《CSS也能控制表格的交替颜色 》

字体大小随着浏览器大小而变化,始终为浏览器宽度的1/20

对于支持HTML的BBS来说,这可能会是一个安全隐患!

position: absolute;
这个我想绝大多数人都知道——绝对定位,我所要说的是偶然发现的一个隐含功能,例:

当给一个网页元素的CSS设置为"position: absolute;",那么它会绝对定位,然后根据css中的left,top属性确定自己的位置。但是如果我们仅仅设置一个元素样式表的"position: absolute;"属性,而不设置其left,top属性,那么该元素会浮在其html所在位置。看个例子,我将一个tr的CSS设置为"position: absolute;":

第一行
第二行

第一行浮在第二行上了,这个特性可以很方便的来制作重叠效果,例如我以前写过的自定义按钮和flash播放器都用到了这个特性来实现重叠:
自定义按钮:一个自定义按钮,底下是一个普通的Button,利用"position:absolute;"在Button上面覆盖图片,这样看起来就像自定义按钮,而实际点击确是点击底下真实的Button(下载
Flash播放器:这个播放器的进度条就是通过这种方法来重叠的。(下载

css/css3常用样式总结

1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; over...
  • h_qingyi
  • h_qingyi
  • 2016年12月07日 18:37
  • 689

微信再发大招!原创保护上线新分享样式

雷锋网(公众号:雷锋网)5月20日消息    为进一步鼓励原创文章的分享,微信公众平台再出新招。据微信官方表示,更新后的微信公众平台,用户在分享其他人的原创文章时,可以根据文章链接,直接分享原创声明文...
  • Dzz2seiN13YV
  • Dzz2seiN13YV
  • 2017年05月20日 12:40
  • 15

常见css样式

通过最近几次对网页布局的经历,总结几个常见并且容易出错的的布局样式如下:...
  • Admin_yi
  • Admin_yi
  • 2016年07月27日 13:40
  • 490

(经典)分页组件,3种不同样式的分页效果,数字,按钮,标题搜索等功能

java分页算法组件
  • u014078192
  • u014078192
  • 2014年05月05日 15:50
  • 1527

HTML常用table样式

HTML常用table样式
  • y101101025
  • y101101025
  • 2017年04月13日 00:53
  • 1959

CSDN如何转载他人文章

利用Markdown可以解析html的特点,我们可以很方便的转载他人的文章。
  • Michael753951
  • Michael753951
  • 2017年04月21日 04:01
  • 517

1.如何转载CSDN其他人的博客

对于喜欢逛CSDN的人来说,看别人的博客确实能够对自己有不小的提高,有时候看到特别好的博客想转载下载,但是不能一个字一个字的敲了,这时候我们就想快速转载别人的博客,把别人的博客移到自己的空间里面,当然...
  • weixin_39914245
  • weixin_39914245
  • 2018年01月07日 21:24
  • 38

Android常用布局样式

一、推荐使用常用布局(1)LinearLayout(线性布局):线性的、垂直的、水平的 (2)RelativeLayout(相对布局):最灵活的 (3)TableLayout(表格布局):使用Gr...
  • eyouyou_0
  • eyouyou_0
  • 2016年02月18日 16:40
  • 784

如何转载别人csdn博客

对于喜欢逛CSDN的人来说,看别人的博客确实能够对自己有不小的提高,有时候看到特别好的博客想转载下载,但是不能一个字一个字的敲了,这时候我们就想快速转载别人的博客,把别人的博客移到自己的空间里面,当然...
  • BrotherJing8023
  • BrotherJing8023
  • 2016年12月15日 01:04
  • 204

CSS_一个常用分页样式

 直接上代码:     
  • trace332
  • trace332
  • 2010年09月19日 11:53
  • 503
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:转载:比较常用的样式
举报原因:
原因补充:

(最多只允许输入30个字)