第03部分-CSS技术

1、信息工程学院第3部分 CSS技术（第7、8章）引入本部分内容1. CSS基础2. CSS属性值与单位3. CSS文本修饰应用4. 盒子模型与标准流定位5. 背景的控制6. 相对定位与绝对定位7. 盒子浮动8. CSS+DIV布局1. CSS基础 CSS（Cascading Style Sheets的缩写），是用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。 HTML和CSS的关系就是“内容”和“形式”的关系，由(X)HTML组织网页的结构和内容，而通过CSS来决定页面的表现形式。 目前的Web设计标准： 网页的所有内容都在XHTML网页中设计； 网页的所有样式都放置在CSS中。1.

2、1 CSS的语法 CSS样式表由一系列样式规则组成，浏览器将这些规则应用到相应的元素上，样式表中规则间用英文分号(;)分隔。 每条规则由两部分组成：选择器和声明 。 每条声明又是属性和值的组合 ，属性与值间用英文冒号 (:)分隔。1.2 在HTML中引入CSS的方法1. 直接在标签的style属性进行设置(行内式) 格式是-某个属性：值2. 在HTML页面中直接使用(嵌入式) 在标签中加入1.2 在HTML中引入CSS的方法3. 链接外部样式表（.css文件） 在head标签中使用 href：表示引用哪个.css文件； rel：是指在页面中使用这个外部的样式表 type：指文件的类型是样式表文

3、本 4. 导入外部样式表 在head标签中使用（这种方式不要忘了分号；)5. 链接与导入的区别 link属于HTML标签，而import完全是CSS提供的一种方式。 当一个页面被加载的时候，link引用的CSS会同时被加载，而import引用的CSS会等到页面全部被下载完再被加载。 import是CSS2.1提出的所以老的浏览器不支持，link不存在这个问题。目前使用link链接.CSS是个不错的选择！1.3 CSS选择器 要想使CSS样式应用到特定的HTML元素，需要找到这个元素，执行这一任务的样式规则叫选择器。1.标签选择器body color:#111111; font-size:12p

4、x;img border-width:0; 对应的标签对应相应的样式；2.id选择器（整个文档中这种样式是唯一的） 测试文本 #intro font-weight:bold; 1.3 CSS选择器3. class选择器 多个地方需要使用同种样式 测试1 测试2 css样式 .introfont-weight:bold;4. 伪类选择器 指定的对象在文档中并不存在，标签的某个状态 a:link color: #FF0000 /* 未被访问的链接为红色 */ a:visited color: #00FF00 /* 已被访问过的链接为绿色 */ a:hover color: #FFCC00 /* 鼠

5、标悬浮在上的链接为橙色 */ a:active color: #0000FF /* 鼠标点中激活链接为蓝色 */ I-V-H-A，请按这样的次序，否则可能失效！1.3 CSS选择器5. 选择器的灵活组合 （1）（后代）嵌套选择器 Welcome 应用CSS #mainco pcolor:red; . 样式定义 #HeadTop #Logo (2) 并集选择器 选择器将分英文逗号分隔 h1,h2 color:red; 1.4 CSS的层叠性 CSS具有两个特性：层叠性和继承性。所谓层叠性是指多个选择器的作用范围发生了叠加。 当多个样式规则作用于同一元素时： （1）如果多个规则未发生冲突，则元素将

6、应用所有规则。 （2）如果多个样式规则发生了冲突，则CSS按照选择器的优先级高低来处理。 行内样式 ID样式 类样式 标记样式 如果优先级相同,则以后定义的为准（一般情况下）1.5 CSS的继承性 CSS的继承性是指如果子元素定义的样式没有和父元素定义的样式发生冲突，那么子元素将继承父元素的样式风格，并可以在父元素的基础上再加以修改，定义自己的新属性。 合理利用CSS的继承性，可以大大缩减代码量，并提高可读性。 需要注意：并不是所有的CSS属性都具有继承性，具体可参考CSS手册。本部分内容1. CSS基础2. CSS属性值与单位3. CSS文本修饰应用4. 盒子模型与标准流定位5. 背景的控制

