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

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-rep