CSS的基本语法和使用.ppt

《CSS的基本语法和使用.ppt》由会员分享，可在线阅读，更多相关《CSS的基本语法和使用.ppt（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第五章 C S S,网页设计与制作,课堂内容,第七章 CSS 第一节、CSS简介 一、什么是CSS 二、为什么要使用CSS 三、CSS的使用方法 四、CSS的基本语句结构 五、CSS的类型 第二节、CSS属性及滤镜 一、CSS的属性 二、CSS滤镜 三、CSS的声明 四、CSS的冲突 小结、本节内容学习方法,一、什么是CSS？ CSS是Cascading Style Sheets（层叠样式表单）的简称。通常又称作样式表，是一种设计网页样式的工具。,实际操作篇 CSS层叠样式表,第一节 CSS简介,二、为什么要使用CSS？ CSS样式可灵活、精确地控制网页外观，控制的内容包括布局、字体、颜色、背

2、景和其它效果。 优点： 1、内容和形式分离。 网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码精简，更小打开更快。2、改版网站更简单容易了。 不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。3、搜索引擎更友好，排名更容易靠前。,实际操作篇 CSS层叠样式表,三、常用的CSS使用方法 编辑工具：任何文本编辑工具 样式表使用方法一般有三种： 1）文档头部插入：适用于单个网页应用 2）行内插入：适用于页面中一、两个地方才用到CSS 3）外部链接样式文件：适用于多个网页

3、都用到CSS,实际操作篇 CSS层叠样式表,1）文档头部插入 如：文档标题 请注意，这里将style对象的type属性设置为“text/css”，是允许不支持这类型的浏览器忽略样式表单。 具体请看操作演示,实际操作篇 CSS层叠样式表,2）行内插入 蓝色14号文字 这是采用的格式把样式写在html中的任意行内，这样比较方便灵活 具体请看操作演示,实际操作篇 CSS层叠样式表,3）外部链接样式文件 先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：文档标题 这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式，从而减少了大量的冗余代码 具体看操作演示,实际

4、操作篇 CSS层叠样式表,利用CSS面板创建外部CSS文件 1）选择新建CSS标签，弹出如下对话框，选择新建； 2）将CSS样式表命名、保存； 3）外部CSS文件创建好后，就可在HTML文档中，使用“LINGK”标签调用外部的CSS文件定义的样式了。,实际操作篇 CSS层叠样式表,四、CSS的基本语句结构 Selector property: value 参数说明： Selector ：选择符property : 属性 value ：属性值 属性和属性值之间用冒号(:)隔开。多个定义之间用分号(;)隔开 ,实际操作篇 CSS层叠样式表,五、 CSS的类型 CSS的类型有三种方式：类、ID、标签

5、、复合内容 下面分别举例说明,实际操作篇 CSS层叠样式表,1、类方式 1）它可被任何 HTML tag 所应用 2）语法： .Classname property:value 3）引用： 以 的方法引用CSS样式 比如 .blueone color:blue Blue H2 Blue paragraph,实际操作篇 CSS层叠样式表,2、标签方式 1）重新定义 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS 定义了它们, 在整页中, 这个 Tag 的性质就按照你 的定义来显示了. 2）语法： tag property:value 比如我们想叫 TD 的颜色是红的

6、TD color: red 这里还要告诉你 CSS 的一个特点, 它可定义好几个 selector 在一个 rule 里. 比如 H1, H2, TD color: red 这个定义就能让所有的 H1, H2, 和 TD 的颜色都为红色.,实际操作篇 CSS层叠样式表,3、ID方式 1）ID selector 其实跟独立 class selector 的功能一样. 而区别在于它们的语法和用法不同, 以及对于 Javascript 操纵 HTML 元素有帮助. 2）它的语法：#IDname property:value 假如我们有下面的定义： #yelowone color: yellow 我们

7、可以运用这个定义到任何的有同样 ID 名字的 tag, 比如 #redone color: red 样式表 你可能觉得既然 ID selector 和独立 class selector 功能一 样, 为什么两者都存在呢. 有 ID 的 HTML 元素可以被 CSS-P 和 JavaScript 来操纵.,4、 复合内容（基于选择的内容） 1）若要定义同时影响两个或多个标签、类或 ID 的复合规则，请选择“复合内容”选项并输入用于复合规则的选择器。 2）语法：td, h1, p color: #939; 3）可定义链接的四种状态： Link表示超链接的文本在链接未被访问时的风格 ； Visite

8、d表示链接被访问过后的风格 ； Hover表示鼠标指向链接但未点击时的链接风格 Active表示鼠标点击链接时链接风格,实际操作篇 CSS层叠样式表,第二节 CSS的属性及滤镜 一、CSS属性介绍 1、类型属性 对文字的各项属性进行设置。,实际操作篇 CSS层叠样式表,2、背景属性：,实际操作篇 CSS层叠样式表,3、区块属性 区块指的就是网页中的文本、图像、层等网页元素。这个属性主要用于控制区块中的内容的间距、对齐方式、文字缩进等等,实际操作篇 CSS层叠样式表,4、容器属性 CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。CSS将网页中所有的块元素都看作是包含在一个盒

9、子（BOX）中,实际操作篇 CSS层叠样式表,边距属性,填充距属性,边框属性,图文混排,5、定位属性 主要是在页面的布局和控制上进行定义,实际操作篇 CSS层叠样式表,6、css对扩展的定义 扩展分类包含两个部分。一个是分页符，是为了打印的页面设置分页符用的。 视觉效果是为网页中的元素添加特殊的效果用的。光标：可以指定在某个元素上要使用的光标形状。滤镜：这是一个很奇妙的参数，共包括16种滤镜，用这些滤镜，甚至可以替代photoshop的一部分功能。,二、 CSS滤镜 Alpha滤镜 Blur滤镜 Chroma滤镜 Dropshadow滤镜 FlipH、FlipV滤镜 Glow滤镜 Gray滤镜

10、 Invert滤镜 Light滤镜 Mask滤镜 Shawdow滤镜 Wave滤镜 X-ray滤镜,实际操作篇 CSS层叠样式表,四、 CSS的冲突 处理规则： 1、当两个CSS样式发生冲突时，浏览器按照与文本关系近的CSS样式来显示； 1）分别创建.red 和.green两个CSS样式：,实际操作篇 CSS层叠样式表,2）在标签中引用green，在标签中引用red。 显示结果如下图：,实际操作篇 CSS层叠样式表,2、当HTML与CSS样式发生冲突时，浏览器按CSS样式中定义的属性来显示。 1）先在和 间用HTML的 . 定义文字为蓝色；,实际操作篇 CSS层叠样式表,2）再在font之后调

11、用Class=“red”: ，文字显示为红色.。,实际操作篇 CSS层叠样式表,3、CSS的优先级 三种用法可以混用，且不会造成混乱。 三种CSS的执行优先级是： 行内插入式 头部方式 外部链接样式文件,实际操作篇 CSS层叠样式表,小结：本节学习方法,1、学习方式 看别人的代码是一个非常好的学习方式 以淘宝网站为例，分析他的CSS代码，具体研究如下： 2、练习方式 在了解了基础知识后，尝试编写一些简单的代码，遇到问题借助google搜索和“蓝色经典”等经典论坛 3、一本手册 css2.0手册 下载地址：http:/www.w3cn.org/resource/down/2004/css20.chm 4、多写多练,实际操作篇 CSS层叠样式表,作业： 1、制作期末作品,