【课前提问及答案】
1、table有哪些属性:width、height、border、cellspacing、cellpadding、bordercolor、bgcolor、align
宽 高 边框 内框宽度 文字到边框距离 边框颜色 背景色 水平位置
2、body有哪些属性:bgcolor、background、text
背景颜色 背景图片 文字颜色
---------------------------------------------------------------------------------------------------------------
1、css选择器:相当于一个标识,有3种选择器
第一种选择器:标签选择器 body{}; p{ color:red;}; table{}; div{}; li{}; ol{}; ul{};
第二种选择器:class类选择器 .c1{ color:green;} 可被多次调用
第三种选择器:id选择器 #d1{ color:blue;} 独有
优先级:标签 < class < id
注意:一个标签可以有多个class,但是只能有一个id
2、css文字效果:
字体:font-family
字号:font-size
颜色:color
粗体:font-weight
下划线:text-decoration:underline ( 删除线:line-through; 顶划线:overline; 去掉下划线:none )
英文首字母大写:text-transform:capitalize(全部大写:uppercase;全部小写:lowercase)
字母间距:letter-spacing
水平位置:text-align
居中:
水平居中:text-align:center
垂直居中:line-height:300px;(和文字所在的div的高度一样)
3、css继承性:
#d1 p 表示id为d1的标签下面的p标签
#d1,p 表示id等于d1的标签和p标签
注意:css具有继承性,只有字体相关的css属才能够被继承 (面试常问)
4、表格边框:
样式 粗细 颜色
border: solid 1px red;
等同于下面3句话:
边框样式:border-style:solid;(实线:solid;虚线:dashed;点划线:dotted)
边框粗细:border-width:1px;
边框颜色:border-color:red;
5、表格样式:
1)表格标题:<caption> 属性:caption-side:bottom; (标题位于表格下方)
2)边框重叠:border-collapse:collapse;(表格间隙合并)
3)行列表头:th scope=”row” (行的表头) th srope=”col” (列的表头)
6、背景:
背景颜色:background-color:#00FF00;
背景图片:background-image:url(路径);
(注意:当图片的的大小,小于它所在的div时,图片会横向、纵向填满div)
背景重复:background-repeat:no-repeat;(不重复:no-repeat;横向重复:repeat-x;纵向重复:repeat-y)
背景方位:background-position:5px 10px;(左边、上边)
背景固定:Background-attachment:fixed;
综合:
background:blue url(xx.jpg) no-repeat fixed 5px 10px;
7、超链接:
1)去掉超链接下划线:text-decoration:none;
2)效果:
a:link 正常浏览状态的样式
a:visited 被点击过的超链接样式
a:hover 鼠标经过时的样式
a:avtive 点击那一刻的样式
LoVe HAte 原则:即按照上面四个从上到下的顺序才有相应的效果
3)鼠标经过时手指:cursor:pointer;