如何用CSS技术制作网.ppt

如何用CSS技术制作网页,演讲人：杨子慰组员：姜陈、邹思亮、邹涛、彭皓天,首先我们先要了解：什么是CSSCSS样式和常用的selector在网页中使用CSS的方法CSS的各种属性,如何网页中使用CSS,CSS的简介,CSS（CascadingStyleSheet)层叠样式表，它是一种格式化网页的标准方式，它通过设置CSS属性使网页元素获得各种不同效果。CSS不是一种程序设计语言，而只是一种用于网页排版的标识性语言，是对现有HTML语言功能的补充和扩展。CSS的主要功能是通过对HTML选择器进行设定，来实现对网页中的字体、字号、颜色、背景、图像等其他元素的控制，使网页能够完全按照设计者的要求来显示。,在网页中使用CSS的方式,在标记符中直接嵌套样式信息(内嵌)HTML标记符的style属性在STYLE标记符中定义样式信息(插入)STYLE标记符样式定义链接外部样式表中的样式信息(引入)LINK标记符,CSS属性,字体属性文本属性颜色与背景属性布局属性定位和显示属性鼠标样式属性列表样式属性CSS滤镜,字体属性用于控制网页中的文本的字符显示方式，例如控制文字的大小、粗细以及使用的字体等。CSS中的字体属性包括字体族科（font-family）、字体风格（font-style）、字体变形（font-variant）、字体加粗（font-weight）、字体大小（font-size）五个属性。其中字体族科和字体大小属性是比较常用的。,字体属性,文本属性,文本属性包括文字间距、对齐方式、上标、下标、排列方式、首行缩进。,颜色与背景属性,前景颜色（color）语法：color:color参数：color:指定颜色。示例：pcolor:#345456;pcolor:rgb(100,14,200);pcolor:red;,颜色与背景属性,背景颜色（background-color）语法：background-color:transparent|color参数：transparent:背景色透明color:指定颜色。示例：pbackground-color:silvertablebackground-color:rgb(223,71,177)bodybackground-color:#98AB6Fprebackground-color:transparent;,颜色与背景属性,背景图像（background-image）语法：background-image:none|url(url)参数：none:无背景图url:使用绝对或相对路径指定背景图像，建议使用相对路径。示例：pbackground-image:url(comet.jpg);blockquotebackground-image:url(c:InetPubMyPixscomet.jpg);brbackground-image:url(http:/Fbodybackground-image:none;,颜色与背景属性,背景图像铺排（background-repeat）语法：background-repeat:repeat|no-repeat|repeat-x|repeat-y参数：repeat:背景图像在纵向和横向上平铺no-repeat:背景图像不平铺repeat-x:背景图像在横向上平铺repeat-y:背景图像在纵向平铺示例：pbackground:url(images/aardvark.gif);background-repeat:repeat-y;bodybackground:url(images/aardvark.gif);background-repeat:no-repeat;,CSS常用的属性,滚动条属性（scrollbar-face-color、scrollbar-shadow-color、scrollbar-highlight-color、scrollbar-3dlight-color、scrollbar-3darkshadow-color、scrollbar-track-color、scrollbar-arrow-color）,CSS常用的属性,设置对象四边的外边距（margin）语法：margin:auto|length参数：auto:值被设置为相对边的值length:由数值和单位标识符组成的长度值。说明：如果提供全部四个参数值，将按上右下左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。,CSS常用的属性,边框线粗细（border-width）语法：border-width:length参数：length:由数值和单位标识符组成的长度值。不可为负值。说明：如果提供全部四个参数值，将按上右下左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。,CSS常用的属性,边框线颜色（border-color）语法：border-color:color参数：color:指定颜色。说明：如果提供全部四个参数值，将按上右下左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。,CSS常用的属性,边框线格式（border-style）语法：border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset参数：none:无边框。hidden:隐藏边框。IE不支持。dotted:在平台上IE5.5+为点线。否则为实线。dashed:在平台上IE5.5+为虚线。否则为实线。solid:实线边框。double:双线边框。两条单线与其间隔的和等于指定的border-width值。groove:根据border-color的值画3D凹槽ridge:根据border-color的值画菱形边框inset:根据border-color的值画3D凹边outset:根据border-color的值画3D凸边,CSS常用的属性,说明：如果提供全部四个参数值，将按上右下左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。,CSS常用的属性,设置对象四边的内边距（padding）语法：padding:length参数：length:由数值和单位标识符组成的长度值或者百分数。说明：如果提供全部四个参数值，将按上右下左的顺序作用于四边。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。,CSS常用的属性,CSS定位(width、height)语法：width:auto|length参数：auto:无特殊定位，根据HTML定位规则载文档流中分配length:由数值和单位标识符组成的长度值，或者百分数。百分数是基于父对象的宽度。不可为负数。语法：height:auto|length参数：auto:无特殊定位，根据HTML定位规则载文档流中分配length:由浮点数字和单位标识符组成的长度值|百分数。百分数是基于父对象的高度。不可为负数。,CSS常用的属性,鼠标指针（cursor）语法：cursor:auto|crossha