分享
 
 
 

这些样式表,你都用过么?

王朝other·作者佚名  2008-06-01
窄屏简体版  字體: |||超大  

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

让指定的背景色透明,例:

未使用该滤镜使用该滤镜 <table cellspacing = "0" cellpadding = "0" border = "1">

<tbody>

<tr align = "center" bgcolor = "#cccccc">

<td>

<img src = "/ArtImage/20060604/iz171_1.gif"/></td>

<td>

<img style = "FILTER: chroma(color:#000000)" src = "/ArtImage/20060604/iz171_1.gif"/></td>

</tr>

<tr align = "center">

<td>

未使用该滤镜</td>

<td>

使用该滤镜</td>

</tr>

</tbody>

</table>

Word-break:break-all;

强制换行,例: 当未使用该样式时,虽然我设置了表格宽度为100px,但是面对这样连续的字符,表格无法自动换行,表格会被撑破: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <table cellspacing = "0" cellpadding = "0" width = "100" border = "1">

<tbody>

<tr>

<td>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td></tr></tbody>

</table>

再看看使用该样式后的效果: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <table cellspacing = "0" cellpadding = "0" width = "100" border = "1" style = "WORD-BREAK: break-all">

<tbody>

<tr>

<td>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>

</tr>

</tbody>

</table>

writing-mode:tb-rl;

用于设置文本的书写方向,可以有两个取值:

lr-tb:表示左右-上下,left right - top bottom

tb-rl:表示上下-右左,top bottom - right left

需要 IE 5.5+ 才支持,例: 第一组垂直文字第一组水平文字第二组水平文字

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

<style>

.clsHoriz

{

writing-mode: lr-tb

}

</style>

<div style = "writing-mode:tb-rl">

第一组垂直文字<span class = "clsHoriz">第一组水平文字</span>第二组水平文字

<br/>

<span style = "writing-mode:lr-tb">第二组水平文字</span>第三组竖直文字<span class = "clsHoriz">第三组水平文字</span>

</div>

text-indent:2em;

首行缩进,例: 有时候,我们需要将段落的首行缩进两个文字,一般我们都是用4个Html的空格(&nbsp;)来实现,其实我们还可以用样式表来达到这种效果! <p style = "text-indent:2em;width:200px;">

有时候,我们需要将段落的首行缩进两个文字,一般我们都是用4个HTML的空格(&amp;nbsp;)来实现,其实我们还可以用样式表来达到这种效果!</p> background-color: transparent;

transparent表示透明色,例: 背景透明的TextArea

<span style = "background-color: #CCCCCC; padding:20px;">

<textarea style = "background-color: transparent;">

背景透明的TextArea border-collapse:collapse;

它会自动把相同的边框线合并,例: 不使用border-collapse:collapse; 1.11.22.12.2使用border-collapse:collapse; 1.11.22.12.2 <style>

.grid

{

border-collapse: collapse;

}

.grid td

{

border: solid 1px #cccccc;

}

.gridNoCollapse td

{

border: solid 1px #cccccc;

}

</style>

不使用border-collapse:collapse;

<table border = "0" cellpadding = "4" cellspacing = "0" width = "200" class = "gridNoCollapse">

<tr>

<td>

1.1</td>

<td>

1.2</td>

</tr>

<tr>

<td>

2.1</td>

<td>

2.2</td>

</tr>

</table>

使用border-collapse:collapse;

<table border = "0" cellpadding = "4" cellspacing = "0" width = "200" class = "grid">

<tr>

<td>

1.1</td>

<td>

1.2</td>

</tr>

<tr>

<td>

2.1</td>

<td>

2.2</td>

</tr>

</table>

background-position: 0 -78;

设置背景图片的位置,例:

《background-position的妙用》 table-layout: fixed;

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

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

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

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

<table border="1" style="display:inline;">

<tr>

<td>表格1</td>

</tr>

</table>

<table border="1" style="display:inline;">

<tr>

<td>表格2</td>

</tr>

</table>

overflow: auto;

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

使用前的TextArea使用后的TextArea默认有滚动条只有当文字超出范围时滚动条才会出现font:12px/18px;

字体大小/行高,例:

未使用CSS使用该CSS在这里行高是系统默认的,不会受影响的 这里的12px就表示字体大小,18px其实就等价于css中的line-height。<table border="" cellpadding="" cellspacing="" width="200" >

<tr>

<td>未使用CSS</td>

<td>使用该CSS</td>

</tr>

<tr>

<td>

<p>

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

</p>

</td>

<td><p style="font:12px/18px;">这里的12px就表示字体大小,18px其实就等价于css中的line-height。</p></td>

</tr>

</table>

clip : rect ( 0 64 64 0 )

字体大小/行高,例:

原图:

裁减后:

可以利用这个来做动画:) font-size: eXPRession(document.body.clientWidth / 20);

expression是IE浏览器特有的功能,可以直接执行脚本而算出css的值,例:

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

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

<div style="font-size:

expression(document.body.clientWidth / 20);">

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

</div>

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

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

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

<tr style="position: absolute;">

<td>第一行</td>

</tr>

<tr>

<td>第二行</td>

</tr>

</table>

第一行浮在第二行上了,这个特性可以很方便的来制作重叠效果,例如我以前写过的自定义按钮和Flash播放器都用到了这个特性来实现重叠:

自定义按钮:一个自定义按钮,底下是一个普通的Button,利用"position:absolute;"在Button上面覆盖图片,这样看起来就像自定义按钮,而实际点击确是点击底下真实的Button(下载)

Flash播放器:这个播放器的进度条就是通过这种方法来重叠的。(下载)

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有