[PPT模板]css.pptVIP

第二部分 CSS 预习检查 本章任务 美化“宝贝分类”页面 制作并美化“注册”页面 本章目标 会创建统一外观的字体文本 会创建无下划线的超连接样式 会创建个性化的表格 会创建个性化的表单 为什么需要CSS样式表 HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服 为什么需要CSS样式表 样式表能实现内容与样式的分离，方便团队开发 CSS简介 全称Cascading Styles Sheets 中文：层叠样式表或级联样式表，是样式化HTML的一种方法。 它的作用是：XHTML的标签（Tag）主要是定义网页的内容，而CSS决定这些网页内容如何显示。 样式表的基本语法 样式表的基本结构 CSS基本语法 样式表的基本语法 样式表的基本语法 选择器的分组 被分组的选择器可以分享相同的声明。用逗号将需要分组的选择器分开。 例：所有的标题元素都是绿色的。 h1,h2,h2,h3,h5,h6 { color: green; } 样式表的基本语法 如果希望其他的标签也能采用P标签的样式，怎么办？ 样式表的基本语法 选择器 根据选择器的不同，分为： HTML 选择器 CLASS 类选择器 ID 选择器 区别Class与ID选择器 Class选择器可以为标有特定 class 的 HTML 元素指定特定的样式 class 选择器以 “.” 来定义，同样的class名称可以在页面中多次使用，作用于多个对象，可以达到统一样式设置的目的 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 # 来定义，用法与类选择器类似，区别是id名只能在每个 HTML 文档中出现一次，通常在划分排版块的时候使用。 CSS 伪类（Pseudo-classes） 伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。 它最常用的技巧就是对连接在不同状态下定义不同的样式效果。 CSS 伪类（Pseudo-classes） selector:pseudo-class {property: value} 选择器:伪类 {属性: 值} 常用CSS 伪类 锚伪类 a:link {color: #FF0000} /*未被访问状态 */ a:visited {color: #00FF00} /*已被访问状态 */ a:hover {color: #FF00FF} /*鼠标悬停状态 */ a:active {color: #0000FF} /*活动状态 */ 派生选择器 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。 CSS li strong { font-style: italic; font-weight: normal; } CSS注释 注释以“/*”为开头，以“*/”为结尾。 样式表的三类应用方式 内嵌样式表 内部样式表使用格式如下： 行内（嵌入）样式表 外部样式表文件 内部样式表 行内（嵌入）样式表 行内（嵌入）样式表 行内（嵌入）样式表 在相关的标签内使用样式属性（style） 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。 不推荐使用 行内（嵌入）样式表 外部样式表文件 外部样式表文件 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（@import）外部样式表 链接（LINK ）外部样式表 使用LINK（链接）标签 : HEAD LINK href=newsyle.css rel=stylesheet type=text/css /HEAD 链接（LINK ）外部样式表 导入（@import）外部样式表 使用@import导入 ，语法： HEAD STYLE TYPE=text/css @ import newstyle.css; /STYLE /HEAD 样式的混合使用 行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常 需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 某张网页内，部分内容”与众不同“，采用行内样式 常用的样式属性 文本属性 常用的样式属性 字体修饰属性 字体名称属性：font-family 示例如下： body{ font-family: Verdana, Geneva, Arial, sans-serif; } 这些字体名称可以在操作系统中找到相应名称（如windows XP，按如下顺序查找：控制面