第2章CSS选择器与相关特性36224.ppt

CSS网页设计标准教程 第1部分 CSS核心原理 第 2 章 CSS选择器与相关特性 通过上一章的学习，了解了在网页设计中引入CSS的意义。 引入CSS的核心目的就是实现网页结构内容和表现形式的分离，将原来由HTML语言所承担的一些与结构无关的功能剥离出来，改由CSS来完成。 本章介绍CSS是如何工作的。 重点介绍CSS的“选择器”这一核心概念，以及相关的两个特性——“继承”和“层叠”。 2.1 构造CSS规则 在具体介绍CSS之前，先思考一个生活中的问题。 张飞 { 身高:185cm; 体重:105kg; 性别:男; 性格:暴躁; 民族:汉族; } 这个表实际上是由3个要素组成的，即姓名、属性和属性值。 CSS的作用就是设置网页的各个组成部分的表现形式。 因此，如果把上面的表格换成描述网页上一个标题的属性表，可以设想应该大致如下： 2级标题{ 字体:宋体; 大小:15像素; 颜色:红色; 装饰:下划线 } 再进一步，如果把上面的表格用英语写出来： h2{ font-family: 宋体; font-size:15px; color: red; text-decoration: underline; } CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。 因此，概括来说，CSS就是由3个基本部分——“对象”、“属性”和“值”组成的。 2.2 基本CSS选择器 在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）。 2.2.1 标记选择器 style h1{ color: red; font-size: 25px; } /style 2.2.2 类别选择器 html head titleclass选择器/title style type=text/css .red{ color:red; /* 红色 */ font-size:18px; /* 文字大小 */ } .green{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */ } /style /head body p class=redclass选择器1/p p class=greenclass选择器2/p h3 class=greenh3同样适用/h3 /body /html 2.2.3 ID选择器 html head titleID选择器/title style type=text/css #bold{ font-weight:bold; /* 粗体 */ } #green{ font-size:30px;/* 字体大小 */ color:#009900; /* 颜色 */ } /style /head body p id=blodID选择器1/p p id=greenID选择器2/p p id=greenID选择器3/p p id=bold greenID选择器4/p /body /html 2.3 在HTML中使用CSS的方法 2.3.1 行内式 html head title页面标题/title /head body p style=color:#FF0000; font-size:20px; text- decoration:underline;正文内容1/p p style=color:#000000; font-style:italic;正文内容2/p p style=color:#FF00FF; font-size:25px; font-weight:bold;正文