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”，是允许不支持这类型的浏览器忽略样式表单。具体请看操作演示,实际操作篇 CSS层叠样式表,2）行内插入蓝色14号文字 这是采用的格式把样式写在html中的任意行内，这样比较方便灵活 具体请看操作演示,实际操作篇 CSS层叠样式表,3）外部链接样式文件 先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：文档标题 这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式，从而减少了大量的冗余代码 具体看操作演示,实际操作篇 CSS层叠样式表,利用CSS面板创建外部CSS文件1）选择新建CSS标签，弹出如下对话框，选择新建；2）将CSS样式表命名、保存；3）外部CSS文件创建好后，就可在HTML文档中，使用“LINGK”标签调用外部的CSS文件定义的样式了。,实际操作篇 CSS层叠样式表,四、CSS的基本语句结构 Selector property:value 参数说明：Selector：选择符property:属性 value：属性值 属性和属性值之间用冒号(:)隔开。多个定义之间用分号(;)隔开,实际操作篇 CSS层叠样式表,五、CSS的类型CSS的类型有三种方式：类、ID、标签、复合内容 下面分别举例说明,实际操作篇 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 的颜色是红的 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 我们可以运用这个定义到任何的有同样 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表示超链接的文本在链接未被访问时的风格；Visited表示链接被访问过后的风格；Hover表示鼠标指向链接但未点击时的链接风格 Active表示鼠标点击链接时链接风格,实际操作篇 CSS层叠样式表,实际操作篇 CSS层叠样式表,第二节 CSS的属性及滤镜一、CSS属性介绍1、类型属性 对文字的各项属性进行设置。,2、背景属性：,实际操作篇 CSS层叠样式表,3、区块属性 区块指的就是网页中的文本、图像、层等网页元素。这个属性主要用于控制区块中的内容的间距、对齐方式、文字缩进等等,实际操作篇 CSS层叠样式表,4、容器属性 CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。CSS将网页中所有的块元素都看作是包含在一个盒子（BOX）中,实际操作篇 CSS层叠样式表,边距属性,填充距属性,边框属性,图文混排,5、定位属性 主要是在页面的布局和控制上进行定义,实际操作篇 CSS层叠样式表,6、css对扩展的定义 扩展分类包含两个部分。一个是分页符，是为了打印的页面设置分页符用的。视觉效果是为网页中的元素添加特殊的效果用的。光标：可以指定在某个元素上要使用的光标形状。滤镜：这是一个很奇妙的参数，共包括16种滤镜，用这些滤镜，甚至可以替代photoshop的一部分功能。,二、CSS滤镜 Alpha滤镜 Blur滤镜 Chroma滤镜 Dropshadow滤镜 FlipH、FlipV滤镜 Glow滤镜 Gray滤镜 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之后调用Class=“red”:，文字显示为红色.。,实际操作篇 CSS层叠样式表,3、CSS的优先级 三种用法可以混用，且不会造成混乱。三种CSS的执行优先级是：行内插入式 头部方式 外部链接样式文件,实际操作篇 CSS层叠样式表,小结：本节学习方法,1、学习方式 看别人的代码是一个非常好的学习方式 以淘宝网站为例，分析他的CSS代码，具体研究如下：2、练习方式 在了解了基础知识后，尝试编写一些简单的代码，遇到问题借助google搜索和“蓝色经典”等经典论坛 3、一本手册 css2.0手册 下载地址：4、多写多练,实际操作篇 CSS层叠样式表,作业：1、制作期末作品,
