1、CSS层叠样式表,济南大学赵燕,知识回顾,HTML中的列表分类 表格相关标签、属性 框架的作用 表单及表单控件 JS脚本,内容摘要,掌握样式表的语法规则 样式表的分类： 行内样式表 内嵌样式表 外部样式表 掌握常用的样式 了解层和标签,设置属性这个段落应用了样式这个段落按默认样式显示,什么是样式？主要用来做什么的？,指定显示样式,常用的样式属性,根据样式代码的位置，分为三类： 行内样式 内嵌样式 外部样式,样式的分类,在最后一个声明后面加上一个分号 (;) 是一个好习惯,行内样式,您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性
2、定义。,/*关键代码-*/剩余时间：成交结束新旧程度：全新 所 在 地：北京 宝贝数量：5 件 浏 览 量：220 次另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以 ,meta http-equiv=“Content-type” content=“text/css”,应用样式Pfont-size:20px;color:blue;text-align:center我是段落 1 我是段落 2 我是段落 3 我们的样式绝对统一,内嵌样式-1,所有的段落都采用 P 样式，保证样式统一,行内样式表局限于某个标签，如果希望本网页内的所有同类标签都采用统一样式，这时应采用内嵌样式。,用
3、分号隔开,内嵌样式-2 选择器,根据选择器的不同，内嵌样式又分为： HTML 选择器 CLASS 类选择器 ID 选择器,/*-关键代码-*/P /*设置样式：字体和背景色*/font-family: System; font-size: 18px;color: #3333CC; H2 background-color: #CCFF33;text-align: center; 品种特征方面：1、蛋鱼：蛋鱼.。2、龙睛：龙睛。3、高头：高头.。,内嵌样式-3 HTML选择器,应用H2样式,应用P样式,H1,H2,H3 background-color: #CCFF33;text-align: c
4、enter;,内嵌样式-4 class类选择器,.myinput border: 1px solid;border-color:#D4BFFF;color:#2A00FF 用户名密 码,CLASS类选择器,应用类选择器： class”类名“,类选择器的定义格式为： .类名 样式规则; ,#fire color:red;font-size: 24px; 我是二级标题，火是这样的 我是段落，火是这样的 ,内嵌样式-5 ID选择器,ID选择器,ID选择器的定义格式为： ID名 样式规则; ,应用ID选择器：ID”ID名“,A /*设置超链接不带下划线*/color: blue;text-decora
5、tion: none; /*文本修饰：无*/ A:hover/*鼠标在超链接上方停留时，带下划线 */color: red;text-decoration:underline; /*文本修饰：下划线*/ 俺是超链接，移过来我就显示下划线,内嵌样式-6 特殊的选择器,HTML选择器,特殊的伪类：A代表超链接，hover代表鼠标悬停,区别标记的不同状态，例： a:link a:visited A:hover,外部样式,根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（import）外部样式表,样式文件 P ,网页2,网页3,网页1,链接外部样式表,使用LINK（链接）标签
6、，语法：,第一步：创建样式表文件newstyle.css,第二步：把样式文件和网页关联,样式文件： newstyle.css P ,Onel.htm,another.htm,第三步：浏览查看各网页,演示：链接样式表示例,导入外部样式表,使用import导入 ，语法： import url(“样式表文件.css”);,操作步骤同链接样式表,两者本质区别在于：link方式在浏览器下载HTML文件时并不进行替换，而仅在HTML文件体部需引用CSS样式文件的某个样式时，才链接样式文件，读取需要的内容；而import方式在浏览器下载HTML文件时就将样式文件的全部内容复制到import关键字所在位置，以
7、替换该关键字。,外部样式文件,样式的混合使用,行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常 需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 某张网页内，部分内容”与众不同“，采用行内样式,对于某个HTML标签： 1）如果有多种样式，如果规定的样式没有冲突，则叠加； 2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；,内嵌样式,行内样式,某个HTML标签, 标签,所有韩款童装10元/件起拍喽,是行级容
8、器标签，不可以包含图片、标题、段落等，只能包含文字内容, 层标签,关键代码Z-index=1，我是第一层，我是容器，包含图片段落Z-index=2，我是第二层，包含图片和段落 ,使用 Z index指定是哪一层,是块级容器标签，可以包含图片、标题、段落、文字等,图片,段落,top,left,样式的继承和作用顺序,样式继承h2color:red;hello标记的作用,?,p.class1font-size:12pt; p.class2font-size:200% p.class3font-size:100%第一段 第二段 第三段 ,继承顺序,内联样式中所定义的样式优先级最高 其他样式表按其在HT
9、ML文件中出现或被引用的顺序，越在后出现，优先级越高 选择符的作用顺序由高到低为：上下文选择符、类选择符、id选择符 未在任何文件中定义的样式，将遵循浏览器的默认样式。,例子,CSS 的优点,改变浏览器的默认显示风格 页面内容和显示样式分离 可以重用样式表 方便网站维护,课堂重点,样式分为行内样式、内嵌样式、外部样式 样式表包括选择器和样式规则，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类 和都是容器标签，是块级标签，可包含段落、标题等，是行级标签，不能包含段落、标题等，只能包含部分文字,上节课内容复习,在使用样式表时，经常会有多标志用同一个属性 比如：B color: re
10、d I color: red H1 color: red 用逗号分隔各个 HTML 标志，把三行代码合并成一行，我们可以写成： B,I,H1 color: red 同一个 HTML 标志，可能定义到多种属性，例如，我们规定把从 H1 到 H6 各级标题定义为红色黑体字，带下划线，则应写为： H1,H2,H3,H4,H5,H6 color: red; text-decoration: underline; font-family: “ 黑体 “ 注意各个标志属性之间用分号隔开。,2 、外部样式表 建立一个完全独立的文本文件，其扩展名为 .css ，文件内容则输入样式表信息，除去任何相关的 HTM
11、L 语言。 例如在外部样式表中输入：body line-height: 130pt H1,H2,H3,H4,H5,H6 color: red; text-decoration: underline; font-family: “ 黑体 “ b font-style: italic; color: #FF3333; text-decoration: underline 少了 和注释标记。 保存为 example.css 。,*使用 标记链接外部样式表 HREF 中应包含路径信息。 一个 HTML 文档可引用多个外部样式表，例如： ,*使用 IMPORT 导入样式表信息 例如： import “e
12、xample.css”; import “style/other.css”; ,我们打算让某一些段落缩进0.5in，另一些段落缩进1.0in，我们知道段落采用这个标记。, This is a sample 这个段落将缩进0.5in 这个段落将比上面缩进一倍距离 ,CSS盒子模式(Box Model),Box model example,假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素,#box width: 70px; margin: 10px; padding: 5px; , ,内边距,padding
13、 属性 值 描述 padding-top padding-right padding-bottom padding-left 设置内边距。值可以是：百分比（基于父元素宽度的百分比） 长度值（固定的padding值） 默认值：未定义。,h1 background: yellow; padding: 20px 20px 20px 80px;,h1 background: yellow; padding-top: 20px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;,外边距,body margin-top:100px; m
14、argin-right:40px; margin-bottom:10px;margin-left:70px; ,body margin: 100px 40px 10px 70px; ,CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：如果缺少左外边距的值，则使用右外边距的值。 如果缺少下外边距的值，则使用上外边距的值。 如果缺少右外边距的值，则使用上外边距的值。,h1 margin: 0.25em 1em 0.5em; h2 margin: 0.5em 1em; p margin: 1px;,/* 等价于 0.25em 1em 0.5em 1em */ /* 等价于 0.5em
15、 1em 0.5em 1em */ /* 等价于 1px 1px 1px 1px */,border,CSS 定位 (Positioning),CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。,一切皆为框 div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。,CSS 有三种基本的定位机制：普通流、浮动和绝对定位。,例子,例子1：要求 1）宽度、高度均是
16、200px； 2）颜色为红色#990000（#900）；,4.CSS+Div布局实例,例子1：要求 1）一个方块，宽度、高度均是200 像素； 2）颜色为红色#990000（#900）；,4.CSS+Div布局实例,每个浏览器都有一个内置的CSS 文件， 当你没有对某个标记的属性设置的时候，浏览器就会应用内置的CSS 文件， 怎么才能做到浏览器兼容？ 只需要在CSS 文件中， 将用到的标记body 和div 置零就OK 了：,CSS中添加代码： body , div padding:0; margin:0; ,例子1：要求 1）一个方块，宽度、高度均是200px； 2）颜色为红色#990000
17、（#900）； 3）让红色区域与浏览器的顶部和左边距离为20px。,4.CSS+Div布局实例,只需要设置红色方块的外边距就可以了，添加如下CSS 代码： margin-top:20px; margin-left:20px;,上面的这种写法可以精简为： margin:20px 0 0 20px; 其中的数值顺序是：上 右 下 左 ；,例子2：要求 1）两个方块，一个 红色#900，一个蓝色#009； 2）红色方块宽度和高度均 为200px，蓝色方块宽度 为300px，高度为200px； 3）红蓝色方块的上外边距 (margin-top)和左外边距 (margin-left)均为20px。,4.
18、CSS+Div布局实例,例子2：要求 1）两个方块，一个红色#900，一个蓝色#009； 2）红色方块宽度和高度均为200px，蓝色方块宽度为300px，高度为200px； 3）红蓝色方块的上外边距(margin-top)和左外边距(margin-left)均为20px。,4.CSS+Div布局实例,虽然红色方块的宽度并不是100%，但是蓝色并未和红色处于同一行， 这就是块状元素“霸道”的一点，即使块状元素的宽度不是100%，它也不允许其它元素和它在同一行。,例子2：要求 1）两个方块，一个红色#900，一个蓝色#009； 2）红色方块宽度和高度均为200px，蓝色方块宽度为300px，高度为
19、200px； 3）红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20px。,4.CSS+Div布局实例,消除“霸权”的方法： 在红色方块的CSS里面加上 float: left ;,FireFox,例子2：要求 1）两个方块，一个红色#900，一个蓝色#009； 2）红色方块宽度和高度均为200px，蓝色方块宽度为300px，高度为200px； 3）红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20px。,4.CSS+Div布局实例,消除“浏览器兼容问题”的方法： 只需要在蓝色方块的CSS代码中也加入 float: l
20、eft ;,float ，消除块状元素“霸权”的一把利器！,例子3：要求 1）红蓝方块均宽200px，高200px； 2）在其下一行放一个宽度400px，高度100px的绿色方块。,4.CSS+Div布局实例,例子3：要求 1）红蓝方块均宽200px，高200px； 2）在其下一行放一个宽度400px，高度100px的绿色方块。,4.CSS+Div布局实例,导致绿色排到蓝色的后面这种情况，是因为蓝色方块CSS 代码中含有“float:left;“。,解决方法： 在绿色方块的CSS里面加上 clear: both ;,例子3：要求 1）红蓝方块均宽200px，高200px； 2）在其下一行放一个宽度400px，高度100px的绿色方块。,4.CSS+Div布局实例,推荐做法：,在CSS文件中添加： .clear clear:both; , 博客的左侧博客的右侧博客的版权信息,本小节实战,使用CSS+Div实现自己设计的首页布局，实现效果如右图所示： 为各区域定义规范的id； 为各区域设计合适的宽高； 为各区域临时设计背景颜 色和边框颜色，以便观察 代码效果和设计效果是否 一致。,谢 谢！,
