产品设计

关于CSS网页布局id与class命名参考

一、用class_name方式写类名。
以前喜欢用class-name写,不过好像两样也没什么差别。但我比较反对用className写类名,因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式,理由见下一条。

二、样式都用class而不用id。
有三个理由。
1,id不可以重复,所以用class的话,可以肆无忌惮的用无数次。
2,id的优先级太高,若是写了一个#page_content a {color:#f60} ,那你完蛋了,里面要改链接颜色,都必须加上#page_content才能越过这个优先级。
3,id专门留给JS用,这样才符合表现与行为分离的原则。所以id我用驼峰式,也是为了体现这一点。

三、margin和padding,尽量省略最后一个值。
比如margin: 20px 10px 5px 10px; ,左右值是一样的,就应该省略掉最后一个值,写成margin: 20px 10px 5px; 这样到时候要改左右间距,改一个就好,免得改漏了。其实这个问题虽然很细小,但是可以看得出对margin四个值省略规则的熟练程度。

四、按标准写css,再针对特定浏览器作hack。
比如,通常我们会遇到如下的写法:
 

.side_col_52CSS {
    float:left;
    display: inline;
    margin-left: 20px;
}

而我的写法会是:

div css xhtml xml Example Source Code Example Source Code [
.side_col_52CSS {
    float: left;
    margin-left: 20px;
}
*   .side_col_52CSS {
    _display:inline;  /*hacked for IE 6*/
}

看明白了么?不应该把hack混在一起,也不应该用一种侥幸的心态,觉得float:left与display:inline写在一起没事。嗯,它们俩确实没事儿,但是其他的hack就不一定了。而且这里写display:inline纯粹就是为了解决IE6的bug,所以前面加上下划线,以明确的表达你的目的。
另外不要以为凡是hack都是为IE准备的。其实有些hack是针对其他浏览器的,比如FF。这就要求你对css标准的熟练掌握,能够自信的判断哪些渲染是遵守标准,哪些违反标准的。
此外,我喜欢在hack前面加上星号,其实这纯粹是个人习惯了。可能过段时间我就不这么用了,呵呵。

五、记得加空格。
.class_name { property: value; } 。我个人觉得合理的空格是优秀代码的一个指标。按英文的习惯,标点后面都应该带空格(如果你写This is a pen.That’s a pencil.句点后面不加空格, word里面会有错误提示)。所以既然css是外国人发明的,应该按他们的格式来写。类似的,在JS里var a = b + c;里面的空格也应该都要加。

六、适当的层叠(Cascading)或缩进以定义css的“作用域”。
啥叫“css的作用域”?其实并不是所有的样式都在所有的地方使用。有的样式只用在某一块里面,比如“导航栏”里的“搜索框”,可能应该写成:
 

div css xhtml xml Example Source Code Example Source Code [
.nav .search {}

而有时候用层叠会增加代码优先级,所以也可以用缩进来“象征性的”体现作用域。像这样:
 

div css xhtml xml Example Source Code Example Source Code [
.login_box {}
   .forgot_pwd{}

缩进,是为了表示它们对应的标签具有父子关系。但这样只能起一个提醒的作用。
 

html标签中存在着默认的属性

html里面大多标签中有着默认CSS属性.所以用着的时候要多注意点,不然的话一系列稀奇古怪的问题就会来了.有一个解决的办法,就是所有这些常用的标记,在css开始写的时候就统一的规范一下,搞一个统一的值而不用他默认的值。 body,form,p,pre,ul,ol,dl,h1,h2,h3,h4,h5,h6 {padding:0;margin:0;}/*设置form、p、pre、ul、ol、dl、h1、h2、h3、h4、h5、h6内外补丁为0*/

下面就是默认的一些属性,当然在IE/FIREFOX下还有一些不同.

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell; }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px; line-height: 1.12 }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, object,
select          { display:inline-block; }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th          { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: “\A” }
:before, :after { white-space: pre-line }
center          { text-align: center }
abbr, acronym   { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }
@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

dl dt dd css IE下的问题.

dl dt dd是 HTML里面原有的表单元素.
在IE下DD默认有有缩进,所以要用float:left;来让它往左对齐.

li里面的span float right对齐问题.

因为里面SPAN的元素都属于块级.

必须加FLOAT属性才能在同一行.

html网页显示空白

主要是<meta 字符类型用到utf-8> 所以应该要放在<title>之上。
<title>跟<meta>的位置颠倒的网页显示空白。已经出现了两次了。

这里有比较详细的介绍>>

十六位颜色代码与RGB颜色转换

今天在设置Editplus文本背景颜色时发现,里面的自定义颜色没有16位颜色的输入,只提供了RGB颜色输入。
于是用TakeColor截取下来的颜色,无法输入。只能用网上找了一下了。代码转换。

 

 

RGB颜色转化成十六位颜色代码:
 
 
 
 
 
十六位颜色代码转化成RGB颜色:
 
 
 

简化代码 开始懂了点CSS

css代码,可以简化的就简化,可以用ul li span strong dl dt dd 的就用少一些命名。少一些烦恼。

我在想写程序是不是也是这样,少一些繁琐的代码,会不会快一些。
慢慢的应该可以体会到的。开始对代码产生一些兴趣了。

不错的在线按钮制作网站

由于博客需要,要做些按钮,PS不是很熟练。百度一下。果然找到,不过是个外国站点。
http://www.buttonator.com/
进入输入文本,还有选择样式,颜色等就可以生成漂亮的WEB2.0风格按钮。
不过有点遗憾的不支持中文。自己搞了图片,去PS里面加字体呵呵。
国内好像还没有这类网站。

 

 下面这个http://jirox.net/AsButtonGen/功能最强大。也支持中文,不过上手需要研究一下。
进入后需要先安装flash10.0,浏览器会提示的。
简直就是一个小PS工具。

 

png ie6透明问题

png图片在ie6下不透明,解决办法。

在css定一个样式,还有做一个1px的透明gif图片。在那个图片的div中加入这个样式就可以了,不过这种方式只使用与 <img>下

 .png{behavior:expression((T=this,T.runtimeStyle.behavior="none")&&(T.p?0:((T.runtimeStyle.backgroundImage = "none",T.runtimeStyle.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’"+T.src+"’,sizingMethod=’image’)", T.src = "透明gif地址")),T.p=1))}

元素层叠级别及z-index剖析

原文:http://rong179.blogbus.com/logs/24966909.html

声明

定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed。
平台:win/IE win/FF

z-index:

用来确定定位元素在垂直于显示屏方向(以下称为Z轴)上的层叠顺序

值:   auto | 整数 | inherit
默认:  auto
适用于: 定位元素
继承性: no

理解stacking context

每个box都归属于一个stacking context,它是元素在z轴方向上定位的参考。根元素形成 root stacking context,其他stacking context由定位元素设置z-index为非auto时产生。如#div1{position:relative;z-index:0;}即可使 id=div1的元素产生stacking context。stacking context和 containing block 并没有必然联系。

理解stack level

在一个stacking context中的每个box,都有一个stack level(即层叠级别,以下统一用stack level),它决定着在同一stacking context中每个box在z轴上的显示顺序。同一stacking context中,stack level值大的显示在上,stack level值小的显示在下,同一stack level的遵循后来居上的原则(back-to-front )。不同stacking context中,元素显示顺序以父级的stacking context的stack level来决定显示的先后情况。于自身stack level无关。注意stack level和z-index并不是统一概念。(将在后文慢慢理解)

stack level规则

每个stacking context中可包含块级(block)元素、内联(行内inline)元素,还有设置float属性的元素、定位元素等等他们在同一父级 stacking context中的显示顺序是怎样的?即stack level是怎样的呢?比如一个块级元素和内联元素发生层叠的话谁会在上面呢?是不是谁在后面谁就在上面呢?

根据w3c关于stack level的介绍可以得出以下stack level规则

每个stacking context都包括以下stack level (后来居上):

  1. 父级stacking context的背景、边界
  2. z-index值为负值的定位元素(值越小越在下)
  3. 文本流中非定位的、block块级子元素
  4. 文本流中非定位的、float浮动子元素
  5. 仿佛能产生stacking context的inline元素
    否则,inline元素的stack level将在block元素之前。
  6. z-index:auto/0的定位元素
  7. z-index值为正的定位元素(值越大越在上)

以上stack level在浏览器执行情况:

firefox3.0下测试完全吻合,firefox2.0下稍有不同即:“z-index值为负值的定位元素”在“父级stacking context的背景、边界”之前。
ie6.0和7.0中:inline元素的stack level位于block元素之前,且“文本流中非定位的、float浮动子元素”(以下简称浮动元素)和“文本流中非定位的、block块级子元素”(以下简称block元素)处于同一级。

FF下测试

测试页面:demo01.html(请分别在FF3.0和FF2.0中打开)

代码说明

由前所述,如果元素的stack level同级则后来居上;元素的stack level高,这无论代码在文档中位置如何都显示在上面,即使代码在最前面;如果元素的stack level低,无论代码位置如何都将显示在下面,即使代码在最后面。

我们就根据这一点,以“3.文本流中非定位的、block块级子元素”和“4.文本流中非定位的、float浮动子元素”为例,如果我把 “float元素” 的代码写在“block元素”的前面,且实际显示为:“float元素”在“block元素”之上。即可证明:"float元素”的stack level级别较“block元素”高。因为如果同级,或者“block元素”的stack level高都应是“block元素”显示在上。

根据以上,根据标准中的顺序,把stack level高的元素代码写在前面,stack level低的代码写在后面,如果显示结果是:代码在前面的元素显示在上方 ,即证明上面的stack level规则。

测试结果

在FF3.0中结果和标准顺序一致。FF2.0中“z-index值为负值的定位元素”在父级stacking context的背景下面。(注意ff2.0的这个特殊性)

IE下测试

测试页面:demo02.html (请在IE下浏览)

代码说明

此代码也是根据上面的测试思想,但由于inline元素在ie中的特殊性,把inline的代码写在了后面,事实证明结论是正确的。对于“block元素”和“float元素”顺序大家可以交换顺序测试。

测试结论

IE下(无论ie6.0或者ie7.0)“float元素”和“block元素”属同一stack level,而“inline元素”较其stack level低。

解释

“float元素”,“z-index:auto的定位元素”仿佛产生了新的stacking context,但其真正能产生新的stacking context的后代任按其父级stacking context定位。(但IE中“z-index:auto的定位元素”
会拥有z-index值0,产生一个新的stacking context,并影响其子元素定位。这是IE一个BUG)
inline元素在FF中仿佛能产生新的stacking context,而在IE中则不能。

至此stack level规则内容已经完毕,现在应该能理解stack level和z-index的不同。stack level来决定这一个stacking context中各元素在z轴上的显示顺序,对于同一stack level的定位元素才由z-index进一步决定显示次序。

一些问题的解释

怿飞版主在《z-index在IE中的迷惑》一文中最后提到的问题:

演示地址:demo03.html

认为:

解惑:IE浏览器似乎给body元素默认了一个相对定位属性(position: relative)。

真是这样吗?

演示地址:demo04.html

分析

box1显示在body的下方,根据上面的stack level规则,IE中,如果body默认了一个位置属性,即body是其父级stacking context,box1应显示在其上方,事实却不是这样。而且当我们给body加上position:relative以后,显示效果和stack level规则一致。所以body并没有默认位置属性。

那为什么负值的定位元素在IE和FF下显示不一致呢?

ie 中根据stack level规则: z-index为负的定位元素的stack level比父级stacking context(此处是root stacking context)高,显示在其上方。故box1在ie中能显示。ff3.0和标准一致,也能显示。大家可以试一下。

ff2.0 中由于那条特殊的stack level,即 z-index为负的定位元素的stack level比父级stacking context(此处是root stacking context)低,所以显示在root stacking context下方。故不能看见。

另外,上面的代码中加上opacity那条后,在ff2.0中即可显示了。这又是什么原因呢?

推测:在火狐中如果给元素设置opacity属性(1除外),即会产生新的stacking context。

上面加上opacity属性后在ff2.0中可显示box1在body下,ff3.0box1在body
上,(可以根据上面的stack level规则自己分析)符合推测。
在w3c的说明中也证明这点

引用:

In future levels of CSS, other properties may
    introduce stacking contexts, for example ‘opacity’
    [CSS3COLOR].

总结

在一个stacking context中元素的z-轴显示顺序,由元素所处的 stack level 决定。对于同一stack level的定位元素由z-index的大小进一步决定显示次序。

  1. ie中给元素设置position属性(static除外)可产生新的stacking context
  2. ff中给元素设置opacity属性(1除外)可产生新的stacking context

除此之外(也许设置其他属性也会产生新的stacking context,但还不知道)只有定位元素设置了z-index(auto除外)才会产生新的stacking context,子元素将按照新的stacking context,定位。