The Zen of CSS Design

按有用程度 按页码先后 最新笔记

• 

  Reconstruction

  connie

  分层功能利用了background-attachment:fixed属性。让背景图片不随滚动条滚动。 在绝对定位中使用em为单位会导致定位随字体大小改变而自动调整。但若使用px为单位，虽然可能导致文字重叠，但却能对元素位置进行更为精确的控制。 分割各个文字块，可用border-bottom:1px dashed blue; 边框将呈点划线状。 利用相对定位元素中加入绝对定位的子元素，能够处理一些布局问题。 (更多)

  分层功能利用了background-attachment:fixed属性。让背景图片不随滚动条滚动。

  在绝对定位中使用em为单位会导致定位随字体大小改变而自动调整。但若使用px为单位，虽然可能导致文字重叠，但却能对元素位置进行更为精确的控制。

  分割各个文字块，可用border-bottom:1px dashed blue; 边框将呈点划线状。

  利用相对定位元素中加入绝对定位的子元素，能够处理一些布局问题。

  (收起)

  2012-01-12 09:22:54   回应

  收藏

  推荐
• 

  Special Effects

  connie

  IE6不支持的css选择器： 子选择器 #content > p {color:blue;} 运用于元素的直接子元素，子孙元素不会应用 邻接选择器 #content p + p {color:red;} 属性选择器[ href~="http://www.google.com/"] {color:green;} 关于固定边框的处理技巧： 给浏览器加固定边框，可以用position:fixed;但IE不支持此属性，边框会随着滑动而滚动。 处理此hack的技巧是。 #extraDiv2 { background-image: url(edge.gif); ... (更多)

  IE6不支持的css选择器：

  子选择器 #content > p {color:blue;} 运用于元素的直接子元素，子孙元素不会应用

  邻接选择器 #content p + p {color:red;}

  属性选择器[ href~="http://www.google.com/"] {color:green;}

  关于固定边框的处理技巧：

  给浏览器加固定边框，可以用position:fixed;但IE不支持此属性，边框会随着滑动而滚动。

  处理此hack的技巧是。

  #extraDiv2 {

  background-image: url(edge.gif);

  background-repeat:repeat-x;

  position:fixed;

  bottom:0;

  left:100%;

  width:100%;

  height:20px;

  margin-left:-100%;

  } 把边框设置左偏移量100%然后再通过左外边距-100%把边框拖回来。

  而恰好对于那些不支持负外边距的浏览器，也不能正确显示fixed的悬浮效果。

  有时候可以使用“半”透明的GIF图片重叠于背景之上。半透明GIF类似于一个国际象棋棋盘。

  (收起)

  2012-01-09 11:20:00   回应

  收藏

  推荐
• 

  Typography

  connie

  字体格式：字样的粗细、宽度和姿态（Italic、Oblique） 字体对比度：字型中粗的部分与细的部分之间的差异程度 字体色深：文字的深浅程度、字距调整、字间距和行间距、字体色相。 字体组： serif. 有明显的装饰钩，笔画结尾处大都能看见细小的衬钩 Times New Roman sans serif. 没有装饰钩。Arial monospace. 每个字母都有相同的宽度，显示程序代码特别有用。Courier或Courier New cursive. 模仿手写风格，通常用于.. (更多)

  字体格式：字样的粗细、宽度和姿态（Italic、Oblique）

  字体对比度：字型中粗的部分与细的部分之间的差异程度

  字体色深：文字的深浅程度、字距调整、字间距和行间距、字体色相。

  字体组：

  serif. 有明显的装饰钩，笔画结尾处大都能看见细小的衬钩 Times New Roman

  sans serif. 没有装饰钩。Arial

  monospace. 每个字母都有相同的宽度，显示程序代码特别有用。Courier或Courier New

  cursive. 模仿手写风格，通常用于标题。没有默认，最常见Comic Sans

  fantasy. 完全是装饰用字体，多用于标题。

  标题指导意见：

  > 颜色必须是整个设计中较为强势的色彩

  > 色彩必须鲜明。暗色比亮色更能产生冲击力

  > 越重要的标题，越要用有冲击力的颜色

  > 略为紧缩的字体更能凸显标题。70%-90%宽作为标题

  > 字体对比增强标题效果

  > 标题长度应该有所限制

  正文布局的建议：

  > 保持一行在60个字符以内

  > 避免每行字数过少

  > 段落不要太长

  > 长篇文章尽力让段落保持小巧，并且将长段分割为节并加以标题

  > 段落之间的距离不能过大

  > 避免在正文中使用鲜艳的色彩

  重要文字：

  > 应用鲜艳的色彩并保持统一

  > 应当使用短行

  > 不应阻断正文，而应增强正文效果

  > 给插图附上说明

  font-variant:small-caps/normal 将文字用略小的大写字母表示

  text-transform: capitalize / uppercase / lowercase / none

  首字母大写 所有字母大写 所有字母小写 正常

  text-decoration:none / underline / overline / linethrough / blink(不用)

  无 下划线 上划线 中划线 时隐时现效果

  line-height 行间距

  letter-spacing 字符间距

  word-spacing 单词间距

  text-align 对齐文字 left、right、center、justify 不要应用到长段文字中 (收起)

  2012-01-06 14:18:27   回应

  收藏

  推荐

