css+div基础知识
CSS+DIV入门教程PPT_2010更新版
CSS属性
CSS样式表
18
字体属性
Font-family:指定文字的字体 – H1{font-family:华文彩云} Font-style：指定文字是否加粗或使用斜体。取值： normal（正常）、oblique（偏斜体）、italic（斜体） Font-size：指定文字的大小。 Font：上述样式属性的综合表示法。 – P{font: bold 16pt}
14
二、CSS与HTML文档的结合方法
外联样式：使用<link>标记符链接到外部的样式文件， 凡链接的网页都起作用
– 1、定义外部样式文件，用记事本或者 Dreamweaver，编辑完后文件扩展名应为”.css”；
– 2、建立HTML网页文档； – 3、在网页文档中使用<link>标签将前面的样式表 文档链接到网页中。
– Border-style
CSS样式表
22
分级属性
List-style-type：指定项目符号或编号 – 允许值：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none List-style-image：指定项目符号的图形文件名称， 值为url或none
CSS样式表
20
文本属性
Text-decoration：设置底线、顶线、闪烁等文字效果。 值为none,underline,overline,line-through,blink.
Text-align：指定文字的对齐方式。值为： left,right,center,justify
CSS样式表
第4章_理解CSS+DIV网页样式与布局
3
4.1 div标记与span标记
10-1.html
4
4.1 div标记与span标记
DIV与span的区别 与 的区别
10-2.html
5
4.1 div标记与span标记
div与span的区别在于，div是一个块级 与 的区别在于， 是一个块级 是一个块级(block-level)元素，它包围的元素会自动换行， 元素， 的区别在于 元素 它包围的元素会自动换行， 仅仅是个行内元素(inline elements),不会换行。span没有结构上的意义，当其 不会换行。 没有结构上的意义， 而span仅仅是个行内元素 仅仅是个行内元素 不会换行 没有结构上的意义 不合适的时候可以换上他，同时div可以是包含 可以是包含span的反之则不行。 的反之则不行。 他元素都 不合适的时候可以换上他，同时 可以是包含 的反之则不行
6
4.2 盒子模型的概念
所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 一般来说这些被占据的空间往往都要比单纯的内容要大。 一般来说这些被占据的空间往往都要比单纯的内容要大。
7
4.2 盒子模型的概念
一个盒子模型由content(内容 、border(边框 、padding(间隙 、 内容)、 边框)、 间隙)、 一个盒子模型由 内容 边框 间隙 间隙)这四部分组成 和margin(间隙 这四部分组成。 间隙 这四部分组成。 一个盒子的实际宽度是有content+padding+border+margin组成的。 组成的。 一个盒子的实际宽度是有 组成的 中可以通过width和height来控制 来控制content的大小，并且对于任何 的大小， 在CSS中可以通过 中可以通过 和 来控制 的大小 一个盒子都可以设置四条边各自的border、padding和margin。只要利用好 一个盒子都可以设置四条边各自的 、 和 。 盒子的这些属性，就能够实现各种各样的排版效果。 盒子的这些属性，就能够实现各种各样的排版效果。
cssdiv标记
一、<div>标记<div>简单而言是一个区块容器标记，即<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图片、乃至章节、摘要和备注等各种XHTML元素。
因些，可以把<div>与</div>中的内容视为一个独立的对象，用于CSS的控制。
声明时只需要对<div>进行相应的控制，其中的各种标记元素都会因些而改变<div>标记与<span>标记<div>与<span>的区别在于，<div>是一个块级元素，它包围的元素会自动换行。
而<span>仅仅是一个行内元素，在它的前后不会换行。
<span>有没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可以使用<span>元素。
此外，<span>标记可以包含于<div>标记之中，成为它的子元素，而反过来则不成立，即<span>标记不能包含<div>标记通常情况下，对于页面中大的区块使用<div>标记，而<span>标记仅仅用于需要单独设置样式风格的小元素，例如一个单词、一幅图片和一个超链接等。
二、元素的定位：floatfloat定位是CSS排版中非常重要的手段，在前面章节中已经有所提及。
属性float的值很简单，可以设置为left、right、或者默认值none。
当设置了元素向左或者向右浮动时，元素会向其父元素的左侧或右侧靠紧。
清除float的影响clear:left 清除float对左侧的影响clear:right 清除float对右侧的影响clear:both 清除float对两侧的影响在进行整个网页排版时，最下端的“脚注”部分通常就需要设置clear属性，从而消除正文部分各种排版方法对它的影响三、元素的定位：position定位position定位与float一样，也是CSS排版中非常重要的概念。
第10章 理解CSS定位与div布局
CSS+DIV
3. 元素的定位
7. z-index空间位置，用于调整定位时重叠块 的上下位置（实例：10-28.html）
CSS+DIV
CSS+DIV
4. 定位实例
1.轻轻松松给图片签名（实例：10-29.html） 2.文字阴影效果（实例：10-30.html）
CSS+DIV
2. 盒子模型
CSS+DIV
2. 盒子模型 2.Border 小知识：border会占据空间，所有在技术精细的 版面时，一定要把 border的影响考虑进去。 border的属性主要有个： （1）color边框的颜色 （2）width边框的粗细 （3）style边框的样式 实例：10-3.html 如果要设置某一个边框则使用border-bottom （left、right、top）来完成 实例：10-4.html
3. 元素的定位
3. Position定位，即相对于其父块的位置和相对于它自身应 该在的位置。 position属性一共有4个值：static（默认值：它表示块保持 在原来应该在的位置上，即该值没有任何移动效果。）、 absolute（觉得定位）、relative（相对定位）和fixed（固 定定位）。 4. position:absolute绝对定位（相对页面来说的）（实例： 10-20.html）说明：块的位置和父块无关，和页面有关。 P247技术背景。 小知识：top、right、bottom、left这4个属性不但可以设置 为绝对的像素，还可以设置百分数。（实例：10-21.html） 当窗口大小，发生改变的时候。。。 小知识：top和bottom属性发生冲突（实例：10-22.html） P249经验之谈
我学习DIV+CSS
e/ne/nw/n-resize 鼠标大小 text 文字鼠标 wait 等待鼠标 help 求助鼠标 progress 过程鼠标
三、通过CSS定义图片的样式
六、CSS滤镜的应用(一般情况下用不着，在PS中处理成图片就可以了)
filter:filtername(parameters)
alpha 设置透明(enabled 是否激活 opacity finishOpacity startX startY finishX finishY)
blur 设置模糊效果(makeshadow pixelradius shadowopacity )
a:link 未被访问前的样式属性 a:hover 鼠标悬停时的样式属性 a:active 被激活的属性 a:visited 已经被访问过的样式属性
margin 外边距
padding 内边距
border 和外边框有关的效果
background-color 设置背景的颜色
font-size字体大小
line-height行高
text-decoration文本修饰(underline 下划线 overline 顶划线 line-through 删除线 blink 文本闪烁)
letter-spacing字间距
text-align对齐方式(只可以作用于p blockquqte ul h1 h6标识符里面)
glow 为对象的外边界增加光效(enabled color strength)
wave 设置对象的波纹效果(enabled add freq lightStrength phase strength)
第8章DIV+CSS布局入门
机械工业出版社
8.1 认识div
8.1.2 使用div标签
1．插入div标签 2．div的嵌套
机械工业出版社
8.2 AP元素
8.2.1 AP元素与AP Div元素
1．AP元素 2．AP Div元素
机械工业出版社
8.2 AP元素
8.2.2 使用AP Div
1．插入AP Div 2．连续绘制多个AP Div 3．创建嵌套的AP Div
机械工业出版社
8.2 AP元素
8.2.3 AP Div的属性设置与相关操作
1．AP Div的属性面板
2．改变AP Div的堆叠顺序 3．调整AP Div的大小
机械工业出版社
8.3 CSS盒模型
8.3.1 什么是盒模型
盒模型将页面中的每个元素看做一个矩形框，这个框由元素的内容、 内边距（padding）、边框（border）和外边距（margin）组成。
机械工业出版社
8.3 CSS盒模型
8.3.4 外边距的叠加
1．两个元素垂直相遇时叠加 2．两个元素包含时叠加
机械工业出版社
8.4 CSS的定位
8.4.1 静态定位（position:static;）
静态定位是position属性的默认值，即该元素出现在文档的常规位置， 不会重新定位。
机械工业出版社
利用CSS样式布局页面结构时，浮动（float）是使用率较高的一种定位 方式。当某个元素被赋予浮动属性后，该元素便脱离文档流向左或向右移动， 直到它的外边缘碰到包含框或另一个浮动框的边框为止。
机械工业出版社
8.5 浮动与清除浮动
8.5.2 清除浮动（clear）
在CSS样式中，浮动与清除浮动是相互对立的，使用清除浮动不仅能够 解决页面错位的现象，还能解决子级元素浮动导致父级元素背景无法自适应 子级元素高度的问题。清除浮动主要利用的是clear属性中的both（左右两侧 均不允许浮动元素）、left（左侧不允许浮动元素）和right（右侧不允许浮动 元素）3个属性值清除由浮动产生的效果。
Div+CSS基础代码网页布局+实例教程
Div+css一，什么是CSSCSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。
二．DIV+CSS简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。
首先认识DIV 是用于搭建html网页结构（框架）标签，像<b>、<h1>、<span>等html标签一样，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。
表格以前html直接设置高度width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。
例子：<table><tr><td height="100">我的高度为100px</td></tr><tr><td height="50">我高度为50px</td></tr></table>分别设置了高度为100px和50px的两行表格DIV的布局方法CSS 代码.yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;}Html body内代码：<div class="yangshi">演示，内容测试内容高度超出演示实例，divcss5实例</div>完整CSS html最小高度实例代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS 高度实例</title><style>.yangshi{ min-height:50px; _height:50px;width:150px;border:1px solid #666;}</style></head><body><div class="yangshi">演示，内容测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例，实例</div></body></html>CSS 宽度传统Html 宽度属性单词：width 如width="300";CSS 宽度属性单词：width 如width:300px;HTML宽度与DIV+CSS对比1、传统html中宽度width="300"，即设置对应元素宽度为300px（像素）。
十天学会DIV CSS
第一天XHTML CSS基础知识欢迎大家学习《十天学会web标准》，也就是我们常说的DIV+CSS。
不过这里的D IV+CSS是一种错误的叫法，建议大家还是称之为web标准。
学习本系列教程需有一定html和css基础，也就是指您之前做过网页，会用表格布局。
如果您刚开始学习网页制作，不知道什么是表格布局及html和css，建议您先去充电，否则学习本教程会非常吃力或者根本就听不懂。
由于时间关系，本教程只讲解一些基础知识，让您从原来的表格布局跨入到web标准（div+css）布局，会使用web标准制作出常见的页面，这也达到了本教程的目的。
本教程多以实例形式循序渐进讲解，实例涉及到哪些关键点或难点就讲解什么，较少讲解概念。
因为概念这些东西很难说明白，或者说明白你也不一定能听懂，听懂了也不一定能理解。
所以把概念留给大家以后再深入研究。
由于章节关系，没有把css和css hack单独分出，只是在用到的时候穿插入讲解了。
html基础和css基础只在第一节中介绍了几点重要的。
下面我们开始第一天的学习一、xhtml css基础知识首先说一下我们这节课的知识点1.文档类型2.语言编码3.html标签4.css样式5.css优先级6.css盒模型组成1）文档类型当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or g/TR/xhtml1/DTD/xhtml1-transitional.dtd">这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHT ML的语法。