css快速上手教程.pptVIP

Internet和网页设计基础 样 式 表 课题目标 描述样式表 定义样式表术语 说明使用样式表的好处 应用直接样式 样式X表 样式表是用来管理和控制页面风格的组件 当该页面要显示在屏幕上或打印机上时，样式表是一个HTML文档的外观 可以应用样式表精确地定义页面上的元素的位置和外观，从而产生出特殊的效果 样式表（续） 可以在一个位置 —— 样式表处定义您需要的样式信息 可以将该样式表同网站上所有的页面连接，创建一个统一的，一致的页面风格 可以定义多个样式表，并且将它们链接到同样的页面上，使得创建页面时有更大的灵活性 示例1 HTML H1 STYLE=font-style:italic; color:limegreen; font-size=12; This is the default display of an H1 element /H1 H1This is the default display of an H1 element/H1 /HTML 示例1（续） 下图为以上代码的显示效果 样式表术语 一个样式表定义了可应用到页面或页面元素上的样式 样式规则——级联样式表由一组规则组成，规则定义了文档的样式 样式表是一个样式规则列表 规则——样式表可能包含一个或多个规则。规则的第一部分叫选择器，每个选择器都有相关的属性和值 样式规则可以有选择性地应用到网页的某些部分上 规则（续） 一个样式表可以包含一个或多个规则 规则的第一部分叫选择器 每一个选择器都有相关的属性和值 示例： RuleSelector{Declarationsproperty: value; property: value; ... } 选择器 选择器是一个字符串，它识别对应规则应用的元素 有两种基本的选择器 简单选择器 HTML 选择器 类选择器 ID选择器 上下文选择器 简单选择器 简单选择器比较容易使用 简单选择器描述一个元素，并不考虑在它文档结构中的位置 例如，H1标题标识符是一种典型的简单选择器： H1 { color: blue } HTML选择器 这些选择器使用HTML元素的名称，唯一的不同是没有括号，如HTMLP标记变为P，如例3： HTML HEAD STYLE TYPE=″text/css″ P{font-style:italic;font-weight:bold;color:limegreen} /STYLE /HEAD BODY PThese selectors use the names of HTML elements The only difference is that you remove the brackets /P /BODY /HTML HTML选择器（续） 下图为例3的显示效果 类选择器 这些选择器采用HTML元素的类型属性 您可以对不同的元素分配一个统一的类型名称 可以分配一个类型标识符给一个种类的几个元素，这样就可以不按照规范来显示 类型选择器之前要有一个点号“.”，叫标记符，后面跟着您选择的类型名称。 类选择器（续） 例4： HTML HEAD STYLE TYPE=text/css .water{color:blue} .danger{color:red;font-weight:bold;} /STYLE /HEAD BODY P CLASS=watertest water P CLASS=dangertest danger Pno style BR EM CLASS=dangeritalic/EM /BODY /HTML 类选择器（续） 下图为例4的显示效果 上下文选择器 上下文选择器和元素的上下文有关 改变子元素的样式就需要用上下文选择器 上下文选择器是建立在继承的基础上的，子元素继承了父元素的样式 上下文选择器（续） 例6： HTML HEAD TITLEContextual selectors/TITLE STYLE TYPE=text/css BODY{color:hotpink;background:dimgray;font-family:Arial;} P{color:darkgreen} /STYLE /HEAD BODY P B慈母手中线，游子身上衣。/BBR I临行密密缝，意恐迟迟归。/IBR /P 谁言寸草心，报得三春归。 /BODY /HTML 上下文选择器（续） 下图为例6的显示效果 改变规则 当希望