Chapter 6 字体，颜色

font-family and @font-face

• 通用属性

text-transform: uppercase | lowercase | capitalize;
text-decorator: underline | overline;
letter-spacing: -1px;
word-spacing: 1px;
line-height: 1em;
text-align: center | justify; ／* 对齐文本*／
text-indent: 25px; /*首行缩进 */

• 格式化段落首字母或者首行

p:first-leter {
    font-weight: bold;
    color: red;
}
p:first-line {
    font-weight: bold;
    color: red;
}

• 小型大写字母

font-variant: smll-caps;

• 阴影

text-shadow: -4px 4px 3px #999999;
text-shadow: -4px 4px 3px #999999， 1px -1px 2px #000;

水平偏移量， 垂直偏移量， 阴影模糊度，阴影颜色
多个阴影可以重叠(IE9 无效)
http://webexpedition18.com/articles/css3-text-shadow-property

• 字体
  原文160页

@font-face {
  font-family:  'League Gothic';
  src: url('fonts/League_Gothic.eot');
  src: url('fonts/League_Gothic.eot#iefix') format('embedded-opentype'),
  url('fonts/League_Gothic.woff') format('woff'),
  url('fonts/League_Gothic.ttf') format('truetype'),
  url('fonts/League_Gothic.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

• 第三行是为了ie9
• 第四行是为了 IE6～8

google web 字体

www.google.com/webfonts or https://fonts.google.com/

列表

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/

list-style-type: square | upper-alpha | circle; /*列表样式*/
list-style-image: url('.../bullets.gif');
list-style-position: outside | inside;

定制列表style

ul li {
  list-style-type: none;
}
ul li:before {
  content:  counter(item, disc) " ";
  color: red;
}

ol li {
 list-style-type: none;
 counter-increment: item;
}
ol li: before {
  content: conter(item) ". ";
  color: red;
}

色彩设计指导

http://www.colourlovers.com/

颜色对应的value

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value