样式表基础知识及应用.ppt

CSS基础知识及应用,信永国际,CSS基础知识及应用,CSS入门CSS基本语法CSS高级语法CSS选择器如何创建CSSDIV+CSS页面布局（案例分析）,CSS入门,CSS英语意思是：CascadingStyleSheets，即层叠样式表样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中外部样式表可以层叠为一,CSS基本语法,CSS语法由三部分构成:选择器,属性和值selectorproperty:value例如：bodycolor:blue值的不同写法和单位pcolor:#ff0000;也可简写：#f00pcolor:red;记得写引号(如果值为若干单词，则要给值加引号)pfont-family:sansserif;多重声明：ptext-align:center;color:black;font-family:arial;,CSS高级语法,选择器的分组h1,h2,h2,h3,h5,h6color:green;继承：通过CSS继承，子元素将继承最高级元素所拥有的属性摆脱继承bodyfont-family:Verdana,sans-serif;pfont-family:Times,TimesNewRoman,serif;,CSS选择器,派生选择器id选择器类选择器,CSS派生选择器,通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。lifont-style:italic;listrongfont-style:normal;查看例子,CSS派生选择器-示例,派生选择器简单示例strongcolor:red;h2color:red;h2strongcolor:blue;Thestronglyemphasizedwordinthisparagraphiswhatcolor.Thissubheadiswhatcolor.Thestronglyemphasizedwordinthissubheadiswhatcolor.查看例子,CSSid选择器,id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以”#”定义。#redcolor:red;#greencolor:green;这个段落是红色。这个段落是绿色。注：id属性尽可能在每个HTML文档中只出现一次查看例子,id选择器和派生选择器,在现代布局中，id选择器常常用于建立派生选择器。ptext-align:left;#tablepfont-style:italic;text-align:right;margin-top:5px;查看例子,CSS类选择器,在CSS中，类选择器以一个点号显示：.centertext-align:center例如：Thisheadingwillbecenter-alignedThisparagraphwillalsobecenter-aligned.注：不要使用数字起始类名！它无法在Mozilla或Firefox中起作用。类选择器和id选择器一样被用做派生选择器,如何创建css,如何插入样式表当读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有三种：.外部样式表.内部样式表.内联样式,外部样式表,外部样式表引用格式：外部样式表可以在任何文本编辑器进行编辑。文件不能包含任何的html标签。样式表应该以.css扩展名进行保存。hrcolor:#ff0000;pmargin-left:20px;bodybackground-image:url(imgs/40.gif);注：不要在属性值和单位值之间有空格；,内部样式表,当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用标签在头部分定义内部样式表.hrcolor:#ff0000;pmargin-left:20px;bodybackground-image:url(imgs/40.gif);,内联样式,由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。例如：Thisisaparagraph查看例子,多重样式,如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。外部样式表拥有针对h3选择器的三个属性：h3color:red;text-align:left;font-size:8pt;内部样式表拥有针对h3选择器的两个属性：h3text-align:right;font-size:20pt;假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3得到的样式是：color:red;text-align:right;font-size:20pt;,层叠次序,当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？浏览器缺省设置外部样式表内部样式表(位于标签内部)内联样式(在HTML元素内部)注：其中数字4拥有最高的优先权查看例子,DIV+CSS页面布局（盒子模型）,名词解释：Content:内容Padding:内容与边框之间的部份,Border:边框Margin:每个盒子间的距离,DIV+CSS页面布局（设计思路）,标准化页面设计思路：1、理解实现结构与表现分离（关键点）2、采用div标签定义页面结构3、运用CSS排版、渲染色彩等4、填充补全文字、图像等内容,DIV+CSS页面布局（案例分析）,第一步：构思1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息,构思图,DIV+CSS页面布局（案例分析）,第二步：布局分析DIV结构如下：body#Container/*页面层容器*/#Header/*页面头部*/#PageBody/*页面主体*/#Sidebar/*侧边栏*/#MainBody/*主体内容*/#Footer/*页面底部*/,布局分析图,DIV+CSS页面布局（案例分析）,第三步：HTML基本结构DIV+CSS页面布局color=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/color,DIV+CSS页面布局（案例分析）,第四步：CSS文件/*基本信息*/bodyfont:12pxTahoma;margin:0px;text-align:center;background:#FFF;a:link,a:visitedfont-size:12px;text-decoration:none;a:hover/*页面层容器*/#containerwidth:800px;height:600px;margin:10pxauto/*页面头部*/#headerbackground:url(./imgs/logo.gif)no-repeat#menupadding:20px20px00#menuulfloat:right;list-style:none;margin:0px;#menuullifloat:left;display:block;line-height:30px;margin:010px#menuullia:link,#menuullia:visitedfont-weight:bold;color:#666#menuullia:hover.menuDivwidth:1px;height:28px;background:#999#bannerbackground:url(./imgs/banner.jpg)030pxno-repeat;width:730px;margin:auto;height:240px;border-bottom:5pxsolid#EFEFEF;clear:both/*页面主体*/#pagebodywidth:800px;margin:0auto;height:400px;background:#0033FF/*页面底部*/#footerwidth:800px;margin:0auto;height:50px;background:#00FFFF,谢谢,