HTML5,CSS3,javasript,网页制作,网页设计第4章网页表现语言——CSS.ppt

HTML+CSS+JavaScript网页制作 机械工业出版社同名教材 配套电子教案 * * 4.1 初识CSS 4.2 案例：网络花店简介页面——CSS的定义与使用 4.3 CSS语法基础 4.4 CSS的属性单位 4.5 案例：网络花店相关商品局部页面——文档结构 4.6 实训：制作网络花店新闻更新局部页面 第4章 网页表现语言——CSS 4.1.1 什么是CSS CSS（Cascading Style Sheets，层叠样式表单）简称为样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式就是格式，在网页中，像文字的大小、颜色以及图片位置等，都是设置显示内容的样式。层叠是指当在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。 建立一个定义样式的CSS文件，并让所有HTML都调用这个CSS文件所定义的样式即可，如图4-1所示。 4.1 初识CSS 4.1.2 CSS的优点 CSS是一组格式设置规则，用于控制页面的外观。使用CSS美化页面具有如下优点： ? 表现和内容（结构）分离。 ? 易于维护和改版。 ? 缩减页面代码，提高页面浏览速度。 ? 结构清晰，容易被搜索引擎搜索到。 ? 更好的控制页面布局。 ? 提高易用性，使用CSS可以结构化HTML。 4.1 初识CSS 4.1.3 CSS设计与编写原则 1．目录结构命名规范 存放CSS样式文件的目录一般命名为style或css。 2．样式文件的命名规范 在项目初期，会把不同的类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便；在项目后期，为了网站性能上的考虑会整合不同的CSS文件到一个CSS文件，这个文件一般命名为style.css或css.css。 3．选择符的命名规范 所有CSS选择符必须由小写英文字母或“_”下划线组成，必须以字母开头，不能为纯数字。设计者要用有意义的单词或缩写组合来命名选择符，做到“见其名知其意” 。 4.1 初识CSS 4.1.4 CSS的显示环境 1．CSS的环境 CSS的显示环境需要浏览器的支持，否则即使编写再漂亮的样式代码，如果浏览器不支持CSS，那么它也只是一段字符串而已。 目前，浏览器的种类多种多样，虽然IE、Opera、Chrome、Firefox等主流浏览器都支持CSS，但它们之间仍存在着符合标准的差异。也就是说，相同的CSS样式代码在不同的浏览器中可能显示的效果有所不同。在这种情况下，设计人员只有不断地测试，了解各主流浏览器的特性才能让页面在各种浏览器中正确地显示。 4.1 初识CSS 【案例展示】使用链入外部样式表的方法制作网络花店简介页面，本例文件4-2.html在浏览器中的显示效果，如图4-1所示。 4.2 案例：网络花店简介页面——CSS的定义与使用 4.2.1 内联样式 内联样式就是在元素标签内使用style属性，style属性值可以包含任何CSS样式声明。用这种方法，可以很简单地对某个标签单独定义样式表。这种样式表只对所定义的标签起作用，并不对整个页面起作用。内联样式的格式为： 标签 style=属性:属性值; 属性:属性值 … 【演示4-2-1】使用内联样式将样式表的功能加入到网页。 4.2 案例：网络花店简介页面——CSS的定义与使用 4.2.2 内部样式表 内部样式表的格式为： style type=text/css !-- 选择符1{属性:属性值; 属性:属性值 …} /* 注释内容 */ 选择符2{属性:属性值; 属性:属性值 …} … 选择符n{属性:属性值; 属性:属性值 …} -- /style 【演示4-2-2】使用内部样式表将样式表的功能加入到网页。 4.2 案例：网络花店简介页面——CSS的定义与使用 4.2.3 链入外部样式表 多个页面需要应用相同样式时，应该使用外部样式表。外部样式表把声明的样式放在样式文件中，当页面需要使用样式时，通过link标签连接外部样式表文件。使用外部样式表，可以通过改变一个文件就能改变整个站点的外观。其格式为： head … link rel=stylesheet href=外部样式表文件名.css type=text/css … /head 【演示4-2-3】链入外部样式表将样式表的功能加入到网页。 4.2 案例：网络花店简介页面——CSS的定义与使用 4.2.4 导入外部样式表 导入外部样式表就是当浏览器读取HTML文件时，复制一份样式表到这个HTML文件中，即在内部样