《css课件(上课用).ppt》由会员分享，可在线阅读，更多相关《css课件(上课用).ppt（34页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、CSS层叠样式表层叠样式表CSS层叠样式表层叠样式表 CSS的全称是的全称是Cascading Style Sheet，中文翻译为中文翻译为“层层叠样式表叠样式表”。实用。实用CSS可以可以改变改变HTMLHTML的基本特性，从而控的基本特性，从而控制传统网页上的元素，诸如精确的空白、段落缩进、文本制传统网页上的元素，诸如精确的空白、段落缩进、文本的外观和链接的状态等等。这样，你就可以实现对网页元的外观和链接的状态等等。这样，你就可以实现对网页元素的格式控制。素的格式控制。CSS不仅允许你指定单个网页的外观，不仅允许你指定单个网页的外观，还可以被用来为网站提供一致的界面。还可以被用来为网站提供
2、一致的界面。CSSCSS样式通常保存在外部的样式通常保存在外部的 .css.css 文件中。通过仅仅文件中。通过仅仅编辑一个简单的编辑一个简单的 CSS CSS 文档，外部样式表使你有能力同时文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。这样，创建的文档改变站点中所有页面的布局和外观。这样，创建的文档内容和文档的显示外观就有着明显的相互独立。内容和文档的显示外观就有着明显的相互独立。当然，当然，CSSCSS样式也可以以样式也可以以标签的形式写在网页标签的形式写在网页文件的文件的标签中，或是直接将标签中，或是直接将CSSCSS语句书写在某个元语句书写在某个元素标签的属性部分。素标
3、签的属性部分。当同一个当同一个 HTML HTML 元素被不止一个样式定义时，元素被不止一个样式定义时，会使用会使用哪个样式呢？哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，它们新的虚拟样式表中，它们产生作用的优先级别为如下顺产生作用的优先级别为如下顺序：序：内联样式（在内联样式（在 HTML HTML 元素内部）元素内部）内部样式表（位于内部样式表（位于 标签内部）标签内部）外部样式表（以外部样式表（以CSSCSS文件独立存在）文件独立存在）例题例题 css-1.htmlcss-1.htmlCSS CSS 语法语法C
4、SS CSS 语法由三部分构成：选择器、属性和值：语法由三部分构成：选择器、属性和值：selector property:value selector property:value 选择器选择器 (selector)(selector)通常是你希望定义的通常是你希望定义的HTMLHTML元素或标元素或标签，属性签，属性 (property)(property)是你希望改变的属性，并且每个属性是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（就组成了一个完整的样式声明（declara
5、tiondeclaration）,例如：例如：body color:blue;body color:blue;如果值为若干单词，则要给值加引号：如果值为若干单词，则要给值加引号：p font-family:sans serif;p font-family:sans serif;如果要定义不止一个声明，则需要用分号将每个声明分如果要定义不止一个声明，则需要用分号将每个声明分开。开。最后一条规则是不需要加分号的，但是一般在每条声明最后一条规则是不需要加分号的，但是一般在每条声明的末尾都会加上分号，包括最后一条规则。这么做的好处是的末尾都会加上分号，包括最后一条规则。这么做的好处是尽可能的减少出错的
6、可能性。尽可能的减少出错的可能性。p text-align:center;color:red;p text-align:center;color:red;在书写的时候可以每行只描述一个属性，以便使样式定在书写的时候可以每行只描述一个属性，以便使样式定义的可读性更强。义的可读性更强。p p text-align:center;text-align:center;color:black;color:black;font-family:arial;font-family:arial;选择器的分组选择器的分组 可以对选择器进行分组，这样，被分组的选择器就可以可以对选择器进行分组，这样，被分组的选择器就
7、可以分享相同的声明，用逗号将需要分组的选择器分开。分享相同的声明，用逗号将需要分组的选择器分开。h1,h2,h2,h3,h5,h6 h1,h2,h2,h3,h5,h6 color:green;color:green;在上面的例子中，对所有的标题标签进行了分组。所有在上面的例子中，对所有的标题标签进行了分组。所有的标题元素都是绿色的。的标题元素都是绿色的。选择器的类型选择器的类型1 1 派生选择器派生选择器 通过依据元素在其位置的上下文关系来定义样式，在通过依据元素在其位置的上下文关系来定义样式，在 CSSCSS中，通过这种方式来应用规则的选择器被称为派生选择中，通过这种方式来应用规则的选择器被
8、称为派生选择器器 。这样可以利用元素的上下文关系来应用或者避免某项。这样可以利用元素的上下文关系来应用或者避免某项规则。规则。li b li b font-style:italic;font-style:italic;font-weight:normal;font-weight:normal;例题例题 css-2.htmlcss-2.html2 id2 id选择器选择器 id id 选择器可以为标有特定选择器可以为标有特定idid的的HTMLHTML元素指定特定的样元素指定特定的样式。式。id id 选择器以选择器以 “#”来定义。下面的两个来定义。下面的两个idid选择器，第一选择器，第一个
9、可以定义元素的颜色为红色，第二个定义元素的颜色为绿个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：色：#red color:red;#red color:red;#green color:green;#green color:green;这个段落是红色。这个段落是红色。font id=这句文本是绿色。这句文本是绿色。注意：一个值的注意：一个值的idid属性只能在每个属性只能在每个HTMLHTML文档中出现一次。文档中出现一次。idid选择器和派生选择器选择器和派生选择器 id id选择器常常用于建立派生选择器。选择器常常用于建立派生选择器。#sidebar p#sidebar p fo
10、nt-style:italic;font-style:italic;text-align:right;text-align:right;margin-top:10px;margin-top:10px;上面的样式只会应用于出现在上面的样式只会应用于出现在idid是是sidebarsidebar的元素内的的元素内的段落。这个元素很可能是段落。这个元素很可能是 div div 或者是表格单元，即使被标或者是表格单元，即使被标注为注为sidebarsidebar的元素只能在文档中出现一次，这个的元素只能在文档中出现一次，这个idid选择器选择器作为派生选择器也可以被使用很多次。作为派生选择器也可以被使
11、用很多次。例题例题 css-3.htmlcss-3.html3 3 类选择器类选择器 在在 CSS CSS 中，类选择器以一个点号显示：中，类选择器以一个点号显示：.center text-align:center .center text-align:center 因此，所有拥有因此，所有拥有 center center 类的类的HTMLHTML元素均为居中。元素均为居中。This heading will be center-This heading will be center-aligned aligned This paragraph will also be This paragr
12、aph will also be center-aligned.center-aligned.和和 id id 一样，一样，class class 也可被用作派生选择器：也可被用作派生选择器：.fancy td color:#f60;background:#666;.fancy td color:#f60;background:#666;类名为类名为fancyfancy的更大的元素内部的表格单元都会以灰色的更大的元素内部的表格单元都会以灰色背景显示橙色文字。背景显示橙色文字。元素也可以基于它们的类而被选择：元素也可以基于它们的类而被选择：td.fancy color:#f60;backgrou
13、nd:#666;td.fancy color:#f60;background:#666;在上面的例子中，类名为在上面的例子中，类名为fancyfancy的表格单元将是带有灰的表格单元将是带有灰色背景的橙色。你可以将类色背景的橙色。你可以将类fancyfancy分配给任何一个表格元素分配给任何一个表格元素任意多的次数。那些以任意多的次数。那些以 fancy fancy 标注的单元格都会是带有灰标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为色背景的橙色。那些没有被分配名为fancyfancy的类的单元格不的类的单元格不会受这条规则的影响。当然，任何其他被标注为会受这条规则的影响。当然，任
14、何其他被标注为fancyfancy的元的元素也不会这条规则的影响。素也不会这条规则的影响。例题例题 css-4.htmlcss-4.html如何创建如何创建 CSSCSS 创建创建CSSCSS样式表的方法有三种：样式表的方法有三种：1 1 外部样式表外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的当样式需要应用于很多页面时，外部样式表将是理想的选择。选择。WebWeb页面使用页面使用 标签链接到样式表文件。标签链接到样式表文件。标签写在文档的头部（标签写在文档的头部（headhead）：）：link rel=stylesheet type=text/css href=mystyle
15、.css/外部样式表可以在任何文本编辑器进行编辑。文件不能外部样式表可以在任何文本编辑器进行编辑。文件不能包含任何的包含任何的 html html 标签。样式表应该以标签。样式表应该以 .css.css 扩展名进行保扩展名进行保存。存。hr hr color:sienna color:sienna p p margin-left:20px margin-left:20px body body background-image:url(images/back40.gif)background-image:url(images/back40.gif)2 2 内部样式表内部样式表 当单个文档需要特殊
16、的样式时，就应该使用内部样式表。当单个文档需要特殊的样式时，就应该使用内部样式表。内部样式表是使用内部样式表是使用 标签写在头部：标签写在头部：hr color:sienna hr color:sienna p margin-left:20px p margin-left:20px body background-image:url(images/back40.gif)body background-image:url(images/back40.gif)3 3 内联样式表内联样式表 当样式仅需要在一个元素上应用一次时，就需要内联样当样式仅需要在一个元素上应用一次时，就需要内联样式表。要使用内
17、联样式，你需要在相关的标签内使用样式式表。要使用内联样式，你需要在相关的标签内使用样式（stylestyle）属性，）属性，StyleStyle属性可以包含任何属性可以包含任何CSSCSS属性。属性。This is a paragraph This is a paragraph 例题例题 css-1.htmlcss-1.htmlCSS CSS 框模型框模型 (Box Model)(Box Model)框模型框模型 (Box Model)(Box Model)规定了元素框处理元素内容、规定了元素框处理元素内容、内内边距边距、边框边框 和和 外边距外边距 的方式。的方式。元素框的最内部分是实元素框
18、的最内部分是实际的内容，直接包围内容的际的内容，直接包围内容的是内边距。内边距呈现了元是内边距。内边距呈现了元素的背景。内边距的边缘是素的背景。内边距的边缘是边框。边框以外是外边距，边框。边框以外是外边距，外边距默认是透明的，因此外边距默认是透明的，因此不会遮挡其后的任何元素。不会遮挡其后的任何元素。CSSCSS属性属性CSSCSS能够处理的属性有：能够处理的属性有：背景、文本、字体、边框、内边距、外边距、列表、表格、背景、文本、字体、边框、内边距、外边距、列表、表格、尺寸、定位、分类、伪类尺寸、定位、分类、伪类CSS CSS 背景（背景（backgroundbackground）该属性定义元
19、素的背景效果。元素的背景区包括前景之该属性定义元素的背景效果。元素的背景区包括前景之下直到边框边界的所有空间。因此，内容框与内边距都是元下直到边框边界的所有空间。因此，内容框与内边距都是元素背景的一部分，且边框画在背景上。素背景的一部分，且边框画在背景上。CSS CSS 允许应用纯色作为背景，也允许使用背景图像创建允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。相当复杂的效果。Background Background 简写属性简写属性background-attachmentbackground-attachment背景图像是否固定或者随着页面的背景图像是否固定或者随着页面的 其
20、余部分滚动。其余部分滚动。background-color background-color 设置元素的背景颜色。设置元素的背景颜色。background-background-image image 把图像设置为背景。把图像设置为背景。background-position background-position 设置背景图像的起始位置。设置背景图像的起始位置。background-repeatbackground-repeat 设置背景图像是否及如何重复。设置背景图像是否及如何重复。例题例题 css-5.htmlcss-5.htmlCSS CSS 文本文本 使用文本属性，你可以改变文本的颜
21、色，增加或减少文使用文本属性，你可以改变文本的颜色，增加或减少文本中的字符间距，对齐文本，装饰文本，对文本中的首行进本中的字符间距，对齐文本，装饰文本，对文本中的首行进行缩进等。行缩进等。Color Color 设置文本颜色设置文本颜色Direction Direction 设置文本方向。设置文本方向。line-height line-height 设置行高。设置行高。letter-spacing letter-spacing 设置字符间距。设置字符间距。text-align text-align 对齐元素中的文本。对齐元素中的文本。text-decoration text-decoratio
22、n 向文本添加修饰。向文本添加修饰。text-indent text-indent 缩进元素中文本的首行。缩进元素中文本的首行。text-transform text-transform 控制元素中的字母。控制元素中的字母。word-spacing word-spacing 设置字间距。设置字间距。例题例题 css-6.htmlcss-6.htmlCSS CSS 字体（字体（fontfont）CSS CSS 字体属性允许您设置字体系列字体属性允许您设置字体系列 (font-family)(font-family)和和字体加粗字体加粗 (font-weight)(font-weight)，您还可
23、以设置字体的大小、字体，您还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）。风格（如斜体）和字体变形（如小型大写字母）。Font Font 简写属性简写属性font-family font-family 设置字体系列。设置字体系列。font-size font-size 设置字体的尺寸。设置字体的尺寸。font-style font-style 设置字体风格。设置字体风格。font-variant font-variant 以小型小写字体或者正常字体显示文本。以小型小写字体或者正常字体显示文本。font-weight font-weight 设置字体的粗细。设置字体的粗细。
24、例题例题 css-7.htmlcss-7.htmlCSS CSS 边框边框(border)(border)CSS CSS边框属性可以规定元素边框的粗细、样式和颜色。边框属性可以规定元素边框的粗细、样式和颜色。border border 简写属性简写属性 border-style border-style 用于设置元素所有边框的样式，或者单用于设置元素所有边框的样式，或者单 独地为各边设置边框样式。独地为各边设置边框样式。border-width border-width 用于为元素的所有边框设置宽度，或者用于为元素的所有边框设置宽度，或者 单独地为各边边框设置宽度。单独地为各边边框设置宽度。b
25、order-color border-color 设置元素的所有边框中可见部分的颜设置元素的所有边框中可见部分的颜 色，或为色，或为 4 4 个边分别设置颜色。个边分别设置颜色。例题例题 css-8.htmlcss-8.htmlCSS CSS 外边距外边距(margin)(margin)CSS CSS外边距属性定义元素周围的空间。设置外边距会在外边距属性定义元素周围的空间。设置外边距会在元素外创建额外的元素外创建额外的“空白空白”。“空白空白”通常指不能放其它元通常指不能放其它元素的区域，而且在这个区域中可以看到父元素的背景。素的区域，而且在这个区域中可以看到父元素的背景。h1 margin:
26、10px 0px 15px 5px;h1 margin:10px 0px 15px 5px;这些值的顺序是从上外边距这些值的顺序是从上外边距 (top)(top)开始围着元素顺时针旋开始围着元素顺时针旋转的：转的：margin:top right bottom left margin:top right bottom left margin margin 简写属性简写属性 margin-bottom margin-bottom 设置元素的下外边距。设置元素的下外边距。margin-left margin-left 设置元素的左外边距。设置元素的左外边距。margin-right margin-
27、right 设置元素的右外边距。设置元素的右外边距。margin-top margin-top 设置元素的上外边距。设置元素的上外边距。例题例题 css-9.htmlcss-9.htmlCSS CSS 内边距内边距(padding)(padding)CSS CSS 内边距属性定义元素边框与元素内容之间的空白内边距属性定义元素边框与元素内容之间的空白 。td padding:2px 2px 2px 2px;td padding:2px 2px 2px 2px;Padding Padding 简写属性。简写属性。padding-bottom padding-bottom 设置元素的下内边距。设置元
28、素的下内边距。padding-left padding-left 设置元素的左内边距。设置元素的左内边距。padding-right padding-right 设置元素的右内边距。设置元素的右内边距。padding-top padding-top 设置元素的上内边距。设置元素的上内边距。例题例题 css-10.htmlcss-10.htmlCSS CSS 列表列表 CSS CSS 列表属性可以放置、改变列表项标志，或者将图像列表属性可以放置、改变列表项标志，或者将图像作为列表项标志作为列表项标志 。list-style list-style 简写属性。简写属性。list-style-imag
29、e list-style-image 将图象设置为列表项标志。将图象设置为列表项标志。list-style-position list-style-position 设置列表中列表项标志的位置。设置列表中列表项标志的位置。list-style-type list-style-type 设置列表项标志的类型。设置列表项标志的类型。例题例题 css-11.htmlcss-11.htmlCSS CSS 表格表格 CSS CSS 表格属性允许你设置表格的布局。表格属性允许你设置表格的布局。border-collapse border-collapse 设置是否把表格边框合并为单一的边框。设置是否把表格
30、边框合并为单一的边框。border-spacing border-spacing 设置分隔单元格边框的距离。（仅用于设置分隔单元格边框的距离。（仅用于 “separated bordersseparated borders”模型）模型）empty-cells empty-cells 设置是否显示表格中的空单元格。（仅用设置是否显示表格中的空单元格。（仅用 于于 “separated bordersseparated borders”模型）模型）caption-side caption-side 设置表格标题的位置。设置表格标题的位置。table-layout table-layout 设置显示
31、单元、行和列的算法。设置显示单元、行和列的算法。（IEIE浏览器不能显示部分效果）浏览器不能显示部分效果）例题例题 css-12.htmlcss-12.htmlCSS CSS 尺寸尺寸(Dimension)(Dimension)CSS CSS 尺寸尺寸(Dimension)(Dimension)属性可以控制元素的高度和宽度属性可以控制元素的高度和宽度及行间距。及行间距。Height Height 设置元素的高度。设置元素的高度。line-height line-height 设置行高。设置行高。max-height max-height 设置元素的最大高度。设置元素的最大高度。max-widt
32、h max-width 设置元素的最大宽度。设置元素的最大宽度。min-height min-height 设置元素的最小高度。设置元素的最小高度。min-width min-width 设置元素的最小宽度。设置元素的最小宽度。widthwidth设置元素的宽度。设置元素的宽度。例题例题 css-13.htmlcss-13.htmlCSS CSS 分类分类(Classification)(Classification)CSS CSS 分类属性可以规定如何以及在何处显示元素。分类属性可以规定如何以及在何处显示元素。Clear Clear 设置一个元素的侧面是否允许其他的浮动元素。设置一个元素的侧
33、面是否允许其他的浮动元素。Cursor Cursor 规定当指向某元素之上时显示的指针类型。规定当指向某元素之上时显示的指针类型。Display Display 设置是否及如何显示元素。设置是否及如何显示元素。Float Float 定义元素在哪个方向浮动。定义元素在哪个方向浮动。Position Position 把元素放置到一个静态的、相对的、绝对的、或把元素放置到一个静态的、相对的、绝对的、或 固定的位置中。固定的位置中。VisibilityVisibility设置元素是否可见或不可见。设置元素是否可见或不可见。Display Display 的属性值的属性值None None 此元素不
34、会被显示。此元素不会被显示。Block Block 此元素将显示为此元素将显示为块级元素块级元素，此元素前后，此元素前后 会带有换行符。会带有换行符。Inline Inline 默认。此元素会被显示为内联元素，元默认。此元素会被显示为内联元素，元 素前后没有换行符。素前后没有换行符。inline-block inline-block 行内块元素。行内块元素。例题例题 css-14.htmlcss-14.html浮动元素：出现在其他元素中的图形和文本元素称为浮动元浮动元素：出现在其他元素中的图形和文本元素称为浮动元 素（素（floating elementfloating element）。）。
35、clear clear 的属性值的属性值Left Left 在左侧不允许浮动元素在左侧不允许浮动元素Right Right 在右侧不允许浮动元素在右侧不允许浮动元素Both Both 在左右两侧均不允许浮动元素在左右两侧均不允许浮动元素None None 默认。允许浮动元素出现在两侧。默认。允许浮动元素出现在两侧。Float Float 的属性值的属性值 left left 文本或图像会移至父元素中的左侧。文本或图像会移至父元素中的左侧。right right 文本或图像会移至父元素中的右侧。文本或图像会移至父元素中的右侧。none none 默认。文本或图像会显示于它在文档中出现的默认。文本
36、或图像会显示于它在文档中出现的 位置。位置。例题例题 css-15.htmlcss-15.html、css-16.htmlcss-16.html、css-17.htmlcss-17.htmlvisibility visibility 的属性值的属性值visibility visibility 属性设置元素是否可见或不可见。即使不可属性设置元素是否可见或不可见。即使不可见的元素也会占据页面上的空间。如果不可见元素不占据页见的元素也会占据页面上的空间。如果不可见元素不占据页面空间则用面空间则用displaydisplay来控制。来控制。Visible Visible 元素是可见的。元素是可见的。H
37、idden Hidden 元素是不可见的。元素是不可见的。CSS CSS 定位定位(Positioning)(Positioning)Bottom Bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。定义了定位元素下外边距边界与其包含块下边界之间的偏移。clip clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。设置元素的形状。元素被剪入这个形状之中，然后显示出来。left left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。定义了定位元素左外边距边界与其包含块左边界之间的偏移。Overflow Overflow 设置当元素的内容溢出其区域时发生的事情
38、。设置当元素的内容溢出其区域时发生的事情。Position Position 把元素放置到一个静态的、相对的、绝对的、或固定的位置把元素放置到一个静态的、相对的、绝对的、或固定的位置 中。中。Right Right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。定义了定位元素右外边距边界与其包含块右边界之间的偏移。Top Top 定义了一个定位元素的上外边距边界与其包含块上边界之间的定义了一个定位元素的上外边距边界与其包含块上边界之间的 偏移。偏移。vertical-align vertical-align 设置元素的垂直对齐方式。设置元素的垂直对齐方式。z-index z-index
39、 设置元素的堆叠顺序设置元素的堆叠顺序 。例题例题 css-18.htmlcss-18.html、css-19.htmlcss-19.html、css-20.htmlcss-20.htmlCSS CSS 伪类伪类(Pseudo-classes)(Pseudo-classes)CSS CSS 伪类用于向某些选择器添加特殊的效果。伪类用于向某些选择器添加特殊的效果。伪类的语法：伪类的语法：selector:pseudo-class property:value selector:pseudo-class property:value a:link color:#FF0000 a:link colo
40、r:#FF0000 a:visited color:#00FF00 a:visited color:#00FF00 a:hover color:#FF00FF a:hover color:#FF00FF a:active color:#0000FFa:active color:#0000FF提示：在提示：在 CSS CSS 定义中，定义中，a:hover a:hover 必须被置于必须被置于 a:link a:link 和和 a:visited a:visited 之后，才是有效的。之后，才是有效的。a:active a:active 必须被置必须被置 于于 a:hover a:hover 之
41、后，才是有效的。之后，才是有效的。例题例题 css-21.htmlcss-21.htmlCSS CSS 伪元素伪元素(Pseudo-elements)(Pseudo-elements)CSS CSS 伪元素用于将特殊的效果添加到某些选择器。伪元伪元素用于将特殊的效果添加到某些选择器。伪元素的语法：素的语法：选择器选择器 :伪元素伪元素 属性属性:值值 :first-letter :first-letter 将特殊的样式添加到文本的首字母将特殊的样式添加到文本的首字母:first-line :first-line 将特殊的样式添加到文本的首行将特殊的样式添加到文本的首行 例题例题 css-22.htmlcss-22.html