【基础1】

 《css web设计快速上手》Tom Negrino Dori Smith

http://www.dori.com/css/links.html

颜色代码：http://www.dori.com/css/colors.html

border类型：http://www.dori.com/css/borders.html

CSS：

1.FTP程序把css和xhtml文件上传到web服务器

2.css编辑器：westernciv的stylemaster www.westciv.com

既是css编辑器，也是html编辑器：newsgator的topstyle www.newsgator.com

3.将css样式表语html连接：

    连接link：将样式表嵌入html页面

    导入@import：将样式表导入页面，还可将一个多个 css 导入另一个css

4.层叠：

    

5.ID是唯一的，一个页面只能有一个

布局和定位：

6.快标签：<h1>........   <p>    <backquote>

   内联标签：<i><em><strong>   <b>   (容器)<div><span>

7.盒模型

  

8.定位盒

   静态定位：

   相对定位：相对于元素初始位置

   绝对位置：以元素容器为参照物来放置一个元素

   固定定位：基于页面本身

 

9.浮动float

值：left      right      none     inherit(盒继承其他容器的浮动值)

 

10.选择大小

相对大小：相对于页面其他元素关系定义

绝对大小：固定值

相对大小	绝对大小
单位	定义	单位	定义
em	选中字体中字母M的宽度	pt	点的大小，1pt=1英寸的1/2
ex	选定字体中字母x的高度	in	英寸
px	像素	mm	毫米
		cm	厘米
		pc	1pc=1/6英寸

 

11.添加背景图像(jpeg,png,gif)

background-image:url(images/background.jpg)

background-repeat:repeat 铺满页面  repeat-x 水平 tepeat-y垂直铺

 

12.制作菜单

样式化侧边栏：list-style-style:none  删除项目符号

创建按钮：把列表变成按钮样式

#sidebar a{   //应用于div中所有的<a>标签

diaplay: block;  //发生变化的地方

padding:3px 3px 5px 30px;

background-color:#336666; //按钮颜色

color:#EBEBEB;  //文本颜色

border-bottom=1px #EBEBEB solid;  //下边框

text-decoration:none;    //链接不要带下划线

}

 

13.添加翻转效果

  伪类： 元素  冒号  伪类

               a        :     visited {color:#FF00FF} 使之前访问过的连接变成紫色

 

对于标签的伪类有4种：

  

 

使用css创建效果最美妙的部分在于，不需要额外的Javascript.

 

列表属性：list-style    list-style-image   list-style-position   list-style-type

 

 

legend 元素为 fieldset 元素定义标题（caption）。

<fieldset> 

<legend>健康信息：</legend>

<form>

     <label>身 高：<input type="text" /></label>

     <label>体重：<input type="text" /></label>

</form>

</fieldset>

 

可直接这样用，当鼠标经过td表格时，会变色

<td onMouseOut="this.bgColor=#efefef；this.borderColor=#efefef"；onMouseOver="this.bgColor=#cccccc; this.borderColor=#000033">cnbruce</td>