第4章CSS基础分解.ppt

第4章 CSS基础 4.1.1 CSS的基本概念 CSS（Cascading Style Sheets，层叠样式表单）简称为样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式就是格式，在网页中，像文字的大小、颜色以及图片位置等，都是设置显示内容的样式。层叠是指当在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。 建立一个定义样式的CSS文件，并让所有HTML都调用这个CSS文件所定义的样式即可，如图4-1所示。 4.1 CSS概述 4.1.2 CSS的发展历史 1996年12月W3C推出了CSS规范的第一个版本CSS1.0。这一规范立即引起了各方的积极响应，随即MicroSoft公司和Netscape公司纷纷表示自己的浏览器能够支持CSS1.0，从此CSS技术的发展几乎一马平川。1998年W3C发布了CSS2.0/2.1版本。 早在2001年5月，W3C就着手开发CSS第三版规范，CSS3规范被分为若干个相互独立的模块。一方面分成若干较小的模块较利于规范及时更新和发布，及时调整模块的内容；另外一方面，由于受支持设备和浏览器厂商的限制，设备或者厂商可以有选择的支持一部分模块，支持CSS3的一个子集，这样将有利于CSS3的推广。 4.1 CSS概述 4.1.3 CSS3的特点 Web开发者可以借助CSS3设计圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等来提高Web设计的质量，开发者将不必再依赖图片或者Javascript去完成这些任务，极大地提高了网页开发效率。 1．CSS3在选择器上面的支持 2．CSS3在样式上的支持 3．CSS3对于动画的支持 4．浏览器对CSS3的兼容性 类似于HTML5，没有一种浏览器是完全兼容CSS3的。因此，本章中的实例可能采用不同的浏览器进行验证，如无特别声明，仍采用Opera浏览器浏览CSS3网页。 4.1 CSS概述 4.1.4 CSS的代码规范 1．目录结构命名规范 存放CSS样式文件的目录一般命名为style或css。 2．CSS样式文件的命名规范 在项目初期，会把不同的类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便；在项目后期，为了网站性能上的考虑会整合不同的CSS文件到一个CSS文件，这个文件一般命名为style.css或css.css。 3．CSS选择符的命名规范 所有CSS选择符必须由小写英文字母或“_”下划线组成，必须以字母开头，不能为纯数字。设计者要用有意义的单词或缩写组合来命名选择符，做到“见其名知其意” 。 4.1 CSS概述 4.2.1 定义内部样式表 可以在HTML文档的html和body标签之间插入一个style…/style标签对，在其中定义样式。 内部样式表的格式为： style type=text/css !-- 选择符1{属性:属性值; 属性:属性值 …} /* 注释内容 */ 选择符2{属性:属性值; 属性:属性值 …} … 选择符n{属性:属性值; 属性:属性值 …} -- /style 4.2 CSS与HTML文档的结合方法 4.2.1 定义内部样式表 如果有多个选择符的格式一样的话，可以采用组合选择符的 内部样式表，格式如下： style type=text/css !-- 选择符1,选择符2…{属性:属性值; 属性:属性值 …-- /style 演练：4-1 4.2 CSS与HTML文档的结合方法 4.2.2 定义行内样式表 行内样式表也称内嵌样式表，是指在HTML标签中插入style属性，再定义要显示的样式表，而style属性的内容就是CSS的属性和值。用这种方法，可以很简单地对某个标签单独定义样式表。这种样式表只对所定义的标签起作用，并不对整个页面起作用。有时候这种方式却非常有效。其格式为： 标签 style=属性:属性值; 属性:属性值 … 演练：4-2 4.2 CSS与HTML文档的结合方法 4.2.3 链入外部样式表 链入外部样式表就是当浏览器读取到HTML文档的样式表链接标签时，将向所链接的外部样式表文件索取样式。先将样式表保存为一个样式表文件（.css），然后在网页中用link标签链接这个样式表文件。link标签必须放到页面的head…/head标签对内。其格式为： head … link rel=stylesheet href=外部样式表文件名.css type=text/css … /head 4.2 CSS与HTML文档的结合