信息网络技术跟网络出版发行04.ppt

第二部分 层叠式样式表排版 用统一的方法规范网页设计，增强表现力 CSS样式表 CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS样式表分为内部样式表和外部样式表，内部样式表只对所在网页的内容产生风格上的影响。外部样式表被保存为独立的文件，可以链接到多个网页并对这些网页的风格产生影响。 资料网站 / 常见的样式表定义 创建简单的类，使用类统一相似元素的显示风格。 如统一小标题的风格 重定义Body P TD H1 H2 H3 标签 重定义复合内容a:link a:hover a:visited a:active 技巧： BODY设置长条背景图可以快速美化网页画面 P设置像素单位的缩进，可以方便的控制段落样式 P设置行高，可使文字精确对齐 使块状元素水平居中对齐 margin:0 auto;/*水平居中*/ 用CSS样式重定义链接（复合内容）效果 重定义a:link 黑色无下划线 重定义a:hover 黑色有下划线 重定义a:visited 灰色有下划线 重定义a:active 橙色无下划线 重定义a:link 褐色无下划线 重定义a:hover 褐色有下划线 重定义a:visited 红色有下划线 重定义a:active 蓝色无下划线 CSS美化技巧（1） 背景图居中纵向平铺（多数长版型网页使用） body{ background-attachment: fixed; background-color: #FFF; background-image: url(/image/logo_home_c.png); background-repeat: repeat-y; background-position: center top; 背景图居中横向平铺（多数为短版型网页使用） body{ background-attachment: fixed; background-color: #FFF; background-image: url(/image/logo_home_c.png); background-repeat: repeat-x; background-position: left center; 创建与链接外部样式表 外部样式表是一个独立的样式表代码文件，我们可以通过链接网页到不同的样式表来改变网站的整体显示风格 我们甚至可以利用链接不同的精心设计好的样式表将网站的排版格局进行快速转换，包括将背景图，背景色彩进行整体转换，这样，在不同的节日或者季节，我们就可以快速装扮网页了。 通过灵活定义和选择外部样式表，网页的创作风格可以千变万化，学好网页的排版设计，样式表技术是一个必须完整掌握的内容。 结构与表现的分离 初学HTML的时候，我们经常用font标签定义文字的色彩、字体等控制表现的属性。 CSS，则将表现的工作完全包揽下来，统一进行控制，HTML代码只负责顺序与层次嵌套关系。 简单理解来说，标准的CSS网页，在删除CSS代码后，只能显示文字和元素之间的简单位置，不具备丰富的色彩和修饰能力，也不能精确的定位元素 表现被分离后，网站风格的统一管理与高效的网页排版成为可能。也方便了网页设计人员、网页程序开发人员与图文编辑之间的协作 /Design/Pages/0410B242007.html 拓展：制作可更换皮肤的网页 资料来源 原理： 设置两个风格不同的网页外部样式，分别为a.css b.css 在测试网页的代码中加入这两个样式的链接，并定义title属性 利用JS程序遍历有title属性的样式 用按钮控制哪个样式产生作用 容易出错的地方： 资料中有小错误，注意参数的一一对应关系 注意JS代码中的大小写严格区分问题 /Design/Pages/0410B242007.html 盒子模型1 尺寸 完整清晰的理解盒子模型，是学好CSS样式的首要条件 盒子模型2 层次关系 /dennyxno1@yeah/blog/static/7357517920093432725956/ 完整清晰的理解盒子模型，是学好CSS样式的首要条件 CSS“类型”样式 字体 大小 修饰（加粗、 下划线、 删除线、变体等） 行高 色彩 CSS“区块”样式 单词间距 字母间距 垂直对齐 文本对齐 CSS“背景”样式 背景色 背景图 背景图重复 背景图附加 背景图位置 CSS“方框”样式 宽 高 浮动 填充距离 边界距离 CSS“边框”样式 实线边框 虚线边框 边框线粗细 边框线色彩 CSS“列表”样