内容简介：《div+css学习笔记》由达人设计整理，简单易懂，便于入门学习。
- Q Q ：605034058
- 旺旺：网页设计
- 电话：
- 微信：
一.建站流程
平面设计 ---- 制作 ---- 程序
1.平面设计：ps
2.制作：div+css
3.程序：asp: asp.net; php; jsp。
jQuery：制作和程序中常用
二．简介
html：超文本标记语言 （最新版本html 5.0）
xml：可扩展标记语言
xhtml：相当于html 4.0版本
html标签：<html></html> <head></head> <div></div> <p></p> <br /> ……
常用标签：<div></div> <ul><li></li></ul> <dl><dt></dt><dd></dd><dl>
CSS:（Cascading Style sheet）层叠样式表
命名：一般以英文命名 （首字母不能为数字）
三．css 调用方法
外联：在<head></head>之间调用 <link type="text/css" rel="stylesheet" href="css/css.css"/>
内联：写在<head></head>之间 <style rel="stylesheet" type="text/css"></style>
内嵌：嵌在标签里style=" "
四．属性
1. class （.） id （#）
2.属性写在花括符里，每条用逗号隔开 （内嵌 style=" "）
3.常用:weight:宽 height:高 border：边线 margin:边距（margin:0 auto;居中） padding:填充 color:颜色 font-size:字号 font-family:字体 float:浮动（使两个div在同一行上） background:背景
4.边线
border:1px solid #ccc;
border-top:1px solid #ccc;
border-left:
border-right:
border-bottom:
solid:实线 dashed:虚线 dotted:点线 double:双线
5.边距
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
简写
margin:10px；
margin:10px 20px 30px 40px; (由上面开始 顺时针方向)
margin:10px 20px; （上下10px 左右20px）
边距还可以是负数
6.填充
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
简写
padding：10px；
padding：10px 20px 30px 40px; (由上面开始 顺时针方向)
padding：10px 20px; （上下10px 左右20px）
7.文字
font-family:"黑体", Arial;
font-size：12px; 文字大小
color:#555;文字颜色
font-weight:bold;
line-height:22px; 行高
text-indent:2em; 首行缩进（单位em首行缩进）
text-align:center; 水平对齐
word-spacing;英文单词
letter-spacing:1px;汉字或字母间距
font-style（字体样式）: normal（正常）、italic（斜体）或oblique（倾斜）
简写 font:italic bold 12px/22px arial, "宋体";
文字两端对齐最后一行左对齐
text-align:justify;
text-justify:inter-ideograph;
文字超出显示省略号
text-overflow:ellipsis;
white-space:nowrap;
*white-space:nowrap;
overflow:hidden;
8.背景
background-color:#fff；背景颜色
background-image:url(../images/index2_01.png); 背景图片
background-repeat:no-repeat; 背景不重复 值：repeat-x:x轴重复 repeat-y:y轴重复
background-position:10px 20px；（离左边10像素 上边20像素） 它的值可以是:lef right center top bottom
background-attachment:fixed; 背景浮动 scroll(默认值)背景滚动
简写：
background: #fff url(../images/index2_01.png) no-repeat 10px 20px fixed;
9.大小
weight: 宽
height: 高
值可以的 auto （自动搞） %；
例如：weight:20px; weight:auto; weight:80%;
min 最小值
max 最大值
例如：min-height：最小高度
10.内隐藏属性overflow
visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承 overflow 属性的值。
11.显示属性 display
常用值
none：此元素不会被显示。
block：此元素将显示为块级元素，此元素前后会带有换行符。
12．单位
常用单位：px em（1em等于1个字大） %
13.颜色
颜色名称：(例如 red)
RGB值：(例如 rgb(255,0,0))
RGB百分比值：(例如 rgb(100%,0%,0%))
十六进制数：(例如 #ff0000)
简写：#ff9900 #f90
14.超链接
a:link：选择所有未被访问的链接。
a:visited：选择所有已被访问的链接。
a:active： 选择活动链接。
a:hover：选择鼠标指针位于其上的链接。
text-decoration:none; 去掉下划线
15.圆角
border-radius: 5px; 所有角都使用半径为5px的圆角，此属性为CSS3标准属性
-moz-border-radius: 5px; Mozilla浏览器的私有属性
-webkit-border-radius: 5px; Webkit浏览器的私有属性
border-radius: 5px 4px 3px 2px; 四个半径值分别是左上角、右上角、右下角和左下角
16．透明度
（1）第一种
filter:alpha();
background:#000;
opacity:0.5;
（2）第二种
background:rgb(0,0,0);
filter:alpha();
background: rgba(0,0,0,0.6);
opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
filter:alpha(); 这个是为老的IE设的，可取值在0-100，其它三个0到1.
-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。
17.固定宽高自动，或者固定高宽自动
max-width:300px;
_width:expression(this.width > 300 ? "300px" : this.width);
18．选择器
类选择器：.box{ color:#f00; }
Id选择器：#box{ color:#f00; }
标签选择器：body{ color:#f00; } div{ color:#f00; } img{ height:10px; }
分组选择器：.box1,.box2{ color:#f00; }
子选择器：.box>div{ color:#f00; }
后代选择器：.box .box_01{ color:#f00; }
:first-child（首个子对象）
19.表格
.box table{
border-collapse:collapse;
}
.box td{
border: 1px solid black;
line-height:20px;
}
20.定位
position: relative;
relative 相对的（相对于其正常位置进行定位top left）
absolute 绝对的（相对于 static 定位以外的第一个父元素进行定位 top left right bottom）
fixed 漂浮 （相对于浏览器绝对定位top left right bottom）
static 默认值 没有定位
21. 优先级：
后面的 > 前面的
id > class
内嵌 > 内联 > 外联
z-index:9999; 数字越大优先级越大,默认为零
22.兼容
-ms-：IE
-webkit-：Safari 和 Chrome
-moz-：Firefox
-o-：Opera
IE、FF 共用 height: 100px !important（优先级）
.box{
width: 100px!important;
width: 80px;
}
clear:both; 清除浮动
display:inline; 此元素会被显示为内联元素，元素前后没有换行符。