CSS+div.doc

一、表格练习分析：有五列，列的合并，代表行的合并，#代表数值代码：菜谱星期一菜谱素菜青草茄子花椒扁豆小葱豆腐炒白菜荤菜鱼香肉丝油焖大虾海参鲍鱼龙肝二、无序列表和有序列表1、Html列表-无序列表列表内容设定符号款式有三种，默认为type=“disc”实心圆点type=“circle”空心圆type=“square”空心正方形2、有序列表列表内容Ol（order list）称为顺序列表标记，设定数目款式其值有五种，默认为start=“1”（即从1开始，也可以从6或者其他数字开始），可以取阿拉伯数字、小写字母、大写字母、小写罗马数字、大写罗马数字。在 HTML 4.01 中，不赞成 start 属性；在 XHTML 1.0 Strict DTD 中，不支持 start 属性。请使用 CSS 代替。三、框架标记（frame）Frameset和frame总是在一起使用，cols按照列分，rows按照行分，当把两个不同的网页通过框架放入另一个网页时，body标签就得去掉，框架可以拖拽，当不允许拖拽，只要添加noresize。aaHtml和bb.html通过all.html形成框架。*代表余数。练习：分析：先把网页分为了上下两个部分，然后又分为了左右两个部分。代码：四、 表单元素Html的表单元素主要用于让用户输入数据然后并提交给服务器。基本语法：默认是get 各种元素（输入框、下拉列表、文本域、密码框。）案例：代码:用户名密 码从上面的案例可以看出：(1)表单元素的格式：Type=text(文本框) password（密码框）hidden（隐藏域）checkbox（复选框）radio（单选框）submit（提交按钮）reset（重置按钮）image（图片按钮）Name是你给该表单元素取名（2）action制定把请求交给哪个页面，post不会把密码和用户名在地址栏上写的，get却可以。一般用post。（3）按钮用图片代替：(4)用复选框时，同种类的物品最好name写成一样的。单选框也一样。例：选择男女男女(4)hidden隐藏的用处主要是，即可提交数据，同时不影响界面(5)下拉列表用select例：请选择你的出生地-请选择-为了好看并便于控制宽度常常这么写北京上海重庆（6）文本域请这里输入。（7）请选择你要上传的文件五、 课堂练习六、HTML加强1、里可以加2、语言字符集3、Charset指定编码方式七、背景色彩和文字色彩Bgcolor-背景色彩Text-非可链接文本的颜色设置Link-可链接文字的色彩Alink-正被点击的可链接文字的色彩Vlink-已经点击（访问）过的可链接文字的色彩背景图像：八、 页面空白:#代表像素值九、开一个新的浏览器窗口：Target的值包括blank（新窗口）self（本窗口）parent（父窗口）top（整个浏览器窗口），还有个十、 标尺线size控制粗细十一、 字体：标题字体只有6种,h1到h6，如果还想让字体变大只能用css来做。 字体颜色：. 客户端字体（font face）.,face定义字体样式，如华文新魏字体。十二、文字布局（1）分段标签 换行不换行（2）文字的分区（3）预格式化文本 十三、表单。若不想文本域自动换行，只需在十四、会移动的文字。，规定方向direction属性，例：十五、多媒体页面基本语法：#=URL添加背景音乐：div+css开山篇-为什么需要学习css一、 div+css简介：1. div元素是不用来为HTML文档内大块的内容提供结构和背景的元素。Css是英语层叠样式表单的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言，div是用于存放内容（文字、图片、元素）的容器。2. css是用于指定放在div中的内容如何显示，包括这些内容的位置和外观。3. 好处：使代码简化，内容和样式分离。二、基本知识Docytype：文档类型 用于指定dtd（说明当前这个html遵循什么版本）keyword用于搜索引擎，搜索时使用，keyword是关键字，搜索引擎根据搜索引擎搜索。描述网页。!-引入CSS文件案例：代码：css1.html!-栏目一属性之间用分号隔开栏目二栏目三栏目四栏目五总结：从使用span元素可以看到，css的基本语法：元素可以使html的任意元素：属性名：属性值要参考w3c给出的文档三、思考：汶川大地震，所有的网站的图片都变为黑白，怎么实现?使用滤镜技术实现的:1.css滤镜体验：imgfilter：gray； 四、选择器选择器是css中非常重要的概念。有三种不同的选择器： 类选择器，又叫class选择器： Id选择器 Html元素选择器 通配符选择器1、类选择器：调用时掉用class。代码：类选择器的基本语法：.类选择器名属性名：属性值;.2、id选择器代码：Id选择器和类选择器的重要区别就是：id选择器前面是#号，而类选择器是“.“Id选择器的基本语法：#Id选择器名属性名：属性值；在html文件中如果要引用id选择器,则:3、html的选择器Html语言标签属性名： 属性值例：BodyColor:orange表示body标签内的物体都被变为橘色。 结论：当一个元素同时被id选择器和类选择器和html选择器修饰，优先级是id类html选择器。案例：代码：五、通配符选择器 选择器深入讨论复习：css分为两种，一种为内部css（写在html文件内部的）一种为外部（新建个HTML文件）1、 通配符选择器如果希望所有的元素都符合某一种样式，可以使用通配符选择器。对外边距和内边距清0：* Margin:0px; Padding:0px;如果margin给出4个值，则表示：上，右，下，左如果margin给出3个值，则表示：上下、右、左，Padding的规范和margin一样。思考：2、 父子选择器Style2 span就是个父子选择器注意：子选择器标签必须是html可以识别的标签。父子选择器可以使类选择器也可以是id选择器，父子选择器可以有多级，父子选择器可以适用于id选择器和class选择器。如果一个元素被ID和class同时修饰时，id选择器的优先级大于类选择器。一个元素最多有一个id选择器，但是可以有多个类选择器六、选择器练习1、 行内元素：又叫内联元素；内联元素只能容纳文本或其他内联元素，常见的有,只占内容的宽度，默认不会换行。2、 块元素：一般都从新行开始，可以容纳文本，其他内联元素和其他块元素，即使内容不能沾满一行，块元素也要把整行占满，常见块元素，不管内容有多少，它要换行同时占满整个一行。可以指定宽度，它们什么时候都是另开一行。块元素可以容纳文本、行内元素和块元素。3、 块元素和行内元素的相互转换。Display：inline-转为行内元素Display:block-转为块元素DIV+CSS精通第一章 XHTML和css的核心基础一、 DOCTYPE(文档类型)：意为告诉浏览器使用哪种规范来解释这个文档中的代码。二、html和xhtml的重要区别：在XHTML中的标记名称必须小写，属性名也必须小写，必须严格嵌套，如：标记必须关闭，如：即使是空元素的标记也必须关闭，如：在XHTML中属性值用双引号括起来，在XHTML总属性值必须使用完整形式，例如：在XHTML中，应该区分“内容标记”与结构标记，如：三、HTML和css之间的关系1、html和css之间的关系就是内容和形式的关系。2、html引入css的方法：行内式：即在标记的style属性中设定css样式，这种方式本质上没有体现出css的优势，因此不推荐使用嵌入式：则将对页面中各种元素的设置集中写在和之间，对于单一的网页，这种方式很方便，但是对于一个包含许多页面的网站，如果每个页面都以内嵌方式设置各自的样式，就失去了css带来的巨大优点，因此一个网站通常都是编写一个独立的css样式表文件，使用导入式或链接式 ，引入html文档中。导入式和链接式的目的都是将一个独立的css文件引入html文件，二者的区别是：在于链接式使用html标记引入外部css文件，而使用导入式则是使用css规则引入外部css文件。使用链接式的语法：使用导入式的语法：import”mystyle.css”;使用链接方式，会在装载页面主体部分之前装载CSS文件这样显出来的网页从一开始就是带有样式效果的，而使用导入式，会在整个页面装载完才装载css文件。若要引入一个css文件，则使用链接方式，如果要引入多个css文件，则首先要用链接方式引入一个目录css文件，这个目录css文件中在使用导入式引入其他css文件，如果希望通过javascript来动态引入哪个css文件，必须使用链接方式才能实现。内嵌式代码： 引用外部文件（。Css文件）代码：使用链接式使用这个css文件，代码：三、 基本css选择器（所有HTML语言中的标记样式都是通过不同的CSS选择器进行控制）：包括标记选择器、类别选择器和ID选择器。标记选择器：用来声明哪些标记采用哪种css样式，因此，每一种html标记的名称都可以作为相应的标记选择器的名称。类选择器：例如：当页面中同时出现3 个 标记时，如果想让它们的颜色各不相同，实例代码：也可以新建个css文件，输入：.redcolor:red;font-size:18px;.greencolor:green;font-size:24px;保存，新建个html文件，输入：无标题文档importmycss.css这句的作用是调用css文件武安国武安国 在HTML文件中，还可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中。例如：ID 选择器Id选择器和class 选择器的不同之处：id选择器只能在html 页面中使用一次，因此其针对性更强。在html的标记中只需要利用id属性，就可以直接调用css的id 选择器。格式：范例一：ID选择器可以用于多个标记，即每个标记定义的id不只是css可以调用，javascript等其他脚本语言也可以调用，因为这个特性，所以不要将id选择器用于多个标记，否则出现，如果一个HTML钟有两个相同id的标记，那么将会导致javascript在查找id时出错。网站建设者在编写css代码时，应该养成良好的编写习惯，一个id最多只能赋予一个html标记。类似“id=“one two”四、 复合选择器：就是两个或多个基本选择器，通过不同方式连接而成的选择器。交集选择器：由两个选择器直接连接构成，其结果是选中2者各自元素范围的交集，其中第一个必须适合标记选择器，第二个必须是类别选择器或者id选择器，这两个选择器之间不能有空格，必须连续书写。格式：这种方式构成的选择器，将选中同时满足前后二者定义的元素，也就是前者所定义的标记类型，并且指定了后者的类别或者id的元素，因此被称为交集选择器。范例2：输出结果是：并集选择器：它的结果是同时选中各个基本选择器所选择的范围，任何形式的选择器（包括标记选择器、class类别选择器、ID选择器等）都可以作为并集选择器的一部分。并集选择器是多个选择器通过逗号连接而成的，在声明各种css选择器时，如果某些选择器的风格是完全相同的，或者部分相同，这是便可以利用并集选择器同时声明风格相同的css选择器。范例3：结果是：所有行的颜色都是紫色，而且字体大小均为15px，这种集体声明的效果与单独声明的效果完全相同，h2.special、.special和#one的声明并不影响前一个集体声明、第二行和最后两行在紫色和大小为15px的前提下使用了下划线进行突出。全局选择器对于实际网站中的一些页面，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有的标记都使用同一种css样式，但又不希望逐个来声明的情况，可以利用全局选择器“*”。范例4：（4）后代选择器在css选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行声明，例如当与之间包含标记时，就可以使用后代选择器进行相应的控制，后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分割。当标记发生嵌套时，内层的标记就成为外层标记的后代。例如：后代选择器的使用很广泛，不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套，例如：.special i color:red; /*使用了属性special的标记里面包含的 */#one lipadding-left:5px; /*ID为one的标记里面包含的 */td.top.top1 strong font-size:16px; /*多层嵌套，同样实用 */重点：选择器的嵌套在css的编写中可以大大减少对class和id的声明。因此在构建页面HTML框架时通常只给外层标记（父标记）定义class和id，内层标记（子标记）能通过嵌套表示的则利用嵌套的方式，而不需要再定义新的class或者id，只有当子标记无法利用此规则时，才单独进行声明，例如一个标记中包含多个标记，而需要对其中某个单独设置css样式时才赋给该一个单独id或者类别，而其他同样采用“ul li。”的嵌套方式来设置。后代选择器产生的影响不仅限于元素的直接后代，而且会影响到它的各级后代。在css2中，规范的制定者还规定了一种复合选择器，称为“子选择器”，也就是只对直接后代有影响的选择器，而对孙泽以及多个层的后代不产生作用。子选择器和后代选择器的语法区别是，使用大于号连接。所有的css语句都是基于各个标记之间的继承关系的。五、 css的继承所有的css语句都是基于各个标记之间的继承关系的。范例5：可以看到这个页面中，标题的前两个字使用了强调标记，在浏览器中显示为斜体。本例找重从继承的角度来考虑各个标记之间的树型关系，在这个树形关系中，处于最上端的标记称之为“根（root）”是所有标记的源头，往下层层包含，在每一个分支中，称上层标记为其下层标记的父标记，相应的，下层标记为上层标记的子标记。例：标记时标记的子标记，也是的父标记。八、css的继承运用Css继承指的是子标记会继承不标记的所有样式风格，并可以在父标记样式风格的继承上再加以修改，产生新的样式，而子标记不会影响父标记。九、css的层叠特性（可以简单地理解为“冲突”的解决方案）优先级：行内样式：它和样式所定义的内容在同一代码行内。例如：注意：计算冲突样式的优先级是一个比较复杂的过程，把握“越特殊的样式，优先级越高”。例如，行内样式仅对指定的一个元素产生影响，因此它非常特殊。第二章 “css禅意花园”作品鉴赏前言：在网站设计，特别是在css设计领域，有个世界范围都非常著名的网站-css zen garden，中文名称为“css禅意花园”这个网站以最有效、最优美的方式展示了css的最高境界。Css禅意花园是一位加拿大设计师Dave Shea创建的，2003建立。一、 郊野-两列布局二、像素画-三列布局三列布局通常一个宽列放置主要内容，两个窄列放置导航连接等内容。三、百合池塘-三列布局变体四、郁金香-多列布局五、日与夜-包含圆角的设计十二、 si6-包含倾斜的设计十三、 清茶时光-装饰性设计十四、 爱之空气-流体布局十五、 谷香-食品主题设计十一、城市-建筑主题十二、收音机-特色效果十三、杀手效果-特色效果第三章 深入理解盒子模型前言：盒子模型是css控制页面时一个很重要的概念，所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间，可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小，一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解。一是理解一个孤立的盒子的内部结构，二是理解多个盒子之间的相互关系。一、 盒子的内部结构在css中，一个独立的盒子模型由content（内容）、border（边框）、padding（内边距）和margin（外边距）4个部分组成。注意：并不仅仅是用div定义的网页元素才是一个盒子，事实上所有的网页元素本质上都是以盒子的形式存在的，在人的眼中，一个网页上有各种内容，包括文本、图像等，而在浏览器看来，就是许多盒子排列在一起或者相互嵌套。二、边框（border ）Border的外围即为元素的最外围。Border的属性主要有3个，分别是color、width（粗细）、style（样式）。在使用css设置边框的时候，可以分别使用border-color、border-width、border-style设置他们。实验1：注意：IE浏览器不支持border-style效果，在实际制作网页时，不推荐使用。三、属性值的简写形式1、在上节中，分别设置了border-color、border-width和border-style3个属性，其效果是对上下左右4个边框同时产生作用，在实际使用css中，除了采用这种方式，还可以分别对4条边框设置不同的属性值。2、还可以单独对某一条边框在一条CSS规则中设置属性，例如： Border ：2px green dashed Border-left ：1px red solid第一行表示将4条边框设置为2像素的绿色虚线，第二行表示将左边框为1像素的红色实线。这样，就不需要使用4条css规则分别设置4条边框的样式了，仅使用2条规则即可。对一条边框设置与其他边框不同的属性通过缩写形式可以灵活的设置各种边框，而如果要单独地设置某一条边框的某一个属性，例如要设置左边框的颜色为红色，可以写作：Border-left-color ：red注意：当有多条规则作用于同一个边框时，会产生冲突，后面的设置会覆盖前面的设置。实验2 ：对照缩写规则，分析结果。四、内边距（p adding ）用于控制内容和边框之间的距离，同前面的边框类似，padding属性也可以设置1、2、3、或4个属性值，注意：当一个盒子设置了背景图像后，默认情况下背景图像覆盖的范围是padding和内容组成的范围，并以padding的左上角为基准点平铺背景图像。五、外边距（m ar gin ）Margin指的是元素与元素之间的距离。可以看到边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器窗口的边框。注意：body是一个特殊的盒子，它的背景色会延伸到margin的部分，而其他盒子的背景色只会覆盖“padding+内容”部分（IE浏览器中），或者“border+padding+内容”部分。margin属性值的设置方法和padding一样，也可以设置不同的数值个数。从直观上而言，margin用于控制块与块之间的距离，倘若将盒子模型比作展览馆里展出的一幅幅画，那么content就是画面本身，padding就是画面与画框之间的留白，border就是画框，而margin就是画与画之间的距离。五、盒子之间的关系Css规范的思路是，首先确定一种标准的排版模式，这样可以保证设置的简单化。六、HTML 与DOM1、DOM的概念：document object model的缩写，级文档对象模型，一个网页的所有元素组织在一起，就构成了一棵“DOM树”。2、css的目的是使网页的表现形式和内容结构分离，css控制网页的表现形式，html控制网页的内容结构。七、标准文档流1、标准文档流：简称“标准流”，就是指在不使用其他的排列和定位相关的特殊css规则时，各种元素的排列规则，就是按照顺序排列下来的。非标准流：在实际编程中，我们可能需要非标准流的布局（让某个元素脱离它本身的位置）。2、块级元素（block level）它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。例如：在列表中，li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。Ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。4、 行内元素（inline）对于文字这类元素，各个字母指甲横向排列，到最右端自动这行，这就是另一种元素，称为行内元素。比如，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。再比如，最常用标记，也是一个行内元素，行内元素在DOM树中同样是一个节点，从DOM的角度来看，块级元素和行内元素师没有区别的，都是树上的一个节点；而从css的角度来看，二者有很大的区别，块级元素拥有自己的区域而行内元素则没有。标准流就是css规定的默认的块级元素和行内元素的排列方式。思考：作为一个浏览器开发者，如何放置这些内容？八、标记和标记1、标记，块标记，可以容纳段落、标题、表格、图片乃至章节、备注摘要等各种html元素。可以把中的内容视为一个独立的对象，用于css的控制。声明时只要对进行相应的控制，其中的各标记元素都会随之改变。2、标记同一样，都是作为容器标记而被广泛应用在HTML语言中，和这两个标记起到的作用都是独立出各个区块，在这个意义上说二者没有不同，区别在于，是一个块级元素，它所包围的元素会自动换行，而仅仅是一个行内元素，在它的前后不会换行。没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可以使用元素。标记可以包含于标记中，成为它的子元素，而反过来则不成立。九、盒子在标准流中的定位元素。如果要精确的控制盒子的位置，就必须对margin有更深入地了解，padding只存在盒子的内部，所以通常它不会涉及与其他盒子之间的关系和相互影响的问题。Margin则用于调整不同的盒子之间的位置关系。范例1 ：行内元素的水平距离两个行内元素紧邻时，他们之间的距离为第一个元素的margin-right加上第二个元素的margin-left 。例如：范例2 ：块级元素之间的竖直margin通过范例1可以了解行内元素的情况，但如果不是行内元素，而是竖直排列的块级元素，情况就会有所不同，两个块级元素之间的距离不是margin-bottom和margin-top的总和，而是两者中的较大者，这个现象称为margin的塌陷现象，意思是说较小的margin塌陷到了较大的margin中。注意: margin-top 和margin-bottom的这些特点在实际制作网页时要特别的注意，否则常常会被增加了margin-top或者margin-bottom值时发现块“没有移动”的假象所迷惑。范例3 ：嵌套盒子之间的margin除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种位置关系，它的margin值对css排版也有重要的作用，这就是父子关系，当一个块包含在另一个块中时，便形成了典型的父子关系。当一个块包含在另一个块中时，便形成了典型的父子关系。其中子块的margin将以父块的content为参考。范例3 ：将margin 设置为负值当margin设为负数时，会使被设为负数的快向相反的方向移动，甚至覆盖在另外的块上。十、css 中的几何体思考：假设有个网页，现在要读者精确的回答出从字母a 到x 对应的宽度是多少个像素.小结：盒子模型是css控制页面的基础，应该理解DOM的基本概念，以及DOM树是如何与一个HTML文档对应的，在此基础上充分理解标准流的概念，只有先明白在标准流中盒子的布局行为，才能更容易的学习浮动和定位。第四章 盒子的浮动和定位一、 盒子的浮动在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。使用浮动方式后，块级元素的表现就会有所不同。Css中有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，和字的宽度不再伸展，而是根据盒子里面的内容的宽度来确定。二、准备代码三、设置第1 个浮动的d iv在上面的代码中找到.son1/*这里设置son1的浮动方式 */将。Son1盒子设置为向左浮动，代码为：.son1float：left；思考：网站中的居中怎么做？只需加：margin:0 auto;0代表上、下边距为0，auto代表左右居中的，盒子的运用：.s1Width:50px;Hight:52px;Border:1px solid blue;Margin-top:10px;Margin-top:5px;Padding要小心使用，会撑大。盒子模型的原理：细节说明：1. 在HTML里，每一个元素都可以看做一个盒子2. 盒子模型的参照物不一样则使用的css属性不一样，如：从div1的角度看可能margin-right，从div2看，则是margin-left。3. 如果不想破坏整个外观，则尽量使用margin来布局。Margin过大会出现把盒子的内容被挤出去。思考：新建个css文件，.div1Width:500px;Height:300px；Border:1px solid #b4b4b4;在html文件中：Div1运用无序列表做图片的控制。四、浮动浮动是css中很重要的概念，浮动涉及到左浮动、右浮动、清除浮动。浮动必要性，因为默认情况下，div是纵向排列，如果希望1div向右面显示，这时我们使用右浮动（float：right;），若希望所有的元素都横向排列，则使用到左浮动，这时，对div的css添加：float：left。特别注意：如果一行宽度，不够排下所有的元素，则会自动换行，还有种情况，如果还有某个div过大，则会卡住别的div。例子：请在页面中放置三个d iv，背景是粉红，宽度150px，高100px，边框1px，蓝色，实线。使d iv1向右浮动，d iv2顶替d iv1.右浮动：指的是让该元素，尽量向右边移动，直到碰到右边界。代码：浮动div1div2div3左浮动：是指让该元素，尽量向左边移动，让出自己右边空间，给下一个元素显示。如果我们的div框很多，外面的框无法容纳水平排列的浮动div元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：如下图：浏览器认为可能有个物体顶住了，所以下一个元素只能再往后。代码：浮动div1div2div3总之：代码：如果嫌字挨得太紧，就可以使用margin-right：5px：浮动-清除浮动：如果不希望别的元素在某个元素的左边或右边，可以使用清除浮动的方法clear：right；clear：left；clear：both；二、定位-基本概念Css定位（positioning）属性允许你对元素进行定位，p