百度前端培训 task1

https://github.com/baidu-ife/ife/tree/master/task/task0001

5.让页面样式丰富起来

• text-indent：首行缩进，如text-indent:50px;也可以允许使用负值，将会缩进到左边：text-indent:-20px/-2em/1cm;
• text-transform:大小写转换，对中文无意义。text-transfrom:none | capitalize | uppercase | lowercase ; 分别代表：不转换 | 首字母变成大写 | 整个单词转换成大写 | 整个单词转换成小写 ;
• text-decoration:规定添加到文本的修饰,text-decoration:overline | line-through | underline | blink | inherit | none;  文本上的一条线 | 穿过文本的一条线 | 下划线 | 闪烁 | 继承祖先元素的修饰 | 没有修饰;Ps:IE8及以下不支持inherit，IE、Chrome 或 Safari 不支持 "blink" 属性值。
• text-align:规定元素中文本的水平对齐方式,text-align:left | center | right;水平左对齐，水平居中，水平右对齐。Ps:text-align:center;和<center>...</center>不一样，前者只是把文本居中，不会影响元素，后者不仅影响文本，还会把整个元素居中。

• word-spacing:该属性增加或减少单词间的空白（字间隔）,word-spacing:normal | length | inherit;分别为默认 | 定义单词间的固定空间 | 从父元素继承（IE8及以下不支持）;word-spacing:10px/0.5em;
• white-space:规定段落中的文本不进行换行;white-space:normal | pre | nowrap | pre-wrap | pre-line | inherit;分别为默认（忽略空格） | 空格被浏览器保留，类似于HTML的<pre>  标签 | 文本不会换行，直到遇到<br>标签 | pre-wrap:保留空白字符序列，正常换行 | pre-line: 合并空白符序列，保留换行符 | inherit: 从父元素继承white-space的值
• color:颜色，不是背景颜色
• line-height:行高，line-height:25px;
• font:字体
• font-family:英文:font-family:Verdena,Arial,Helvetica,Tahoma;中文:font-family:"宋体",Verdana,Arial,Tahoma;
• font-size:设置字体大小,font-size:20px/2em;
• font-weight:设置字体的粗细,font-weight:100(200,300...900);或者font-weight:normal | bold | bolder | lighter;其中，normal相当于400，bold相当于700
• font-face:自定义字体，
• @font-face {
    font-family: 'mb_gothic_spellregular';
    src: url('../font/MB_gothic_spell/mb_gothic_spell-webfont.eot');
    src: url('../font/MB_gothic_spell/mb_gothic_spell-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/MB_gothic_spell/mb_gothic_spell-webfont.woff2') format('woff2'),
         url('../font/MB_gothic_spell/mb_gothic_spell-webfont.woff') format('woff'),
         url('../font/MB_gothic_spell/mb_gothic_spell-webfont.ttf') format('truetype'),
         url('../font/MB_gothic_spell/mb_gothic_spell-webfont.svg#mb_gothic_spellregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

• 关于font-face可以看http://www.w3cplus.com/content/css3-font-face 里面有具体说明。