11 CSS知识简介.pptx

第1页：CSS知识讲解封面

计算机网络原理与技术

第2页：CSS指层叠样式表

• CSS指层叠样式表(Cascading Style Sheets)
• HTML标签原本被设计为用于定义文档内容，同时文档布局由浏览器来完成，而不使用任何的格式化标签。但不同的浏览器彼此不兼容，同样的HTML文档，显示效果不一样。
• 为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了HTML标准化的使命，并在HTML 4.0之外创造出样式（Style）
• 所有的主流浏览器均支持层叠样式表。

第3页：样式表允许以多种方式规定样式信息

• 样式可以规定在单个的HTML元素中。
• 也可以在HTML页的头元素中，引用一个外部的CSS文件，对页面内所有元素采用统一的规定格式。
• 如果网站的所有页面都引用同一个外部CSS文件，则所有页面显示格式一致，网站的风格得到统一。

第4页：层叠次序

• 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。
• 浏览器缺省设置
• 外部样式表
• 内部样式表（位于<head>标签内部）
• 内联样式（在HTML元素内部）
• 因此，内联样式（在HTML元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head>标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

第5页：内部样式表

• 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表，就像这样:
• <head><styletype="text/css">
• hr{color: sienna;}
• p {margin-left: 20px;}
• body {background-image:url("images/back40.gif");}
• </style></head>

第6页：内联样式：需要对页面中的某个元素进行格式

• 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
• 请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

第7页：要使用内联样式，你需要在相关的标签内使用

• 要使用内联样式，你需要在相关的标签内使用样式（style）属性。style属性可以包含任何CSS属性。
• 本例展示如何改变段落的颜色和左外边距：
• <pstyle="color: sienna; margin-left: 20px">
• This is a paragraph
• </p>

第8页：外部样式表：将样式保存在外部的.css文

• 外部样式表：将样式保存在外部的.css文件中。在网页头部使用<link>标签链接到样式表，指定这个外部文件<head><linkrel="stylesheet" type="text/css"href="mystyle.css" /></head>
• 浏览器会从与页面文件同目录的样式文件mystyle.css中读到样式声明，并根据它来格式文档。
• 外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的html标签。样式表应该以.css扩展名进行保存。

第9页：通过仅仅编辑一个简单的CSS文档

• 通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
• 由于允许同时控制多重页面的样式和布局，CSS可以称得上WEB设计领域的一个突破。
• 作为网站开发者，你能够为每个HTML元素定义样式，并将之应用于你希望的任意多的页面中。
• 如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

第10页：CSS语法由三部分构成：选择器

• CSS语法由三部分构成：选择器、属性和值：selector {property: value}
• 选择器(selector)通常是你希望定义的HTML元素或标签，属性(property)是你希望改变的属性，并且每个属性都有一个值。
• 属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）

第11页：body {color: blue}

• 上面这行代码的作用是将body元素内的文字颜色定义为蓝色。
• body是选择器（也是页面中的一个元素），而包括在花括号内的的部分是声明。
• 声明依次由两部分构成：属性和值，color为属性，blue为值。

第12页：CSS通过一系列的选择器

CSS通过一系列的选择器，为需要定制格式的页面元素规定显示方式，页面中，所有被规定的元素，都按照CSS的规定进行显示。例如：body {font-family: Verdana, sans-serif;}td {font-family: Verdana, sans-serif;}p {font-family: Times, "Times New Roman", serif;}

第13页：分组

• 具有相同设置的元素，可以分为一组，一并规定。
• 可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。h1,h2,h3,h4,h5,h6 {color: green;}

第14页：继承及其问题

• 根据CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：body {font-family: Verdana, sans-serif;}
• 根据上面这条规则，站点的body元素将使用Verdana字体（假如访问者的系统中存在该字体的话）。
• 通过CSS继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这些子元素诸如p,td,ul,ol,ul, li,dl,dt,和dd）。不需要另外的规则，所有body的子元素都应该显示Verdana字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。
• 但在一些浏览器中，例外是存在的。

第15页：派生选择器

• 派生选择器：对元素中的子元素进行格式规定，但对元素外的同名元素没有作用。
• 如元素strong在表格元素内、外都存在。
• 对表格内的strong元素的格式定义可以使用派生选择器：
• li strong {font-style:italic;font-weight:normal;}
• 对表格内的strong元素没有作用。

第16页：id选择器

• 页面内点元素可以指定ID，id选择器只对指定元素起作用。
• 元素ID指定方法：两个P元素都有各自的ID<p id="red">这个段落是红色。</p><p id="green">这个段落是绿色。</p>
• id选择器以"#"来定义#red {color:red;}#green {color:green;}
• ID是唯一的，以上定义指向明确

第17页：id选择器的派生选择器

