第三章网页中的文本辨析.ppt

HTML HEADTITLE过滤器效果之二/TITLE STYLE !-- .blur{filter:blur(strength=6,direction=135);width=800} .dropShadow{filter:dropShadow(color=gray,offX=3,offY=3);width=800} .glow{filter:glow(color=#ff7f00,strength=10);width=800} .mask{filter:mask(color=#238e68);width=800} .shadow{filter:shadow(color=gray,direction=135);width=800} -- /STYLE /HEAD BODY DIV align=center H2此段文本未使用效果/H2 H2 class=blur此段文本使用了 blur 效果/H2 H2 class=dropShadow此段文本使用了 dropShadow 效果/H2 H2 class=glow此段文本使用了 glow 效果/H2 H2 class=mask此段文本使用了 mask 效果/H2 H2 class=shadow此段文本使用了 shadow 效果/H2 /DIV/BODY/HTML CSS竖排文字 样式表的文字处理属性中有两个重要的属性：writing-mode和text-align。让我们先看看它们的用法： 　　1. writing-mode（设置对象书写方向） 　　语法：writing-mode : lr-tb、tb-rl参数：lr-tb：从左向右，从上往下 　tb-rl：从上往下，从右向左示例：div { writing-mode: tb-rl; } 　　2. text-align（设置对象中文本的对齐方式） 　　语法：text-align : left、right、center、justify参数：left：左对齐　　right：右对齐　　center：居中　　justify：两端对齐示例：div { text-align : center; } 课堂练习：使用CSS竖排诗歌 2．“标签”选择器 3．“高级”选择器 body{ scrollbar-face-color: #3399FF;　 //立体滚动条凸出部分的颜色 scrollbar-highlight-color: #FFFFFF;　//滚动条空白部分的颜色 scrollbar-3dlight-color: #FFC097;　//立体滚动条亮边的颜色 scrollbar-darkshadow-color: #FFFFFF;//立体滚动条强阴影的颜色 scrollbar-shadow-color: #FF3300;　//立体滚动条阴影的颜色 scrollbar-arrow-color: #FF3300; 　//上下按钮上三角箭头的颜色 scrollbar-track-color: #D7EBFF;　 //滚动条的基本颜色 } 鼠标属性 鼠标属性用于设置在对象上面移动的鼠标指针显示的形状，取值如表 所示。 值 含义 auto 浏览器基于当前文本决定显示哪种指针 crosshair 简单十字形 default 随平台而定的默认指针（通常为箭头） hand 手形 move 指示某物被移动的交叉箭头 *-resize 指示边缘被移动的箭头（*可以是 n、ne、nw、s、se、sw、e 以及 w，分别代表北、东北、西北、等方向） text 编辑文本指针（通常为 I 形） wait 指示程序正忙、用户需要等待的沙漏图标或监视图标 help 指示用户可以得到帮助的问号图标 3.3.4 引用外部CSS文件与导出样式表 1．引用外部CSS文件 “链接”是通过指针指向外部CSS文件， “导入”相当于存在内部样式表中， 这个区别可以从它们在代码中的位置看到。 head style type=text/css !-- @import url(CSS/Level3_3.css); /* 导入的CSS文件 */ .a { font-family: 隶书, 华文中宋; /* 自定义名为.a 的内部CSS样式 */ font-size: 36px; } -- /style link href=CSS/Level2_Times_Text.css rel=stylesheet type=text/css / /* 链接的CSS文件 */ /head 【例3-7】在系统中查找help.css，并引入自己的网页。 3.3.4 引用外部CSS文件与导