DIV+CSS

css的继承
css继承指的是子标记会继承父标记的所有的样式风格，并可以在父标记样式风格基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。

CSS的文字样式

字体
在HTML语言中，文字的字体是通过<font face="字体的名称">来设置，而CSS中字体则是通过font-family属性来设置

字体大小
css对于文字大小是通过font-size属性来控制，该属性可以是相对大小也可以是绝对大小inch(in)   英寸
cm    厘米
mm    毫米
pt    点（印刷的点数，在一般的显示器中1PT相当于1/72英寸）
pc     1pc=12pt px   像素，实际显示的大小与分辨率有关，这也是最常用的方式em   在父标记的基础上乘以一个数值

文字的颜色
CSS的文字颜色是通过color来设置的
color：blue；
    ：#00f；
    ：#0000ff；
    ：rgb（0，0，255）；
    ：rgb（0%，0%，100%）；

文字的粗细
css中是通过font-weight来设置文字粗细的
lighter   不加粗
bold      加粗
normal    默认效果
100～900的数值　控制粗细的大小

斜体
css中斜体是通过font-style来设置
italic   斜体
normal   标准风格
oblique   偏斜体

文字的下划线、顶划线和删除线
CSS中利用text-decoration来设置文字的下划线、顶划线和删除线
underline   下划线
overline    顶划线
line-through  删除线
blink        闪烁
闪烁在IE中不支持这个效果，在firefox（火狐）中支持此效果*{text-decoration：underline   overline   line-through；}

英文字母大小写
用text-transform来设置
capitalize  单词首字大写
uppercase   全部大写
lowercase   全部小写

css段落文字 在css中是通过text-align来控制段落的水平对齐，它的值可以设置为左，中，右和两端
text-align：left;    左
          : right；   右
         ：center；  中
         ：justify； 两端对齐

段落的垂直对齐方式
在css中是通过vertical-align来控制段落的垂直对齐的。该属性对于块级元素并不起作用，如<p>和<div>等标记。但对于表格，这个属性则很重要
top    顶端
bottom  底部
middle  居中对齐vertical-align:10px;   正数向上
vertical-align:-10px;   负数向下

行间距
在css中line-height的值表示的是两行文字之间基线的距离 而在动态页面当中如：论坛、博客，这些可以由用户自定义字体大小的页面，通常设定为相对值

字间距
字间距是通过letter-spacing属性来设置调整字间距的，同样也可以设置相对值和绝对值

首字放大
font-size  改变文字大小
float     浮动

CSS设置图片效果 在HTML中可以直接通过给<img>标记加border属性为图片添加边框
在css中可以通过border-style属性为图片定义各种边框的样式

图片缩放
width  宽
height 高
与HTML不同，CSS可以使用更多的值如相对值和绝对值

图片的对齐 对齐与文字对齐基本一样，不同的是通过父元素的属性来实现的，在img中设置是达不到效果的

纵向对齐
是通过vertical-align来实现的
当vertical-align的值为bottom或者sub时。IE与Ficefox（火狐）的显示效果是不同的，建议尽量少使用浏览器显示效果不一样的属性值
纵向对齐也可以使用正数和负数值

CSS的背景属性background-color所有html元素的背景色基本上都可以通过它来设置，因此很多网页通过各种背景色来实现分块的目的

背景图片
使用background-image属性来实现

背景图的重复
使用background-repeat属性来设置背景图的重复效果
repeat-y  垂直方向重复
repeat-x  水平方向重复
no-repeat  不重复

背景图片的位置
在默认情况下背景图片都是从设置background属性的标记左上角开始
css中可以通过background-position来调整背景图片的位置
position不仅可以设置上中下、左中右的模式。还可以设置具体数值或百分比，来实现精确定位

固定背景图片 可以通过background-attachment的值为fixed来固定图片

css中一个标记只能使用一次background属性，因此只有给多个标记添加不同的背景来实现。

竖排文字转换
writing-mode:tb-rl; 竖排版文字

用CSS设置表格和表单的样式
summary 表格注释和摘要，主要用于搜索引擎搜索，在IE中不会显示
<caption>是表格的大标题，该标记可以出现在<table>与</table>之间的任意位置，通常放在表格的第一行（<table>后面）
<th>标记在表格中用于行或列的名称,<th>中scope属性就是专门用于区分行名称和列名称，分别设置为row（行）和col（列）
如：<th scope="row"> &< th scope="col">

