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文件中，即在内部样