• 

  Reconstruction

  connie

  分层功能利用了background-attachment:fixed属性。让背景图片不随滚动条滚动。 在绝对定位中使用em为单位会导致定位随字体大小改变而自动调整。但若使用px为单位，虽然可能导致文字重叠，但却能对元素位置进行更为精确的控制。 分割各个文字块，可用border-bottom:1px dashed blue; 边框将呈点划线状。 利用相对定位元素中加入绝对定位的子元素，能够处理一些布局问题。 (更多)

  分层功能利用了background-attachment:fixed属性。让背景图片不随滚动条滚动。

  在绝对定位中使用em为单位会导致定位随字体大小改变而自动调整。但若使用px为单位，虽然可能导致文字重叠，但却能对元素位置进行更为精确的控制。

  分割各个文字块，可用border-bottom:1px dashed blue; 边框将呈点划线状。

  利用相对定位元素中加入绝对定位的子元素，能够处理一些布局问题。

  (收起)

  2012-01-12 09:22:54   回应

  收藏

  推荐
• 

  Special Effects

  connie

  IE6不支持的css选择器： 子选择器 #content > p {color:blue;} 运用于元素的直接子元素，子孙元素不会应用 邻接选择器 #content p + p {color:red;} 属性选择器[ href~="http://www.google.com/"] {color:green;} 关于固定边框的处理技巧： 给浏览器加固定边框，可以用position:fixed;但IE不支持此属性，边框会随着滑动而滚动。 处理此hack的技巧是。 #extraDiv2 { background-image: url(edge.gif); ... (更多)

  IE6不支持的css选择器：

  子选择器 #content > p {color:blue;} 运用于元素的直接子元素，子孙元素不会应用

  邻接选择器 #content p + p {color:red;}

  属性选择器[ href~="http://www.google.com/"] {color:green;}

  关于固定边框的处理技巧：

  给浏览器加固定边框，可以用position:fixed;但IE不支持此属性，边框会随着滑动而滚动。

  处理此hack的技巧是。

  #extraDiv2 {

  background-image: url(edge.gif);

  background-repeat:repeat-x;

  position:fixed;

  bottom:0;

  left:100%;

  width:100%;

  height:20px;

  margin-left:-100%;

  } 把边框设置左偏移量100%然后再通过左外边距-100%把边框拖回来。

  而恰好对于那些不支持负外边距的浏览器，也不能正确显示fixed的悬浮效果。

  有时候可以使用“半”透明的GIF图片重叠于背景之上。半透明GIF类似于一个国际象棋棋盘。

  (收起)

  2012-01-09 11:20:00   回应

  收藏

  推荐
• 

  Typography

  connie

  字体格式：字样的粗细、宽度和姿态（Italic、Oblique） 字体对比度：字型中粗的部分与细的部分之间的差异程度 字体色深：文字的深浅程度、字距调整、字间距和行间距、字体色相。 字体组： serif. 有明显的装饰钩，笔画结尾处大都能看见细小的衬钩 Times New Roman sans serif. 没有装饰钩。Arial monospace. 每个字母都有相同的宽度，显示程序代码特别有用。Courier或Courier New cursive. 模仿手写风格，通常用于.. (更多)

  字体格式：字样的粗细、宽度和姿态（Italic、Oblique）

  字体对比度：字型中粗的部分与细的部分之间的差异程度

  字体色深：文字的深浅程度、字距调整、字间距和行间距、字体色相。

  字体组：

  serif. 有明显的装饰钩，笔画结尾处大都能看见细小的衬钩 Times New Roman

  sans serif. 没有装饰钩。Arial

  monospace. 每个字母都有相同的宽度，显示程序代码特别有用。Courier或Courier New

  cursive. 模仿手写风格，通常用于标题。没有默认，最常见Comic Sans

  fantasy. 完全是装饰用字体，多用于标题。

  标题指导意见：

  > 颜色必须是整个设计中较为强势的色彩

  > 色彩必须鲜明。暗色比亮色更能产生冲击力

  > 越重要的标题，越要用有冲击力的颜色

  > 略为紧缩的字体更能凸显标题。70%-90%宽作为标题

  > 字体对比增强标题效果

  > 标题长度应该有所限制

  正文布局的建议：

  > 保持一行在60个字符以内

  > 避免每行字数过少

  > 段落不要太长

  > 长篇文章尽力让段落保持小巧，并且将长段分割为节并加以标题

  > 段落之间的距离不能过大

  > 避免在正文中使用鲜艳的色彩

  重要文字：

  > 应用鲜艳的色彩并保持统一

  > 应当使用短行

  > 不应阻断正文，而应增强正文效果

  > 给插图附上说明

  font-variant:small-caps/normal 将文字用略小的大写字母表示

  text-transform: capitalize / uppercase / lowercase / none

  首字母大写 所有字母大写 所有字母小写 正常

  text-decoration:none / underline / overline / linethrough / blink(不用)

  无 下划线 上划线 中划线 时隐时现效果

  line-height 行间距

  letter-spacing 字符间距

  word-spacing 单词间距

  text-align 对齐文字 left、right、center、justify 不要应用到长段文字中 (收起)

  2012-01-06 14:18:27   回应

  收藏

  推荐