表格的颜色
与文字颜色设置一样，通过color设置表格中的文字颜色，通过background属性设置表格的背景颜色

表格的边框
border是最常用的属性之一，<table>标记中的border-color设置边框颜色
css设置表格的边框跟图片一样，不过在表格中需要特别注意单元格之间的关系
如：.aa{border：1px  solid  #00ff00;}  此种设置效果只是表格外部有边框样式而对里面的单元格没有效果
因此采用css设置表格边框，也需要为单元格单独设置相应的边框
如： .aa td{ border：1px  solid  #00ff00;}
此种方法设置好后边框之间有空隙，这是需要给整个表格的边框设置border-collapse边框重叠
如：.aa{border：1px  solid  #00ff00;
        border-collapse:collapse;
        }

表单
表单的标签主要包括<form>、<input>、<textarea>、<select>和<option>

设置透明文字按钮
background-color:transparent;
border:0px;  

七彩下拉菜单.blue{background-color:#7598FB; color: #000000;}
.red{background-color:#E20A0A;color: #ffffff;}< select name="color" id="color">
< option value="blue" class="blue">blue</option>
< option value="red" class="red">red</option>
< /select>

CSS设置页面和浏览器元素
a:link     一般状态下
a:visited   点击过后的状态
a:hover    鼠标指向时的状态
a:active   鼠标按下时的状态（一般很少用）

css控制鼠标的箭头是通过cursor属性来实现的，该属性可以在任何标记里使用，从而可以改变各种页面元素的鼠标效果

项目列表
1.列表的符号
通常项目列表采用<ul>或者<ol>标记，然后配以<li>标记罗列各个项目
<ul>和<ol>标记分界并不明显，只要利用list-style-type属性，二者都可以通用
disc  实心圆
circle 空心圆
square 正方形
decimal 1、2、3、4……小写阿拉伯数字
upper-alpha  A、B、C、……大写英文字母
lower-alpha  a、b、c……小写字母
upper-roman  I、II、III、IV ……大写罗马数字
lower-roman  i、ii、iii、iv……小写罗马数字
none  不显示符号

列表图片符号
可以通过list-style-image属性来设置 因此可以将list-style-type的值设置为none，然后修改<li>标记的属性background来实现  li{
     background:url(icon1.jpg) no-repeat; 背景图片不平铺
    padding-left:25px;  项目左边填充距离
    }

利用列表制作菜单
display：block（区块显示）通过该语句，超链接被设置成了块元素，当鼠标进入该块的任何部分时都会被激活

横竖菜单的转换
可以通过给<li>设置属性float：left来实现菜单横竖的转换
要注意的是DIV的宽度

滤镜
通道Alpha
opacity代表透明的等级，可选值0-100,0代表的是完全透明，100完全显示
style 指定透明区域的形状。0代表常规形状，1代表线形，2代表圆形放射状，3矩形渐变
startX和startY代表渐变的开始坐标   0-100
finishX和finishY代表结束的坐标  取值在0-100
finishopacity  这是一个可选项，用来设置结束时的透明度 0-100

模糊blur
makeshadow 设置对象的内容是否被处理为阴影
pixelradius  迷糊效果的强度  0-100
shadowopacity  设置使用makeshadow制作成阴影的透明度

运动模糊MotionBlur
add 参数有true和false两个值，用来指定是否叠加原图片
direction 用来设置模糊的方向，0代表垂直向上，每45度为一个单位，默认值是向左的270度
strength 只能使用整数，羽化的大小，默认值是5px

透明色 chroma
color=“#******”  去掉某个颜色

DIV+CSS网页布局
<div>与<span>这两个是在CSS排版的页面中常用的标记

<div>(division)可以简单的理解为一个区块容器标记，<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图片等等各种HTML元素。因此，可以把<div>与</div>中的内容视为一个独立的对象，用于CSS控制

<span>标记与<div>标记一样，<span>与</span>中间同样可以容纳各种HTML元素，从而形成一个独立的对象

<div>与<span>的区别在于，<div>是个块级元素，它包围的元素会自动换行，而<span>仅仅是个行内元素，在它的前后不会换行，当其它行内元素都不适合时，就可以使用<span>标记

通常情况下，对于页面中大的区块使用<div>标记，而<span>仅仅用于需要单独设置样式风格的元素，如一个单词、一张图片或者是一个超链接等等。

盒子模型（box模型）
一个盒子的实际高度或者宽度是由content（内容）+padding（填充）+border（边框）+margin（间距）来组成的

border（边框）style可以设为none、hidden、dotted等等。其中none和hidden都是不显示边框，二者效果完全相同。只是运用在表格中的时候，hidden可以用于解决边框冲突的问题。
对于border中style其它的值，IE和FireFOX是有区别的，如：groove、insert、outset和ridge，IE都不支持

要注意的是，给元素设置background-color背景色时,IE作用的区域为content+padding，而firefox则是content+padding+border

padding（填充）
当设置4个方向的padding时，可以将4个语句合成到一起
如：padding:10px 30px 50px 100px;

margin（间距）
当两个行内元素紧邻的时候，之间的距离为第一个元素的右边（right）加上第二个元素的左边（left）的和！

若不时行内元素，而是块元素，两个块级距离不是bottom与top的和，而是取两者中的较大者

父子关系
当一个<div>块包含在另一个<div>块中间时，便形成了父子关系，其中子块的margin将已父块的content为参考

IE与firefox在margin中，若设定了父元素的高度，如果此时子元素的高度超过了该值，二者显示的结果完全不同，IE浏览器会自动扩大，保持子元素的margin-bottom的空间以及父元素自身的padding-bottom，而firefox就不会，保证父元素的高度完全吻合设置的值，而子元素将超过父元素的范围

margin的值也可以设置为负数，当设置为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上
当块之间是父子关系时，通过设置子块的margin的参数为负数，可以使子块从父块中分离出来

元素定位方式主要包括position、float和Z-index等

float可以设置为left、right或者默认值none，当设置了元素向左或者向右浮动时，元素会向其父元素的左侧或者右侧紧靠

但两个相邻的DIV设置第一个DIV为左右浮动时，第一个DIV会遮住第二个DIV边框和背景，但不影响第二个DIV里的内容，解决此问题只需将两个DIV都设置成左浮动 在进行整个网页排版时，最下端的“脚注”部分通常就需要设置clear属性，从而就清除了正文部分各种排版对它的影响
clear属性的值有left(左)、right（右）、both（两边）

position定位方式
position就是指定块的位置，即块相对于其它块的位置和相对于它自身应该在的位置
position有4个值，分别为static、absolute、relative和fixed。
static为默认值，表示块保持原本应该在的位置，没有任何移动的效果
注意top、right、bottom和left这4个CSS属性，它们都是配合position属性使用的，表示的是块的各个边界距离页面边框（当position设置为absolute时）的距离或各个边界离原来位置（当position设置为relative）的距离，只有当position属性设置为absolute或者relative时才能生效，如果将position设置为static，则字块不会有任何变化

由于浏览器之间的差异，建议只设置left和right中的一个，以及top和bottom中一个，而对于块的高和宽，还是使用height和width来设置

在一个大的父级块元素中，有两个子块元素，当设置块1元素的属性position为absolute，并调整了它的位置，此时子块2便移动到了父块的最大端，字块1此时已不再属于父块。因此子块2便成了父块中的第一个子块，移动到了父块的最上方

当两个子块都设置position为absolute，这时两个子块都将不属于父块，都相对于页面定位

当给子块1设置position属性为relative（相对定位）时，子块1仍然属于父块，所以子块2还在原来的位置上，并没有移到父块的顶端
当同时设置两个块的position的值为relative时，块的位置是相对于它原来的位置进行了调整

当将块的position参数设置为fixed时，本质上与absolute一样，只不过设置的块不会随着浏览器的滚动条向上或向下移动。由于IE7.0与IE6.0都不支持fixed值，因此不推荐使用

z-index空间位置
z-index属性用于调整定位时重叠块的上下位置，该属性的值为整数，可以是正数也可以是负数，当块设置了position属性时，该值便可设置各块之间的重叠关系，默认的Z-index值为0，当两个块的Z-index值一样时，保持原有的覆盖关系