DIV CSS快速入门.pdf

DIV+CSS快速入门 主讲：刘金榜 智搏网联学习群：114808677 网络教程： 课件下载地址：/css 第一章 CSS简介 • CSS 概述 • CSS 指层叠样式表 (Cascading Style Sheets) • 样式定义如何显示 HTML 元素 • 样式通常存储在样式表中 • 外部样式表可以极大提高工作效率 万维网联盟（W3C），非营利的标准化联盟 1996年12月，发布了CSS 1.0规范。 1998年 5月，发布了CSS 2.0规范。 目前有两个新版本正在处于工作状态，即CSS 2.1版 和3.0版 第一章 CSS简介 W3C并没有强制软件厂商的产品必须符合规范，因此目前 流行的浏览器都没有完全符合规范，这就给设计师设计网 页带来了一些难题。 目前最主流的浏览器是： IE6.0、IE7.0、IE8.0、Firefox 市场占有率为：99% 以这4种浏览器为目标，已经完全可以做出显示非常一致 的CSS布局页面。随着技术的发展，各种浏览器都会逐渐 在这方面做更多的努力，相信情况会越来越好。 第一章 CSS简介 • 什么是DIV+CSS? DIV元素是用来为HTML文档内大块（block-level）的内容 提供结构和背景的元素。 CSS是Cascading Style Sheets(层叠样式表)的简称。 • 通俗来说： 如果把一个网页比作一栋楼房，div就是楼房的框架结构，一个个的 砖头就是一个个的标签元素（如图片，文字），CSS就是水泥和玻璃 ，把砖瓦合理的跟框架连接在一起。 DIV＋CSS 其实就是布局的一个方法，就是像盖房子的方法一样。 第一章 CSS简介 • css的优势: 1、缩减代码，提高页面浏览速度。 2、结构清晰，对搜索引擎更加友好。 3、支持各种浏览器，兼容性好。 4、简单的修改，缩短改版时间。 5、强大的字体控制和排版能力。 6、使用CSS可以结构化HTML，提高易用性。 „„„„„„„„ 各种好处！ 第一章 CSS简介 • 学习CSS，需要什么基础 1）对HTML和网页设计有初步的基础 2）具有钻研的精神和热情 其中第1点的权重占10% 第2点的权重点90% 第二章 CSS基础语法 • 语法是CSS学习的开始，不要小看它。 • 因为成也语法，败也语法！ • CSS 语法由三部分构成： 选择器、属性、值 例如：p {color: red ;} h1 { border :1px solid red;} 第二章 CSS基础语法 • 选择器：通常是你希望定义的 HTML 元素或标签， • 属性：是你希望改变的属性，并且每个属性都有一个值。 • 属性和值被冒号分开，并由花括号包围，这样就组成了一 个完整的样式声明。 • body {color: blue；} • 上面这行代码的作用是将 body 元素内的文字颜色定义为 蓝色。在上述例子中，body 是选择器，而包括在花括号 内的的部分是声明。声明依次由两部分构成：属性和值， color 为属性，blue 为值。 第二章 CSS基础语法 • 选择器的分类 • 标记选择器 • ID选择器 • 类别选择器 • 复合选择器 – 交集选择器 – 并集选择器 • 后代选择器 第二章 CSS基础语法 • 选择器——标记选择器 Html结构中：p标记选择器/p CSS中： p { text-align: center; color: black; } 此例中CSS中的p