韩顺平 轻松搞定网页设计DIV、CSS学习笔记.doc

韩顺平Div、css的讲解Div元素是用来为html文档内大块的内容提供结构和背景的元素。CSS是英语cascading style sehhts的缩写（层叠样式表），他是一种用来表现HTML或XML等文件式样的计算机语言。Div+css是网站标准中常用的术语之一。理解：1、Div是用来存放内容（文字，图片等其他元素）的容器( 元素)。2、Css用于说明DIV中的图片，文字或其他元素的样式（大小，颜色，背景，位置等）。 好处：1、html文件就会减少大量的table、tr、td，html变简单。2、内容和样式分离。3、符合搜索引擎的喜好。（SE0网页优化设计师）4、节约带宽。快速体验div+css ：小案例Html文件：123456Css文件：.style1width:300px;height:200px;border:1px solid red;margin:0px 0px 0px 20px;.style1 tablewidth:298px;border:1px solid green;.style1 table tdborder:1px solid yellow;Div+Css的发展三个历史时期：Table-table+css-div+css Css的必要性案例使用元素，ide工具开发（myeclipe）栏目二从使用span元素我们可以看出，css的基本语法元素可以是html的任意元素；属性名和属性值要参考帮助文档，w3c代码：栏目一栏目二栏目三栏目四栏目五使用css可以统一我们网站的风格。Css的分类：内部css和外部css案例一：Css1.html!-.style1 font: 30px;color: green;font-weight: bold;font-style: normal;text-decoration: underline;栏目一栏目二栏目三栏目四栏目五苹果苹果苹果苹果苹果苹果西瓜西瓜西瓜西瓜西瓜西瓜香蕉香蕉香蕉香蕉香蕉香蕉花生花生花生花生花生花生统一了样式案例二Css滤镜的使用目的：1图片变成灰色，2、鼠标悬停恢复彩色1、 原图彩色2、 使用滤镜后，灰色3、 鼠标悬停代码： test1l.html !-/*使用滤镜 */a:link img filter:gray;a:hover img filter:; Css的三种选择器1、 类选择器2、 Id选择器3、 Html元素选择器4、 通配符选择器选择器就是在css中创建，而在网页页面（html，jsp，.）中使用类选择器 基本语法：.类选择器名属性名：属性值；1. 类选择器实例：HTML文件： xuanzeqi.html 新闻一 新闻二 新闻三 新闻四 新闻五 CSS文件：/*.style1 就是类选择器*/.style1font-weight: bold;font-size:20px;background-color: pink;ID选择器 基本用法：#id选择器名属性名：属性值；实例：HTML文件这是一个非常重要的新闻！.CSS文件：/*#style2 就是一个id选择器*/#style2font-size: 30px;background-color: silver;在html文件中如果要引用id选择器，则：内容HTML选择器 基本语法：Html元素名属性名：属性值；实例：代码：HTML文件： 你好北京！ 新闻一 新闻二 新闻三 新闻四 新闻五 这是一个非常重要的新闻！ CSS文件：/*.style1 就是类选择器*/.style1color:black;font-weight: bold;font-size:20px;background-color: pink;/*#style2 就是id选择器*/#style2font-size: 30px;background-color: silver;color:black;/*body 就是html选择器*/bodycolor: orange; 结论：当一个元素被id选择器，类选择器，html选择器同时修饰，则优先级为：ID 类 HTML课堂案例：我们希望所有的超链接：1、 默认样式是黑色，24px，没有下划线，2、 当鼠标移动到超链接时，自动出现下划线，3、 点击后，超链接变成红色。代码：HTML文件：链接到搜狐链接到新浪 CSS文件：a:linkcolor=black;font-size: 24px;text-decoration: none;a:hovertext-decoration: underline;a:VISITED color: red; 通配符选择器如果希望所有的元素都符合某一种样式，则可以使用通配符选择器 通配符基本语法：* Margin:0; padding:0 可以让所有的html元素的外边距和内边距都默认为0，有时候特别有用。实例：CSS文件代码：/*使用通配符选择器，作用是将外边距和内边距清0*/* /*Margin:0px; */*margin-top: 10px;margin-left: 10px;margin-right: 0px;margin-bottom: 0px;*/margin:10px 0px 0px 10px;/*如果提供四个值，则这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：上-右-下-左 */margin:10px 0px 0px;/*如果只提供三个值，则第一个值则为上，第二个用于左右，第三个用于下 */margin:10px 15px;/*如果只提供两个值，则第一个值作用于上下，第二个用于左右 */margin：10px;/*如果只提供一个值，则作用于四边*/padding:0px;/*padding 规范与margin一样*/选择器的深入讨论：1、 父子选择器案例：使得“非常重要”四个字为红色斜体。方案：1、id选择器；2、CLASS选择器；3、父子选择器。代码：HTML文件：这是一个非常重要的新闻！CSS文件：/*#style2 就是id选择器*/#style2font-size: 30px;background-color: silver;color:black;/*父子选择器*/#style2 spanfont-style: italic;color:red; 强调：1、子此处的标签（此处的span），必须为html可识别的；2、2、父子选择器可以向下继续扩展，可以有多级的。3、父子选择器可以适用于：ID选择器和类选择器。2、要求：“新闻一”红色，斜体HTML 文件：新闻一 新闻二CSS文件：#specialfont-style: italic;color:red;结论：如果一个元素被ID和Class同时修饰时，则ID选择器的优先级大于Class3、 一个元素最多有一个ID选择器， 但是可以有多个类选择器。实例需求：希望“新闻三”是下划线，斜体。思路：1、新闻三是用id选择器。2、再指定一个类选择器。HTML 文件： 新闻三CSS文件：/*.style1 就是类选择器*/.style1color:black;font-weight: bold;font-size:20px;background-color: pink;.style4font-style: italic;text-decoration: underline;结论：HTML文件作用如何是用多个class类选择器：说明：再引用多个class选择器是，用空格隔开；当class选择器发生冲突时，以在css文件中，最后出现的class选择器样式为主。4、 优先级别ID 类 HTML5、 在css文件中，如果有多个类选择器，ID选择器，html选择器，我们可以把他们共同的部分，写在一起，这样的好处是，可以简化css文件。实例：My.css文件：/*招生广告*/.ad_stuwidth: 136px;height:196px;background-color: #FC7E8C;margin: 5px 0 0 5px;float:left;/*广告2*/.ad_2width: 457px;height:196px;background-color: #FC7574;margin: 5px 0 0 6px;float:left;/*房地产guanggao*/.ad_housewidth: 452px;height:196px;background-color: #FC7574;margin: 5px 0 0 6px;float:left;他们的height和float属性值是一样的，则我们可以将共同的部分写在一起：/*招生广告*/.ad_stuwidth: 136px;background-color: #FC7E8C;margin: 5px 0 0 5px;/*广告2*/.ad_2width: 457px;background-color: #FC7574;margin: 5px 0 0 6px;/*房地产guanggao*/.ad_housewidth: 452px;background-color: #FC7574;margin: 5px 0 0 6px;.ad_stu,.ad_2,.ad_househeight:196px;float:left;强调：共同的部分，类选择器名称间必须用，（逗号）隔开。练习1：请使用适当的选择器，完成下面的页面。HTML文件： 梁山英雄排行榜 宋江 卢员外 吴用 豹子头 大刀关胜 CSS文件：.style1color:orange;.style2background-color: gray;font-weight: bold;#style3color: red;#style4text-decoration: underline;font-style: italic;练习2：网页所有的超链接，要求这样的格式：1、 默认样式为红色，24px，华文新魏字体，没有下划线2、 当鼠标移动到超链接时，自动出现下划线，字体大小变成40px，字体变成宋体3、 点击后，超链接变成灰色。使用HTML选择器HTML文件： 超链接1 超链接2 超链接3 超链接4 超链接5 超链接6 CSS文件：a:linkcolor: red;font-size: 24px;font-family: 华文新魏;text-decoration: none;a:hovercolor:green;font-size: 40px;text-decoration: underline;a:VISITED color: gray;块元素和行内元素行内元素（inline exement）又叫内联元素内联元素只能容纳文本或者其他内联元素（浏览器和版本决定），常见的内联元素、等块元素（block element）块元素一般都从新行开始，可以容纳文斌，其他内联元素和其它块元素，即使内容不能占满一行，块元素也要把整行占满，常见块元素、特点：行内元素：只占内容的宽度，默认不换行。块元素：不管内容有多少，他要换行，同时占满整行。代码：HTML文件： hello word! Span1 hello word! Span1 hello word! Span1 div1 div2 div3 span ppp CSS文件：.style1background-color:blue;.style2background-color: gray;width: 100px;.style3background-color: orange;块元素和行内元素的区别1、 行内元素之占内容的宽度，块元素不管内容有多少都要占全行2、 行内元素只能容纳文本和其他行内元素，块元素可以容纳文本，行内元素和块元素（与浏览器类版本和类型有关）。3、 一些CSS属性对行内元素不生效，比如：margin ,left,right,width,height,建议尽可能使用块元素定位（与浏览器类版本和类型有关）。 块元素和行内元素是可以相互转换行内元素转换为块元素1、 方法一：hello word! Span12、方法二：.style1background-color:blue;display: block;/*所有引用了style1的元素，都按照块元素显示*/块元素转换行内元素1、 方法一： div32、 2、方法二：.style2background-color: gray;width: 100px;display: inline;/*所有引用了style2的元素，都按照行内元素显示*/CSS核心内容-流流：在现实生活总就是流水，在网页设计中就是指元素（标签）的排列方式。标准流：元素在网页中就像流水，写在前面的元素（标签）内容前面出现，写在后面的元素（标签）内容后面出现。非标准流：当某个元素（标签）脱离了标准流【比如：因为相对定位】排列，我们统称为非标准流。CSS核心内容-盒子模型要搞清盒子模型，必须先明白一下概念：盒子模型的理解：我们可以盒子模型转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所有我们叫它盒子模型。那么内容就是盒子里装的东西；二填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其他抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候不能全部堆在一起，药流一定的空隙保持通风，同时也为了方便取出。与现实生活中盒子不同的是，现实中的东西一般不能大于盒子，否则盒子会被撑破，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。盒子模型的原理分析图：细节说明：1、 在html网页中，每个元素都是一个元素；2、 Padding，margin是要看盒子模型的参照物，参照物不一样，则使用的css属性不一样。比如从DIV1的角度看，是margin-right，从DIV2的角度看则是margin-left。从img的角度看margin-top，从DIV2的角度看为padding-top。3、 如果你不想破坏外观，则尽量使用margin来布局，因为padding可能会改变盒子的大小（相当于这个盒子有弹性）。Margin如果过大，则盒子里的内容被挤出盒子外，但是盒子本身没有变化。详细图：实例：代码：HTML文件： box1.html CSS文件：bodyborder:2px red solid;/*这里我们给body指定了boder的颜色 样式 宽度，顺序可以随意调整*/width:1000px;height: 1600px;margin:0 auto;/*0表示上下边距为0，auto表示左右居中*/.style1width:100px;height:100px;border: 1px solid blue;margin-top: 10px;margin-left: 100px;/*padding-top:10px;padding-left:10px;*/border-top: red 1px solid;.style1 imgmargin-left:10px;margin-top:10px;width:80px;height:80px练习：盒子模型的综合案例（可以当做一个模板使用）实例：代码：HTML文件： box2 CSS文件：/*用于控制图片显示的位置*/.style1border: 1px solid #b4b4b4;width: 500px;height:300px;margin-left: 100px;margin-top: 20px;bodymargin:0px;padding:0px;/*用于显示图片区域的宽度和高度*/.faceulwidth:405px;height: 260px;border: 1px solid red;list-style-type: none;/*序列前不要标记*/padding:0px;margin-left: 20px;.faceul liwidth:50px;height:50px;border:1px solid blue;float: left;/*左浮动*/margin-left: 5px;margin-top: 5px;.faceul imgwidth:40px;heigth:40px;margin-left: 5px;margin-top: 5px;思考：要在每张图片下面写出名字和超链接该如何去做？代码：HTML文件： 小龙女 杨  过 CSS文件：在上面的css文件中添加如下代码：.faceul imgwidth:40px;heigth:40px;margin-left: 5px;margin-top: 5px;margin-bottom: 3px;.faceul afont-size: 10pt;margin-left: 5px;margin-top: 10px;a:linktext-decoration: none;color:black;a:hovertext-decoration: underline;color:blue;练习：完成以下实例：代码：HTML文件： youku.html 优酷牛人更多牛人 小龙女 小龙女 小龙女 优酷牛人更多牛人 小龙女 小龙女 小龙女 优酷牛人更多牛人 小龙女 小龙女 小龙女 CSS文件：bodymargin:0 auto;width:1000px;height:1000px;border: 1px solid blue;font-size: 12px;.div1width:268px;height:385px;border:1px solid gray;.span1/*background: pink;*/display: block;margin:5px 0 0 8px;.span1 afloat: right;margin-right: 8px;margin-top: 5px;.faceulpadding:0px;width:350px;height:78px;/*background-color: silver;*/list-style-type: none;.faceul lifloat: left;width: 80px;height:90px;/*background-color: blue;*/margin:0 0 5px 7px;text-align: center;/*表示放在该元素的其他元素会左右居中*/.faceul imgweidth:70px;height:70px;margin-bottom: 4px;.faceul adisplay: block;/*定义几个常用的字体*/.font1font-weight: bold;font-size: 18px;/*定义几组超链接的样式*/a:linktext-decoration: none;a:hovertext-decoration: underline;color:green;CSS核心内容-浮动浮动是CSS中很重要的概念，必须掌握，浮动涉及到左浮动，右浮动，清除浮动。例子：（默认div是纵向排列）请在页面中放置三个div，背景是粉红色，宽度150px，高度100px，边框1px，蓝色，实线。这样的例子用我们之前学习的知识不难做出：代码：HTML文件： div1 div2 div3 CSS文件：bodywidth:500px;height:1000px;margin:0 auto;border:1px solid red;margin-top:10px;.div1width:150px;height:100px;border:1px solid blue;background-color: pink;margin-top:5px;margin-left:5px;如果我们要实现如下图例，就可以使用右浮动，当把div1向右浮动是，他脱离标准流并且想右移动，直到它的右边界碰到包含框的右边缘。代码：HTML文件： div1 div2 div3 CSS文件：bodywidth: 500px;height:1000px;margin:0 auto;border:1px solid red;margin-top:10px;.div1width:150px;height:100px;border:1px solid blue;background-color: pink;margin-top:5px;margin-left:5px;#div2float: right;/*右浮动是指让该元素尽量向右移动，知道碰到它的父元素的边界*/如果我们想让三个div显示在一行：如图：代码：HTML文件： div1 div2 div3 CSS文件：bodywidth:500px;height:1000px;margin:0 auto;border:1px solid re