【基础一】

【基础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）。

<form>

</form>

</fieldset>

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

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

相关推荐