CSS的基本语法和使用PPT课件

.,1,第五章CSS,网页设计与制作,.,2,课堂内容,第七章CSS第一节、CSS简介一、什么是CSS二、为什么要使用CSS三、CSS的使用方法四、CSS的基本语句结构五、CSS的类型第二节、CSS属性及滤镜一、CSS的属性二、CSS滤镜三、CSS的声明四、CSS的冲突小结、本节内容学习方法,.,3,一、什么是CSS？CSS是CascadingStyleSheets（层叠样式表单）的简称。通常又称作样式表，是一种设计网页样式的工具。,实际操作篇CSS层叠样式表,第一节CSS简介,.,4,二、为什么要使用CSS？CSS样式可灵活、精确地控制网页外观，控制的内容包括布局、字体、颜色、背景和其它效果。优点：1、内容和形式分离。网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码精简，更小打开更快。2、改版网站更简单容易了。不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。3、搜索引擎更友好，排名更容易靠前。,实际操作篇CSS层叠样式表,.,5,三、常用的CSS使用方法编辑工具：任何文本编辑工具样式表使用方法一般有三种：1）文档头部插入：适用于单个网页应用2）行内插入：适用于页面中一、两个地方才用到CSS3）外部链接样式文件：适用于多个网页都用到CSS,实际操作篇CSS层叠样式表,.,6,1）文档头部插入如：文档标题请注意，这里将style对象的type属性设置为“text/css”，是允许不支持这类型的浏览器忽略样式表单。具体请看操作演示,实际操作篇CSS层叠样式表,.,7,2）行内插入蓝色14号文字这是采用的格式把样式写在html中的任意行内，这样比较方便灵活具体请看操作演示,实际操作篇CSS层叠样式表,.,8,3）外部链接样式文件先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：文档标题这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式，从而减少了大量的冗余代码具体看操作演示,实际操作篇CSS层叠样式表,.,9,利用CSS面板创建外部CSS文件1）选择新建CSS标签，弹出如下对话框，选择新建；2）将CSS样式表命名、保存；3）外部CSS文件创建好后，就可在HTML文档中，使用“LINGK”标签调用外部的CSS文件定义的样式了。,实际操作篇CSS层叠样式表,.,10,四、CSS的基本语句结构Selectorproperty:value参数说明：Selector：选择符property:属性value：属性值属性和属性值之间用冒号(:)隔开。多个定义之间用分号(;)隔开,实际操作篇CSS层叠样式表,.,11,五、CSS的类型CSS的类型有三种方式：类、ID、标签、复合内容下面分别举例说明,实际操作篇CSS层叠样式表,.,12,1、类方式1）它可被任何HTMLtag所应用2）语法：.Classnameproperty:value3）引用：以的方法引用CSS样式比如.blueonecolor:blueBlueH2Blueparagraph,实际操作篇CSS层叠样式表,.,13,2、标签方式1）重新定义HTML的tags,比如P,DIV,TD等.如你用CSS定义了它们,在整页中,这个Tag的性质就按照你的定义来显示了.2）语法：tagproperty:value比如我们想叫TD的颜色是红的TDcolor:red这里还要告诉你CSS的一个特点,它可定义好几个selector在一个rule里.比如H1,H2,TDcolor:red这个定义就能让所有的H1,H2,和TD的颜色都为红色.,实际操作篇CSS层叠样式表,.,14,3、ID方式1）IDselector其实跟独立classselector的功能一样.而区别在于它们的语法和用法不同,以及对于Javascript操纵HTML元素有帮助.2）它的语法：#IDnameproperty:value假如我们有下面的定义：#yelowonecolor:yellow我们可以运用这个定义到任何的有同样ID名字的tag,比如#redonecolor:red样式表你可能觉得既然IDselector和独立classselector功能一样,为什么两者都存在呢.有ID的HTML元素可以被CSS-P和JavaScript来操纵.,.,15,4、复合内容（基于选择的内容）1）若要定义同时影响两个或多个标签、类或ID的复合规则，请选择“复合内容”选项并输入用于复合规则的选择器。2）语法：td,h1,pcolor:#939;3）可定义链接的四种状态：Link表示超链接的文本在链接未被访问时的风格；Visited表示链接被访问过后的风格；Hover表示鼠标指向链接但未点击时的链接风格Active表示鼠标点击链接时链接风格,实际操作篇CSS层叠样式表,.,16,实际操作篇CSS层叠样式表,第二节CSS的属性及滤镜一、CSS属性介绍1、类型属性对文字的各项属性进行设置。,.,17,2、背景属性：,实际操作篇CSS层叠样式表,.,18,3、区块属性区块指的就是网页中的文本、图像、层等网页元素。这个属性主要用于控制区块中的内容的间距、对齐方式、文字缩进等等,实际操作篇CSS层叠样式表,.,19,4、容器属性CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。CSS将网页中所有的块元素都看作是包含在一个盒子（BOX）中,实际操作篇CSS层叠样式表,.,20,边距属性,填充距属性,.,21,边框属性,.,22,图文混排,.,23,5、定位属性主要是在页面的布局和控制上进行定义,实际操作篇CSS层叠样式表,.,24,6、css对扩展的定义扩展分类包含两个部分。一个是分页符，是为了打印的页面设置分页符用的。视觉效果是为网页中的元素添加特殊的效果用的。光标：可以指定在某个元素上要使用的光标形状。滤镜：这是一个很奇妙的参数，共包括16种滤镜，用这些滤镜，甚至可以替代photoshop的一部分功能。,.,25,二、CSS滤镜Alpha滤镜Blur滤镜Chroma滤镜Dropshadow滤镜FlipH、FlipV滤镜Glow滤镜Gray滤镜Invert滤镜Light滤镜Mask滤镜Shawdow滤镜Wave滤镜X-ray滤镜,实际操作篇CSS层叠样式表,.,26,四、CSS的冲突处理规则：1、当两个CSS样式发生冲突时，浏览器按照与文本关系近的CSS样式来显示；1）分别创建.red和.green两个CSS样式：,实际操作篇CSS层叠样式表,.,27,2）在标签中引用green，在标签中引用red。显示结果如下图：,实际操作篇CSS层叠样式表,.,28,2、当HTML与CSS样式发生冲突时，浏览器按CSS样式中定义的属性来显示。1）先在和间用HTML的.定义文字为蓝色；,实际操作篇CSS层叠样式表,.,29,2）再在font之后调用Class=“red”:，文字显示为红色.。,实际操作篇CSS层叠样式表,.,30,3、CSS的优先级三种用法可以混用，且不会造成混乱。三种CSS的执行优先级是：行内插入式头部方式外部链接样式文件,实际操作篇CSS层叠样式表,.,31,小结：本节学习方法,1、学习方式看别人的代码是一个非常好的学习方式以淘宝网站为例，分析他的CSS代码，具体研究