Winter Vacation Web front-end -CSS (text, lists)

This is done by watching the video blogger on China University MOOC notes

*CSS样式（1）文本
属性                 描述          取值
color               文本颜色       red #f00 rgb(255,0,0)
letter-spacing      字符间距       2px -3px
line-height          行高          14px 120%
text-align           对齐           center left right justify
text-decoratiom      装饰线         none  overline  underline line-through
text-indent          首行缩进        2em

*font
font:斜体   粗体  字号/行高  字体
font:italic bold 16px/1.5em '宋体'；

*CSS样式（2）背景与超链接
属性                  描述           用法
background-color      背景颜色       背景图片会覆盖掉背景颜色
background-inage      背景图片       url("images/Weiixn.png")
background-repeat     背景填充        repeat-x(横向填充)  no-repeat(全铺) repeat(棋盘格填充)
background                            设置顺序：颜色+图片+填充

超链接
a:link    -普通的，未被访问的链接
a:visited -用户已访问的链接
a:hover   -鼠标指针位于链接上方悬停
a:active  -链接被点击的时刻

之间是有顺序的
   LOVE&HATE

*悬停放大字体
css: a{
        font-size:22px;
        }
      a:hover{
        font-size:120%;
        }

html:  <a href="#">web design</a>

List spreadsheet module

*CSS样式 列表与表格

（1）列表
属性                  描述
list-style            所有用于列表的属性设置于一个声明中
list-style-image      为列表标志设置图象
live-style-position   标志的位置
list-style-type       标志的类型

*list-style-type
值                   描述
none                无标记
disc                默认。实心圆
circle              空心圆
square              实心方块
.....

*list-style-position

css:
<style type="text/css">
    .inside{list-style-position:inside}
    .outside{list-style-position:outside}
</style>

html:
<ul class="inside">
    <li>HTML-----网页结构</li>
    <li>CSS------网页样式</li>
    <li>JS-------网页交互</li>
</ul>
<ul class="outside">
    <li>HTML-----网页结构</li>
    <li>CSS------网页样式</li>
    <li>JS-------网页交互</li>
</ul>

*list-stle-image
url("images/bullet1.gif")  //假设有图片 bullet.gif


*表格
表格大小：width（宽）、height（高）
表格边框：boder属性，border:1px（宽度） , solid（实线） , #eee（颜色）；
border-collapse属性：可以将表格边框和单元格边框合并

//表格边框
table,th,td
{
border:1px solid black;
}
//表格大小
table{
    width:500px;
    height:200px;
}

//奇偶选择器：nth-child(oddleven)
tr:nth-child(odd){
    background-color:#EAF2D3;
}