4.4.1应用样式表美化网页.ppt

1、级联样式表CSS (Cascading Style Sheets),ksked stal i:ts,CSS概念,样式表（style sheet）是网页文件对元素（标题和正文）的默认字体、大小、颜色、前页外观、单个部分的排列间隔、行间距、四周页边距、标题间距离等元素的定义。样式表在文档开始时通过插入或者链接进行定义，又或者在某个元素需要的 时候来定义。 样式是字体和段落设置的组合。使用样式来快速一致地设置文本格式。 样式是格式指令或要求的集合，减少简单重复的操作。,练习,font-size:72; font-style:bold;color:red,练习,color:red;font-famil

2、y:黑体,color:#000000;font-family:宋体;font-size:12,color:Lime;font-family:宋体;font-size:32,color:#0000ff;font-family:黑体;font-size:64,思考,1.对于只有几页的网页，我们逐句逐段的设置字体和段落。那对网站有几万张网页、每张网页有几百个段落、每个段落和字体要及时向设置，工作量？, 这是一段红色粗体文字 , 这是一段红色粗体文字 ,内联样式, 这是一段红色粗体文字 ,STEP1：打开网页编辑工具，输入下面的代码 h1color:#ff0000;font-family:黑体 h2c

3、olor:#000000;font-family:宋体;font-size:12 h3color:#00ff00;font-family:宋体;font-size:32 h4color:#0000ff;font-family:黑体;font-size:64 网页设计制作 网页设计制作 网页设计制作 网页设计制作 ,内部样式,内部样式,STEP1：打开网页编辑工具，输入下面的代码 h1color:#ff0000;font-family:黑体 p.firstcolor:#000000;font-family:宋体;font-size:12 p.secondcolor:#00ff00;font-fa

4、mily:宋体;font-size:32 .mystylecolor:#0000ff;font-family:黑体;font-size:64 - 网页设计制作 网页设计制作 网页设计制作 网页设计制作 ,STEP1：打开网页编辑工具，输入下面的代码 h1color:#ff0000;font-family:黑体 h2color:#000000;font-family:宋体;font-size:12 h3color:#00ff00;font-family:宋体;font-size:32 h4color:#0000ff;font-family:黑体;font-size:64 STEP2：保存为mystyle.css,STEP3：打开网页编辑工具，输入下面的代码 网页设计制作 网页设计制作 网页设计制作 网页设计制作 STEP4：浏览结果,级联样式表CSS (Cascading Style Sheets),ksked stal i:ts,CSS概念,样式表（style sheet）是网页文件对元素（标题和正文）的默认字体、大小、颜色、前页外观、单个部分的排列间隔、行间距、四周页边距、标题间距离等元素的定义。样式表在文档开始时通过插入或者链接进行定义，又