1 / 26
文档名称:

第四章 CSS样式表.ppt

格式:ppt   大小:55KB   页数:26页
下载后只包含 1 个 PPT 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

第四章 CSS样式表.ppt

上传人:xgs758698 2016/8/5 文件大小:55 KB

下载得到文件列表

第四章 CSS样式表.ppt

文档介绍

文档介绍:第四章 CSS 样式表第一节 CSS 简介 1. CSS 的作用? CSS 是 Cascading style sheets (层叠样式表单) 的简称,通常称作样式表; ? CSS 最大的特点是它把网页上的内容结构和格式控制相分离,从而给网页设计带来以下几方面的优点: ?减少重复代码的工作量; ?提高网络运行速度; ?增加网页设计的灵活性。第一节 CSS 简介 2. CSS 的编辑? CSS 的基本语句结构是: 选择符{属性:属性值} ?如: div{width:200; filter:blur(add=true,direction=135,stren gh=20);} 第一节 CSS 简介?有三种方法可以将独立编辑好的 CSS 文档怎样加入到 HTML 文档中。?一种是把 CSS 文档放到<head> 标记结构中: <style type="text/css"> …… </style> ?如: <style type="text/css"> div{width:200;filter:blur(add=true,direction=90,str ength=30)} </style> 第一节 CSS 简介?另一种方法是把 CSS 样式表写在 HTML 的行内: <p style="font-size:14pt; color:blue"> 蓝色 14 号文字</p> ?如: <div style="width:200;filter:blur(add=true,direction=90, strength=30)"> <img src=image/ > </div> 第一节 CSS 简介?还有一种方法是把编辑好的 CSS 文档保存成“.CSS ”文件,然后在<head> 中定义引用: <head> <link rel=stylesheet href=""></head> ? 的内容为: div { width:200;filter:blur(add=true,direction=0,s trength=30)} 第二节图文排版属性 ? font-family :定义字体,其属性值为字体名称; ? font-style :定义是否斜体,其属性值 Normal 、 italic (斜体)、 oblique (歪斜体); ? font-variant :是否大写小体,其属性值 Normal 、 small- caps( 小写的英文字体转化为大写且较小的英文); ? font-weight 字体粗细,其属性值 Normal 、 bold (粗体)、 bolder (粗体加粗) 、 lighter (比默认字体还细) ? font-size 字体大小,其属性值 Absolute-size 、 relative- size 、 length 、 percentage 等; 第二节图文排版属性 ? Color :定义前景色,其属性值为<颜色> ? background-color :定义背景色,其属性值为<颜色> ? background-image :定义背景图案,其属性值为<图片路径> ? background-repeat :图案重复方式,其属性值为 repeat-x (背景图片以 X轴并排延伸)、 repeat-y (背景图片以 Y轴并排延伸) 、 no-repeat (背景图片不以并排方式延伸) ? background-attachment :背景图案滚动,其属性值为 scroll 、 fixed ? background-position :背景图初始位置,其属性值为 percentage 、 length 、 top 、 left 、 right 、 bootom 等第二节图文排版属性 ? word-spacing :词间距,其属性值为 Normal 、<长度> ? letter-spacing :字母间距,其属性值为 Normal 、<长度> ? text-decoration :文字装饰,其属性值为 None 、 underline (文字下加下划线)、 overline (文字上加顶线) 、 line-through (文字中间加删除线) 、 blink (文字闪烁,但浏览器不支持) ? vertical-align :垂直位置,其属性值为 baseline (默认)、 sub (下标)、 super (上标)、 text-top (垂直向上对齐)、 middle (垂直居中对齐) 、 bottom (垂直向下对齐) 、 text-bottom (垂直向下对齐,同 b