预览加载中，请您耐心等待几秒...

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

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共49页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

韩顺平Div、css的讲解 Div元素是用来为html文档内大块的内容提供结构和背景的元素。 CSS是英语cascadingstylesehhts的缩写（层叠样式表），他是一种用来表现HTML或XML等文件式样的计算机语言。 Div+css是网站标准中常用的术语之一。 理解： 1、Div是用来存放内容（文字，图片等其他元素）的容器(元素)。 2、Css用于说明DIV中的图片，文字或其他元素的样式（大小，颜色，背景，位置等）。 好处： 1、html文件就会减少大量的table、tr、td，html变简单。 2、内容和样式分离。 3、符合搜索引擎的喜好。（SE0网页优化设计师） 4、节约带宽。 快速体验div+css：小案例 Html文件： <html> <head> <linkhref="my.css"type="text/css"rel="stylesheet"/> </head> <body> <divclass="style1"> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </div> </body> </html> Css文件： .style1{ width:300px; height:200px; border:1pxsolidred; margin:0px0px0px20px; } .style1table{ width:298px; border:1pxsolidgreen; } .style1tabletd{ border:1pxsolidyellow; } Div+Css的发展三个历史时期： Table---->table+css---->div+css Css的必要性 案例 使用<span>元素，ide工具开发（myeclipe） <spanstyle="font-size:40px;color:yellow;font:italic;">栏目二</span><br/> 从使用span元素我们可以看出，css的基本语法 <元素名style=”属性名：属性值；属性名2：属性值2；”/> 元素可以是html的任意元素； 属性名和属性值要参考帮助文档，w3c 代码： <body> <spanstyle="font-size:50px;color:blue;">栏目一</span><br/> <spanstyle="font-size:40px;color:yellow;font:italic;">栏目二</span><br/> <spanstyle="font-size:30px;color:red;font:normal;">栏目三</span><br/> <spanstyle="font-size:20px;color:green;font-weight:lighter;">栏目四</span><br/> <spanstyle="font-size:10px;color:pink;font-weight:oblique;">栏目五</span><br/> </body> 使用css可以统一我们网站的风格。 Css的分类：内部css和外部css 案例一： <!--Docytype：文档类型，用来应用dtd的，用来指定dtd（说明当前这个html遵循什么版本）--> <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> <title>Css1.html</title> <!--keywords:关键字，是给搜索引擎看的--> <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"> <metahttp-equiv="description"content="thisismypage"> <metahttp-equiv="content-type"content="text/html;charset=UTF-8"> <!--告诉浏览器文件是什么编码--> <!--引入css文件的--> <!--<linkrel="stylesheet"type="text/css"href="./styles.css">--> <styletype="text/css"> .style1{ font:30px; color:green; font-weight:bold; font-style:normal; text-decoration:underline; } </style