第02章_CSS样式表演示文稿.PPTVIP

* 派生选择器：在 CSS1 中，被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。 li strong { font-style: italic; font-weight: normal; } * id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 # 来定义。 下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色 #red {color:red;} #green {color:green;} 下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。 p id=red这个段落是红色。/p p id=green这个段落是绿色。/p 注意：id 属性只能在每个 HTML 文档中出现一次 id 选择器和派生选择器 #sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; } 单独的选择器 #sidebar { border: 1px dotted #000; padding: 10px; } * 在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 .center 选择器中的规则。 h1 class=center This heading will be center-aligned /h1 p class=center This paragraph will also be center-aligned. /p 注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。 和 id 一样，class 也可被用作派生选择器： .fancy td { color: #f60; background: #666; } * 思路：外部样式：1-2-8--1-表单.html使用外部样式改变颜色和字号-〉1-2-7--1-表格.html使用外部样式改变颜色 -〉内部样式（单独设定1-2-7--1-表格.html的颜色） -〉多重样式（1-2-7--1-表格-多重样式.html） 例子：1-2-8--1-表单-外部样式.html（基于1-2-8--1-表单.html） 外部样式： link 元素是一个空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任何次数。 rel：表示：显示器样式表 内联样式： 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，不讲 * 例子：2-2-1--1-背景.html：在1-2-7--1-表格-内部样式.html基础上添加背景色-〉调整文字与背景色的间距padding -〉背景图片（背景图片-〉标题图片-〉表格图片） -〉背景平铺（background-repeat） -〉背景定位（background-position） -〉关键字（背景定位，配合no-repeat效果明显） -〉百分数设置背景定位（同关键字，中下：50% 100%；左下：0% 100%） -〉长度值（偏移从左上角开始，一个向右，一个向下；左上：0px 0px） -〉背景关联background-attachment:fixed 学生实验：书上示例给段落或链接添加背景图片 padding：如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距： 为特定的部分应用背景图片，需在html文件中用到类选择器class 注意：1。p.flower 不能放在body里 2。关键字的效果，需配合no-repeat更显著 3。百分数 * * 思路：标题、段落颜色（rgb,英文，16进制） -〉标题、段落字符间距（像素，厘米，正负数）（强调word-sapcing和letter-spacing区别） -〉段落行间距（百分比） -〉段落行间距（像素） -〉标题居中 -〉修饰文本（划线：在文字上部、中部、下部） -〉缩进文本 -字母控制（大写、小写、首字母大写（注意：貌似中文多时不起作用）） -〉进制折行（white-apace:nowrap） 例子：2-2-1--1-文本.html word-sapcing：用于设定英文单词间距 letter-spacing：用于设定英文字母（不是单词）及中文间距。 * 思路：字体（p1,p2对比，黑体，宋体） -〉字号 -〉字体风格（是否斜体） -〉字体粗细 例子：2-2-1--2-字体.html 注意：当不熟悉字体时：推