如何用CSS技术制作网页.ppt

《如何用CSS技术制作网页.ppt》由会员分享，可在线阅读，更多相关《如何用CSS技术制作网页.ppt（21页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、等其他元素的控制，使网页能够完全按照设计者的要求来显示。在网页中使用在网页中使用CSS的方式的方式q在标记符中直接嵌套样式信息在标记符中直接嵌套样式信息(内嵌内嵌)HTML HTML 标记符的标记符的 style style 属性属性q在在STYLESTYLE标记符中定义样式信息标记符中定义样式信息(插入插入)STYLE STYLE 标记符标记符 样式定义样式定义 q链接外部样式表中的样式信息链接外部样式表中的样式信息(引入引入)LINK LINK 标记符标记符LINK rel=“stylesheet”type=“text/css”href=“stylesheetname.css”CSS属性属

3、性字体属性字体属性文本属性文本属性颜色与背景属性颜色与背景属性布局属性布局属性定位和显示属性定位和显示属性鼠标样式属性鼠标样式属性列表样式属性列表样式属性CSS滤镜滤镜 字字体体属属性性用用于于控控制制网网页页中中的的文文本本的的字字符符显显示示方方式式，例例如如控控制制文文字字的的大大小小、粗粗细细以以及及使使用用的的字字体体等等。CSSCSS中中 的的 字字 体体 属属 性性 包包 括括 字字 体体 族族 科科（font-font-familyfamily）、字字体体风风格格（font-stylefont-style）、字字体体变变形形（font-variantfont-variant）、

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

5、语法：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:使用绝对或相对路径指定背景图像，建议使用相对

6、路径。示例：pbackground-image:url(comet.jpg);blockquotebackground-image:url(c:InetPubMyPixscomet.jpg);brbackground-image:url(http:/F 参数：color:指定颜色。说明：如果提供全部四个参数值，将按上右下左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。CSS常用的属性常用的属性边框线格式（border-style）语法：border-style:none|hidd

7、en|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凸

8、边CSS常用的属性常用的属性说明：如果提供全部四个参数值，将按上右下左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。CSS常用的属性常用的属性设置对象四边的内边距（padding）语法：padding:length 参数：length:由数值和单位标识符组成的长度值或者百分数。说明：如果提供全部四个参数值，将按上右下左的顺序作用于四边。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。CSS

9、常用的属性常用的属性CSS定位(width、height)语法：width:auto|length 参数：auto:无特殊定位，根据HTML定位规则载文档流中分配length:由数值和单位标识符组成的长度值，或者百分数。百分数是基于父对象的宽度。不可为负数。语法：height:auto|length 参数：auto:无特殊定位，根据HTML定位规则载文档流中分配length:由浮点数字和单位标识符组成的长度值|百分数。百分数是基于父对象的高度。不可为负数。CSS常用的属性常用的属性鼠标指针（cursor）语法：cursor:auto|crosshair|default|hand|move|help|wait|text|w-resize|s-resize|n-resize|e-resize|ne-resize|sw-resize|se-resize|nw-resize示例：pcursor:text;acursor:hand;ENDTHANKS加油！祝大家学好CSS语言杨子慰