《样式表基础知识及应用.ppt》由会员分享，可在线阅读，更多相关《样式表基础知识及应用.ppt（24页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、SINYEECSS基础知识及应用基础知识及应用信永国际信永国际CSS基础基础知识及应用 CSS入门入门 CSS基本语法基本语法 CSS高级语法高级语法 CSS选择器选择器 如何创建如何创建CSS DIV+CSS页面布局（案例分析）页面布局（案例分析）CSS入门vCSS英语意思是：Cascading Style Sheets，即层叠样式表v样式定义如何显示HTML元素v样式通常存储在样式表中v把样式添加到HTML中，是为了解决内容与表现分离的问题v外部样式表可以极大提高工作效率v外部样式表通常存储在CSS文件中v外部样式表可以层叠为一CSS基本语法vCSS 语法由三部分构成:选择器,属性和值 s
2、elector property:value 例如：body color:bluev值的不同写法和单位 p color:#ff0000;也可简写：#f00p color:red;v记得写引号(如果值为若干单词，则要给值加引号)p font-family:sans serif;v多重声明：p text-align:center;color:black;font-family:arial;CSS高级语法v选择器的分组h1,h2,h2,h3,h5,h6 color:green;v继承：通过 CSS 继承，子元素将继承最高级元素所拥有的属性 v摆脱继承body font-family:Verdana,
3、sans-serif;p font-family:Times,Times New Roman,serif;CSS选择器选择器v派生选择器vid选择器v类选择器CSS派生选择器 v通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。li font-style:italic;li strong font-style:normal;查看例子CSS派生选择器-示例vvv派生选择器简单示例vvstrong color:red;vh2 color:red;vh2 strong color:blue;vvvvvThe strongly emphasized word in this parag
4、raph is what color.vvThis subhead is what color.vvThe strongly emphasized word in this subhead is what color.vvvv查看例子查看例子CSS id 选择器 vid 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以”#”定义。v#red color:red;#green color:green;这个段落是红色。这个段落是绿色。注：id 属性尽可能在每个 HTML 文档中只出现一次 查看例子 id 选择器和派生选择器 v在现代布局中，id 选择器常常用于建立派生选
5、择器。p text-align:left;#table p font-style:italic;text-align:right;margin-top:5px;查看例子CSS 类选择器v在 CSS 中，类选择器以一个点号显示：.center text-align:center例如：This heading will be center-aligned This paragraph will also be center-aligned.注：注：不要使用数字起始类名！它无法在 Mozilla 或 Firefox 中起作用。v类选择器和id选择器一样被用做派生选择器 如何创建 cssv如何插入样式
6、表当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：.外部样式表.内部样式表.内联样式 外部样式表v外部样式表引用格式：v外部样式表可以在任何文本编辑器进行编辑。文件不能包含任何的 html 标签。样式表应该以.css 扩展名进行保存。hr color:#ff0000;p margin-left:20px;body background-image:url(imgs/40.gif);注：注：不要在属性值和单位值之间有空格；内部样式表v当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 标签在头部分定义内部样式表.hr color:#ff0000;p
7、margin-left:20px;body background-image:url(imgs/40.gif);内联样式v由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。v要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。例如：This is a paragraph 查看例子多重样式v如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。v外部样式表拥有针对 h3 选择器的三个属性：h3 color:red;text-align:
8、left;font-size:8pt;v内部样式表拥有针对 h3 选择器的两个属性：h3 text-align:right;font-size:20pt;v假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：color:red;text-align:right;font-size:20pt;层叠次序v当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？浏览器缺省设置外部样式表内部样式表(位于标签内部)内联样式(在HTML元素内部)注：注：其中数字其中数字 4 拥有最高的优先权拥有最高的优先权查看例子DIV+CSS页面布局（盒子模型）v名词解释：Content:内
9、容Padding:内容与边框之间 的部份Border:边框Margin:每个盒子间的距离DIV+CSS页面布局（设计思路）v标准化页面设计思路：1、理解实现结构与表现分离（关键点）2、采用div标签定义页面结构3、运用CSS排版、渲染色彩等4、填充补全文字、图像等内容DIV+CSS页面布局（案例分析）v第一步：构思第一步：构思 1、顶部部分，其中又包括了、顶部部分，其中又包括了LOGO、MENU和一幅和一幅Banner图片；图片；2、内容部分又可分为侧边栏、主体内容；、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息、底部，包括一些版权信息 构思构思图DIV+CSS页面布局（案例分
10、析）v第二步：布局分析第二步：布局分析 DIV结构如下：结构如下：body#Container/*页面层容器页面层容器*/#Header/*页面头部页面头部*/#PageBody/*页面主体页面主体*/#Sidebar/*侧边栏侧边栏*/#MainBody/*主体内容主体内容*/#Footer/*页面底部页面底部*/布局分析布局分析图DIV+CSS页面布局（案例分析）v第三步：第三步：HTML基本结构基本结构 DIV+CSS页面布局color=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=
11、#aaaaaa/colorcolor=#aaaaaa/color DIV+CSS页面布局（案例分析）v第四步：第四步：CSS文件文件/*基本信息*/body font:12px Tahoma;margin:0px;text-align:center;background:#FFF;a:link,a:visited font-size:12px;text-decoration:none;a:hover/*页面层容器*/#container width:800px;height:600px;margin:10px auto/*页面头部*/#header background:url(./imgs/
12、logo.gif)no-repeat#menu padding:20px 20px 0 0#menu ul float:right;list-style:none;margin:0px;#menu ul li float:left;display:block;line-height:30px;margin:0 10px#menu ul li a:link,#menu ul li a:visited font-weight:bold;color:#666#menu ul li a:hover.menuDiv width:1px;height:28px;background:#999#banner background:url(./imgs/banner.jpg)0 30px no-repeat;width:730px;margin:auto;height:240px;border-bottom:5px solid#EFEFEF;clear:both/*页面主体*/#pagebody width:800px;margin:0 auto;height:400px;background:#0033FF/*页面底部*/#footer width:800px;margin:0 auto;height:50px;background:#00FFFFSINYEE