CSS实用 笔记

一、css的使用方法：

1、<span style=”color:red” >……</span>

2、@import url(x.css);

3、<link href=”x.css” type=”text/css” rel=”stylesheet” />

4、<style type=”text/css”>……</style>

二、控制字体

       1、字体 font-family：黑体,幼圆;

       2、字体大小 font-size：20px;

       3、颜色 color:#ffffff;

       4、粗细 font-weight：bold | lighter;

       5、斜体 font-style：italic | normal

       6、下划线、顶划线、删除线、闪烁 text-decoration：underline | overline | linethrough | blink

       7、英文字母大小写 text-transform：首字母大写，全部小写，全部大写；

       8、垂直对齐 vertical-align：top | middle | bottom

       9、首字下沉 float：left;

三、图片效果

       1、图片边框 边框样式：border-style：dotted;

                            边框颜色：border-color：red;

                            边框粗细：border-width：5px;

              也可以合起来写：border：样式 颜色 粗细

              还可以设置：border-left、border-right

       2、图片的缩放 width：50%; height：50%;

       3、图片对齐方式 水平对齐：text-align：center;

                                   垂直对齐：vertical-align：middle……

       4、图文混排：跟文字首字下沉设置一样：float：left;

四、页面背景

       1、背景颜色 background-color：#ffffff;

       2、背景图片：background-image：url(x.gif);

                                   背景图片的重复：background-repeat：repeat-y | repeat-x | no-repeat;

                                   背景图片的位置：background-position：bottom right; /*右下角*/

                                   固定背景图片：background-attachment：fixed;

       3、可以综合写：background：url(x.gif) no-repeat center top;

五、控制表格与表单

       1、控制表格 原理与控制DIV标签一样，所以不再赘述

       2、控制表单

                            例：.text {

                                          border-bottom: 1px solid #000000;

                                          color: #000000;

                                          border-top: 0px;

                                          border-left: 0px;

                                          border-right: 0px;

                                          background: transparent;

}

产生的表单效果为：

姓名：

也可以修饰Button的样式，需要在实践中设计

       3、控制类似Excel表格的表单

              即将表格的单元格设置为<input  />，border=0；

六、超链接特效

       1、动态超链接    a:link{ color: red; text-decoration:none;}

                                    a:visited{ ……}

                                    a:hover{ ……}

       2、按钮式超链接 

       3、浮雕式超链接

       4、鼠标特效 cursor;help; 其他特效查询相关资料

       5、页面滚动条 查看帮助文档

七、制作使用菜单

       1、设置项目列表的样式 list-style-type:decimal;

       2、用项目列表制作按钮式菜单，记住水平是用float:left