(k88e)
=(字体)font
--(颜色)color:(红黄蓝...|rgb()|#......)
--(样式)font-style:(斜体italic/倾斜oblique/正常normal)
--(背景颜色)background-color:(红黄蓝...|rgb()|#......)
--(粗细)font-weight:(正常/粗体/较细/较粗|100-900)
--(尺码)font-size:(..px|..%|超小-超大)
--(装饰)text-decoration:(无/下划线/中划线/上划线/闪烁)
--(行高)line-height:(..px|..%|相对-正常) //行高
/*在终极解决方案的style下, span的表现line-height可以小于18px, 但是实际line-height一定>=18px,
需要<18px的实际line-height时加上vertical-align:baseline(不能top,bottom);
*/
/*在终极解决的style下, 当border-top为奇数px时会莫明奇妙地与上行产生一个1px高的间隔,
加上"vertical-align:baseline;"(或top, bottom)就没有了:
<span style="width:206px;height:1px;background-color:red;vertical-align:baseline;"></span><br>
<span style="width:200px;height:28px;border-top:red 1px solid;vertical-align:baseline;">ie & firefox</span>
*/
--(字族)font-family:(...)
//等宽字体monospace有courier new和lucida console两种在ie和firefox通用, 只有"font-family: courier new;"可以忍受
=文本(text)
--text-align:(左/中/右/对齐)
--vertical-align:(..px|..%|基线-文本底部)
/*vertical-align:middle表示的是inline垂直居中, 就是说既不是父定位,也不是子定位,而是兄弟定位
在block内要垂直居中一段文字/一个图片(图片也可以放到背景居中):
<span style="display:-moz-inline-box;display:inline-block;height:200px;border:red 1px solid;">
<span style="display:-moz-inline-box;display:inline-block;width:0px;height:100%;vertical-align:middle;"></span>
<!--注意100%这行不能删掉,否则全部居顶, 而且vertical-align必须是middle, 否则会导致要居中的对象都居顶或居底-->
<span style="vertical-align:top;">top</span>
<span style="vertical-align:bottom;">bottom</span>
<span style="vertical-align:middle;">middle</span>
<!--上行要垂直居中多行文字时改成:
<span style="display:-moz-inline-box;display:inline-block;vertical-align:middle;">
<div>middle<br>middle</div>
</span>
-->
<img style="vertical-align:middle;" src="img/srch.gif">
</span>
水平居中时, 在firefox下也要有一个width:100%的空span, 但firefox下不能直接写100%(firefox不认, ie倒行):
<span style="width:100%;height:0px;vertical-align:baseline;"></span><br>(不要掉了这个"<br>")
要同时水平且垂直居中:
<style>
.span_v{height:21px;vertical-align:middle;}
.span_h{width:52px;height:0px;vertical-align:baseline;}
</style>
<span style="text-align:center;"><!--
--><span class="span_h"></span><br><!--
--><span class="span_v"></span><span style="vertical-align:middle;">you are fool you are fool</span>
</span>
注意:由于只能将自由width转子元素负百分数margin-top, 而无法将自由height转子元素负百分数margin-top或top,
因而div:block元素无法实现垂直居中
text-align:center的意思:
ie下:让所有子元素即各行相对于父元素居中
firefox:让所有子元素即各行相对于最宽兄弟元素居中
元素内简单地水平居中:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div style="border:1px solid green;width:200px;">
<div style="border:1px solid red;width:500px;margin:0px auto;">jack</div>
</div>
*/
--变体(小型大写字母/正常)
--转换(首字母大写/大写/小写/无)
--缩进(..px|..%)
--词距(..px|..%|正常)(仅作用于字母文字)
--letter-spacing:(..px|..%|正常) //字距
--字体大小调整(相对/无)
--字体伸展(极为紧缩-极为扩展)
--white-space:normal/pre/nowrap
=区块
--width:(..px|..%|自动)
--最大宽度(..px|..%|自动)
--最小宽度(..px|..%|自动)
--height:(..px|..%|自动)
--最大高度(..px|..%|自动)
--最小高度(..px|..%|自动)
--清除(左/右/兼有/无)
--可见性(可见/隐藏)
--剪切:(自动/矩形),上(..px|..%|自动),下(..px|..%|自动),左(..px|..%|自动),右(..px|..%|自动),溢出(可见/滚动/隐藏/自动)
--float:none/left/right{float非none(display非none时)则display被忽略, 也可以不使用float而只使用display和position}
--position:static{默认位置}
/absolute{相对于首个relative或absolute的上级对象偏移,不占用默认位置}
/relative{相对于默认位置偏移,占用默认位置,所以要偏移不如用margin-top/margin-left或relative内absolute, 能让出位置};
上(..px|..%);下(..px|..%);左(..px|..%);右(..px|..%);
z-index(){决定absolute或relative或fixed(firefox)时的覆盖次序}
--display:(inline{非block的所有可见对象}/block{div,form,pre,table,tr,td等}/none{让对象不可见并让出位置})
//relative内absolute: 将其父级元素设成relative(无left,top), 然后再相对父元素而非body进行absolute偏移, 能让出位置
//ie7下为了让定高div的内容像firefox那样能撑出去, 给div加relative:<div style="height:23px;position:relative;"><select>...</select></div>
//block会在前面和后面都换行, inline串行并自动换行
//block和inline都属于串流(display), float在串流完成之后再插入
//position:relative时可以同时display:block, display:inline, 或float:非none
//则共有四种布局方式:display:block, display:inline, float:非none, position:absolute
//以下优先级从前到后:
//1.display:none 则 postion 和 float被忽略
//2.position:absolute 则 display 和 float 被忽略
//3.float:非none 则 display被忽略, 定位对象被插在默认位置下一行的inline和block串流中
//float有用的话顶多也就是多个div在当前行float:right, 但是可恨的是却到下一行float:right, 而且所有div排列次序跟行文次序相反,
//而试图用inline div内嵌这些float div以crack该问题也无效(虽然在ie(非firefox)下定义span的width时有效), 却float出inline div了,
//可见float是一切罪恶的根源, 宁愿用absolute也不用float.
//试过inline div内嵌多个inline div, 在外inline div施用text-align:right在ie的quirks模式可以但标准模式无效(外inline div宽度无效)
//这个东东在ie下正常, 在firefox下宽度被忽略:
//<div style="border-width:1px; border-style:solid; width:200px; height:10px;display:inline;text-align:right;">
//<div style="display:inline;">dddd</div>
//<div style="display:inline;">jack</div>
//</div>
//再试inline div内嵌block div的方法,ie和firefox下都分别有问题
//为了顺应愚蠢的w3c和微软, 可以在页面顶部统一设定span{float:left;}, 传统SPAN大法临时解决方案(兼容firefox):
(由于float元素能自动被其内float元素撑大, 而不必用after伪对象来撑大了)
(不要span>*{float:left}, span内仍然需要tbody,tr,td,div,p,hr等display非inline的元素的表达, 如果确实需要这些元素模仿inline-block布局则外套span)
(当然也可以不用br来换行, 而直接在需要换行的元素添加"clear:left;"样式)
(需要js来fix不在单独span tag内的text, 默认是inline在normal flow里, 由于没有tag也无法用css来fix)
(中间的正则处理不用\s, 是因为这样写可以过滤空格不过滤 )
(既没有父span也没有子span也没有用内联float:left标明的孤立span认为不是布局span而恢复成原始span)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style>
span{float:left;vertical-align:middle;overflow:hidden;cursor:default;}br{clear:left;}
</style>
<span style="width:700px;border:blue 1px solid;" id="jack">
<span>lkjkdjsf<div>jack</div></span>
<span style="width:200px;height:18px;border:red 1px solid;" id="ppp">aSame appearance in ie and firefox</span>
bbbbb
<span style="width:200px;height:28px;border:red 1px solid;">ie and firefox</span>cccc<br>
<span style="width:150px;height:18px;border:red 1px solid;">ie and firefox</span>
</span>
<script>
function htmlspecialchars(str)
{return str.replace(/</g, "<").replace(/>/g, ">");
}
function trim(str)
{return str.replace(/(^[\r\n\t ]*|[\r\n\t ]*$)/g, '');
}
function ib_fix()
{var all_span=document.getElementsByTagName('span');
for (var j=0;j<all_span.length;++j)
{if (all_span[j].parentNode.tagName!='SPAN' && all_span[j].getElementsByTagName('span').length==0
&& all_span[j].style.cssFloat!='left' && all_span[j].style.styleFloat!='left'
)
{typeof(all_span[j].style.cssFloat)!='undefined' ? (all_span[j].style.cssFloat='none'):(all_span[j].style.styleFloat='none');
}
if (all_span[j].getElementsByTagName('span').length>0
&& all_span[j].childNodes.length-all_span[j].getElementsByTagName('span').length>0
)
{var a=all_span[j].childNodes;
for (var i=0;i<a.length;++i)
{if (a[i].nodeName=='#text' && trim(a[i].nodeValue)!='')
{var b = document.createElement("span");
b.innerHTML=htmlspecialchars(a[i].nodeValue);
a[i].parentNode.replaceChild(b, a[i]);
}
}
}
}
}
if(window.addEventListener)
{window.addEventListener('load', ib_fix, false);
}
else
{window.attachEvent('onload', ib_fix);
}
</script>
//喇叭不响调头吹,在一个大部分用div布局的页面里,在不需要换行的行内所有元素统统使用<div style="float:left;"></div>是最方便的做法
//不过要在包含float left div的div的class里加clearfix以解决float出去的问题:
.clearfix:after
{content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE|mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE|mac */
有DOCTYPE时,IE6.0下html高度默认100%,body不是;FF1.5下html和body高度默认都不是100%,为了统一：
<style>
html{height:100%;}body{height:100%;margin:0;}
</style>
这样html和body内部元素100%高度无效的问题也解决了, ie/ff皆有效, 严格如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style>
html{height:100%;}body{height:100%;margin:0;}
span{display:-moz-inline-box;display:inline-block;vertical-align:middle;cursor:default;}
</style>
<span style="height:100%;border:solid red 1px;">test</span>
//firefox3.2起已经支持display:inline-block, 不必费力的使用display:-moz-inline-box了
//span大法采用的时候需要打开服务器缓冲ob_implicit_flush(0)或ob_start()(即不隐藏缓冲或在php.ini里设置),
//span大法下firefox中, select元素的以上各层元素要检查是否-moz-inline-box, 否则在选值时有可能坍塌, 直接上级需要设置高度, 否则选值时略有萎缩, select的默认选项的现实值也要足够宽, 否则选值后可能只显示半边
//因为浏览器解析span时会一边解析读服务器(猜测是没有通讯缓存)
//table有渲染效率及布局灵活性不足的问题, div有无法控制换行的问题, float有跳到下一行的问题, absolute又容易重叠,
//有办法兼容愚蠢的W3C(实际名称3WC)和愚蠢的微软而实现人类传统的从左到右从上到下的布局方法吗?这就是:
//传统SPAN大法终极解决方案(兼容firefox):
//不要用display:table-cell;取代display:-moz-inline-box;有水平对不齐的问题
//不要去掉vertical-align:middle;因默认的baseline被ie理解为底线却被firefox理解为顶线
//span下的overflow不能去掉(虽然span:-moz-inline-box下的overflow是无效的), 否则在firefox下访问含有该段代码的php页面时会出现无规律的盒子丢失现象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style>span{display:-moz-inline-box;display:inline-block;vertical-align:middle;overflow:hidden;cursor:default;}</style>
<span><div style="width:700px;border:blue 1px solid;">
<span><div style="width:200px;height:18px;border:red 1px solid;">aSame appearance in ie and firefox</div></span>
<span><div style="width:200px;height:28px;border:red 1px solid;">ie and firefox</div></span><br>
<span><div style="width:150px;height:18px;border:red 1px solid;">ie and firefox</div></span>
</div></span>
为了省事, 在firefox下插入div来crack以及调整firefox下span:inline-box的宽度的工作可以交由js来做:
(最后的window.onload用来确保在firefox下图片可以显示出来,不能删掉)
<script>
if(document.addEventListener)
{document.addEventListener('DOMContentLoaded', ib_fix, false);
}
function ib_fix()
{var spans=document.getElementsByTagName('span');
for (i=0;i<spans.length;++i)
{var eleDiv = document.createElement('div');
eleDiv.innerHTML = spans[i].innerHTML;
eleDiv.style.width = spans[i].style.width?spans[i].style.width:spans[i].offsetWidth+'px';
spans[i].innerHTML = '';
spans[i].appendChild(eleDiv);
}
for (i=0;i<spans.length;++i)
{spans[i].style.width=spans[i].offsetWidth+
Number(spans[i].style.borderLeftWidth.slice(0,-2))+
Number(spans[i].style.borderRightWidth.slice(0,-2))+
Number(spans[i].style.paddingLeft.slice(0,-2))+
Number(spans[i].style.paddingRight.slice(0,-2))+
'px';
spans[i].style.height=spans[i].offsetHeight+
Number(spans[i].style.borderTopWidth.slice(0,-2))+
Number(spans[i].style.borderBottomWidth.slice(0,-2))+
Number(spans[i].style.paddingTop.slice(0,-2))+
Number(spans[i].style.paddingBottom.slice(0,-2))+
'px';
}
window.onload=function(){document.body.innerHTML=document.body.innerHTML;};
}
</script>
/*
<browser> <the width of> |<包含左右边框,包含padding>
firefox span.-moz-inline-box |Yes
firefox div |No
ie6(DOCTYPE) span.-moz-inline-box,div |No
ie6 span.-moz-inline-box,div |Yes
*/
/*
在终极模式下, 要在firefox下自动折行(换行)这么写:
<span style="width:320px;overflow:visible;">...</span>
*/
=边距和填充
--margin:(..px|..%|自动)|上(..px|..%|自动),右(..px|..%|自动),下(..px|..%|自动),左(..px|..%|自动)
--padding:(..px|..%|自动)|上(..px|..%|自动),右(..px|..%|自动),下(..px|..%|自动),左(..px|..%|自动)
//有时候需要相邻的两个页面元素有部分重叠, 这时可以用负数边界margin:-...px来实现, 而不必用absolute布局
//重叠部分隐藏用父元素overflow:hidden
//margin-top,margin-left用来偏移自身, margin-bottom,margin-right用来偏移其后元素, 百分数分母指父对象宽度
//padding都不允许为负数, 百分数分母指父对象宽度
=边框和外框
--border:粗细(..px|细中粗),颜色(红黄蓝...|rgb()|#......),样式(实线/点线/虚线/双线/内凹/外凹/内嵌/外嵌/无)
---border-top:粗细(..px|细中粗),颜色(红黄蓝...|rgb()|#......),样式(实线/点线/虚线/双线/内凹/外凹/内嵌/外嵌/无)
---border-bottom:粗细(..px|细中粗),颜色(红黄蓝...|rgb()|#......),样式(实线/点线/虚线/双线/内凹/外凹/内嵌/外嵌/无)
---border-left:粗细(..px|细中粗),颜色(红黄蓝...|rgb()|#......),样式(实线/点线/虚线/双线/内凹/外凹/内嵌/外嵌/无)
---border-right:粗细(..px|细中粗),颜色(红黄蓝...|rgb()|#......),样式(实线/点线/虚线/双线/内凹/外凹/内嵌/外嵌/无)
--outline:粗细(..px|细中粗),颜色(红黄蓝...|rgb()|#......),样式(实线/点线/虚线/双线/内凹/外凹/内嵌/外嵌/无)
=列表项
--样式(空心圆/实心圆/罗马数字/阿拉伯数字/.../无)
--图像(URL/无)
--位置(内部/外部)
=杂项
--cursor:auto/default/hand(ie6和firefox里该用pointer)/...
--filter:Chroma(Color=?)/Blur(Add=?, Direction=?, Strength=?)/alpha(opacity=30)
//半透明效果ie是"filter:alpha(opacity=30);"而firefox是"opacity:0.3;"
//ie/firefox都只支持"半透明背景"和"全透明背景色", 不支持"半透明背景色", 可以这样实现:
<span style="width: 1015px; position: relative;">
<span style="width: 1015px; height: 427px;position:absolute; background:white; left:0px; filter:alpha(opacity=60); opacity:0.3; z-index:-1;"></span>
<span style="border: 1px solid black; width: 125px; height: 425px; text-align: left;">left content</span>
<span style="height: 427px; width: 884px; overflow-y: auto;">right content</span>
</span>
--behavior:url("....htc") url("....htc");
=背景
background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position]
background:[transparent|#......] [none/URL("...")] [repeat/repeat-x/repeat-y/no-repeat] [scroll/fixed] [0px|0%|left/center/right] [0px|0%|top/center/bottom]
使背景拉伸(仅ie):filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/kk.jpg', sizingMethod='scale');
=====================================================================================
子选择兼容firefox和ie的写法:
/*\*/span>*{float:left;}/**/
* html span *{float:expression(/SPAN/.test(this.parentNode.tagName)? 'left' : getComputedStyle(this,null).styleFloat)}
给ie支持的expression里加计数代码可以发现expression在页面显示\缩放\滚动\鼠标移动时会执行,
为了避免消耗客户端资源最好用这样的代码来实现一次性执行:
* html span *{float:expression(document.styleSheets[n].rules[m].style.float=/SPAN/.test(this.parentNode.tagName)? 'left' : getComputedStyle(this,null).styleFloat)}
=====================================================================================
css优先权(实际上也是渲染次序从前到后):
(ie和firefox相同,除了"*{...}"在firefox里不可被内联css覆盖,可以改用"span{...}")
继承值(内部\外部\内联\属性)<属性值<内部或外部css指定值(跟包含或声明的次序有关)<内联css指定值(即style属性)
例如:
<link href="kk.css" rel="stylesheet" type="text/css">
<!--kk.css内容:".kk{width:200px;}"-->
<style>
.kk{width:300px;}
</style>
<img src="http://diyism.com/!index/pic/logo.gif" width="100px" class="kk" style="width:400px;">
调用时class="kk jj"里的顺序是没有作用的,内部css段内的顺序才起作用
内部或外部css内指定性(specificity)越高则优先权(priority)越高:
A selector's specificity is calculated as follows:
* count the number of ID attributes in the selector (= a)
* count the number of other attributes and pseudo-classes in the selector (= b)
* count the number of element names in the selector (= c)
* Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.
Some examples:
* {...} /* a=0 b=0 c=0 -> specificity=000 */
LI {...} /* a=0 b=0 c=1 -> specificity=001 */
UL LI {...} /* a=0 b=0 c=2 -> specificity=002 */
UL OL+LI {...} /* a=0 b=0 c=3 -> specificity=003 */
H1 + *[REL=up]{...} /* a=0 b=1 c=1 -> specificity=011 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity=013 */
LI.red.level {...} /* a=0 b=2 c=1 -> specificity=021 */
#x34y {...} /* a=1 b=0 c=0 -> specificity=100 */
如果指定性相同再比较先后次序, 越后者优先权越高, 属性值后加!important的优先权最高(firefox支持)
=====================================================================================
制定css标准的时代还没有动态网页, 并没有考虑到区块内容变换, 因而css里没有类似"inherit:no;"的属性阻止继承,
只能在区块顶层元素class属性内加'reset'来重置所有可继承属性来尽力阻止来自上层css的影响, ".reset"定义段要
放在".tpl"定义之前以免影响区块css定义, 但阻止不了上层强指定值的影响:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style>
span{float:left;vertical-align:middle;overflow:hidden;cursor:default;}br{clear:left;}
#jjj{font-size:100px;}
#jjj span{font-size:100px;}
.reset{font-size:medium;}
.tpl{font-size:20px;}
</style>
<span id="jjj">kkkkkkkkkk
<span class="reset tpl" style="border:1px solid red;">aaaaa</span>
</span>
可继承属性大致只有这些(见W3C_CSS21_Specification.chm的"Appendix F. Full property table"):
(有些内建这几个属性的元素不会继承, 可设值为'inherit'以强制继承)
.reset {color: black;
cursor: auto;
direction: ltr;
elevation: level;
font-family: sans-serif;
font-size: medium;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
text-indent: 0;
text-transform: none;
visibility: visible;
white-space: normal;
word-spacing: normal;
}
为了避免上层强指定值的影响, 只能制定一些自我约束原则来粗略满足ajax动态区块css独立性要求:
在css rule的selector的各个级别:
1.杜绝对tag或id定义样式(id for js, tag for html, class for css),
2.杜绝使用"前辈 后辈"式选择(只用父子式选择, ie6要用expression实现).
每个html小模板块对应一个css style块(供搜索引擎使用的公众页里)或css link文件(不怕文件零碎, 因静态文件浏览器会缓存, 而且ajax程序一个页面可能调无数小模板块(还可能是从外部网站调用的), 把css集中到一个文件不现实, 子模板也应该是一个一个的小文件),并且该css style块或css link文件内所有rule都以对应的html块的顶层class开头(最好前缀"tpl_"以跟下级class区分).
=====================================================================================
w3c没有定义"word-wrap:break-word;",firefox要这样写"white-space: -moz-pre-wrap;",但无法让长单词折行
长词折行可以用这个js来实现:http://naironjcg.googlepages.com/micoxWordWrap.js(用TOR代理访问到)
保存于本笔记同目录micoxWordWrap.js
(css3里white-space:pre-wrap;是对应firefox里white-space:-moz-pre-wrap;的, 但应该也不能换行长单词)
用js性能太差(用的getElementsByTagName("*"))只能放弃在firefox2.0中换行长单词(hidden起来):
<style>* html #the_table {table-layout:fixed;}</style>
<table style="border:1px solid red;table-layout:fixed;" id="the_table"><tr>
<td width="15%">
<pre style="width:100%;overflow:hidden;word-wrap:break-word;white-space:-moz-pre-wrap;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
cccccccccccccc ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
</pre>
</td>
<td width="85%">
</td>
</tr></table>
把整个pre放在用百分数定宽的table cell内在firefox也能正常工作, 但是ie6和ie7都不按cell宽度算100%,
而不能隐藏长词或强制换行长词(如果在百分数定宽的div内倒可以), 要在table的style内加"table-layout:fixed;"
但这又导致firefox下格子内容重叠问题, 所有只有用css hack for ie方法:"* html #the_table {table-layout:fixed;}"
看到强制换行还有一种方法
(ie用"word-break:break-all;",
firefox用overflow触发binding处理函数, 对pre无效,
而且这种插入特殊字符的方法导致链接不能正常显示):
span{overflow-x:hidden; word-wrap:break-word; word-break:break-all; -moz-binding:url('css/word_wrap.xml#word_wrap');}
word_wrap.xml文件是:
<?xml version = "1.0"?>
<bindings xmlns = "http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml">
<binding id = "word_wrap" applyauthorstyles = "false">
<implementation>
<constructor>
<![CDATA[
var elem = this;
elem.addEventListener('overflow',
function()
{var exp = /<​\/*[​_\s="'\w]+>/g;
var txt = elem.innerHTML;
var chars = txt.split('');
var newTxt = chars.join('​');
newTxt = newTxt.replace(exp, reconstructTag);
elem.innerHTML = newTxt;
},
false
);
function reconstructTag(_tag)
{return _tag.replace(/​/g, '');
}
]]>
</constructor>
</implementation>
</binding>
</bindings>
=====================================================================================
overflow-x,overflow-y现在firefox也支持了(visible,scroll,hidden,auto)
=====================================================================================
居中简单写法:
<div style="position:absolute;top:50%;left:50%;width:100px;height:100px;margin-left:-50px;margin-top:-50px;">
复杂的写法:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>篱笆社区</title>
<style>
html{height:100%;}body{height:100%;margin:0;}
span{display:-moz-inline-box;display:inline-block;vertical-align:middle;cursor:default;}
.span_v{width:0px;height:100%;vertical-align:middle;}
</style>
</head>
<body style="text-align:center;">
<span class="span_v"></span><span style="vertical-align:middle;"><input type="button" onclick="location='/my'" value="个性化首页"> <input type="button" onclick="location='/search'" value="搜索"></span>
</body>
</html>
=====================================================================================
让页面头部不随滚动条滚动的办法(无脚本实现时颤动缺点, 兼容firefox和ie):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--[if lte IE 6]>
<STYLE type=text/css>
HTML {overflow: hidden;}
</STYLE>
<![endif]-->
<style>
#header {left:0px;min-height:50px;}
body {margin:0px;}
.fixed_crossb {position: fixed;}
* html .fixed_crossb {position: absolute;}
* html body {overflow-y:auto;height:100%;width:98.5%;}
div{border:1px solid red;}
</style>
</head>
<body>
<div id="header" class="fixed_crossb">
header headerheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheader<br>
header headerheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheader<br>
</div>
<div style="height:1200px;padding-top:100px;">
content contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br>
content contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br>
</div>
</body>
</html>
利用.fixed_crossb还可以做lightbox(覆盖对话框), ie要用iframe来覆盖select, 且仍需要overlay:
#overlay_select {display:none; left:0px; top:0px; z-index:997;
width:120%; height:100%; background-color:black; filter:alpha(opacity=0.75); opacity:0.75;
}
#overlay {display:none; left:0px; top:0px; z-index:998;
width:120%; height:100%; background-color:black; filter:alpha(opacity=75); opacity:0.75;
}
#div_pop {display:none; left:50%; top:50%; margin-left:-250px; margin-top:-100px; z-index:999;
width:500px; height:200px; background-color:white; border:4px solid #525252;
}
<a href="javascript:show_div_pop()">Show</a>
<div id="div_pop" class="fixed_crossb">...</div>
<iframe id="overlay_select" class="fixed_crossb"></iframe>
<div id="overlay" class="fixed_crossb" onclick="hide_div_pop()"></div>
<script>
function hide_div_pop()
{$('#div_pop').hide();
$('#overlay').hide();
if (typeof(document.body.style.maxHeight)=== "undefined")//ie
{$('#overlay_select').hide();
}
//clearInterval(window.hdl_interval);
}
function show_div_pop()
{if (typeof(document.body.style.maxHeight)=== "undefined")//ie
{$('#overlay_select').show();
}
$('#overlay').show();
$('#div_pop').show();
//window.hdl_interval=setInterval('resize_div_add()', 200);
}
/*
function resize_div_add()
{$('#div_add')[0].style.overflow='auto';
var the_width=$('#div_add')[0].scrollWidth;
var the_height=$('#div_add')[0].scrollHeight;
$('#div_add')[0].style.width=the_width+'px';
$('#div_add')[0].style.height=the_height+'px';
$('#div_add')[0].style.marginLeft=-the_width/2+'px';
$('#div_add')[0].style.marginTop=-the_height/2+'px';
}
*/
</script>
=====================================================================================
有时需要特殊字体的文字作标题, 但是用样式无法实现, 只能用文字图片, 但要让搜索引擎容易知道图片内容,
同时在浏览器禁用图片时文字能显示出来, 能显示图片时文字也不能遮住文字图片(span临时大法下):
<span style="width:150px;height:105px;overflow:hidden;border:1px solid red;">
<span>Google TM Checkout</span>
<span style="margin-top:-16px;width:150px;height:105px;background: url(http://www.google.com/images/nav_logo3.png) no-repeat;"></span>
</span>
=====================================================================================
css2 selector pattern(Pattern //Meaning):
* //Matches any element.
E //Matches any E element (i.e., an element of type E).
E F //Matches any F element that is a descendant of an E element.
E>F //Matches any F element that is a child of an element E.
E:first-child //Matches element E when E is the first child of its parent.
E:link E:visited //Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).
E:active E:hover E:focus //Matches E during certain user actions.
E:lang(c) //Matches element of type E if it is in (human) language c (the document language specifies how language is determined).
E+F //Matches any F element immediately preceded by a sibling element E.
E[foo] //Matches any E element with the "foo" attribute set (whatever the value).
E[foo="warning"] //Matches any E element whose "foo" attribute value is exactly equal to "warning".
E[foo~="warning"] //Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".
E[lang|="en"] //Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".
DIV.warning //Language specific. (In HTML, the same as DIV[class~="warning"].)
E#myid //Matches any E element with ID equal to "myid".
=====================================================================================
在css文件里载入css文件, 以避免到页面里修改加载css:
@import "mystyle.css";
=====================================================================================
css诡计, 利用border生成箭头:
<style>
.right_arrow
{line-height:0px;
border-top: 0.5em solid white;
border-bottom: 0.5em solid white;
border-left: 1em solid green;
position:absolute;
}
</style>
<span class="right_arrow"></span>
结合border实现折线可以实现流程图, 从最外画布<div style="position:relative;width:20em;height:20em"></div>, 统统用em来做距离单位, 变换字体的时候, 所有相对位置\折线\箭头都不会变形
=====================================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style>span{display:-moz-inline-box;display:inline-block;vertical-align:middle;overflow:hidden;cursor:default;}</style>
<body style="font-size:100.1%;">
<span style="font-size:12px;width:2.25em;height:1.5em;border:1px solid red;">hello 中国</span>
<span style="font-size:0.75em;width:36px;height:24px;border:1px solid red;">hello 中国</span>
<span style="font-size:12px;width:36px;height:24px;border:1px solid red;">hello 中国</span>
<span style="font-size:0.75em;width:2.25em;height:1.5em;border:1px solid red;">hello 中国</span>
</body>
a:px em, b:em px, c:px px, d:em em
ie7调整字号时, 错位:0100
ie7缩放时, 错位:0000
firefox3缩放文本时, 错位:0110
firefox3缩放时, 错位:0000
firefox调整字号, 错位:0110
ie6调整字号时, 错位:0100
可见只有a和d效果是好的, 但可惜em是个相对单位(em是相对父元素字号比率, 百分数是相对父元素宽度比率),
对于布局来说需要一个全局单位(除非你整页只有一种字号, em才看起来像个全局单位), 最后仍然只有c比较好接受
=====================================================================================
没有写doctype时ie下可用scrollbar-base-color:yellow;来指定滚动条颜色.
写了doctype时ie/firefox可用来关掉默认滚动条颜色(浅蓝滚动条与大部分默认灰色环境不搭调):
<meta http-equiv="MSThemeCompatible" content="no">
=====================================================================================
常用表格样式:<table border="1" cellspacing="0">是对所有格子生效的, 没有对应的style写法
=====================================================================================
能逆风行驶的纵帆船是生命的极好象征,贝努利效应正是化逆为顺的经典！－－呆仁
