20150921css2

 

一、border边框

border:1px solid #F00;

border-style:dashed虚线 dotted点点点 边框样式

border-width:3px;边框宽度

border-color:#F00;边框颜色

还可以控制四个边的属性

border-top、border-bottom、border-left、border-right

二、背景

background-color:#F00; 背景颜色

background-image:url(../image/2.jpg);/*背景图片*/

background-repeat:no-repeat;/*背景不平铺*/

background-repeat:repeat-x;/*横向平铺*/

background-repeat:repeat-y;/*纵向平铺*/

background-position:10px 20px;/*图像的方位距DIV左10px 上面20px */

background-size:cover;/*CSS3拉伸铺满*/

background-attachment:fixed;/*背景图片固定*/文本大于图片时，可以让图片固定

可以写成一句话:

background:blue url(xx.jpg) no-repeat fixed 5px 10px;

把常用的图标放到透明的png，可以减少宽带

background-position:0px  -100px;/*定位图片的位置*/

三、表格样式

<caption>表格标题<caption>

caption-side:bottom;/*标题在下面*/

table{ width:160px; heigt:200px; border-collapse:collapse;}/*细线合并*/

td,th{ border:1px solid red; text-align:center}/*td,th共用一个样式*/

<th scope="col">列表头

<th scope="row">行表头

四、去掉超链接的下划线

<a href="#">a<a>

Text-decoration:none; underline下划线 line-through删除线 overline至顶线

五:伪类

a:link  a:visited a:hover a:active

#d1:hover{ cursor:pointer; }鼠标放上显示手的形状

 六：overflow

当内容超出DIV的宽度

overflow:hidden;超过隐藏

overflow:auto;超过显示滚动条

overflow:scroll;不超过、超过都有滚动条

七、选择器

#d1 a{d1下的a标签}

#d1 #d2 a {d1下的d2下的a标签}

#d1,#d2{d1,d2共用一个样式}

 

css最核心的就是：浮动、盒子模型、定位

ID用处：上证指数

把基础练熟