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; ／* 對(duì)齊文本*／
text-indent: 25px; /*首行縮進(jìn) */
- 格式化段落首字母或者首行
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;
水平偏移量， 垂直偏移量， 陰影模糊度，陰影顏色
多個(gè)陰影可以重疊(IE9 無(wú)效)
http://webexpedition18.com/articles/css3-text-shadow-property
- 字體
原文160頁(yè)
@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;
}
色彩設(shè)計(jì)指導(dǎo)
顏色對(duì)應(yīng)的value
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