• id选择器的派生选择器#sidebar p {font-style:italic;text-align:right;margin-top:0.5em;}
• 为ID为sidebar的元素中的所有P子元素规定格式

第18页：派生选择器也可以被使用很多次

• #sidebar p {font-style:italic;text-align:right;margin-top:0.5em;}
• #sidebar h2 {font-size: 1em;font-weight:normal;font-style:italic;margin: 0;line-height: 1.5;text-align: right;
• }
• 在这里，与页面中的其他p元素明显不同的是，sidebar内的p元素得到了特殊的处理，同时，与页面中其他所有h2元素明显不同的是，sidebar中的h2元素也得到了不同的特殊处理。

第19页：类选择器

• 在CSS中，类选择器以一个点号显示：.center {text-align: center}
• 在下面的HTML代码中，h1和p元素都被归于center类。这意味着两者都将遵守".center"选择器中的规则。<h1class="center">This heading will be center-aligned</h1><pclass="center">This paragraph will also be center-aligned.</p>

第20页：class也可被用作派生选择器

• .fancy td {color: #f60;background: #666;}
• 在上面这个例子中，类名为fancy的更大的元素内部的表格单元td都会以灰色背景显示橙色文字。（名为fancy的更大的元素可能是一个表格或者一个div）

第21页：class也可被用作派生选择器

• 元素也可以基于它们的类而被选择：td.fancy{color: #f60;background: #666;}
• 在上面的例子中，类名为fancy的td表格单元将是带有灰色背景的橙色。
• <td class="fancy">

第22页：CSS中的属性

文字

包括字体、字号、字颜色、背景颜色等。

图片

包括固定、移动、水平重复、垂直重复等。

边框

边框粗细、类型、颜色、边距等。

定位

左中右对齐、浮动，绝对定位、相对定位等。

• 选择器确定HTML元素，属性则是确定元素的哪个方面的显示方式被确定。
• 不同的元素拥有不同的属性，一般需要确定的属性包括：

第23页：CSS背景属性

• background简写属性，作用是将背景属性设置在一个声明中。
• background-attachment背景图像是否固定或者随着页面的其余部分滚动。
• background-color设置元素的背景颜色。
• background-image把图像设置为背景。
• background-position设置背景图像的起始位置。
• background-repeat设置背景图像是否及如何重复。

第24页：CSS文本属性

• 通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等
• text-indent属性，可以方便地实现文本缩进。
• text-align一个元素中的文本行互相之间的对齐方式。它的3个值常用值left、right和center会导致元素中的文本分别左对齐、右对齐和居中。
• word-spacing属性可以改变字（单词）之间的标准间隔。
• letter-spacing属性与word-spacing的区别在于，字母间隔修改的是字符或字母之间的间隔。
• text-transform属性处理文本的大小写。有4个值：none，uppercase，lowercase，capitalize

第25页：CSS文本属性

• text-decoration有5个值：none，underline，overline，line-through，blink
• underline会对元素加下划线。
• overline会在文本的顶端画一个上划线。
• line-through则在文本中间画一个贯穿线
• blink会让文本闪烁。

第26页：CSS文本属性

• 属性描述
• color设置文本颜色
• direction设置文本方向。
• line-height设置行高。
• letter-spacing设置字符间距。
• text-align对齐元素中的文本。
• text-decoration向文本添加修饰。
• text-indent缩进元素中文本的首行。
• text-shadow设置文本阴影。CSS2包含该属性，但是CSS2.1没有保留该属性。
• text-transform控制元素中的字母。
• unicode-bidi设置文本方向。
• white-space设置元素中空白的处理方式。
• word-spacing设置字间距。

第27页：CSS字体属性

• 属性描述
• font简写属性。作用是把所有针对字体的属性设置在一个声明中。
• font-family设置字体系列。
• font-size设置字体的尺寸。
• font-size-adjust当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1已删除该属性。）
• font-stretch对字体进行水平拉伸。（CSS2.1已删除该属性。）
• font-style设置字体风格。
• font-variant以小型大写字体或者正常字体显示文本。
• font-weight设置字体的粗细。

第28页：CSS列表属性

• 属性描述
• list-style简写属性。用于把所有用于列表的属性设置于一个声明中。
• list-style-image将图象设置为列表项标志。
• list-style-position设置列表中列表项标志的位置。
• list-style-type设置列表项标志的类型。
• marker-offset

第29页：CSS Table属性

• CSS表格属性允许你设置表格的布局。（请注意，本节介绍的不是如何使用表来建立布局，而是要介绍
• CSS中表本身如何布局。）
• 属性描述
• border-collapse设置是否把表格边框合并为单一的边框。
• border-spacing设置分隔单元格边框的距离。（仅用于"separatedborders"模型）
• caption-side设置表格标题的位置。
• empty-cells设置是否显示表格中的空单元格。（仅用于"separatedborders"模型）
• table-layout设置显示单元、行和列的算法。
• C S

第30页：CSS边框属性

• "CSS"列中的数字指示哪个CSS版本定义了该属性。
• 属性描述CSS
• outline在一个声明中设置所有的轮廓属性。2
• outline-color设置轮廓的颜色。2
• outline-style设置轮廓的样式。2
• outline-width设置轮廓的宽度。

第31页：CSS边框属性

• 属性描述
• border简写属性，用于把针对四个边的属性设置在一个声明。
• border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
• border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
• border-color简写属性，设置元素的所有边框中可见部分的颜色，或为4个边分别设置颜
• 色。
• border-bottom简写属性，用于把下边框的所有属性设置到一个声明中。
• border-bottom-color设置元素的下边框的颜色。
• border-bottom-style设置元素的下边框的样式。
• border-bottom-width设置元素的下边框的宽度。
• border-left简写属性，用于把左边框的所有属性设置到一个声明中。

第32页：border-left-color设置元

• border-left-style设置元素的左边框的样式。
• border-left-width设置元素的左边框的宽度。
• border-right简写属性，用于把右边框的所有属性设置到一个声明中。
• border-right-color设置元素的右边框的颜色。
• border-right-style设置元素的右边框的样式。
• border-right-width设置元素的右边框的宽度。
• border-top简写属性，用于把上边框的所有属性设置到一个声明中。
• border-top-color设置元素的上边框的颜色。
• border-top-style设置元素的上边框的样式。
• border-top-width设置元素的上边框的宽度。

第33页：CSS外边距属性

• 属性描述
• margin简写属性。在一个声明中设置所有外边距属性。
• margin-bottom设置元素的下外边距。
• margin-left设置元素的左外边距。
• margin-right设置元素的右外边距。
• margin-top设置元素的上外边距。

第34页：CSS定位

CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

第35页：一切皆为框

• 任何元素都占据一定范围，元素范围由包含元素所有内容的方框确定。
• div、h1或p元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。
• 与之相反，span和strong等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
• 父元素中包含的子元素，也有各自的框，它们局限在父元素框中。

第36页：CSS定位机制

• CSS有三种基本的定位机制：普通流、浮动和绝对定位。
• 普通流中的元素的位置由元素在HTML中的位置决定。框从上到下一个接一个地排列。
• 页面布局要打破普通流的限制。

第37页：CSS绝对定位

• position：absolute
• 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块（父框）定位
• 元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。
• 元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
• 会遮挡文档流元素，也可以通过设置z-index属性来控制这些框的堆放次序。

第38页：相对定位的页面效果

P元素不受h2元素的影响，好像h2元素不存在

第39页：CSS相对定位

• position：relative
• 对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

第40页：CSS相对定位

• 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
• 元素相对定位后，仍是普通流中的一员，只不过是位置可以发生相对变化。

第41页：CSS定位属性允许你对元素进行定位

• 属性描述
• position把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
• top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
• right定义了定位元素右外边距边界与其包含块右边界之间的偏移。
• bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。
• left定义了定位元素左外边距边界与其包含块左边界之间的偏移。
• overflow设置当元素的内容溢出其区域时发生的事情。
• clip设置元素的形状。元素被剪入这个形状之中，然后显示出来。
• vertical-align设置元素的垂直对齐方式。
• z-index设置元素的堆叠顺序。

第42页：CSS浮动

• 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
• 由于浮动框不在文档的普通流中，所以和绝对定位一样，文档的普通流中的块框表现得就像浮动框不存在一样。

第43页：CSS浮动

把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

第44页：CSS浮动

• 当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。
• 因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失。
• 可以通过设置z-index属性来控制这些框的堆放次序。

第45页：CSS浮动

如果把所有三个框都浮动（如向左移动），那么浮动依次进行。框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

第46页：CSS浮动

• 如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
• 如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

第47页：CSS浮动

• 由float属性确定浮动方式
• 浮动方式包括以下几种：
• left元素向左浮动。
• right元素向右浮动。
• none默认值。元素不浮动，并会显示在其在文本中出现的位置。
• inherit规定应该从父元素继承float属性的值。

第48页：CSS属性

• 动画
• 背景
• 边框和轮廓
• 盒（框）
• 颜色
• 内容分页媒体
• 定位
• 可伸缩框
• 字体
• 生成内容
• 网格
• 超链接
• 行框
• 列表
• 外边距
• Marquee
• 多列
• 内边距
• 分页媒体
• 用户界面
• 打印
• Ruby
• 语音
• 表格
• 文本
• 2D/3D转换
• 过渡CSS属性组：每组属性具体内容，可以查询：http://www.w3school.com.cn/cssref/index.asp