设置CSS的字体属性.PPT

任务2：页面样式设置 【任务实施】 一、定义CSS样式表 二、编写调用CSS文件代码 任务2：页面样式设置 【任务拓展】 一、滤镜属性 filter是微软对CSS的扩展，与 Photoshop中的滤镜相似，它可以用很简单的方法对页面中的文字进行特效处理。 filter：滤镜名称（参数1,参数2,……） （1）不透明度―alpha alpha滤镜用于设置图片或文字的不透明度。它是一个目标元素与背景混合,通俗地说就是一个元素的透明度。通过指定坐标，可以指定点\、线\、面的透明度。 语法：filter: alpha(参数1=参数值,参数2=参数值, ……) 说明：alpha滤镜用于设置图片或文字的不透明度。它是把一个目标元素与背景混合，通俗地说就是一个元素的透明度。 任务2：页面样式设置 一、滤镜属性 （1）不透明度―alpha 参数 具体含义及取值 opacity 代表透明度水准，默认的范围是从0-100，表示透明度的百分比，也就是说0为完全透明，100为完全不透明 finishopacity 是一个可选参数，如果要设置见表的透明效果，可以使用该参数来指定结束时的透明度。范围是0-100 style 参数指定了透明区域的姓张特征。其中0表示统一形状、1表示线形、2表示放射状、3代表长方形 startx 代表渐变透明度效果的开始X坐标 starty 代表渐变透明度效果的开始Y坐标 finishx 代表渐变透明度效果的结束X坐标 finishy 代表渐变透明度效果的结束Y坐标 任务2：页面样式设置 一、滤镜属性 （2）灰度处理―gray 滤镜是把一张图片变成灰度图。灰度也不需要设定参数，它去除目标的所有色彩，将其以灰度级别显示。 语法：filter:gray 实例 任务2：页面样式设置 二、光标属性 光标属性是CSS中用于专门设置在对象上移动的鼠标指针所采用的光标形状。 语法：cursor：auto|形状取值|url（图像地址） 说明：auto表示根据页面的内容自动选择光标形状；url(图像)则表示采用自定义的图像作为光标形状；形状取值则是系统预定义的几种光标形状。 光标形状取值 具体含义 光标形状取值 具体含义 hand 手型 move 移动图标 crosshair 交叉十字形 default 默认的箭头形状 text 文本选择形状 help 带有问号的箭头 任务3：区块与层的页面布局 【任务陈述】 本任务将通过对庄辉网站个人介绍页面的DIV+CSS布局，系统全面的讲解DIV+CSS技术，页面效果如图所示。 任务3：区块与层的页面布局 【知识准备】 4.6 CSS布局基础 一、CSS布局元素类型 块级元素。块级元素一般是其它元素的容器元素，块级元素都从新行开始，它可以容纳内联元素和其它元素。例如：段落、标题、列表、表格、DIV、表格等元素都是块级元素。 内联元素。如A、EM、SPAN元素及大多数的替换元素，它们不必在新行显示也不要求其它元素的新行显示，可作为其它任何元素的子元素。 列表元素。在HTML内置有LI默认为此类元素。 隐藏元素。在display属性的4个值中，除了block、inline和list-item之外，还有一个值none。当设置为“display:none”时，浏览器会完全隐藏这个元素，该元素不会被显示。 任务3：区块与层的页面布局 4.6 CSS布局基础 二、盒模型 盒模型（Box Model）是从CSS诞生之时便产生的一个概念，是关系到设计中排版定位的关键问题，任何一个块级元素都遵循盒模型。现在通过实例来理解盒模型理论。 实例： #div1 { width: 260px; /*设置div的宽度*/ height: 260px; /*设置div的高度*/ margin:30px 50px; /*设置边界符合属性*/ padding: 50px 15px; /*设置填充符合属性*/ border: 10px solid #990000; /*设置边框符合属性*/ background: #66FFFF url(pic/bg.jpg) repeat} /*设置背景符合属性*/ 实例 任务3：区块与层的页面布局 4.6 CSS布局基础 二、盒模型 所谓盒模型，就是把每个HTML元素看作装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即为填充（padding），盒子本身有