韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记.doc

上传人：仙人指路1688

文档编号：2881461

上传时间：2023-03-01

格式：DOC

页数：33

大小：92KB

《韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记.doc》由会员分享，可在线阅读，更多相关《韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记.doc（33页珍藏版）》请在三一办公上搜索。

1、Div+css的讲解Div元素是用来为html文档内大块的内容提供结构和背景的元素。 CSS是英语cascading style sehhts的缩写（层叠样式表），他是一种用来表现HTML或XML等文件式样的计算机语言。Div+css是网站标准中常用的术语之一。理解：1、Div是用来存放内容（文字，图片等其他元素）的容器( 元素)。2、Css用于说明DIV中的图片，文字或其他元素的样式（大小，颜色，背景，位置等）。好处：1、html文件就会减少大量的table、tr、td，html变简单。2、solid green;.style1 table tdborder:1px solid yell

2、ow; Div+Css的发展三个历史时期： Table->table+css->div+css Css的必要性案例使用元素，ide工具开发（myeclipe） 栏目二 从使用span元素我们可以看出，css的基本语法<元素名 style=”属性名：属性值；属性名2：属性值2；”/>元素可以是html的任意元素；属性名和属性值要参考帮助文档，w3c代码：<

3、;body> 栏目一 栏目二 栏目三 <spa

4、n style="font-size:20px; color:green;font-weight:lighter;">栏目四栏目五 </body>使用css可以统一我们网站的风格。Css的分类：-><!- 引入 -><style type="text/css">

5、;.style1 </style></head> <body> /> 栏目一 栏目二<br font: 30px; color: green; font-weight: bold; font-style: norma

6、l; text-decoration: underline; 栏目三 栏目四栏目五<!- 下

7、面是是用控制 -> 苹果苹果苹果苹果苹果苹果 西瓜西瓜西瓜西瓜西瓜西瓜 香蕉香蕉香蕉香蕉香蕉香蕉 花生花生花生花生花生花生 &l

8、t;br> </body></html>统一了样式案例二Css滤镜的使用目的：1图片变成灰色，2、鼠标悬停恢复彩色1、原图彩色 2、使用滤镜后，灰色 3、鼠标悬停代码：<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"> <html><head><title>test1l.html</title> <m

9、eta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"&

10、gt; /*使用滤镜 */ a:link img filter:gray; a:hover img filter:"" </style></head><body><a href="#"><img src="images/1.jpg" width="200"/></a><a href="#"><img src="images/2.jpg" width="200"/>

11、;</a><a href="#"><img src="images/3.jpg" width="200"/></a><a href="#"><img src="images/4.jpg" width="200"/></a></body></html>Css的三种选择器1、2、3、4、类选择器 Id选择器 Html元素选择器通配符选择器选择器就是在css中创建，而在网

12、页页面（html，jsp，.）中使用类选择器基本语法：.类选择器名属性名：属性值；1. 类选择器实例： HTML文件：<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"> <html><head><title>xuanzeqi.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <me

13、ta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="my.css"></head><body><span class

14、="style1">新闻一 新闻二 新闻三 新闻四 新闻五 </body></html> CSS文件：/*.style1 就

15、是类选择器*/.style1 font-weight: bold; font-size:20px; background-color: pink;ID选择器基本用法：#id选择器名属性名：属性值；实例： HTML文件这是一个非常重要的新闻！. CSS文件： /*#style2 就是一个id选择器*/#style2 font-size: 30px; background-color: silver; 在html文件中如果要引用id选择器，则： <元素 id=“id选择器的名称”>内容</元素名> H

16、TML选择器基本语法：Html元素名属性名：属性值；实例：代码：HTML文件：<body>你好北京！新闻一新闻二新闻三新闻四<span class="style1&qu

17、ot;>新闻五 这是一个非常重要的新闻！</body>CSS文件：/*.style1 就是类选择器*/.style1 /*#style2 就是id选择器*/#style2 /*body 就是*/body color: orange; font-size: 30px; background-color: silver; color:black; color:black; font-weight: bold; font-size:20px; background-c

18、olor: pink; 结论：当一个元素被id选择器，类选择器，html选择器同时修饰，则优先级为：ID > 类 > HTML 课堂案例：我们希望所有的超链接：1、默认样式是黑色，24px，没有下划线，2、当鼠标移动到超链接时，自动出现下划线，3、点击后，超链接变成红色。代码：HTML文件：<body><a href="#">链接到搜狐</a> <a href="#">链接到新浪</a></body>CSS文件：a:link a:hover a

