div+css入门
div+css入门：
1.CSS样式的三种用法：
a、直接定义在html标签里。使用style引入。
例：<div style="width:200px;height:200px;">这是第一种用法</div>
b、定义在本页面的<head></head>标签里面。
例：<html>
<head>
<style type="text/css">
.second{width:200px;height:200px;}
</style>
</head>
<body>
<div class="second">这是第二种用法</div>
</body>
</html>
c、定义成一个外部的CSS文件。
例：.three{width:200px;height:200px;}
存放在与html文件的同目录下面的style.css文件中。
然后在html文件引入这个CSS文件
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="three">这是第三种用法</div>
</body>
</html>
2.CSS基础属性
背景： background:#00CCFF url('1.jpg') no-repeat 0px -80px;
设置背景颜色
background-color:#00CCFF;
设置背景图片
background-image:url('1.jpg');
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
background-repeat:no-repeat;
设置背景图片在背景中的位置。
background-position:0px -80px;
文本： text-indent 缩进元素文本的首行
text-align 对齐元素中的文本
word-spacing 设置字间距
letter-spacing 设置字符间距
line-height 设置行高
color 设置文本颜色
字体：font-family 设置字体
font 简写属性，作用是把所有针对字体的属性设置在一个声明中。
font-size 设置字体大小，一般声明为px, 或者pt
font-weight 设置字体的粗细，normal是标准字体，bold是粗体
font-style 设置字体的风格，normal是标准字体，italic是斜体，oblique是倾斜
列表： list-style-type 设置列表项标志的类型 none:无标记；disc:默认，实心圆；x:空心圆；square:实心方块；
list-style-image 将图象设置为列表项标志
list-style-position 设置列表中列表项标志的位置 inside:列表项目标记放置在文本以内，且环绕文本根据标记对齐。 outside:默认。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
list-style 简写属性，将所有用于列表的属性设置在一个声明中。
3.css框模型常用属性。
内边距： padding 定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
padding-left 定义元素左边的内边距
padding-right 定义元素右边的内边距
padding-top 定义元素上边的内边距
padding-bottom 定义元素下边的内边距
边框： border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-top/border-bottom/border-left/ border-right 这四个属性分别单独设置一个边的属性，可以在后面接上style/width/color来设置一个边的一种属性，如：border-top-color用来设置上边框的颜色。
外边距： margin 定义元素的外边距。margin属性接受长度值或百分比值，但不允许使用负值。
margin-top 设置元素的上外边距。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
4.CSS浮动和清理
浮动：#div{Float:left/right/none}
清理：#div{clear:left/right/none}
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
none 默认。允许浮动元素出现在两侧。