这些样式表,你都用过么?
在Web开发时,不可避免要用到CSS,把我这几年在Web开发过程中积累的一些不常用但是很实用的CSS整理了一下,希望对大家有所帮助!
filter:chroma(color:#FFFFFF);
让指定的背景色透明,例:
未使用该滤镜 | 使用该滤镜 |
<table cellspacing = "0" cellpadding = "0" border = "1"> <tbody> <tr align = "center" bgcolor = "#cccccc"> <td> <img src = "http://www.asp.net/images/quickstart.gif"/></td> <td> <img style = "FILTER: chroma(color:#000000)" src = "http://www.asp.net/images/quickstart.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的空格( )来实现,其实我们还可以用样式表来达到这种效果!
<p style = "text-indent:2em;width:200px;"> 有时候,我们需要将段落的首行缩进两个文字,一般我们都是用4个HTML的空格(&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.1 | 1.2 |
2.1 | 2.2 |
使用border-collapse:collapse;
1.1 | 1.2 |
2.1 | 2.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 )
字体大小/行高,例:
原图:
裁减后:
原图: <a href="http://www.webuc.net/myproject/rpg/images/girl.gif" target="_blank"><img src="http://www.webuc.net/myproject/rpg/images/girl.gif" width="128" border="0"></a><br /> 裁减后: <span style="clip:rect(0 64 64 0);width:64px;height:64px;position:absolute;"><img src="http://www.webuc.net/myproject/rpg/images/girl.gif"></span><span style="width:64px;height:64px;"> </span> 可以利用这个来做动画:)
font-size: expression(document.body.clientWidth / 20);
expression是IE浏览器特有的功能,可以直接执行脚本而算出css的值,例:
《CSS也能控制表格的交替颜色 》
<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播放器:这个播放器的进度条就是通过这种方法来重叠的。(下载)
打印 | posted on 2004年11月14日 3:44 | Filed Under [ Web技术 ] | 收藏本页 (百度搜藏)(QQ书签)(Live收藏)(Google书签)(Yahoo书签)(新浪ViVi)(搜狐网摘)(365Key网摘)(天极网摘)(博采网摘)(和讯网摘)
反馈
刚才用sharpreader看了一下,很多样式都不起作用了!
推荐大家对照看看“苏沈小雨”的css帮助文档!
大部分你说的技巧都是对客户体验提高不大,而且会造成浏览器兼容性降低的那种非标准元素
良好的客户体验绝对不是花里胡哨......
有些css的灵活运用,是可以达到事半功倍的效果的!
浏览器里的 CSS 都是用来提高用户体验的吗?没想清楚就不要胡说。
比如 firefox ;P
这应该算不上什么兼容性问题吧。
而且上面的很多样式效果也比较实用,比如用户要打印页面上的一个表格式,肯定不希望打出来的表格线有粗有细.
至少,你知道了CSS还能够这样用。必要的时候,你就会想起楼主的辛苦了。
虽然我也基本为了浏览器兼容性不用高级的CSS,但是。我是非常感谢楼主的!
css/xml/xhtml都是为了实现数据和表现的分离而产生的技术,很多人言必称mvc但是页面却从来没有真正的标准化设计过,不也是很讽刺么?至于有些人认为ms的css就是高级的,那就更加大谬了。技术上第三方浏览器实现ms的扩展很简单,但是那是对非标准行为的纵容。说起技术问题,ms 到现在也没有实现w3c标准包含的很多细节,比如png的透明,还有ms的box不完全符合规范等等。
对于 CSS 就更应该慎重,仅仅是 MS 的 IE 不同版本就会给你不同的效果。
对于 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
还是没有办法……
有其它高招么?
对于
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
还是没有用……有其他高招么?
所以非常支持,学到很多哦…………
word-wrap :break-word;
爆了吗?
-----
建议加精
刚刚解决了我一个问题,再一次感谢!
浏览器就快完成它的历世使命了,还在讨论兼容性,真是好玩。
误导误导。可笑可笑
这些样式表,你都用过么?相关推荐
- cad打印样式ctb丢失_CAD制图软件中如何设置CAD打印样式表(CTB)?
在浩辰CAD制图软件中绘制完成图纸后经常需要将其打印出来,一般情况下是用CAD打印样式表来控制打印输出效果,最主要的是输出颜色和线宽,当然还包括其他一些细节效果.有些CAD制图初学入门者不知道如何设置 ...
- auto cad 打印颜色变浅_CAD制图软件中如何设置CAD打印样式表(CTB)?
在绘制完成图纸后经常需要将其打印出来,一般情况下是用CAD打印样式表来控制打印输出效果,最主要的是输出颜色和线宽,当然还包括其他一些细节效果.有些CAD制图初学入门者不知道如何设置CAD打印样式表(C ...
- 样式表空格与不空格的关系你分清楚了吗?
我们看过一些样式表文件的样式名都写的很长,比如:body #header .topbar.logo{...},这是因为利用了元素的继承关系,利用元素名,或者ID名和类名(也就是class名)来精确定位 ...
- css 层叠式样式表(2)
一,样式表分类 (1)内联样式. --优先级最高,代码重复使用最差. (当特殊的样式需要应用到单独某个元素时,可以使用. 直接在相关的标签中使用样式属性.样式属性可以包含任何 CSS 属性.) (2) ...
- 【Qt】Qt样式表总结(四):CSS盒子模型
官网:http://doc.qt.io/qt-5/stylesheet-customizing.html#box-model [Qt]Qt样式表总结(一):选择器 [Qt]Qt样式表总结(二):冲突和 ...
- 网页制作之html基础学习3-css样式表
样式:CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. 在样式里面用 /* */ 进行注释. 1.样式表的基本概念 1.1.样式表分类 1.内联样式表 和 ...
- XSL 扩展样式表语言(EXtensible Stylesheet Language)
为什么80%的码农都做不了架构师?>>> XSL 包括三部分: XSLT 一种用于转换 XML 文档的语言. XPath 一种用于在 XML 文档中导航的语言. XSL-FO ...
- 外链引入css有哪些方式_引入CSS样式表的方式有哪些?
CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表.引入样式表的常用方式有三种,即行内式.内嵌式.外链式,具体介绍如下. 1.行内式 行内式也称内联样式 ...
- java中冒号是什么意思_css样式表有哪些?css双冒号是什么意思
SS即层叠样式表(英语:Cascading Style Sheets,又称串样式列表.级联样式表.串接样式表.阶层式样式表)是一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体.间距和颜 ...
- 浅谈CSS重构样式表性能
什么情况下重构 结合代码的上下文重构代码会更加的容易.所以,如果是修复bug,或者开发新的功能时用到了已有的代码,觉得有可变动的空间,能更好的为项目所用,重构是最好的选择.顺带的重构不至于会把项目搞乱 ...
最新文章
- LuoguP1131 [ZJOI2007]时态同步
- control层alert弹出框乱码_【ArcGIS for JS】动态图层的属性查询(11)
- 1_数据分析—数据载入、导出和探索
- PyTips 0x03 - Python 列表推导
- mysql mycat docker_docker-mycat-mysql
- OpenStack还是OpenStack,云已不是那朵云!
- HTML5如何把圆分成六等分,CSS八等分圆的实现示例_CSS教程_CSS
- Day3:MVP+ButterKnife+Dagger2的使用
- MySQL -update语句流程总结
- golang简介_Golang简介
- Windows版微信3.3.0内测版更新啦,亲测可刷朋友圈(附内测版)
- 关于1000BASE-T1 1000BASE-TX和100BASE-T1
- mini2440中nand falsh的使用
- android 手机系统排行榜,手机系统排行榜出炉:第一名意料之中,MIUI排名令人意外!...
- 安卓开发———打开相机拍照或者打开相册选择照片并显示出来
- 安装WSL2的踩雷历程
- 环境配置6-Win10下安装CUDA和cuDNN,配置caffe
- formData文件上传兼容IE8
- 孪生素数问题——素数(质数)指的是不能被分解的数,除了1和它本身之外没有其他数能够整除。如果两个素数之差为2,则这两个素数就是孪生素数,例如3和5为孪生素数,。找出1-100之间的所有孪生素数。
- vue基于web的化妆品美妆商城电子商务python flask django
热门文章
- 基于ssm与maven,使用easyui--tree生成类似部门管理树形结构图
- java输出格林威治时间,Java之格林威治时间格式转换成北京时间格式
- ios : Provision Profile 添加设备 device的 udid
- Android 6.0/7.0权限
- 坐标上海,我看见这群开发者用热爱改变世界
- 哪种台灯的灯光适合学生用?盘点真正适合孩子的护眼台灯
- cm12 系统字体更换
- 2023秋招--梦加网络--游戏客户端--二面面经
- 浙大计算机就业方向,浙大四大 王牌专业,毕业后工作待遇高,发展前景非常广阔...
- 笔记本电脑应用商店服务器错误,打开win10商店出错 出现win10商店请稍后重试问题怎么办 - 驱动管家...