7、6. 相对定位与绝对定位7. 盒子浮动8. CSS+DIV布局 值是对属性的具体描述，而单位是值的基础。 在大多数情况下，没有单位的值，浏览器将不知如何处理。 在CSS中较复杂的值和单位有： 颜色 长度（大小） 颜色的值 CSS中定义颜色值可以使用命名颜色、rgb颜色和十六进制颜色三种方法。 命名颜色 颜色的英文名称，如：red、blue等 rgb颜色函数 按三原色原理合成颜色，如：rgb(255,128,0) 十六进制颜色描述 按三原色原理合成颜色，如：#FF8800本部分内容1. CSS基础2. CSS属性值与单位3. CSS文本修饰应用4. 盒子模型与标准流定位5. 背景的控制6. 相对

8、定位与绝对定位7. 盒子浮动8. CSS+DIV布局CSS文本修饰应用 网页中文字的美化是网页美观的一个基本要求，通过CSS的强大的文本修饰功能，可以对网页中的文字进行更精细的控制。 CSS中控制文本样式的属性主要有： “font-”开头的属性 “text-”开头的属性 修改文本颜色的“color”属性 行高“line-height”属性本部分内容1. CSS基础2. CSS属性值与单位3. CSS文本修饰应用4. 盒子模型与标准流定位5. 背景的控制6. 相对定位与绝对定位7. 盒子浮动8. CSS+DIV布局盒子模型与标准流定位 在网页的布局和页面元素的表现方面，最重要的是CSS的盒子模型

9、以及盒子在浏览器中的排列。 盒子模型是CSS的基石之一，它指定元素如何显示以及如何相互交互。页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框与边界组成。 网页就是由许多个盒子通过不同的排列方式（上下、左右、嵌套）组合而成。4.1 盒子模型基础marginmargin：边界：边界，四个方向为margin-top，margin-right，margin-bottom，margin-leftborderborder：边框：边框，四个方向为border-top，border-right，border-bottom，border-leftpaddingpadding：填充

10、：填充，四个方向为padding-top，padding-right，padding-bottom，padding-leftcontentcontent：主体内容：主体内容说明： 在左图中，盒子模型，不包括最外的黑色框。4.1.1 盒子大小计算 在利用盒子排版时，就要精确的理解盒子大小的计算方法。 盒子模型中的填充、边框、边界值都可以通过相应属性分别来设置，内容区的大小可以通过width和height来设置。 填充、边框和边界值的变化，不会影响内容区域的大小，便会使得盒子的大小发生变化。 例如下面的样式 #MyBox margin:10px; padding:5px; border-width

11、:0px; width:70px; /内容的宽度 这个区域的宽度=左边距+左边框+左填充+内容宽度+ 右填充+右边框+右边距 = 10px+0px+5px+70px+5px+0px+10px = 100px4.1.2 边框属性 盒子模型中的margin和padding属性比较简单，只能设置其大小。 边框可以设置宽度、颜色和样式。border属性主要有三个：border-width、border-color、border-style。 其中border-style属性在不同的浏览器中，如IE、Firefox和Chrom等中略有差别。4.1.3 盒子模型属性的缩写 盒子边界、填充或边框宽度的缩写

12、如只给定一个值，则表示其上下左右的值都相同 如给定两个值，则分别表示上下、左右的值 如给定三个值，则分别表示上、左右、下的值 如给定四个值，则分别表示上、右、下、左的值 边框border属性的缩写 border: border-width | border-style | border-color 可以分别设置border-style和border-color 可以类似这样：border-right-color 、border-top-color4.1.4 盒子模型属性的默认值 大多数HTML元素的盒子属性（margin、padding、border-width）默认值为0。 有少数HTML元

