1.css基本样式

1.1 css背景

背景颜色 : background-color : red ;  | #FF0000(十六进制) | RGB(255,0,0) 

背景图片 : background-image: url("image/icon1.png");

背景重复 : background-repeat : no-repeat | repeat-x | repeat-y
 ( 不重复 | x方向重复 | y方向重复 )

背景吸附 : background-attachment : fixed | scroll ( 固定 | 从上到下移动 )

背景位置 : background-position: 10px 20px; | center top | 50% 50% 
两个参数,第一个参数表示离x轴的距离,y表示离y轴的距离

简写 : background: color image repeat  position

图片大小 : background-size: 50px 50px; | 100% 100% | cover (遮盖 同 100% 100%)

1.2 css文本

字体颜色 : color: red; | #FF0000(十六进制) | RGB(255,0,0) 

对齐方式 : text-align : right ; | left | center 

文本修饰 : text-decoration : underline | overline | line-through | none 
( 下划线 | 上划线 | 删除线 | 没有 )

文本转换 : text-transform : uppercase | lowercase | capitalize ( 大写 | 小写 | 首字母大写 )

文本缩进 : text-indent : 20px ; | 2em 

1.3 css字体

后备字体库 : body { font-family : Helvetica , Microsoft YaHei , 宋体 , 黑体 }

字体大小 : font-size : 16px ; (默认16px)

字体样式 : font-style : normal | italic | oblique ( 无样式 | 斜字体 | 大倾斜 )

字体粗细 : font-weight : normal | bold | bolder | lighter | 100~900 
( 无加粗 | 加粗 | 更粗 | 细字体 | 范围粗细 400 等同于 normal 700 等同于 bold )

字体行高 : line-height : 50px ;

1.4 css链接

a : link {......}  - 正常，未访问过的链接

a : visited {......}  - 用户已访问过的链接

a : hover {......}  - 当用户鼠标放在链接上时

a : active {......}  - 链接被点击的那一刻

若单独设置几个链接，必须遵守如下规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

1.5 css列表样式 (不排序列表 ul li)

list-style : none ; 无小圆点

list-style-type : circle | square ; 小圆点形式

list-style-image : url("xxx") ; 可换成图标

1.6 css边框

border-width  边框的宽度

border-style   边框的样式

border-color 边框的颜色

可以简写成 : border： width style color ;
p { border : 1px solid #333 }

单独设置各边 : p { border-top:1px solid #ccc; }

1.7 css表格

表格跨行 :
<table>
    <tr>
        <th rowspan="3">商城</th><td>帽子</td><td>衣服</td> 
    </tr>
    <tr>
        <td>帽子</td><td>衣服</td>
    </tr>
    <tr>
        <td>帽子</td><td>衣服</td>
    </tr>
</table>

表格跨列 :
<table >
    <tr>
        <th colspan="3">商城</th>
    </tr>
    <tr>
        <td>衣服</td><td>鞋子</td><td>帽子</td>
    </tr>
    <tr>
        <td>衣服</td><td>鞋子</td><td>帽子</td>
    </tr>

 table,th,td { border: 1px solid red; } 设置表格边框

table { border-collapse : collapse } 
( 属性设置表格的边框被折叠成一个单一的边框 )

1.8 css轮廓

p { outline :1px solid pink }  
绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

1.9 css透明 (opacity)

opacity:0~1;

2.0 css隐藏/显示

visibility : hidden | visible ( 隐藏 | 显示 )

2.样式的继承

2.1 width和height

width : 如果子元素不设置宽度，默认情况下继承父元素的宽度

height : 如果父元素不设置高度，默认情况下父元素继承子元素的高度

2.2 css可以继承的属性

文本相关属性 : color, text-align, text-decoration, text-transform, text-indent 
(内联标签不能设置此属性)

字体相关属性 : font-family, font-style, font-size, font-weight, line-height

列表相关属性 : list-style

表格相关属性 : border-collapse

其他属性 : cursor, visibility  (鼠标样式 , 可见)