css课件(上课用)

CSS层叠样式表CSS层叠样式表CSS的全称是CascadingStyleSheet，中文翻译为“层叠样式表”。实用CSS可以改变HTML的基本特性，从而控制传统网页上的元素，诸如精确的空白、段落缩进、文本的外观和链接的状态等等。这样，你就可以实现对网页元素的格式控制。CSS不仅允许你指定单个网页的外观，还可以被用来为网站提供一致的界面。CSS样式通常保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。这样，创建的文档内容和文档的显示外观就有着明显的相互独立。当然，CSS样式也可以以style标签的形式写在网页文件的head标签中，或是直接将CSS语句书写在某个元素标签的属性部分。当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，它们产生作用的优先级别为如下顺序：内联样式（在HTML元素内部）内部样式表（位于head标签内部）外部样式表（以CSS文件独立存在）例题css-1.htmlCSS语法CSS语法由三部分构成：选择器、属性和值：selector{property:value}选择器(selector)通常是你希望定义的HTML元素或标签，属性(property)是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）,例如：body{color:blue;}如果值为若干单词，则要给值加引号：p{font-family:sansserif;}如果要定义不止一个声明，则需要用分号将每个声明分开。最后一条规则是不需要加分号的，但是一般在每条声明的末尾都会加上分号，包括最后一条规则。这么做的好处是尽可能的减少出错的可能性。p{text-align:center;color:red;}在书写的时候可以每行只描述一个属性，以便使样式定义的可读性更强。p{text-align:center;color:black;font-family:arial;｝选择器的分组可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明，用逗号将需要分组的选择器分开。h1,h2,h2,h3,h5,h6{color:green;}在上面的例子中，对所有的标题标签进行了分组。所有的标题元素都是绿色的。选择器的类型1派生选择器通过依据元素在其位置的上下文关系来定义样式，在CSS中，通过这种方式来应用规则的选择器被称为派生选择器。这样可以利用元素的上下文关系来应用或者避免某项规则。lib{font-style:italic;font-weight:normal;}例题css-2.html2id选择器id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以“#”来定义。下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：#red{color:red;}#green{color:green;}pid=red这个段落是红色。/pfontid=“green”这句文本是绿色。/font注意：一个值的id属性只能在每个HTML文档中出现一次。id选择器和派生选择器id选择器常常用于建立派生选择器。#sidebarp{font-style:italic;text-align:right;margin-top:10px;}上面的样式只会应用于出现在id是sidebar的元素内的段落。这个元素很可能是div或者是表格单元，即使被标注为sidebar的元素只能在文档中出现一次，这个id选择器作为派生选择器也可以被使用很多次。例题css-3.html3类选择器在CSS中，类选择器以一个点号显示：.center{text-align:center}因此，所有拥有center类的HTML元素均为居中。h1class=centerThisheadingwillbecenter-aligned/h1pclass=centerThisparagraphwillalsobecenter-aligned./p和id一样，class也可被用作派生选择器：.fancytd{color:#f60;background:#666;}类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。元素也可以基于它们的类而被选择：td.fancy{color:#f60;background:#666;}在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。你可以将类fancy分配给任何一个表格元素任意多的次数。那些以fancy标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为fancy的类的单元格不会受这条规则的影响。当然，任何其他被标注为fancy的元素也不会这条规则的影响。例题css-4.html如何创建CSS创建CSS样式表的方法有三种：1外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。Web页面使用link标签链接到样式表文件。link标签写在文档的头部（head）：headlinkrel=stylesheettype=text/csshref=mystyle.css//head外部样式表可以在任何文本编辑器进行编辑。文件不能包含任何的html标签。样式表应该以.css扩展名进行保存。hr{color:sienna}p{margin-left:20px}body{background-image:url(images/back40.gif)}2内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。内部样式表是使用style标签写在头部：headstyletype=text/csshr{color:sienna}p{margin-left:20px}body{background-image:url(images/back40.gif)}/style/head3内联样式表当样式仅需要在一个元素上应用一次时，就需要内联样式表。要使用内联样式，你需要在相关的标签内使用样式（style）属性，Style属性可以包含任何CSS属性。pstyle=color:sienna;margin-left:20pxThisisaparagraph/p例题css-1.htmlCSS框模型(BoxModel)框模型(BoxModel)规定了元素框处理元素内容、内边距、边框和外边距的方式。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。CSS属性CSS能够处理的属性有：背景、文本、字体、边框、内边距、外边距、列表、表格、尺寸、定位、分类、伪类CSS背景（background）该属性定义元素的背景效果。元素的背景区包括前景之下直到边框边界的所有空间。因此，内容框与内边距都是元素背景的一部分，且边框画在背景上。CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。Background简写属性background-attachment背景图像是否固定或者随着页面的其余部分滚动。background-color设置元素的背景颜色。background-image把图像设置为背景。background-position设置背景图像的起始位置。background-repeat设置背景图像是否及如何重复。例题css-5.htmlCSS文本使用文本属性，你可以改变文本的颜色，增加或减少文本中的字符间距，对齐文本，装饰文本，对文本中的首行进行缩进等。Color设置文本颜色Direction设置文本方向。line-height设置行高。letter-spacing设置字符间距。text-align对齐元素中的文本。text-decoration向文本添加修饰。text-indent缩进元素中文本的首行。text-transform控制元素中的字母。word-spacing设置字间距。例题css-6.htmlCSS字体（font）CSS字体属性允许您设置字体系列(font-family)和字体加粗(font-weight)，您还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）。Font简写属性font-family设置字体系列。font-size设置字体的尺寸。font-style设置字体风格。font-variant以小型小写字体或者正常字体显示文本。font-weight设置字体的粗细。例题css-7.htmlCSS边框(border)CSS边框属性可以规定元素边框的粗细、样式和颜色。border简写属性border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。border-width用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。border-color设置元素的所有边框中可见部分的颜色，或为4个边分别设置颜色。例题css-8.htmlCSS外边距(margin)CSS外边距属性定义元素周围的空间。设置外边距会在元素外创建额外的“空白”。“空白”通常指不能放其它元素的区域，而且在这个区域中可以看到父元素的背景。h1{margin:10px0px15px5px;}这些值的顺序是从上外边距(top)开始围着元素顺时针旋转的：margin:toprightbottomleftmargin简写属性margin-bottom设置元素的下外边距。margin-left设置元素的左外边距。margin-right设置元素的右外边距。margin-top设置元素的上外边距。例题css-9.htmlCSS内边距(padding)CSS内边距属性定义元素边框与元素内容之间的空白。td{padding:2px2px2px2px;}Padding简写属性。padding-bottom设置元素的下内边距。padding-left设置元素的左内边距。padding-right设置元素的右内边距。padding-top设置元素的上内边距。例题css-10.htmlCSS列表CSS列表属性可以放置、改变列表项标志，或者将图像作为列表项标志。list-style简写属性。list-style-image将图象设置为列表项标志。list-style-position设置列表中列表项标志的位置。list-style-type设置列表项标志的类型。例题css-11.htmlCSS表格CSS表格属性允许你设置表格的布局。border-collapse设置是否把表格边框合并为单一的边框。border-spacing设置分隔单元格边框的距离。（仅用于“separatedborders”模型）empty-cells设置是否显示表格中的空单元格。（仅用于“separatedborders”模型）caption-side设置表格标题的位置。table-layout设置显示单元、行和列的算法。（IE浏览器不能显示部分效果）例题css-12.htmlCSS尺寸(Dimension)CSS尺寸(Dimension)属性可以控制元素的高度和宽度及行间距。Height设置元素的高度。line-height设置行高。max-height设置元素的最大高度。max-width设置元素的最大宽度。min-height设置元素的最小高度。min-width设置元素的最小宽度。width设置元素的宽度。例题css-13.htmlCSS分类(Classification)CSS分类属性可以规定如何以及在何处显示元素。Clear设置一个元素的侧面是否允许其他的浮动元素。Cursor规定当指向某元素之上时显示的指针类型。Display设置是否及如何显示元素。Float定义元素在哪个方向浮动。Position把元素放置到一