Web前端开发实例教程——HTML5 CSS3 JavaScript 第5章 CSS基础.pptVIP

第5章 CSS基础 Web前端开发实例教程 ——HTML5+CSS3+JavaScript 5.1 CSS简介 5.1.1 什么是CSS CSS（Cascading Style Sheets，层叠样式表单）简称为样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS能将样式的定义与HTML文件内容分离，只要建立定义样式的CSS文件，并且让所有的HTML文件都调用这个CSS文件所定义的样式即可。 CSS的编辑方法同HTML一样，可以用任何文本编辑器或网页编辑软件，还可用专门的CSS编辑软件。 5.1 CSS简介 5.1.2 CSS的发展历史 1996年12月W3C推出了CSS规范的第一个版本CSS1.0。1998年W3C发布了CSS2.0/2.1版本，这也是至今流行最广并且主流浏览器都采用的标准。 早在2001年5月，W3C就着手开发CSS第3版规范——CSS3规范，它被分为若干个相互独立的模块。CSS3的产生大大简化了编程模型，它不是仅对已有功能的扩展和延伸，而更多的是对Web UI设计理念的和方法的革新。CSS3配合HTML5标准，将引起一场Web应用的变革，甚至是整个Internet产业的变革。 5.1 CSS简介 5.1.3 CSS3的特点 1．CSS3在选择符上面的支持 CSS3在选择符上的丰富支持让用户可以灵活的控制样式。 2．CSS3在样式上的支持 ? 开发者最期待CSS3的特性是“圆角”，这个功能可以给网页设计工程师省去很多时间和精力去切图拼凑一个圆角。 ? CSS3可以轻松地实现阴影、盒阴影、文本阴影、渐变等特效。 ? 使用CSS3还可以给边框添加背景。 3．CSS3对于动画的支持 CSS3支持的动画类型有：transform变换动画、transition过渡动画和animation动画。 5.1 CSS简介 5.1.4 CSS编写规则 1．目录结构命名规则 存放CSS样式文件的目录一般命名为style或css。 2．样式文件的命名规则 为了网站性能上的考虑会整合不同的CSS文件到一个CSS文件，这个文件一般命名为style.css或css.css。 3．选择符的命名规则 所有选择符必须由小写英文字母或“_”下划线组成，必须以字母开头，不能为纯数字。 5.1 CSS简介 5.1.5 CSS的工作环境 1．CSS的显示环境 浏览器是CSS的显示环境。相同的CSS样式代码在不同的浏览器中可能显示的效果有所不同。在这种情况下，设计人员只有不断地测试，了解各主流浏览器的特性才能让页面在各种浏览器中正确地显示。 2．CSS的编辑环境 能够编辑CSS的软件很多，例如Dreamweaver、Edit Plus、EmEditor和topStyle等，这些软件有些还具有“可视化”功能。 5.2 HTML与CSS 5.2.1 传统HTML的缺点 传统HTML的缺陷远不止上例中所反映的这一个方面，相比CSS为基础的页面设计方法，其所体现的不足主要有以下几点。 ? 维护困难。 ? 网页过“胖”。 ? 定位困难。 5.2 HTML与CSS 5.2.2 CSS的优势 使用CSS美化页面具有如下优势： ? 表现（样式）和内容（结构）分离。 ? 易于维护和改版。 ? 缩减页面代码，提高页面浏览速度。 ? 结构清晰，容易被搜索引擎搜索到。 ? 更好的控制页面布局。 ? 提高易用性，使用CSS可以结构化HTML。 5.2 HTML与CSS 5.2.3 CSS的局限性 CSS样式表的主要不足是，其局限于主要对标记文件中的显示内容起作用。 由于CSS样式表比HTML出现得要晚，这就意味着一些较老的浏览器不能识别使用CSS编写的样式，并且CSS在简单文本浏览器中的用途也很有限，例如，为手机或移动设备编写的简单浏览器等。另外，浏览器支持的不一致性也导致不同的浏览器显示出不同的CSS版面编排。 5.3 CSS语法基础 5.3.1 CSS样式规则 1．样式规则 样式表的每个规则都有两个主要部分：选择符（selector）和声明（declaration）。选择符决定哪些因素要受到影响，声明由一个或多个属性值对组成。其语法为： selector{属性:属性值[[;属性:属性值]…]} 2．选择符的类型 选择符决定了格式化将应用于哪些元素。CSS选择符包括基本选择符、复合选择符、通配符选择符和特殊选择符。 5.3 CSS语法基础 5.3.2 基本选择符 1．标签选择符 标签选择符就是网页元素本身，定义时直接使用元素名称。其格式为： E{ /*CSS代码*/} 2．class类选择符 class类选择符的名称可以由用户自定义。其格式为： style