如何用CSS技术制作网.ppt

1、如何用CSS技术制作网页,演讲人：杨子慰 组员：姜陈、邹思亮、邹涛、彭皓天,首先我们先要了解： 什么是CSS CSS样式和常用的selector 在网页中使用CSS的方法 CSS的各种属性,如何网页中使用CSS,CSS的简介,CSS（Cascading Style Sheet)层叠样式表，它是一种格式化网页的标准方式，它通过设置CSS属性使网页元素获得各种不同效果。CSS不是一种程序设计语言，而只是一种用于网页排版的标识性语言，是对现有HTML语言功能的补充和扩展。 CSS的主要功能是通过对HTML选择器进行设定，来实现对网页中的字体、字号、颜色、背景、图像等其他元素的控制，使网页能够完全按照

2、设计者的要求来显示。,在网页中使用CSS的方式,在标记符中直接嵌套样式信息(内嵌) HTML 标记符的 style 属性 在STYLE标记符中定义样式信息(插入) STYLE 标记符 样式定义 链接外部样式表中的样式信息(引入) LINK 标记符,CSS属性,字体属性 文本属性 颜色与背景属性 布局属性 定位和显示属性 鼠标样式属性 列表样式属性 CSS滤镜,字体属性用于控制网页中的文本的字符显示方式，例如控制文字的大小、粗细以及使用的字体等。CSS中的字体属性包括字体族科（font-family）、字体风格（font-style）、字体变形（font-variant）、字体加粗（font-w

3、eight）、字体大小（font-size）五个属性。其中字体族科和字体大小属性是比较常用的。,字体属性,文本属性,文本属性包括文字间距、对齐方式、上标、下标、排列方式、首行缩进。,颜色与背景属性,前景颜色（color） 语法：color : color 参数：color : 指定颜色。 示例：p color: #345456; p color: rgb(100,14,200); p color: red; ,颜色与背景属性,背景颜色（background-color） 语法：background-color : transparent | color 参数：transparent : 背景色

4、透明color : 指定颜色。 示例：p background-color: silver table background-color: rgb(223,71,177) body background-color: #98AB6F pre background-color: transparent; ,颜色与背景属性,背景图像（background-image） 语法：background-image : none | url (url) 参数：none : 无背景图url : 使用绝对或相对路径指定背景图像，建议使用相对路径。 示例：p background-image: url(come

5、t.jpg); blockquote background-image: url(c:InetPubMyPixscomet.jpg); br background-image: url(http:/F body background-image: none; ,颜色与背景属性,背景图像铺排（background-repeat） 语法：background-repeat : repeat | no-repeat | repeat-x | repeat-y 参数：repeat : 背景图像在纵向和横向上平铺no-repeat : 背景图像不平铺repeat-x : 背景图像在横向上平铺repeat

6、-y : 背景图像在纵向平铺 示例： p background: url(images/aardvark.gif); background-repeat: repeat-y; body background: url(images/aardvark.gif); background-repeat: no-repeat; ,CSS常用的属性,滚动条属性（scrollbar-face-color、scrollbar-shadow-color、scrollbar-highlight-color、scrollbar-3dlight-color、scrollbar-3darkshadow-color、s

7、crollbar-track-color、scrollbar-arrow-color）,CSS常用的属性,设置对象四边的外边距（margin） 语法：margin : auto | length 参数：auto : 值被设置为相对边的值length : 由数值和单位标识符组成的长度值。 说明：如果提供全部四个参数值，将按上右下左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。,CSS常用的属性,边框线粗细（ border-width ） 语法：border-width : length

8、参数：length : 由数值和单位标识符组成的长度值。不可为负值。 说明：如果提供全部四个参数值，将按上右下左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。,CSS常用的属性,边框线颜色（border-color） 语法：border-color : color 参数：color : 指定颜色。 说明：如果提供全部四个参数值，将按上右下左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于

9、左右，第三个用于下。,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

10、 : 根据border-color的值画3D凹槽 ridge : 根据border-color的值画菱形边框 inset : 根据border-color的值画3D凹边 outset : 根据border-color的值画3D凸边,CSS常用的属性,说明：如果提供全部四个参数值，将按上右下左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。,CSS常用的属性,设置对象四边的内边距（padding） 语法：padding : length 参数：length : 由数值和单位标识符组成

11、的长度值 或者百分数。 说明：如果提供全部四个参数值，将按上右下左的顺序作用于四边。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。,CSS常用的属性,CSS定位(width、height) 语法：width : auto | length 参数：auto : 无特殊定位，根据HTML定位规则载文档流中分配 length : 由数值和单位标识符组成的长度值，或者百分数。百分数是基于父对象的宽度。不可为负数。 语法：height : auto | length 参数：auto : 无特殊定位，根据HTML定位规则载文档流中分配length : 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。不可为负数。,CSS常用的属性,鼠标指针（cursor ） 语法：cursor : auto | crosshair | default | hand |