精通div+css

《精通div+css》由会员分享，可在线阅读，更多相关《精通div+css（97页珍藏版）》请在金锄头文库上搜索。

1、DIV+CSS快速入门DIV+CSS快速入门网络教程： 学习咨询：雨小月Q Q ：8 4 8 4 8 8 1 6 1第一章CSS简介 CSS 概述CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 外部样式表可以极大提高工作效率万维网联盟（W3C），非营利的标准化联盟万维网联盟（W3C），非营利的标准化联盟 1996年12月，发布了CSS 1.0规范。 1998年 5月，发布了CSS 2.0规范。 目前有两个新版本正在处于工作状态，即CSS 2.1版 和3.0版第一章CSS简介W3C并没有强制软件厂商的

2、产品必须符合规范，因此目前 流行的浏览器都没有完全符合规范，这就给设计师设计网 页带来了一些难题。目前最主流的浏览器是目前最主流的浏览器是： IE6.0、IE7.0、IE8.0、Firefox 市场占有率为：99%以这4种浏览器为目标，已经完全可以做出显示非常一致 的CSS布局页面。随着技术的发展，各种浏览器都会逐渐 在这方面做更多的努力，相信情况会越来越好。第一章CSS简介 什么是DIV+CSS?什么是DIV+CSS? DIV元素是用来为HTML文档内大块（block-level）的内容 提供结构和背景的元素。 CSS是Cascading Style Sheets(层叠样式表)的简称。通俗来

3、说：通俗来说： 如果把一个网页比作一栋楼房，div就是楼房的框架结构，一个个的 砖头就是一个个的标签元素（如图片，文字），CSS就是水泥和玻璃 ，把砖瓦合理的跟框架连接在一起。 DIVCSS 其实就是布局的一个方法，就是像盖房子的方法一样。第一章CSS简介 css的优势: 1、缩减代码，提高页面浏览速度。 2、结构清晰，对搜索引擎更加友好。 3、支持各种浏览器，兼容性好。 4、简单的修改，缩短改版时间。 5、强大的字体控制和排版能力。 6、使用CSS可以结构化HTML，提高易用性。 各种好处！第一章CSS简介 学习CSS，需要什么基础1）对HTML和网页设计有初步的基础 2）具有钻研的精神和热

4、情其中第1点的权重占10% 第2点的权重点90%第二章CSS基础语法 语法是CSS学习的开始，不要小看它。 因为成也语法，败也语法！ CSS CSS 语法由三部分构成：语法由三部分构成： 选择器选择器、属性属性、值值 例如：例如：p color: red; h1h1 borderborder: :1px solid red1px solid red;第二章CSS基础语法 选择器：通常是你希望定义的 HTML 元素或标签， 属性：是你希望改变的属性，并且每个属性都有一个值。 属性和值被冒号分开，并由花括号包围，这样就组成了一 个完整的样式声明。 body color: blue； 上面这行代码的

5、作用是将 body 元素内的文字颜色定义为 蓝色。在上述例子中，body 是选择器，而包括在花括号 内的的部分是声明。声明依次由两部分构成：属性和值， color 为属性，blue 为值。第二章CSS基础语法 选择器的分类 标记选择器 ID选择器 类别选择器 复合选择器 交集选择器 并集选择器 后代选择器第二章CSS基础语法 选择器标记选择器 Html结构中：标记选择器 CSS中： p text-align: center; color: black; 此例中CSS中的p标记即为标记选择器。第二章CSS基础语法 选择器ID选择器 Html结构中：这是ID选择器 CSS中： #box text-

6、align: center; color: black; 此例中CSS中的#box即为ID选择器。注意：ID选择器用#第二章CSS基础语法 选择器类别选择器 Html结构中：这类别选择器 CSS中： .box text-align: center; color: black; 此例中CSS中的.box即为类别选择器。注意：类别选择器用“. ”第二章CSS基础语法 选择器复合选择器_并集选择器 Html结构中：这将是并集选择器 这将也是并集选择器 CSS中： h1,h2 text-align: center; background-color:orange; 此例中CSS中的“h1,h2”即为复

7、合选择器中的并集选择器 并集选择器是多个选择器通过逗号连接而成的，并集选择 器可以同时声明风格相同的样式。第二章CSS基础语法 选择器复合选择器_交集选择器 Html结构中：这是交集选择器 这也是交集选择器 CSS中： p backgroud-color:orange; p#box color：red; p.box color:blue;此例中CSS中的“p#box”和“p.box”都是复合选择器中的交集选择 器。第一个必须是标记选择器，第二个必须是类别选择器或ID 选择器，这两个选择器之间不能有空格，必须连续书写。第二章CSS基础语法 选择器后代选择器 Html结构中：这是父元素 这是子元素

8、CSS中：#father height:150px; background:orannge; #father p width:50px; height:50px; background:bule; 此例中CSS中的“#father p”为后代选择器。 注意：后代选择器的写法：外层的标记写在前面，内层的 标记写在后面，之间用空格分隔。此p标记就是#father的 后代。第二章CSS基础语法 CSSCSS继承继承 CSS继承指的是子标记会继承父标记的所有样式风格，并可以在父标 记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风 格完全不会影响父标记。这是父元素的红色 子元素继承了父元素的

