网页设计与制作教程 教学课件 ppt 作者 刘瑞新第7章.ppt

7.6 定义CSS的属性 7.6.9 定义CSS扩展属性 机械工业出版社 网页设计与制作 刘瑞新 吴丰 主编 机械工业出版社 第7章 CSS基础 7.1 认识CSS 7.1.1 什么是CSS CSS（Cascading Style Sheet，层叠样式表）是由W3C（万维网联盟）的CSS工作组创建和维护的。它是一种不需要编译，可直接由浏览器执行的标记性语言，用于控制Web页面的外观。通过使用CSS样式控制页面各元素的属性显示，可将页面的内容与表现形式进行分离。 7.1 认识CSS 7.1.2 CSS的工作环境 CSS的显示环境——浏览器 CSS的编辑环境 能够编辑CSS的软件很多，例如Dreamweaver、Edit Plus、EmEditor和topStyle等。 7.1 认识CSS 7.1.3 体验CSS 要亲身体验CSS功能的强大之处，读者可以访问一个名为“CSS禅意花园”的网站（/）。 7.1 认识CSS 7.1.4 CSS的优势 避免使用不必要的HTML元素 缩短更新和维护的时间 减少服务器和带宽的费用，以节约资金 7.1 认识CSS 7.1.5 CSS规则 选择符（selector）：所谓选择符就是规则中用于选择文档中要应用样式的那些元素。该元素可以是（X）HTML的某个标签（如本例中h2标签被选中），也可以是页面中指定的class（类）或者id属性限定的标记。 声明：声明包含在一对大括号“{}”内，用于告诉浏览器如何渲染页面中与选择符相匹配的对象。声明内部由属性及其属性值组成，并用冒号隔开，以分号结束，声明的形式可以是一个或者多个属性的组合。 属性（property）：属性是由官方CSS规范约定的，而不是自定义的，除个别浏览器私有属性以外。 属性值（value）：属性值放置在属性名和冒号后面，具体内容跟随属性的类别而呈现不同形式，一般包括数值、单位以及关键字。 7.1 认识CSS 7.1.6 为代码添加注释 1．结构性注释 /* header -------------------------------------------------------------------------------*/ 2．提示性注释 .news_list li span { float:left; /* 设置新闻发布时间浮动，与新闻标题并列显示 */ width:80px; color:#999999; /* 定义新闻发布时间为灰色，弱化发布的时间在视觉上的感觉 */ } 7.2 如何在网页中插入CSS 7.2.1 内联样式 ul li style=font-family:微软雅黑; font-size:14px; color:#F00;内联样式/li /ul 内联样式指的是将CSS样式与(X)HTML标签混合使用，这种方法可以很简单的对某个元素单独定义样式? 7.2 如何在网页中插入CSS 7.2.2 内部样式 内部样式位于页面标签的head与/head之间，且使用style标签进行包裹。 7.2 如何在网页中插入CSS 7.2.3 外部样式 外部样式是目前在实际工作中使用最为广泛的一种形式。它将CSS样式代码保存为一个样式文件，然后在页面中使用link标签链接到这个样式文件，以便实现多个页面调用同一个外部样式文件的目的。 7.2 如何在网页中插入CSS 7.2.4 导入样式 导入样式类似于外部样式，都是利用外部CSS样式文件来改变页面的外部表现的，但与外部样式不同的是，需要在style和/style标签中间利用“@import”关键字导入外部CSS文件。 style type=text/css @import url(导入样式文件.css) /style 7.3 常用的CSS选择符 7.3.1 通配符选择符 在编写代码时，用“*”表示通配符选择符，其作用是定义页面所有元素的样式。 *{ margin:0px; padding:0px; } 7.3 常用的CSS选择符 7.3.2 类选择符 类选择符通过直接引用元素中类属性的值而产生效果，这个应用前面总是有一个句点“.”，这个句点用来标识一个类选择符，类名可以随意命名，但最好根据元素的用途来定义一个有意义的名称。 7.3 常用的CSS选择符 7.3.3 ID选择符 ID选择符与类选择符极其相似，类选择符是以“.”开头，而ID选择符是以“#”开头。对于一个XHTML文档来说，其中的每一个标签都可以使用id=的形式进行一个名称指派，但需要注