《第9课创建层叠样式css(1+)课件》由会员分享，可在线阅读，更多相关《第9课创建层叠样式css(1+)课件（40页珍藏版）》请在金锄头文库上搜索。
1、第7课 创建层叠样式,问题导入: 如何使文本有合适的行间距?,CSS（Cascading Style Sheets）样式用来一次对若干个文档所有的样式进行控制。 同时链接多个文档 CSS 样式有所更新之后，所有应用了该样式表的文档都会被自动更新。,创建CSS样式方法,在“CSS 样式”面板（“窗口”“CSS 样式”）中，单击面板右下角区域中的“新建 CSS 样式”按钮 (+)。,方法2. “文本”“CSS 样式”“新建 CSS 样式”。,类(可用于任何标签)： 建一个可以应用于任何标签的样式。 注意： 类名称必须以句点开头，可以包含任何字母和数字组合（例如，.myhead1）。 如果您没有输入
2、开头的句点，Dreamweaver 将自动为您输入。,示例 创建自定义样式： .mystyle仅对该文档 设置颜色等 选择文字,右键选择样式,标签(重定义特定标签的外观)： 对指定的 HTML 标签的设置样式 图象标签:img （设置图片边框5，css设置边框颜色，编辑看效果） 列表标签:li （加下划线修饰，和指定列表类型看效果）,标签是网页的主体 应用于body 类型12像素 效果：不会随浏览器字体大小设置改变,高级(ID、上下文选择器) ： 对特定的标签组合，或者包含有指定属性的所有标签进行格式定义。 包括说明：是指有链接的文字a:link：表示已经链接；a:hover：表示鼠标移上链接
3、时；a:active：表示链接激活时；a:visited：表示己点击过的链接。,和页面属性的功能完全一样。,新建样式表文件： 将此样式保存成一个文件，可供其他文件调用 仅对该文档：只能将此样式应用于本文件 效果： 样式变则都变化。,新建网页test1.htm 新建css文件yanse.css保存样式.yanse 运用到文本中 3.新建网页test2.htm 选中文本附加样式文件yanse.css 4. 编辑样式看结果.,类型设置,变量可以将小写字母转换成大写字母,行高：这项设置在网页制作种很常用。 “正常”，让计算机自动调整行高 注意：单位应该和文字的单位一致，行高的数值是包括字号数值在内的。
4、 例如，文字设置为12pt，一倍行距，则行高应该为24pt。百分比的值相对于字体的大小而定.,像素（px）相对与屏幕的分辨率,相对长度单位 点数（pt）1点=1/72英寸 绝对长度单位 帕(pc) =12点 英寸（in）、厘米（cm）和毫米（mm）根据显示的实际尺寸来确定长度。 字体高（em）表示当前文本的尺寸。 字体x的高（ex）表示当前字母“x”的高度； %是以当前文本的百分比定义尺寸。,修饰向文本中添加下划线、上划线或删除线，或使文本闪烁。 链接的默认设置是“下划线”。将链接设置设为无时，可以通过定义一个特殊的类删除链接中的下划线。 粗细对字体应用特定或相对的粗体量。“正常”等于 400
5、；“粗体”等于 700。 大小写将每个单词的首字母大写或将文本设置为全部大写或小写。 颜色设置文本颜色。,示例,输入二行字母附加样式,看变化. .leixing,背景设置,.beijing 应用于 body 标签 附件设置为固定/滚动,区块设置,单词间距设置单词的间距。 设置特定的值，选择“值”，然后输入数值。 在第二个菜单中，选择度量单位。 字母间距增加或减小字母或字符的间距。减少字符间距，指定一个负值（例如 -4） 示例： I dont know(通过浏览器看结果) I dont know。,垂直对齐方式指定应用它的元素的垂直对齐方式 对图片应用则和文本的垂直对齐可变,文本对齐设置元素中的
6、文本对齐方式。,文本缩进指定第一行文本缩进的程度。 实现中文文字的首行缩进。 首先填入具体的数值，然后选择单位。 文字的缩进和字号要保持统一。 如字号为12px，像创建两个中文字的缩进效果，文字缩进就应该为18px。,空格确定如何处理元素中的空白。 “正常”收缩空白； “保留”保留所有空白，包括由空格键、Tab键、Enter键创建的空格 ； “不换行”指定仅当遇到 br 标签时文本才换行。 显示制定是否以及如何显示元素。 选择“无”则关闭元素的显示。在实际控制中很少使用。,方框设置,实际就是文字等对象的环绕效果,宽和高设置对象的宽度和高度。 浮动：文字等对象的环绕效果。 选择“右对齐”、对象居
7、右。文字等内容从另外一侧环绕对象。 选择“左对齐”。对象居左，文字等内容从另一侧环绕。 “无”取消环绕效果。 清除：清除设置的浮动效果,填充指定内容与边框之间的间距 （如果没有边框，则为边距)。 边界指定边框与另一个元素之间的间距。,边框设置,设置元素边框的粗细。,设置边框的样式外观。取消“全部相同”复选框的选取可以分别进行设置。,设置元素边框的颜色。,“边框” 可以定义元素(图片等)周围的边框的设置（如宽度、颜色和样式）。,示例分析:.biankuang 给图片加边框后 设定样式,宽度和颜色 指定其填充(与边框之间的间距) 指定其边界值(指定边框与另一个元素之间的间距),列表设置,建.mys
8、tyle 对列表施加样式。,设置浏览器如何定位层。,设置层的堆叠顺序，值较高的层显示在值较低的层的上面。,设置当层的内容超出层的大小时其内容的放置位置。,定义层的可见部分。,指定层的宽度和高度。,指定层在页面中的位置。,设置层的初始显示条件。,定位设置（已经属性面板化）,“定位”项: 是对层的设置，但是因为DW提供了可视化的层制作功能，所以此项设置在实际操作中几乎不会使用。,类型确定浏览器应如何来定位层 绝对使用“定位”框中输入的坐标（相对于页面左上角）来放置层。 相对使用“定位”框中输入的坐标（相对于对象在文档的文本中的位置）来放置层。 静态将层放在它在文本中的位置。 显示确定层的初始显示条
9、件。 默认情况下大多数浏览器都继承父级的值 继承继承层父级的可见性属性。如果层没有父级，则它将是可见的。 可见显示该层的内容。 隐藏隐藏这些层的内容。,Z 轴确定层的堆叠顺序。 编号较高的层显示在编号较低的层的上面。 溢出确定在层的内容超出它的大小时将发生的情况。 可见增加层的大小，使它的所有内容均可见。层向右下方扩展。 隐藏保持层的大小并剪辑任何超出的内容。不提供任何滚动条。 滚动在层中添加滚动条，不论内容是否超出层的大小。 自动使滚动条仅在层的内容超出它的边界时才出现。,定位指定层的位置。 剪辑定义层的可见部分。,扩展设置,设置在打印页面时强制分页的位置。在“之前”和“之后”下拉列表框中，
10、可以分别设置分页前和分页后的位置。,可选择当鼠标光标位于样式所控制对象上时光标的形状。,可以选择样式所控制对象的特殊效果，也就是层叠样式滤镜效果。,分页通过样式来为网页添加分页符号。 允许用户指定在某元素前或后进行分页。 分页的概念是打印网页的内容时在某指定的位置停止，然后将接下来的内容继续打印在下一页纸上。,光标改变鼠标形状，鼠标放置于被此项设置修饰的区域上的时，形状会发生改变。 Hand（手）、 crosshair（交叉十字）、 text（文本选择符号）、 wait（Windows的沙漏形状）、 default（默认的鼠标形状）、 help（带问号的鼠标）、 e-resize（向东的箭头）
11、、 ne-resize（指向东北方的箭头）、 n-resize（向北的箭头）、 nw-resize（指向西北的箭头）、 w-resize（向西的箭头）、 sw-resize（向西南的箭头）、 s-resize（向南的箭头）、 se-resize（向东南的箭头）、 auto（正常鼠标）。,过滤器对样式所控制的对象应用特殊效果。 Alpha让对象呈现渐变半透明效果 Blur让对象产生风吹模糊的效果 BlendTrans网页或对象的淡入淡出切换效果 DropShadow让对象有一个下落式的阴影 Glow在对象的周围产生光晕而模糊的效果 Chroma让图像中的某一颜色变成透明色 FlipH让HTML对象水平转换 FlipV让HTML对象垂直转换 Wave让HTML对象产生水平或是垂直方向上的正弦波形 Shadow让对象产生阴影效果 Mask利用一个HTML对象在另一个对象上产生图像的遮罩Light在HTML元件上放置一个光影 Gray把一个彩色的图象变成灰色调图象 RevealTrans让网页或对象建立切换效果 Invert让对象产生照片底片的效果 XRay让对象轮廓突出显示,