9、红色若对.son设置为紫色，.soncolor:purple;，则并不会影响父元素的颜色。第二章CSS基础语法 CSSCSS的层叠特性的层叠特性 CSS的全名：层叠样式表 “层叠”是什么意思？为何这个词如此重要，以至于要出 现在它的名称里？在一个结构复杂的页面中，某一个元素有可能会从很 多地方获得样式，就完全有可能使代码变得非常混乱。可 能出现在“无法找到某一个元素的样式来自于哪条规则” 的情况。因此，必须要充分理解CSS中的“层叠”的原理 。 那么我们如何解决层叠样式中的“冲突”问题呢？第二章CSS基础语法 CSSCSS的层叠特性的层叠特性（续）续） 优先级： 行内样式 ID样式 类别样式

10、标记样式注意： 千万不要混淆了“层叠”与“继承”，二者完全 不同！第二章CSS基础语法如何创建如何创建CSS ?CSS ? 插入样式表的方法有三种：插入样式表的方法有三种： 方法一：方法一：外部样式表外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的 选择。在使用外部样式表的情况下，你可以通过改变一 个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：外部样式表可以在任何文本编辑器进行编辑。文件不能包含任何的 html 标签。样式 表应该以 .css 扩展名进行保存。第二章CSS基础语法创建创建CSSCSS方法二：方法二：内部样式表内部样式表当单个文档

11、需要特殊的样式时，就应该使用内部样式表。你可以使 用 标签在头部分定义内部样式表，就像这样: hr color:red; p margin-left: 20px; bodybackground-color:blue; 第二章CSS基础语法创建创建CSSCSS方法三：方法三：行内样式行内样式由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势 。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。 要使用内联样式，你需要在相关的标签内使用样式（style）属性。 Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和 左外边距：这是行内样式，也称为内联样式第二章C

12、SS基础语法多重样式如何显示出来？例如，外部样式表拥有针对 h3 选择 器的三个属性： h3 color:red; text-align:left; font-size:8pt; 而内部样式表拥有针对 h3 选择器的 两个属性： h3 text-align: right; font-size: 20pt; 假如拥有内部样式表的这个页面同时与 外部样式表链接，那么 h3 得到的样式 是： h3 color: red; text-align: right; font-size: 20pt; 即颜色属性将被继承于外部样 式表，而文字排列（text- align）和字体尺寸（font- size）会被

13、内部样式表中的规 则取代。第三章盒子模型 盒子模型是CSS控制页面时一个很重要的概念。只有很好 地掌握了盒子模型以及其中每个元素的用法，才能真正地 控制好页面中的各个元素。本章主要介绍盒子模型的基本 概念，并讲解CSS定位的基本方法。 所有页面中的元素都可以看成是一个盒子，占据着一定的 页面空间。 一个页面由很多这样的盒子组成，这些盒子之间会互相影 响，因此掌握盒子模型需要从两方面来理解。一是理解一 个孤立盒子的内部结构，二是理解多个盒子之间的相互关 系。第三章盒子模型 CSS CSS 框模型：框模型： 包括：包括： 边框边框 内边距内边距 外边距外边距 元素内容元素内容第三章盒子模型在 CS

14、S 中，width 和 height 指的是内容区域的宽度和高度 。增加内边距、边框和外边距 不会影响内容区域的尺寸，但 是会增加元素框的尺寸。假设框的每个边上有 10 个像 素的外边距和 5 个像素的内边 距。如果希望这个元素框达到 100 个像素，就需要将内容的 宽度设置为 70 像素，如图。第三章盒子模型_边框属性（1）属性描述borderborder简写属性。作用是在一个声明中用来设置四个边框的所有属性。简写属性。作用是在一个声明中用来设置四个边框的所有属性。border-style设置四个边框的样式，可以设置一到四个样式。border-width设置四个边框的宽度，可以设置一到四个值

15、。border-color设置四个边框的颜色，可以设置一到四个颜色。borderborder- -bottombottom简写属性。作用是在一个声明中用来设置下边框的所有属性。简写属性。作用是在一个声明中用来设置下边框的所有属性。border-bottom-color设置元素的下边框的颜色。border-bottom-style设置元素的下边框的样式。border-bottom-width设置元素的下边框的宽度。温馨提示：推荐使用简写属性，灰色属性不推荐使用。温馨提示：推荐使用简写属性，灰色属性不推荐使用。第三章盒子模型_边框属性（2）属性描述borderborder- -leftleft简写

16、属性。用于在一个声明中设置左边框的所有属性。简写属性。用于在一个声明中设置左边框的所有属性。border-left-color设置元素的左边框的颜色。border-left-style设置元素的左边框的样式。border-left-width设置元素的左边框的宽度。borderborder- -rightright简写属性。将所有用于右边框的属性设置于一个声明中。简写属性。将所有用于右边框的属性设置于一个声明中。border-right-color设置元素的右边框的颜色。border-right-style设置元素的右边框的样式。border-right-width设置元素的右边框的宽度。温馨提