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;
}
色彩设计指导
颜色对应的value
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