19、:VISITED color: red; text-decoration: underline; color=black; font-size: 24px; text-decoration: none;通配符选择器如果希望所有的元素都符合某一种样式，则可以使用通配符选择器通配符基本语法：* Margin:0; padding:0 可以让所有的html元素的外边距和内边距都默认为0，有时候特别有用。实例： CSS文件代码：/*使用通配符选择器，作用是将外边距和内边距清0*/ * /*Margin:0px; */ /* margin-top: 10px; margin-left: 10px; m

20、argin-right: 0px; margin-bottom: 0px; */ margin:10px 0px 0px 10px;/*如果提供四个值，则这些值的顺序是从上外边距 (top) 开margin:10px 0px 0px;/*如果只提供三个值，则第一个值则为上，第二个用于左右，第margin:10px 15px;/*如果只提供两个值，则第一个值作用于上下，第二个用于左右 */ margin：10px;/*如果只提供一个值，则作用于四边*/ padding:0px;/*padding 规范与margin一样*/ 始围着元素顺时针旋转的：上-右-下-左 */ 三个用于下 */选择器的深

21、入讨论：1、父子选择器案例：使得“非常重要”四个字为红色斜体。方案：1、id选择器；2、CLASS选择器；3、父子选择器。代码：HTML文件：这是一个非常重要的新闻！ CSS文件：/*#style2 就是id选择器*/#style2 /*父子选择器*/#style2 span font-style: italic; color:red; font-size: 30px; background-color: silver; co

22、lor:black; 强调：1、子此处的标签（此处的span），必须为html可识别的；2、2、父子选择器可以向下继续扩展，可以有多级的。3、父子选择器可以适用于：ID选择器和类选择器。2、要求：“新闻一”红色，斜体 HTML 文件：新闻一新闻二CSS文件：#special font-style: italic; color:red;结论：如果一个元素

23、被ID和Class同时修饰时，则ID选择器的优先级大于Class3、一个元素最多有一个ID选择器，但是可以有多个类选择器。实例需求：希望“新闻三”是下划线，斜体。思路：1、新闻三是用id选择器。2、再指定一个类选择器。HTML 文件：新闻三CSS文件：/*.style1 就是类选择器*/.style1 .style4 font-style: italic; text-decoration: underline; color:black; font-weight: bold;

24、 font-size:20px; background-color: pink;结论：HTML文件作用如何是用多个class类选择器：说明：再引用多个class选择器是，用空格隔开；当class选择器发生冲突时，以在css文件中，最后出现的class选择器样式为主。4、优先级别ID > 类 > HTML5、在css文件中，如果有多个类选择器，ID选择器，html选择器，我们可以把他们共同的部分，写在一起，这样的好处是，可以简化css文件。实例：My.css文件：/*

25、招生广告*/.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;/*房地产.ad_housewidth: 452px;height:196px;background-color: #FC7574;margin: 5px 0 0 6px;float:left;他们的height和fl

26、oat属性值是一样的，则我们可以将共同的部分写在一起：/*招生广告*/.ad_stuwidth: 136px;background-color: #FC7E8C; margin: 5px 0 0 5px;/*广告2*/.ad_2 /*房地产.ad_house .ad_stu,.ad_2,.ad_house height:196px; float:left; width: 452px; background-color: #FC7574; margin: 5px 0 0 6px; width: 457px; background-color: #FC7574; margin: 5px 0 0 6

27、px;强调：共同的部分，类选择器名称间必须用，（逗号）隔开。练习1：请使用适当的选择器，完成下面的页面。 HTML文件：<body><h1 class="style1">梁山英雄排行榜</h1>宋江 卢员外 <

28、;span class="style2" id="style4">吴用 豹子头 大刀关胜 </body>CSS文件：.style1 .style2 #style3 #style4 text-

29、decoration: underline; font-style: italic; color: red; background-color: gray; font-weight: bold; color:orange;练习2：网页所有的超链接，要求这样的格式：1、默认样式为红色，24px，华文新魏字体，没有下划线2、当鼠标移动到超链接时，自动出现下划线，字体大小变成40px，字体变成宋体3、点击后，超链接变成灰色。使用HTML选择器 HTML文件：<body><a href="#">超链接1</a> <

30、a href="#">超链接2</a> <a href="#">超链接3</a> <a href="#">超链接4</a> <a href="#">超链接5</a> <a href="#">超链接6</a> </body>CSS文件：a:link a:hover a:VIS

