网页编程技术第3章css.ppt

通过本章学习，应该掌握以下内容： 什么是CSS CSS样式和常用的selector 在网页中使用CSS的方法 CSS的各种属性,第3章 在网页中使用CSS样式,第3章 在网页中使用CSS样式,3.1 CSS简介 3.2 CSS样式 3.3 在网页中使用CSS的方法 3.4 CSS属性,3.1 CSS简介,CSS（Cascading Style Sheet)层叠样式表，它是一种格式化网页的标准方式，它通过设置CSS属性使网页元素获得各种不同效果。CSS不是一种程序设计语言，而只是一种用于网页排版的标识性语言，是对现有HTML语言功能的补充和扩展。 CSS的主要功能是通过对HTML选择器进行设定，来实现对网页中的字体、字号、颜色、背景、图像等其他元素的控制，使网页能够完全按照设计者的要求来显示。,3.1.1 CSS的特点,将格式和结构分离 控制页面布局 制作体积更小下载更快的网页 将许多网页同时更新 浏览器成为更友好的界面,3.1.2 在网页中使用CSS的方式,在标记符中直接嵌套样式信息(内嵌) HTML 标记符的 style 属性 在STYLE标记符中定义样式信息(插入) STYLE 标记符 样式定义 链接外部样式表中的样式信息(引入) LINK 标记符 优先级 内嵌插入引入浏览器缺省设置,3.2 CSS样式,3.2.1 CSS样式表组成 3.2.2 几种常用的selector,CSS的定义由三部分构成：选择符selector、属性property和属性值value。其基本格式如下： selectorpropertyl：valuel；property2：value 2； selector（选择符）表示需要应用样式的标签( 可以是HTML的标签,也可以是自己定义的标签) property表示由CSS标准定义的样式属性，value表示样式属性的值。,3.2.1 CSS样式表组成,如: h1 font-family:宋体; font-style:italic; color: red; ,3.2.2 几种常用的selector,HTML标记符是最典型的selector类型，网页设计者可以为某个或某些具体的HTML元素应用样式定义。如： BODYcolor：black 如果属性的值是多个单词组成的，必须在值前加上双引号。如果需要对一个selector指定多个属性时，应使用分号将所有的属性和值分开。如： p font-family: “sans serif“;font-weight:bold,1HTML标记符selector,使用CSS的标记符设置CSS样式的方法,可以对HTML的同一类型的标记元素设置统一的样式;使用class类选择符和ID选择符则可以对同一类型的的标记元素设置不同的样式,以及为不同类型的标记元素设置相同的样式。 class类选择符格式如下： selector.classname property：value； 可以使用任何名称命名类，但通常使用具体含义的名称。,2用户定义的类selector,.myh1 font-family:宋体; font-size:50pt; color:blue; H2.s1color: red, 类选择符 .myh1 font-family:宋体; font-size:50pt; color:blue; 通过类定义的格式 myh1 没有通过类定义的格式 myh1 这个p标签使用了类定义的格式 myh1 运行效果见：类选择符的使用,3用户定义的ID selector,当网页设计者想在整个网页或几个页面上多处以相同样式显示标记符时，除了使用类定义一个通用类样式以外，还可以使用ID定义样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。 要将一个ID样式包括在样式定义中，应用一个#号作为ID名称的前缀，如下所示： #IDnameproperty：value 定义了ID样式后，需要在引用该样式的标记符内使用id属性。,#red color:red; #green color:green; 这个段落是红色。 这个段落是绿色。,注意：id 属性只能在每个 HTML 文档中出现一次。那么如何使用ID Selector为多个元素使用相同的格式呢？,单独的选择器 #sidebar border: 1px dotted #000; padding: 10px; 根据这条规则，id 为 sidebar 的元素将拥有一个像素 宽为1px的黑色点状边框，同时其周围会有 10 个像素宽的 内边距（padding，内部空白）。老版本的 Windows/IE 浏 览器可能会忽略这条规则，除非你特别地定义这个选择器 所属的元素： div#sidebar border: 1px dotted #000; padding: 10px; 举例 ：ID选择符用法1.html,一个选择器，多种用法 即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次： #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; 举例 ：ID选择符用法2.html,可以单独对某种存在包含关系的元素定义样式表，例如元素1里包含元素2，可以只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如： TABLE Afont-size：10px 使用上规则后，在表格内的链接改变了样式，文字大小为10像素，而表格外的链接的文字仍为默认大小。,4包含selector /派生选择器 (css2),下面是使用包含选择器进行的样式定义: strong color: red; h2 color: red; h2 strong color: blue; 下面是它施加影响的 HTML： The strongly emphasized word in this paragraph isred. This subhead is also red. The strongly emphasized word in this subhead isblue. ,怎么样将CSS应用到HTML文档中呢?,有四种方法 在HTML文档的标签内嵌入CSS的定义 使用标签链接进来 使用CSS的import 标签导入进来 在HTML文件中直接加入,3.3 在网页中使用CSS,3.3.1 在标记符中直接嵌套样式信息 (内嵌）,在标记符中直接嵌套样式信息又称为“局部引用”，即将样式直接嵌套在HTML标记里使用的。用这种方法，可以很简单的对某个元素单独定样式。 使用style属性可以在HTML标记符中直接嵌入样式定义，如下所示： , 内嵌样式表示例 离离原上草,一岁一枯荣。 野火烧不尽，春风吹又生。 远方侵古道，晴翠接荒城。 又送王孙去，萋萋满别情 效果演示：内嵌样式表示例,如果能将同类的样式都统一定义，然后再具体应用于网页中的元素，那么就能体现出CSS的优越性了。实际上，这正是CSS应用于网页的最常用方式，即在HEAD标记符内使用STYLE标记符，然后在STYLE标记符中定义样式。这种应用方式又称“内部引用”。 定义样式的方式为： selector property l：value l；property 2：value 2； 其中，selector表示样式作用的对象，property和value则表示相应CSS属性和值的配对。,3.3.2 在STYLE标记符中定义样式信息（内部引用）, first 通过类定义的格式 myh1 ,3.3.3 引用外部样式表中的样式信息（外部引用）,在STYLE标记符中定义样式对于单独网页的格式设置和维护很有效，但如果在一个大网站中，为每个页面都定义类似的样式，显然又是效率不高的，这时最好的办法就是将重复在多个网页中使用的样式放在外部样式表文件中，然后通过链接的方式引用其中的样式。链接式样式的优点很明显，网页设计者可以在一个链接的CSS文件上作修改，然后所有引用它的网页都会自动更新。,引用链接外部样式表中的样式信息又称为“外部引用”。外部引用又可以分为链入外部样式表和导入外部样式表两类。 链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用LINK标记符链接到这个样式表文件，这个LINK标记符必须放到页面的HEAD区内。 导入外部样式表是指在内部样式表的STYLE里导入一个外部样式表，导入时用import。 导入外部样式表输入方式比链入外部样式表更有优势，实质上它相当于存在内部样式表中。,1、使用 标签导入外部的CSS文件,首先 要建立 将CSS 定义的内容 存成一个单独的 css 文件. 然后在网页的中用 将css文件导入.,步骤1：新建mycss.css,#myh1 font-family:宋体; font-size:50pt; color:blue; ,步骤2：编写HTML文件，并用LINK标记导入CSS文件 html 用LINK标签导入CSS定义 通过ID定义类格式 myh1 ,2、使用import标签导入,#myh1 font-family:宋体; font-size:50pt; color:blue; ,步骤1：mycss.css,步骤2：编写HTML文件，并用import导入 格式是： import url(“mycss.css”) 例如： 用import标签导入CSS定义 import url(mycss.css) /还可以有其他的CSS样式定义 通过类定义格式 myh1 ,CSS提供的5大类属性,(1) 字体属性 (2) 颜色和背景属性 (3)区块属性 (4)分级属性 (5)鼠标属性 (6)滤镜效果,3.4 CSS属性,3.4.1 字体属性 3.4.2 文本属性 3.4.3 颜色与背景属性 3.4.4 布局属性 3.4.5 定位和显示属性 7.4.6 鼠标样式属性 7.4.7 列表样式属性 7.4.8 CSS滤镜,字体属性用于控制网页中的文本的字符显示方式，例如控制文字的大小、粗细以及使用的字体等。CSS中的字体属性包括字体族科（font-family）、字体风格（font-style）、字体变形（font-variant）、字体加粗（font-weight）、字体大小（font-size）五个属性。其中字体族科和字体大小属性是比较常用的。,3.4.1 字体属性,HTML中的字体格式设置回顾 1、 2、斜体(斜体) 黑体(黑体) 打字机字体程序变量xyz HTML指令例1 使用键盘字符时a%#!()&*,1字体族科属性（font-family）,字体族科属性相当于HTML中FONT标记符的face属性，用于设定文字的字体，当所设定的字体在用户端没有时会用浏览器默认的字体代替。 该样式允许指定多种字体供选择，用逗号进行分隔即可。在客户端会根据字体指定的优先级（先后顺序）寻找字体予以显示。比如： font-family：华文行楷，楷体-GB2312，宋体 实例: font-family,2字体风格属性（font-style）,字体风格属性的值有三种：普通（normal），斜体（italic）和倾斜（oblique），默认值为normal。 实例: font-style,3字体变形属性（font-variant）,字体变形属性有普通（normal）和小型大写字母（small-caps）两个值，默认值为normal。当使用small-caps属性时，文字一律转换为大写字母，并且都会以一种大小介于普通小写字母和大写字母之间的字体显示。 实例: font-variant,字体加粗属性用于设定字体的粗细，跟HTML中的B标记符效果相似。它的取值可以是以下值中的一个：normal、bold、bolder、lighter、100、200、300、400、500、600、700、800、900，默认值为normal，表示正常粗细；bold表示粗体。也可以使用数值，范围为100至900，对应从最细到最粗。normal相当于400，bold相当于700。如果使用bolder或lighter，则表示相对于上一级元素中的字体更粗或更细。 实例: font-weight,4字体加粗属性（font-weight）,字体大小属性用来定义字体的大小。 可以使用长度单位分为绝对单位磅（pt）、毫米（mm）、厘米（cm）、帕（pc）、英寸（in）和相对单位像素（px）、em、ex、%。 实例: font-size,5字体大小属性（font-size）,字体属性例子,例1:字体属性,3.4.2 文本属性,文本属性包括文字间距、对齐方式、上标、下标、排列方式、首行缩进。,HTML中的文本格式设置回顾 1、 2、这是H4标题字体!,文字间隔属性定义一个附加在单词之间的间隔数量。该值必须符合长度格式，允许使用负值。 需要特别说明的是，该属性是针对英文单词的间隔，而不是中文的文字间隔，中文的文字间隔应该用下面讲到的letter-spacing。 语法格式如下： 举例: wordspacing,1文字间隔属性(word-spacing),字母间隔属性定义一个附加在字符之间的间隔数量（间距）。它的取值可以是normal或具体的长度值（该值必须符合长度格式），也可以是负值。默认值为normal，表示浏览器根据最佳状态调整字符间距。 语法格式如下： letter-spacing 属性与 word-spacing 的区别在于:字母间隔修改的是字符或字母之间的间隔。 举例:letter-spacing简单例子 letter-spacing复杂例子,2字母间隔属性(1etter-spacing),纵向排列属性可以用来定义一个内部元素的纵向位置，相对于它的上级元素或者相对于元素行。 该值可以是一个相对于元素行高属性的百分比，它会在上级基线上增高元素基线的指定数量。允许使用负值，也可以是一个关键字。该属性对于图像设置特别有用。 语法格式如下： vertical-align的取值见以下的例子 举例:vertical-align,3纵向排列属性(vertical-align),指定了所选元素的对齐方式（类似于HTML标记符的align属性），取值可以是：left 、right、center、justify，分别表示左对齐、右对齐、居中对齐和两端对齐。此属性的默认值依浏览器的类型而定。若浏览器不支持justify属性。则使用左对齐或者右对齐代替。 语法格式如下： 举例: text-align,4文本排列属性(text-align),文本缩进属性可以应用于块级元素（P，H1等），以定义该块级元素第一行可以接受的缩进数量。该值必须是一个长度或者百分比。若为百分比则视上级元素的宽度而定。该属性常用于段落的缩进。此属性的默认值是0，表示无缩进。 语法格式如下： 举例: text-indent,5首行缩进属性(text-indent),例如: 样式定义为: div width: 500px; p text-indent: 20%; 作用于代码块: this is a paragragh ,文字修饰属性可以对特定选项的文本进行修饰，它的取值为：none、underline、overline、line-through、blink，默认值为none，表示不加任何修饰。 underline表示添加下划线； overline表示添加上划线； line-through表示添加删除线； blink表示添加闪烁效果。 注: 另外IE浏览器并不支持文字修饰属性值blink（闪烁）。 语法格式如下： 例如: text-decoration 修饰超级链接,6文字修饰属性（text-decoration）,行高属性决定了相邻行之间的间距。其取值可以是数字、长度或百分比，默认值是normal。 当以数字指定值时，行高就是当前字体高度与该数字相乘的倍数。 如果指定具体的长度值，则行高为该值。 如果用百分比指定行高，则行高为当前字体高度与该百分比相乘。该属性不允许使用负值。 语法格式如下： 举例: line-height1 line-height2,7行高属性 (line-height),文本转换属性用于转换文本，取值为：capitalize、uppercase、lowercase、none，默认值是none表示使用原始值。 capitalize值表示所选元素中文本的每个单词的首字母以大写显示； uppercase值表示所有的文本都以大写显示； lowercase值表示所有文本都以小写显示。 语法格式如下： 举例: text-transform,8文本转换属性(text-transform),9. white-space 属性(了解),通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。 实例: white-space-normal white-space-nowrap 简单的导航按钮 使用列表实现导航,IE 7 以及更早版本的浏览器不支持该值,文本属性综合,10文本属性综合举例,background属性是一个组合属性，可用于同时设置background- color、background- image、background-attachment、background-position、background-repeat等背景属性。 表示组合属性时，设置的先后顺序是background-color, background-image, background-repeat, background-attachment, background-position。 语法: body background: #00FF00 url(bgimage.gif) no-repeat fixed top; 实例: background,3.4.3 颜色与背景属性,1background属性,2background-color属性,这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。 例如:body background-color:#99FF00;,用于设置HTML元素的背景图案，取值为url或none。默认值为none，即没有背景图案。该属性相当于HTML中BODY标签的background属性，只是它可以定义更多元素的背景图像。 语法格式: 实例: background-image,3background-image属性,4background-attachment属性 用于控制背景图像是否随内容一起滚动，取值为scroll、fixed。默认值为scroll，表示背景图案随着内容一起滚动；fixed表示背景图案静止，而内容可以滚动。 语法格式: bodybackground-image:url(flower.jpg); background-attachment:fixed,用于指定背景图案相对于关联区域左上角的位置,该属性通常指定由空格隔开的两个值,也可以取预定义的关键值。 这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。 body background-image:url(flower.jpg); background-repeat:no-repeat; background-position:20px 60px 上面的代码表示背景图片的初始位置距离网页最左面 20px，距离网页最上面60px。 实例: background-position-center background-position-百分比形式,5background-position属性,6background-repeat属性,表示当使用背景图案时，背景图案是否重复显示。取值可以是：repeat表示在水平方向和垂直方向都重复，即像铺地板一样将背景图案平铺；repeat-x表示在水平方向上平铺；repeat-y表示在垂直方向上平铺；no-repeat表示不平铺，即只显示一幅背景图案。 格式： bodybackground-image:url(flower.jpg); background-repeat:repeat-y 实例: background-repeat,3.4.4 布局属性,网页上的元素都有边框，只是大部分缺省没有显示出来。CSS边框属性设置包括三项：边框颜色（color）、边框样式（style）和边框宽度（width），而边框又包括四个方向：上（top）、下（bottom）、左（1eft）和右（right）。将边框设置和方向组合起来，则构成了多种属性。如：border-bottom、border-bottom-color、border-bottom-style、border-bottom-width、border-right-color、border-right-style、border-right-width等等。 可以通过border属性设置边框的宽度、样式和颜色，如”border:2px ridge #ff00ff” ，也可以单独为border的某一条边进行设置宽度、样式和颜色。,1边框属性,color取值：凡是颜色值都可以 style取值：solid、dotted、dashed、double、groove、ridge、inset、outset width取值：thin 、medium 、thick 以及长度单位(10px) 实例: 所有边框属性在一个声明之中(border) 不同类型的border-style 设置每一边的不同边框 所有右边框属性在一个声明之中 设置上边框的颜色 设置左边框的宽度(border-left-width),CSS边界属性包括边界margin、下边界margin-bottom、左边界margin-left、右边界margin- right以及上边界margin-top。 margin-top 、margin-right、和margin-bottom、 margin-left属性可以分别用来设置上、右、下、左边界的宽度，它们的取值可以是长度、百分比或auto。 长度可以是任何长度单位，比如像素、英寸、毫米或 em 百分数是相对于父元素的 width 计算的 margin属性可以同时指定上、右、下、左（以此顺序）边界的宽度。 如：Pmargin:lem 2em 3em 6em bodymargin:1em 3em 实例：margin margin-left,2边界属性,CSS填充属性包括填充padding、左填充padding-left、右填充padding-right、上填充padding-top以及下填充padding-bottom。 padding-left、padding-right、padding-top和padding-bottom这四个属性用于设置左、右、上、下填充区的宽度，取值可以是长度和百分数。 长度可以是任何长度单位，比如像素、英寸、毫米或 em 百分数值是相对于其父元素的 width 计算的 padding属性用于同时指定上、右、下、左四个方向填充的宽度，如Ppadding:1em 2em 3em 4em,当然也可以单独为某个方向进行设置,如: divpadding-right:1em;padding-bottom:1em,3填充属性,CSS浮动属性包括float和clear： float属性可以将元素的内容浮动到页面左边缘或右边缘，该属性的取值为：none、left、right，默认值为none。 clear 属性规定元素的哪一侧不允许其他浮动元素。取值可以是：none、left、right、both，默认值为none，表示允许浮动元素在其旁边；left表示跳过左边的浮动元素；right表示跳过右边的浮动元素，both表示跳过所有的浮动元素。 实例： 创建无表格的首页 使段落的首字母浮动于左侧 将带有边框和边界的图像浮动于段落的右侧 带标题的图像浮动于右侧,4、浮动属性,CSS定位属性包括position、top、bottom、left、right和z-index，宽、高属性包括width和height。 position属性用来设定对象的定位方式，它的取值为：static（默认值）、relative或absolute。 top和left属性分别设定元素上边的垂直位置和设定元素左边的水平位置。 width和height属性可以控制元素的宽度和高度（此时position属性必须指定为absolute？）。 z-index设定元素的折叠方式，即元素之间的堆叠效果设置。,3.4.5 定位和显示属性,1定位属性和宽高属性,当position取值为relative时，元素仍然为文档流的一部分，只不过其位置应是相对于其原始位置进行偏移,当position取值为absolute时，元素将脱离文档流进行绝对定位，有可能定为后会遮盖文档流中的部分内容,实例: 定位：相对定位 定位：绝对定位 使用固定值设置图像的上边缘 Z-index 低 不同优先级的Z-index div-width-height,在CSS中，有两个属性可以控制元素的显示和隐藏，即display属性和visibility属性。 display属性确定一个元素是否应显示在页面上，它的取值有多个，最常见的有none、block、inline和inlineblock，但不是所有的浏览器都支持。 visibility属性有时也被分类为定位属性，用来控制定位的元素是否可见，取值包括：visible（可见）、hidden（隐藏）和inherit（继承其父元素的visibility属性值，所有的IE都不支持），默认值为visible。 实例：display,2显示属性,CSS的鼠标样式属性用于设置鼠标移到元素上时的鼠标形状。通常情况下，鼠标呈指向左上方的箭头，而当鼠标移到超链接上时呈手的形状。有了鼠标样式属性，用户就可以随意地设定鼠标的形状。 CSS的鼠标样式是通过cursor样式表属性定义的，格式为： cursor：属性值 cursor: url(路径/*.cur) 实例：cursor.html,3.4.6 鼠标样式属性,列表样式属性用于设置页面中的列表格式。CSS中的列表样式属性包括：list-style、list-style-type、list-style-image以及list-style-position。 list-style-type属性用于设置项目符号和编号样式，取值为：disc（默认值，实心黑点）、circle（空心圆圈）、square（方块）、decimal（十进制数1，2，3等）、lower-roman（小罗马数字）、upper-roman（大罗马数字）、lower-alpha（小写字母）、upper-alpha（大写字母）和none（无）。 list-style-image自定义列表图案： list-style-image:url(“”); list-style-position:,3.4.7 列表样式属性,实例: 在一个声明中定义所有的列表属性,滤镜（filter）是CSS的一种扩充。使用这种技术只用几句代码就可以把类似于Photoshop中的滤镜效果添加到图片、文本等HTML元素上。 filter样式表的属性定义为： filter：filtername（parameters） 常见的filter 属性见下图:,3.4.8 CSS滤镜,1、Alpha滤镜,该滤镜可以实现各种溶入效果。 可以利用它作出淡入淡出的效果。 语法： filter：alpha（opacity=?，finishopacity=?，style=?，startX=?，startY=?，finishX=?， finishY=?） 说明: opacity :代表图象的起始透明度。值在0100 finishopacity: 指定结束时的透明度。值0100 style: 表示透明区域的形状特征，其中“0” 代表统一，“1”代表线形 “2” 代表放射状，“3”代表矩形 startx 表示渐变透明效果的开始X坐标。startY, finishx ,finishy 实例：alpha,2、blur属性,blur属性的表达式： filter：blur（add=?，direction=?，strength=?） 参数说明： add参数有两个参数值：true和false,意思是指定图片是否被改变成模糊效果。 direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表：,strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。 实例： blur,3、chroma属性,chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下： filter：chroma（color=?） 实例：chroma,4、DropShadow属性,DropShadow属性是为了添加对象的阴影效果的。它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。看一看它的表达式： filter：dropShadow（color=?，offx=?，of