CSS的基本语法和使用课件.ppt

第五章 C S S 《网页设计与制作》 精品 课堂内容 第七章 CSS 第一节、CSS简介 一、什么是CSS 二、为什么要使用CSS 三、CSS的使用方法 四、CSS的基本语句结构 五、CSS的类型 第二节、CSS属性及滤镜 一、CSS的属性 二、CSS滤镜 三、CSS的声明 四、CSS的冲突 小结、本节内容学习方法 精品 一、什么是CSS？ CSS是Cascading Style Sheets（层叠样式表单）的简称。通常又称作样式表，是一种设计网页样式的工具。 实际操作篇 CSS层叠样式表 第一节 CSS简介 精品 二、为什么要使用CSS？ CSS样式可灵活、精确地控制网页外观，控制的内容包括布局、字体、颜色、背景和其它效果。 优点： 1、内容和形式分离。 网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码精简，更小打开更快。2、改版网站更简单容易了。 不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。3、搜索引擎更友好，排名更容易靠前。 实际操作篇 CSS层叠样式表 精品 三、常用的CSS使用方法 编辑工具：任何文本编辑工具 样式表使用方法一般有三种： 1）文档头部插入：适用于单个网页应用 2）行内插入：适用于页面中一、两个地方才用到CSS 3）外部链接样式文件：适用于多个网页都用到CSS 实际操作篇 CSS层叠样式表 精品 1）文档头部插入 style type=“text/css” …… /style  如：htmlheadtitle文档标题/titlestyle type=“text/css”!--body {font: 10pt “Arial”}h1 {font: 15pt/17pt “Arial”; font-weight: bold; color: maroon}h2 {font: 13pt/15pt “Arial”; font-weight: bold; color: blue}p {font: 10pt/12pt “Arial”; color: black}--/style/headbody 请注意，这里将style对象的type属性设置为“text/css”，是允许不支持这类型的浏览器忽略样式表单。 具体请看操作演示 实际操作篇 CSS层叠样式表 精品 2）行内插入 　p style=“font-size：14pt；color：blue”蓝色14号文字/p 　 这是采用Style=“ ”的格式把样式写在html中的任意行内，这样比较方便灵活 具体请看操作演示 实际操作篇 CSS层叠样式表 精品 3）外部链接样式文件 先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：headtitle文档标题/titlelink rel=stylesheet href=/dhtmlet.css type=text/css/head 这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式，从而减少了大量的冗余代码 具体看操作演示 实际操作篇 CSS层叠样式表 精品 利用CSS面板创建外部CSS文件 1）选择新建CSS标签，弹出如下对话框，选择新建； 2）将CSS样式表命名、保存； 3）外部CSS文件创建好后，就可在HTML文档中，使用“LINGK”标签调用外部的CSS文件定义的样式了。 实际操作篇 CSS层叠样式表 精品 四、CSS的基本语句结构 Selector { property: value } 参数说明： Selector ：选择符property : 属性 value ：属性值 属性和属性值之间用冒号(:)隔开。多个定义之间用分号(;)隔开 style type=text/css!--body {font: 10pt Arial}h1 {font: 15pt Arial; font-weight: bold; color: maroon}p {font: 10pt Arial; color: black}--/styl