31、ITED color: gray; color:green; font-size: 40px; text-decoration: underline; color: red; font-size: 24px; font-family: 华文新魏; text-decoration: none;块元素和行内元素行内元素（inline exement）又叫内联元素内联元素只能容纳文本或者其他内联元素（浏览器和版本决定），常见的内联元素、<a><input>等块元素（block element）块元素一般都从新行开始，可以容纳文斌，其他内联元素和其它块

32、元素，即使内容不能占满一行，块元素也要把整行占满，常见块元素<div>、 特点：行 hello word! Span1 hello word! Span1 <div class="style2">div1</div><div class="style2">div2</div><

33、;div class="style2">div3</div>span</body>CSS文件：.style1 .style2 .style3 background-color: orange; background-color: gray; width: 100px; background-color:blue;块元素和行内元素的区别1、行内元素之占内容的宽

34、度，块元素不管内容有多少都要占全行2、行内元素只能容纳文本和其他行内元素，块元素可以容纳文本，行内元素和块元素（与浏览器类版本和类型有关）。3、一些CSS属性对行内元素不生效，比如：margin ,left,right,width,height,建议尽可能使用块元素定位（与浏览器类版本和类型有关）。块元素和行内元素是可以相互转换行内元素转换为块元素1、方法一：hello word! Span12、方法二：.style1

35、background-color:blue; display: block;/*所有引用了style1的元素，都按照块元素显示*/块元素转换行内元素1、方法一：<div style="display: inlineclass="style2">div3</div>2、 2、方法二：.style2 background-color: gray; width: 100px; display: inline;/*所有引用了style2的元素，都按照行内元素显示*/CSS核心内容-流流：在现实生活总就是流水，在网页设计中就是指元素（标签）的排列方

36、式。标准流：元素在网页中就像流水，写在前面的元素（标签）内容前面出现，写在后面的元素（标签）内容后面出现。非标准流：当某个元素（标签）脱离了标准流【比如：因为相对定位】排列，我们统称为非标准流。CSS核心内容-盒子模型要搞清盒子模型，必须先明白一下概念：盒子模型的理解：我们可以盒子模型转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所有我们叫它盒子模型。那么内容就是盒子里装的东西；二填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其他抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候不能全部堆在一起，药流一定的空隙保持通风，同时也为了方便取出。

37、与现实生活中盒子不同的是，现实中的东西一般不能大于盒子，否则盒子会被撑破，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。盒子模型的原理分析图：细节说明：1、在html网页中，每个元素都是一个元素；2、 Padding，margin是要看盒子模型的参照物，参照物不一样，则使用的css属性不一样。比如从DIV1的角度看，是margin-right，从DIV2的角度看则是margin-left。从img的角度看margin-top，从DIV2的角度看为padding-top。3、如果你不想破坏外观，则尽量使用margin来布局，因为padding可能会改变盒子的大小

38、（相当于这个盒子有弹性）。Margin如果过大，则盒子里的内容被挤出盒子外，但是盒子本身没有变化。详细图：实例：代码：HTML文件：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><title></title> <meta http-equiv="keywords&q

39、uot; content="keyword1,keyword2,keyword3"/> <meta http-equiv="description" content="this is my page"/><meta http-equiv="content-type" content="text/html; charset=UTF-8"/><link rel="stylesheet" href="box1.css" typ

40、e="text/css"></link> </head> <body><div class="style1"><img src="images/1.jpg"/></div> </body></html> CSS文件：body .style1 .style1 img margin-left:10px; margin-top:10px; width:80px; height:80px width:100px; height:100px;

41、border: 1px solid blue; margin-top: 10px; margin-left: 100px; padding-left:10px;*/ border-top: red 1px solid; border:2px red solid;/*这里我们给body指定了样式宽度，顺序可以随width:1000px; height: 1600px; margin:0 auto;/*0表示上下边距为0，auto表示左右居中*/ 意调整*/ /* padding-top:10px; 练习：盒子模型的综合案例（可以当做一个模板使用）实例：代码：HTML文件：<!DO

42、CTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><title>box2</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/><meta http-eq

43、uiv="description" content="this is my page"/><meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="box2.css"/></head><body><div class="

44、style1"><ul class="faceul"><li><img src="images/aa.jpg"/></li><li><img src="images/aa.jpg"/></li><li><img src="images/aa.jpg"/></li><li><img src="images/aa.jpg"/></li&

45、gt;<li><img src="images/aa.jpg"/></li><li><img src="images/aa.jpg"/></li><li><img src="images/aa.jpg"/></li><li><img src="images/aa.jpg"/></li><li><img src="images/aa.jpg"/></li><li>&