13、素的margin和padding的默认值 不为0，如：body、p、ul、li等。 表单元素中大部分input元素的边框属性默认值 不为0。4.2 盒子模型的应用 1. 美化表单 网页中的表单控件在默认情况下背景都是灰色的，文本框边框是粗线条带立体感的，不够美观。可以通过CSS改变表单的边框样式、颜色和背景颜色让文本框，按钮等变得漂亮些。 课堂演示 “标准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。4.3 盒子在标准流下的定位4.3.1 行内元素与块元素 行内元素(inline)是指元素与元素

14、之间从左到右并排排列，只有当浏览器窗口容纳不下才会转到下一行，块级元素(block)是指每个元素占据浏览器一整行位置，块级元素与块级元素之间自动换行，从上到下排列。 块级元素内部可包含行内元素或块级元素，行内元素内部可包含行内元素，但不得包含块级元素，另外，块级元素元素内部也不能包含其他的块级元素。 1块级元素（block level） li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。 ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。 因此，这类元素称为“块级元素”（block level），即它们总是以一个块的形式表现出来

15、，并且跟同级的兄弟块依次竖直排列，左右撑满。2行内元素（inline） 对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”（inline）。 比如标记，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。 再比如，最常用的标记，也是一个行内元素。3 div与span div span div与span的区别 div标记不同行： span标记同一行： 与与标记的区别标记的区别4.3.2 盒子在标准流中的定位原则行内元素与块元素之间的水平margin行内元素之间的行内元素之间的margin4.3.3 块级元素之间

16、的竖直margin 如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。 两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图所示。图图4.20 块元素之间的块元素之间的margin 这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。4.3.4 嵌套盒子之间的margin 除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种位置关系，它的margin值对CSS排版也有重要的作用，这就是父子关系。 当一个块包含在另一个块中时，便形成了典

17、型的父子关系。 其中子块的margin将以父块的内容为参考，如图所示。 父子块的父子块的margin IE与与Firefox对待父对待父height的不同处理的不同处理4.3.5 margin属性可以设置为负值 上面提及margin的时候，它的值都是正数。 其实margin的值也可以设置为负数，而且有关的巧妙运用方法也非常多，在后续学习中都会续介绍。 当margin设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。 父子块设置父子块设置margin为负数为负数本部分内容1. CSS基础2. CSS属性值与单位3. CSS文本修饰应用4. 盒子模型与标准流定位5. 背景的控制

18、6. 相对定位与绝对定位7. 盒子浮动8. CSS+DIV布局CSS的背景属性 背景（background）是网页中常用的一种表现方法，无论是单纯的背景颜色还是背景图片，都能为网页带来丰富的视觉效果。 HTML的很多元素都具有bgcolor和backgroud属性，可以设置背景颜色和背景图片，如（table、td等），但形式比较单一，对背景图片的设定，只支持在X轴和Y轴都平铺的方式。CSS的背景属性 CSS对元素的背景设置，则提供了更多的途径，如背景图片既可以平铺也可以不平铺，还可以在X轴平铺或在Y轴平铺，当背景图片不平铺时，并不会完全挡住背景颜色，因此可以综合设置背景颜色和背景图片达到希望的

19、效果。 CSS的背景属性是backgroud或以backgroud开头 CSS的背景属性属性属性描述描述可用值可用值background设置背景的所有控制选项，设置背景的所有控制选项，是其他所有背景属性的缩写是其他所有背景属性的缩写其他背景属性的值的集合其他背景属性的值的集合background-color设置背景颜色设置背景颜色rgb颜色颜色命名颜色命名颜色16进制颜色进制颜色background-image设置背景图片设置背景图片urlbackground-repeat设置背景图片的平铺设置背景图片的平铺方式方式repeat（完全平铺）（完全平铺）repeat-x（横向平铺）（横向平铺）r

