网页制作教学4.pptVIP

3.3 样式 样式是一组可以控制文本块、段落或整篇文档外观的格式属性。使用外部样式文件可以一次控制若干篇文档的格式 。 CSS（Cascading Style Sheets）即级联样式表或层叠样式表通过样式名或HTML标签表示，可以控制绝大多数的传统文本格式，如字体、字号和对齐方式等，还可以指定位置、鼠标指针形状和其他特殊效果。为了防止某些浏览器不识别某些 CSS样式，可以用注释标签!-- --将CSS样式括起来。 3.3.1 CSS语法 CSS 样式表位于HTML代码中的head标签内，由3部分构成：选择符（selector）、属性（properties）和属性值（value）： Selector { properties1: value1 ; /*属性名及属性值*/ properties2 : value 2; /*属性名及属性值*/ … } 3.3.2 CSS 样式应用 先创建CSS样式，再对选定文本应用CSS样式。 对选定文本用了某CSS样式后，若又改变了该样式的格式，则修改之前用了该样式的文本自动更新格式。 CSS样式创建之后，只对本网页有效。以往创建的CSS样式不存在于新开文件的CSS样式列表中，新网页须重新附加CSS文件。 3.3.3 使用CSS 样式 在新建CSS样式窗口中，需要设置3个参数： 选择器类型 样式名称 样式定义的范围 1．“类”选择器 名字前边必须有一个英文句号，自定义样式的名字可以是字母和数字的组合，不能用中文。“定义在” 选择“仅对该文档”。 类型：定义CSS样式的基本属性，例：字体大小、粗细、样式、行高、修饰和颜色等。 背景：定义背景颜色、背景图像、背景图像的重复平铺方式、附件（背景图象是固定在它的原始位置还是随内容一起滚动）、水平和垂直位置（选择水平或垂直排列的方式）。 区块：设置单词间距、字母间距、文本对齐方式、缩进属性、空格（“正常”选项将多个连续空格作为一个空格，“保留”选项保留空格原貌，“不换行”选项必须强制换行，不能自动换行）、显示属性（如何显示元素）。 方框：设置元素的宽度、高度、浮动（图像浮于页面的左、右边距）、填充（元素内容和边界的间隔）、边界。 边框：边框的样式、宽度。 列表：设置列表的项目符号。 定位：定义层的属性 及定位类型。 扩展：定义打印时的分页设置、光标的外形和各种滤镜效果。效果见下表： 滤镜效果 描述 Alpha 设置透明度 Blur 建立模糊效果 Chroma 把指定的颜色设置为透明 DropShadow 建立一种偏移的影象轮廓，即投射阴影 FlipH 水平反转 FlipV 垂直反转 Glow 为对象的外边界增加光效 Grayscale 降低图片的彩色度 Invert 将色彩、饱和度以及亮度值完全反转建立底片效果 Light 在一个对象上进行灯光投影 Mask 为一个对象建立透明膜 Shadow 建立一个对象的固体轮廓，即阴影效果 Wave 在X轴和Y轴方向利用正弦波纹打乱图片 Xray 只显示对象的轮廓 3.3.3 使用CSS 样式 1．“类”选择器.【例3-4】在文字上应用样式。 步骤1：插入1行4列表格，并输入文字，文字居中显示； 步骤2：打开CSS面板，“新建”按钮，在弹出的新建CSS样式窗口设置“选择器类型”为“类”，名称为“.glow” 步骤3：设置“类型”类的字体为隶书，大小为36，颜色为灰色，设置“扩展”类的“滤镜”为Glow，其参数为Color=#ff0000，Strength=2； 步骤4：将文字“光晕文字”的“属性”面板的“样式”下拉列表中选择“glow” 步骤1：打开CSS面板，“新建”按钮，在弹出的新建CSS样式窗口设置“选择器类型”为“类”，名称为“.blur” 步骤2：设置“类型”类的字体为隶书，大小为36，颜色为蓝色，设置“扩展”类的“滤镜”为blur，其参数为Add=true Direction=135 Strength=30； 立体文字 步骤：设置“类型”类的字体为隶书，大小为36，颜色为蓝色，设置“扩展”类的“滤镜”为DropShadow，其参数为Color=#999999 ,offX=6 ,offY=6, Positive=1； 阴影文字1 Color为阴影颜色，offX和offY为阴影偏离文字的位置，Positive是1表示为不透明元素建立阴影，0表示为透明元素建立阴影。 步骤：设置“类型”类的字体为隶书，大小为36，颜色为蓝色，设置“扩展”类的“滤镜”为Shadow，其参数为Color=#00ff00 ,