工业UI开发技术-课件 2-2-3 CSS效果-1.pptxVIP

CSS效果深圳市信息职业技术学院

字体效果01目录文本效果02背景效果03边框效果04列表效果05渐变06

本节目标 本任务通过学习CSS基本概念，CSS语法结构，选择器，属性，学习如何通过CSS设置HTML标签的样式与布局。通过本节学习可以：掌握CSS概念掌握CSS语法掌握CSS选择器与属性掌握CSS盒子模型掌握CSS布局方式

01文字效果

文字效果1、color属性：设置文本的颜色。 color:#FF0000; #F00; red; rgb(255,0,0);2、font-family属性：设置元素的字体系列。 font-family:TimesNewRoman,Georgia,Serif;微软雅黑,Georgia,Serif;\5FAE\8F6F\96C5\9ED1;//unicode编码格式“MicrosoftYaHei”

文字效果3、font-size属性：规定字体尺寸。 font-size:12px; 14px; 16px; 1em;4、font-style属性：设置不同的字体样式。 font-style:normal； italic；//斜体

文字效果5、font-weight属性：设置文本的粗细。 font-weight:normal; bold; 700;6、line-height属性：设置行高。 line-height:18px;

文字效果7、字体属性简写（1）font:italicbold12px/30px微软雅黑,arial,sans-serif;（2）font:bold12px/30px微软雅黑,arial,sans-serif;（3）font:12px/30px微软雅黑,arial,sans-serif;（4）font:12px/200%“黑体”;（5）font:12px/1.5“黑体”;(行高是字体大小的1.5倍)

02文本效果

文本效果1、text-align属性：规定文本在块元素中的对齐方式。 text-align：left; center; right; justify;（多行时，除尾行都有效果）2、text-decoration属性：设置文本的修饰。 text-decoration:none； underline； overline； line-through；

文本效果3、text-indent属性：设置文本块中首行文本的缩进。text-indent:24px; -100px;4、letter-spacing属性：设置字符间距。letter-spacing:-0.5em; 20px;5、word-spaing属性：设置单词间距。word-spacing:30px; -0.5em;

文本效果6、text-indent属性：设置文本块中首行文本的缩进。 text-indent:24px; -100px;7、vertical-align：图片与文字的对齐方式，默认是基线对齐的。 vertical-align：top; middle; 10px; -10px;

03背景效果

背景效果background属性：设置背景色或背景图像。 background-color:#f00; background-image:url(../images/bg.jpg); background-repeat:no-repeat;(repeat-x,repeat-y,repeat) background-position:1px3px; 对应水平位置、垂直位置 数值单位：px或% 也可以是关键字,水平：left,center,right,垂直：top,center,bottom background-attachment:fixed;background:#ff0url(../images/bg.jpg)no-repeat1px3pxfixed;

背景效果背景图可以占位padding区域 因此通常我们可以利用padding配合背景图来做先导符号的效果。

THANKYOU深圳市信息职业技术学院