20、epeat-y（纵向平铺）（纵向平铺）no-repeat（不平铺）（不平铺）background-attachment设置背景图片固定还设置背景图片固定还是随内容滚动是随内容滚动scroll（默认值）（默认值）fixedbackground-position设置背景图片显示的设置背景图片显示的起始位置起始位置（top leftcenter centerbottom right）（x% y%x-pos y-pos）各个背景属性的默认值 background-color: transparent 透明模式 background-image: none background-repeat: repe

21、at平铺 background-attachment: scroll background-position: 0% 0%background属性的缩写 background属性是所有背景属性的缩写形式，就像font属性一样，其缩写顺序为： background: background-color | background-image | background-repeat | background-attachment | background-position如body background:#EFF4FF url(images/body_bg.jpg) repeat-x fixed;本部

22、分内容1. CSS基础2. CSS属性值与单位3. CSS文本修饰应用4. 盒子模型与标准流定位5. 背景的控制6. 相对定位与绝对定位7. 盒子浮动8. CSS+DIV布局（1）标准流）标准流 学完盒子模型之后知道网页是由一个个的盒子组成的， 那么在最简单的不包含CSS的页面里，浏览器怎样定位各种盒子呢？ 在这种情况下，浏览器会根据各个盒子在浏览器会根据各个盒子在html中出现的顺序，中出现的顺序，由上而下由上而下一个接一个一个接一个的排的排列列，把这样方式称作“流”，这种流称之为“标准流标准流”。 这种方式可用CSS属性position：static控制。6 相对定位与绝对定位 （2）相对

23、定位）相对定位 使用CSS属性 position：relative，在相对定位下，元素的位置相对于它本来该出现的位置它本来该出现的位置的偏移。 （2）相对定位）相对定位 使用CSS属性 position：relative，在相对定位下，元素的位置相对于它本来该出现的位置它本来该出现的位置的偏移。 标准流中它应该出现的位置标准流中它应该出现的位置（3）绝对定位）绝对定位 使用CSS属性position:absolute，在绝对定位下，元素的位置相对于“最近最近”的“已定位已定位”的“祖先祖先”元素。 （3）绝对定位）绝对定位 使用CSS属性position:absolute，在绝对定位下，元素的

24、位置相对于“最近最近”的“已定位已定位”的“祖先祖先”元素。 已定位已定位：position属性被设置且不是属性被设置且不是static。 祖先祖先：从该元素开始一直到：从该元素开始一直到根根节点的所有节点的所有元素。元素。 最近最近：距该元素距离最短的一个节点。：距该元素距离最短的一个节点。标准流中盒子的位置关系标准流中盒子的位置关系使用了绝对定位后盒子的位置关系使用了绝对定位后盒子的位置关系(2)(2)使用了绝对定位后盒子的位置关系使用了绝对定位后盒子的位置关系(1)(1)摄影师个人网站布局实例摄影师个人网站布局实例 (一)内容分析 内容决定网页形式1.作品列表2.名称3.宣传语4.简介5

25、.相关链接6.联系方式 (二)HTML结构设计 根据内容设计出合理的XHTML文件结构。 不关心显示效果，完全从网页的内容出发。(三)原型设计(三) CSS设计(1)(三) CSS设计(2)本部分内容1. CSS基础2. CSS属性值与单位3. CSS文本修饰应用4. 盒子模型与标准流定位5. 背景的控制6. 相对定位与绝对定位7. 盒子浮动8. CSS+DIV布局盒子的浮动 在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列，如果仅仅按照标准流的方式进行排列，就只有这几种可能性，限制太大。CSS的制订者也想到了这样排列限制的问题，因此又给出了浮动和定位方式进行盒子的排列，从而

26、使排版的灵活性大大提高。盒子的浮动 例如：有时希望相邻块级元素的盒子左右排列（所有盒子浮动）或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出图文混排的效果，这时最简单的办法就是运用浮动（float）属性使盒子在浮动方式下定位。 在标准流中，一个块级元素在水平方向会自动伸展，在它的父元素中占满整个一行；而在竖直方向和其他元素依次排列，不能并排，如图所示。使用“浮动”方式后，这种排列方式就会发生改变。 CSS中有一个float属性，默认值为none，也就是标准流通常的情况，如果将float属性的值设为left或right，元素就会向其父元素的左侧或右侧靠紧，同时盒子的宽度不再伸展，而

