|
十天学会WEB标准新手常见问题入门教程视频教程表单问题CSS HACKSEO优化网页技巧常用软件字体下载网页配色CSS在线手册火狐插件PNG图标WEB标准网页资源下载PS技巧系统常见问题JS代码常用CSS技巧导航菜单W3C标准高级搜索酒店预订返回旧版 当前位置：首页 > DIV+CSS教程 > 正文第一天 XHTML CSS基础知识
作者:××× 来源:标准之路 【大 中 小】 浏览:13349 添加日期：2010-07-11 我要评论(33) 欢迎大家学习《十天学会web标准》，也就是我们常说的DIV+CSS。不过这里的DIV+CSS是一种错误的叫法，建议大家还是称之为web标准。 学习本系列教程需有一定html和css基础，也就是指您之前做过网页，会用表格布局。如果您刚开始学习网页制作，不知道什么是表格布局及html和css，建议您先去充电，否则学习本教程会非常吃力或者根本就听不懂。
由于时间关系，本教程只讲解一些基础知识，让您从原来的表格布局跨入到web标准（div+css）布局，会使用web标准制作出常见的页面，这也达到了本教程的目的。
本教程多以实例形式循序渐进讲解，实例涉及到哪些关键点或难点就讲解什么，较少讲解概念。因为概念这些东西很难说明白，或者说明白你也不一定能听懂，听懂了也不一定能理解。所以把概念留给大家以后再深入研究。
由于章节关系，没有把css和css hack单独分出，只是在用到的时候穿插入讲解了。html基础和css基础只在第一节中介绍了几点重要的。
下面我们开始第一天的学习
一、xhtml css基础知识
首先说一下我们这节课的知识点 文档类型
语言编码 html标签 css样式 css优先级 css盒模型组成 1）文档类型 当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。
2）语言编码
接下来我们还会发现这样一句话： <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的gb2312告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是UTF-8编码，它是国际通用的编码。不管我们采用哪种编码，有一点就是包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码。
3）html标签
html标签在页面中都必须结束。成对的标签以“/标签名”结束，有些单一的标签在本身的结尾打上/来结束，这是xhtml代码编写的规范。 成对的标签：
<head>{...}</head>
<body>{...}</body> <div>{...}</div> <span>{...}</span> <p>{...}</p> ...... 单一的标签：
<img src="" />
<br /> ....... 还需说明一点的是按xhtml规范，标签必须用小写。
4）css样式
加载css样式有以下四种 外部样式
内部样式 行内样式 导入样式 <link href="layout.css" rel="stylesheet" type="text/css" /> 这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。
<style>
h2 { color:#f00;} </style> 这种形式是内部样式表，它是以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。
<p style="font-size:18px;">内部样式</p>
这种在标签内以style标记的为内部样式，内部样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。
@import url("/css/global.css");
链接样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url("/css/global.css")的形式链接全局样式，这样就使代码达到很好的重用性。
5）css优先级
id优先级高于class 后面的样式覆盖前面的 指定的高于继承 行内样式高于内部或外部样式 总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的 6）css盒模型组成 css盒模型是本节教程的重点。前面几个知识点，如果您会用表格布局的话，就非常好理解和掌握了。这里的盒模型是和table布局的一个不同点。学习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器，比如PDA设备也能正常浏览。 那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。
所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中weight所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方
这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。
如果现在您对CSS盒模型理解还不够透彻，继续往下看，后来的章节会都会应用到盒模型实例。
二、如何开始学习web标准？
1）有HTML和CSS基础 学习本系列教程前，要求您有一定的html和css基础，制作过网页，会用表格进行网页布局，这样学习起来才会很轻松。如果您对这些还不懂，建议先学习这些知识，然后再来学习本教程。 2）转变观念
在以前我们制作网站时，总是习惯于先考虑外观、颜色、字体及布局等所有表现在页面上的内容。但外观并不是最重要的，相反最终用户在访问网页时的体验才是优先要考虑的。一个由div＋css布局且结构良好的页面可以通过css定义成任何外观，在任何网络设备上（包括手机、PDA和计算机）上以任何外观表现出来，而且用div＋css布局构建的网页以够简化代码，加快显示速度。 所以要想学好div＋css，首先要转变观念，需要抛弃传统的表格(Table)布局方式，采用层(DIV)布局，并且使用层叠样式表(CSS)来实现页面的外观。给网站浏览者更好的体验。
3）多动手、多动脑
说到这点，有点小儿科了，就像我们上小学时老师常常教我们的那样。为什么我在这里也做为一点列出来呢，我是通过评论发现，有些同学提的问题太没水平了，稍微动下脑筋就明白了，或者自己动手一试就知道了，但他就懒得试。举个简单的例子，拿浏览器兼容来说吧，你写个样式之后，在IE和火狐分别打开看一下不就明白了，但就是不去做。还有一个同学留言要我把一个实例中的图片打包发给他，我一看代码，就用到一张图片，无语了，有你留言的这个时间，自己也早把图片下载下来了。所以在这里告诫大家，一定要多动手、多动脑，不要怕麻烦。另外在学习完一节教程后，一定要自己做一遍实例，这样能更快掌握。 （如果您觉得本站不错，请告诉身边的朋友，或转载到论坛、百度知道、贴吧等，记得带网址哟，不胜感激！）
〖DIV+CSS教程〗Tags: 十天学会web标准 div+css css基础 所属专题：十天学会WEB标准 上一篇：16、【视频】CSS强制换行与强制不换行 下一篇：第二天 一列布局 相关文章第十天 div+css网页标准布局实例教程（三）第十天 div+css网页标准布局实例教程（二）第十天 div+css网页标准布局实例教程（一）第九天 CSS表单设计第八天 下拉及多级弹出菜单第七天 横向导航菜单第六天 html列表第五天 超链接伪类第四天 纵向导航菜单及二级弹出菜单第三天 二列和三列布局第二天 一列布局16、【视频】CSS强制换行与强制不换行15、【视频】CSS的行高Line Height属性14、【视频】相对定位和绝对定位13、【视频】CSS滑动门技术宽度自适应按钮SEO—创建链接诱饵 更多评论(33)..会员评论taipeidvd(116.29.*.*) 发表于：2010-09-25 04:36:47 我也來學習一下 管理员回复：欢迎欢迎 回馈(220.181.*.*) 发表于：2010-09-24 23:05:51 贵站的讲解真是很妙的说，管理有做过老师的经历？ 管理员回复：这个真没有。我只是从一个初学者的角度来讲解 athrunzero(116.231.*.*) 发表于：2010-09-17 15:44:52 好好学习下 管理员回复：欢迎欢迎 dg9120(60.215.*.*) 发表于：2010-09-15 17:27:38 <pre></pre>标签怎么用啊？ 管理员回复：请查看html手册 qllxw(218.56.*.*) 发表于：2010-09-14 02:15:51 非常好的入门教程 管理员回复：欢迎常来 heiba(113.9.*.*) 发表于：2010-09-10 09:50:53 好！顶一下！ lenhan12345(124.115.*.*) 发表于：2010-09-05 17:30:28 不错呀。支持一下。 管理员回复：欢迎常来 leng475(222.210.*.*) 发表于：2010-09-02 15:12:13 内容很不错。。非常感谢站长。。 管理员回复：不客气，欢迎常来 推荐文章第十天 div+css网页标准布局实例教程（三） 第十天 div+css网页标准布局实例教程（二） 第十天 div+css网页标准布局实例教程（一） 第九天 CSS表单设计 第八天 下拉及多级弹出菜单 第七天 横向导航菜单 第六天 html列表 第五天 超链接伪类 热门文章第十天 div+css网页标准布局实例教程（三） 第十天 div+css网页标准布局实例教程（二） 第十天 div+css网页标准布局实例教程（一） 第九天 CSS表单设计 第八天 下拉及多级弹出菜单 第七天 横向导航菜单 第六天 html列表 第五天 超链接伪类 最新图片素材
最新评论文章CSS网页布局入门教程13：下拉及多级弹出式菜单 CSS网页布局入门教程12：纵向导航菜单 第八天 下拉及多级弹出菜单 13、【视频】CSS滑动门技术宽度自适应按钮 第六天 html列表 收集最近几个月淘宝、拍拍等网站的广告图片（中幅2） 第十天 div+css网页标准布局实例教程（一） 第十天 div+css网页标准布局实例教程（二） 推荐专题十天学会WEB标准 新手常见问题 入门教程 视频教程 表单问题 CSS HACK SEO优化 网页技巧 常用软件 字体下载 网页配色 CSS在线手册 火狐插件 PNG图标 WEB标准 网页资源下载 PS技巧 系统常见问题 JS代码 常用CSS技巧 导航菜单 W3C标准 DIV布局技巧 PS插件 幻灯代码 在线交流QQ群18645808(开) 44051756(开) 74816202(开) 75782368(开) 54187042(开) 102426914(开) 87010869(开) 71571195(开) 35826206(开) 40334594(开) 102050535(开) 105366319(开) 106872711(开) 100154872(开) 61729892(开) 38473554(开) 出差旅游免费预订酒店 |
|
|
