2015.7.8 第三课 课程重点（css：认识css样式）

【课前提问及答案】

1、table有哪些属性：width、height、border、cellspacing、cellpadding、bordercolor、bgcolor、align

　　　　　　　　　　  宽　　　高　　　边框　　内框宽度　 文字到边框距离　边框颜色　　背景色　水平位置

2、body有哪些属性：bgcolor、background、text

　　　　　　　　　　背景颜色　　背景图片　文字颜色

---------------------------------------------------------------------------------------------------------------

 

1、css选择器：相当于一个标识，有3种选择器

　　第一种选择器：标签选择器 　　　　p{ color:red;}
　　第二种选择器：class类选择器 　　.c1{ color:green;} 　　可被多次调用
　　第三种选择器：id选择器 　　　　 #d1{ color:blue;} 　　 独有

　　优先级：标签 < class < id

　　注意：一个标签可以有多个class，但是只能有一个id

 

　　样式的4种控制方法：

　　1）行内样式

　　2）内嵌式

　　3）链接式

　　4）导入样式

<style>

@import url(1.css)

</style>

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　　  鼠标经过时的样式

　　3）鼠标经过时手指：cursor:pointer;