27、是收缩，在没设置宽度时，会根据盒子里面的内容来确定宽度。1. 一个盒子浮动1. 一个盒子浮动 接下来在上述代码中添加一条CSS代码，使元素“.son1”浮动。代码如下： .son1float:left; 此时显示效果如图4-63所示，可发现给“.son1”添加浮动属性后，“.son1”的宽度不再自动伸展，而且不再占据原来浏览器分配给它的位置。如果再在未浮动的盒子Box-2中添一行文本，就会发现“.son2”中的内容是环绕着浮动盒子的 总结：一个盒子浮动后的特点 （1）浮动后的盒子将以块级元素显示，但宽度不会自动伸展。 （2）浮动的盒子将脱离标准流，即不再占据浏览器原来分配给它的位置（IE有时例

28、外）。 （3）未浮动的盒子将占据浮动盒子的位置，同时未浮动盒子内的内容会环绕浮动后的盒子。总结：一个盒子浮动后的特点 提示：所谓“脱离标准流”是指元素不再占据在标准流下浏览器分配给它的空间，其他元素就好像这个元素不存在一样。例如图4-63中，当Box-1浮动后，Box-2就顶到了Box-1的位置，相当于Box-2视Box-1不存在一样。但是，浮动元素并没有完全脱离标准流，这表现在浮动盒子会影响未浮动盒子中内容的排列，例如Box-2中的内容会跟在Box-1盒子之后进行排列，而不会忽略Box-1盒子的存在。 2. 多个盒子浮动 多个盒子都浮动后，就产生了块级元素水平排列的效果 多个浮动元素不会相互

29、覆盖，一个浮动元素的外边界（margin）碰到另一个浮动元素的外边界后便停止运动。 若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动（图4-68）。但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住 4.7.2 浮动的清除 clear是清除浮动属性，它的取值有left、right、both和none（默认值），如果设置盒子的清除浮动属性clear值为left或right，表示该盒子的左边或右边不允许有浮动的对象。值设置为both则表示两边都不允许有浮动对象，因此该盒子将会在浏览器中另起一行显示 clear属性既可以用在未浮动的元素上，也可以用在浮动的元素上，

30、如果对Box-3同时设置清除浮动和浮动，即： .son3clear:both; float:left; 总结：清除浮动是清除其它盒子浮动对该元素的影响，而设置浮动是让元素自身浮动，两者并不矛盾，因此可同时设置元素清除浮动和浮动 4.7.3 浮动的浏览器解释问题 1. 元素浮动但是其父元素不浮动 当设置了父元素的宽度或高度后，IE （非标准浏览器）中的浮动元素将占据外围容器空间，Firefox依然不占据 3. 元素浮动但是其后面相邻元素不浮动 设置了后面相邻元素的宽或高，则在IE中，浮动元素将仍然占据它原来的空间，未浮动元素跟在它后面 浮动的浏览器显示问题总结情 况未浮动的盒子不设宽或高对未浮动

31、的盒子设置宽或高盒子浮动，其外层盒子未浮动IE和Firefox的显示效果一致IE浮动盒子将不会脱离标准流，Firefox浮动盒子仍然是脱离标准流的盒子浮动，后面相邻盒子未浮动 IE 6浮动元素的双倍margin错误 在IE6中，只要设置元素浮动，则设置左浮动，盒子的左margin会加倍，设置右浮动，盒子的右margin会加倍。这是IE6的一个bug（IE7已经修正了这个bug）。 解决IE 6双倍margin错误的方法很简单，只要对浮动元素设置“display:inline;”就可了。代码如下： .son1float:left; display:inline; 提示，即使对浮动元素设置“display:inline;”，它仍然会以块级元素显示，因为设置元素浮动后元