初探css(1).pptVIP

如何开始学习web标准？ 1）有HTML和CSS基础 要求您有一定的html和css基础，制作过网页，会用表格进行网页布局，这样学习起来才会很轻松。如果您对这些还不懂，建议先学习这些知识，然后再来学习本教程。 2）转变观念 在以前我们制作网站时，总是习惯于先考虑外观、颜色、字体及布局等所有表现在页面上的内容。但外观并不是最重要的，相反最终用户在访问网页时的体验才是优先要考虑的。一个由div＋css布局且结构良好的页面可以通过css定义成任何外观，在任何网络设备上（包括手机、PDA和计算机）上以任何外观表现出来，而且用div＋css布局构建的网页以够简化代码，加快显示速度。 所以要想学好div＋css，首先要转变观念，需要抛弃传统的表格(Table)布局方式，采用层(DIV)布局，并且使用层叠样式表(CSS)来实现页面的外观。给网站浏览者更好的体验。 3）多动手、多动脑 说到这点，有点小儿科了，就像我们上小学时老师常常教我们的那样。为什么我在这里也做为一点列出来呢，我是通过评论发现，有些同学提的问题太没水平了，稍微动下脑筋就明白了，或者自己动手一试就知道了，但他就懒得试。举个简单的例子，拿浏览器兼容来说吧，你写个样式之后，在IE和火狐分别打开看一下不就明白了，但就是不去做。所以在这里告诫大家，一定要多动手、多动脑，不要怕麻烦。另外在学习完一节教程后，一定要自己做一遍实例，这样能更快掌握。 1.1.1标记的概念 html head title页面标题/title /head body h2CSS标记/h2 pCSS标记的正文内容从这里开始/p /body /html 1.1.1标记的概念 1.1.2 HTML的缺陷 html head title页面标题/title /head body h2font color=#0000FF face=黑体CSS标记1/font/h2 pCSS标记的正文内容1/p h2font color=#0000FF face=黑体CSS标记2/font/h2 pCSS标记的正文内容2/p h2font color=#0000FF face=黑体CSS标记3/font/h2 pCSS标记的正文内容3/p h2font color=#0000FF face=黑体CSS标记4/font/h2 pCSS标记的正文内容4/p /body /html 1.1.2 HTML的缺陷 1.1.3 CSS的引入 html head title页面标题/title style !-- h2{ font-family:幼圆; color:red; } -- /style /head body h2CSS标记1/h2 pCSS标记的正文内容1/p h2CSS标记2/h2 pCSS标记的正文内容2/p h2CSS标记3/h2 pCSS标记的正文内容3/p h2CSS标记4/h2 pCSS标记的正文内容4/p /body /html 1.1.3 CSS的引入 1.2.1 行内样式 html head title页面标题/title /head body p style=color:#FF0000; font-size:20px; text-decoration:underline;正文内容1/p p style=color:#000000; font-style:italic;正文内容2/p p style=color:#FF00FF; font-size:25px; font-weight:bold;正文内容3/p /body /html 1.2.1 行内样式 1.2.2 内嵌式 html head title页面标题/title style type=text/css !-- p{ color:#FF00FF; text-decoration:underline; font-weight:bold; font-size:25px; } -- /style /head body p紫色、粗体、下划线、25px的效果1/p p紫色、粗体、下划线、25px的效果2/p p紫色、粗体、下划线、25px的效果3/p /body /html 1.2.2 内嵌式 1.2.3 链接式 html head title页面标题/title link href=1.css type=text/css rel=stylesheet /head body h2CSS标题1/h2 p紫色、粗体、下划线、25px的效果1/p h2CSS标题2/h2 p紫色、粗体、下划线、25px的效果2/p /body /html 1