CSShttp:/www.phpchina.comPHPChina 工作室http:/www.phpchina.comZend PHPChina Training知识回顾pHTML中的列表分类p表格相关标签、属性p框架的作用p表单及表单控件http:/www.phpchina.comZend PHPChina Training内容摘要p掌握样式表的语法规则p样式表的分类：q行内样式表q内嵌样式表q外部样式表p掌握常用的样式p了解层和标签http:/www.phpchina.comZend PHPChina Training闪烁文本移动文本消隐文本http:/www.phpchina.comZend PHPChina Training设置属性这个段落应用了样式这个段落按默认样式显示什么是样式？指定显示样式样式规则http:/www.phpchina.comZend PHPChina Training常用的样式属性 属 性CSS名称说说 明颜色 color 文本属性font-size字体大小 font-family字体 text-align文本对齐 边框属性 (用于表 单元素) border-style边框样式 border-width边框宽度 border-color边框颜色 定位属性 (position)top顶部边距（上边距） left左边距 width宽度 height高度 z-indexz 轴索引号，用于层http:/www.phpchina.comZend PHPChina Training根据样式代码的位置，分为三类：q行内样式q内嵌样式q外部样式样式的分类 在最后一个声明后面加上一个分号 (;) 是一个好习惯http:/www.phpchina.comZend PHPChina Training行内样式您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样 式”。行内样式使用元素标签的 STYLE 属性定义。/*关键代码-*/剩余时间：成交结束新旧程度：全新 所 在 地：北京 宝贝数量：5 件 浏 览 量：220 次另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以http:/www.phpchina.comZend PHPChina Training应用样式Pfont-size:20px;color:blue;text-align:center我是段落 1 我是段落 2 我是段落 3 我们的样式绝对统一内嵌样式-1样式表样式规则所有的段落都采用 P 样 式，保证样式统一行内样式表局限于某个标签，如果希望本网页内的所以 同类标签都采用统一样式，这时应采用内嵌样式。选择器用分号隔开http:/www.phpchina.comZend PHPChina Training内嵌样式-2 选择器根据选择器的不同，内嵌样式又分为：pHTML 选择器pCLASS 类选择器pID 选择器http:/www.phpchina.comZend PHPChina Training/*-关键代码-*/P /*设置样式：字体和背景色*/ font-family: System; font-size: 18px; color: #3333CC; H2 background-color: #CCFF33; text-align: center; 品种特征方面：1、蛋鱼：蛋鱼.。2、龙睛：龙睛.。3、高头：高头.。内嵌样式-3 HTML选择器HTML选择器应用H2样式应用P样式http:/www.phpchina.comZend PHPChina Training内嵌样式-4 class类选择器.myinput border: 1px solid; border-color:#D4BFFF; color:#2A00FF 用户名密 码CLASS类选择器应用类选择器： class”类名“类选择器的定义格式为： .类名 样式规则; http:/www.phpchina.comZend PHPChina Training#fire color:red;font-size: 24px;我是二级标题，火是这样的 我是段落，火是这样的内嵌样式-5 ID选择器ID选择器ID选择器的定义格式为： ID名 样式规则; 应用ID选择器：ID”ID名“http:/www.phpchina.comZend PHPChina TrainingA /*设置超链接不带下划线*/color: blue;text-decoration: none; /*文本修饰：无*/ A:hover/*鼠标在超链接上方停留时，带下划线 */color: red;text-decoration:underline; /*文本修饰：下划线*/ HEAD俺是超链接，移过来我就显示下划线内嵌样式-6 特殊的选择器HTML选择器特殊的伪类：A代表超链接，hover代表鼠标悬停 http:/www.phpchina.comZend PHPChina Training外部样式p 根据样式文件与网页的关联方式又分为：q链接（LINK ）外部样式表q导入（import）外部样式表样式文件 P . 网页2网页3网页1http:/www.phpchina.comZend PHPChina Training链接外部样式表使用LINK（链接）标签 ，语法：第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页关联样式文件： newstyle.css P . Onel.htmanother.htm 第三步：浏览查看各网页演示：链接样式表示例http:/www.phpchina.comZend PHPChina Training导入外部样式表使用import导入 ，语法： import 样式表文件.css;操作步骤同链接样式表 http:/www.phpchina.comZend PHPChina Training外部样式文件样式的混合使用行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常 需要混合使用：p有关整个网站统一风格的样式代码，放置在独立的样式文件*.cssp某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式p某张网页内，部分内容”与众不同“，采用行内样式对于某个HTML标签： 1）如果有多种样式，如果规定 的样式没有冲突，则叠加； 2）如果有冲突，则最先考虑行 内样式表显示，如果没有，再 考虑内嵌样式显示，如果还没 有，最后采用外面样式表显示 ，否则就按HTML的默认样式显 示；内嵌样式 行内样式 某个HTML标签http:/www.phpchina.comZend PHPChina Training层标签关键代码Z-index=1，我是第一层，我是容器，包含图片段落Z-index=2，我是第二层，包含图片和段落 使用 Z index指定是哪一层是块级容器标签，可以包 含图片、标题、段落、文字等 图片段落top lefthttp:/www.phpchina.comZend PHPChina Training标签所有韩款童装10元/件起拍喽是行级容器标签，不可 以包含图片、标题、段落等，只 能包含文字内容http:/www.phpchina.comZend PHPChina TrainingCSS 的优点p改变浏览器的默认显示风格 p页面内容和显示样式分离 p可以重用样式表p方便网站维护http:/www.phpchina.comZend PHPChina Training课堂重点 p样式分为行内样式、内嵌样式、外部样式p样式表包括选择器和样式规则，选择器又分为 HTML选择器、类选择器、ID选择器以及特殊 的伪类p和都是容器标签，是块 级标签，可包含段落、标题等，是行 级标签，不能包含段落、标题等，只能包含部 分文字http:/www.phpchina.comZend PHPChina Training谢 谢http:/www.phpchina.com