2015年7月8日 CSS第一课

一、css样式部分

　　1、css样式的三种常用写法：
　　　　第一种 行内样式：直接在标签里，如：<p style="color:red"></p>
　　　　第二种 内嵌式：在关部标签head里面，加入<style> p{ color:red;} </style>
　　　　第三种 链接式：在外部新建css文件写入样式，在html文件中引入：
　　　　　　<link rel="stylesheet" type="text/css" href="相对路径.css">

           第四种 导入样式：它的缺点是页面加载完成后才导入（不常用）

                   <style> @import url("相对路径"）

      注：以上四种样式的优先级为：行内样式>内嵌式>链接式

二、CSS选择器：

    1、标签选择器：p{color:red;}

    2、类别选择器：.c1{color:green;}

    3、ID选择器：#d1{color:yellow;}

    三种选择器的优先级：ID选择器>class类别选择器>标签选择器。

    三种选择器的区别：标签选择器整个页面都将使用该种样式，CLASS选择器多个标记可共同使用该样式，ID选择器在一个页面中不可重复样式是独有的。

    css的注释：/*这里写上注释说明*/

四、css的继承性：

     css具有继承性，但只有字体相关的属性，才会被里面的标签继承。

      #d1 p 表示id为d1的标签下面的p标签
　　#d1,p 表示id等于d1的标签和p标签

五、css文字效果：

     font-family:字体

    font-size:文字大小

    color:文字颜色

    font-weight:文字粗细，加bold属性为粗体字。

    text-decoration:underline下划线

    text-decoration:line-through删除线

    test-decoration:overline顶划线

    text-transform:capitalize单词首字母大写

    text-transform:uppercase全部大写

    text-transform:lowercase全部小写

    letter-spacing:20px字符间距（默认为normal）

    text-align:对齐方式有left,right,center,justify两端对齐

    line-align:200px；高度（高度设为和DIV的高度一样可以使行文字居中）

    line-height:300px;行间距（和文字所在DIV高度一样可以使文字垂直居中）  

六、表格css样式：

    1）border:dashed虚线，dotted点虚线，solid实线。

      border: solid 1px red;

　　等同于下面3句话：

　　边框样式：border-style:solid;（实线：solid；虚线：dashed；点划线：dotted）
　　边框粗细：border-width:1px;
　　边框颜色：border-color:red;

    2）边框重叠：border-collapse:collapse;（表格的细线合并）

　 3）行列表头：th scope=”row” （行的表头）　　th srope=”col” （列的表头）

 七、body背景样式：

　　背景颜色：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;

八、超链接：

　　1）去掉超链接下划线：text-decoration:none;

　　2）效果：

　　　　a:link　　　　正常浏览状态的样式

　　　　a:visited　　 被点击过的超链接样式

　　　　a:hover　　  鼠标经过时的样式

　　3）鼠标经过时让div显示手形：cursor:pointer;