HTML5,CSS3,javasript,网页制作,网页设计第6章元素外观修饰.ppt

HTML+CSS+JavaScript网页制作 机械工业出版社同名教材 配套电子教案 * * 6.1 案例：网络花店服务向导页面——设置文本样式 6.2 案例：玫瑰花简介页面——设置图像与背景样式 6.3 案例：畅销鲜花排行榜页面——设置表格样式 6.4 案例：网络花店联系我们表单——设置表单样式 6.5 实训：网络花店环保社区页面 第6章 元素外观修饰 【案例展示】使用CSS文本修饰的基本知识制作网络花店服务向导页面的局部信息，本例文件6-1.html在浏览器中的显示效果如图6-1所示。 6.1 案例：网络花店服务向导页面——设置文本样式 6.1.1 设置字体类型 除了利用HTML的face标签来设置字体外，也可以用CSS的font-family属性来设置需要的字体。 语法：font-family : 字体名称 【演示6-1-1】字体类型设置 。 6.1 案例：网络花店服务向导页面——设置文本样式 6.1.2 设置字体大小 在设计页面时，通常使用不同大小的字体来突出要表现的主题，在CSS样式中使用font-size属性设置字体的大小。 语法：font-size : 绝对尺寸 | 相对尺寸 | 百分数 【演示6-1-2 】字体大小设置。 6.1 案例：网络花店服务向导页面——设置文本样式 6.1.3 设置字体粗细 CSS样式中使用font-weight属性设置字体的粗细。 语法：font-weight : bold | number | normal 【演示6-1-3】字体粗细设置 。 6.1 案例：网络花店服务向导页面——设置文本样式 6.1.4 设置字体倾斜 CSS中的font-style属性用来设置字体的倾斜。 语法：font-style : normal || italic || oblique 【演示6-1-4】字体倾斜设置 。 6.1 案例：网络花店服务向导页面——设置文本样式 6.1.5 设置字体修饰 使用CSS样式可以对文本进行简单的修饰，例如给文字添加下划线、顶划线和删除线，它是通过text-decoration属性来实现这些效果的。 语法：text-decoration : underline || blink || overline || line-through | none 【演示6-1-5】字体修饰设置 。 6.1 案例：网络花店服务向导页面——设置文本样式 6.1.6 设置字体颜色 在CSS样式中，对文字增加颜色修饰十分简单，只需添加color属性即可。color属性的语法格式： color:颜色值; 【演示6-1-6】字体颜色设置 。 6.1 案例：网络花店服务向导页面——设置文本样式 6.1.7 设置文字的对齐方式 使用CSS样式可以设置文字的对齐方式，它是通过text-align属性来实现这些效果的。 语法：text-align : left | right | center | justify 6.1 案例：网络花店服务向导页面——设置文本样式 6.1.8 设置首行缩进 在CSS样式中text-indent属性可以方便地实现文本缩进。 语法：text-indent : length 【演示6-1-7】设置首行缩进 。 6.1 案例：网络花店服务向导页面——设置文本样式 6.1.9 设置首字下沉 在CSS样式中伪对象:first-letter可以实现对象内第一个字符的样式控制。 【演示6-1-8】设置首字下沉。 6.1 案例：网络花店服务向导页面——设置文本样式 6.1.10 设置行高 在CSS样式中，使用line-height属性控制行与行之间的垂直间距。 语法：line-height : length | normal 【演示6-1-9】设置行高 。 6.1 案例：网络花店服务向导页面——设置文本样式 【案例展示】使用CSS设置图像与背景样式的基本知识制作玫瑰花简介页面，本例文件6-2.html在浏览器中的浏览效果如图6-12所示。 6.2 案例：玫瑰花简介页面——设置图像与背景样式 6.2.1 设置图像样式 1．设置图像边框 在HTML中可以直接通过img标记的border属性值为图片添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的粗细。当设置border属性值为0时，则显示为没有边框。 【演示6-2-1】设置图片边框 。 6.2 案例：玫瑰花简介页面——设置图像与背景样式 2 设置图像缩放 使用CSS样式控制图片的大小，可以通过width和height两个属性来实现。 【演示6-2-2