第一章 CSS样式表基础.docVIP

第一章? 图1-1 没有设置CSS样式的网页 在上图内容的基础上，加上CSS样式，得到如图1-2所示。 图1-2设置CSS样式后的网页 CSS对网页内容的控制也比HTML要精确，行间距和字间距都能控制。利用CSS制作的网页更新方便，一个CSS文件可以同时控制多个网页内容的样式，需要修改时，则只要修改单个CSS文件即可。 CSS的作用： 内容和样式的分离，使得网页设计趋于明了、简洁。 弥补HTML对标记属性控制的不足，如：背景图像重复的控制和标题大小的控制等。在HTML中可控制的标题仅有7级，即h1~~h7，而利用CSS可以任意设置标题大小。 精确控制网页布局，如行间距、字间距、段落缩进和图片定位等属性。 提高网页效率，因为多个网页同时应用一个CSS样式，即减少了代码的下载，又提高了浏览器的浏览速度和网页的更新速度。如果CSS样式不满意，可以随便修改，丝毫不会对内容有影响，而且这个CSS样式，也可以同时用到多个网页内容上。 CSS有特殊功能，如鼠标指针属性控制鼠标的形状和滤镜属性控制图片的特效等。 CSS基本概念 CSS(Cascading Style Sheet)即层叠样式表，简称样式表。要理解层叠样式表的概念先要理解样式的概念。 样式就是对网页中的元素（字体、段落、图像、列表等）属性的整体概括，即描述所有网页对象的显示形式（例如，文字的大小、字体、背景及图像的颜色、大小等都是样式）。 层叠，就是指当HTML文件引用多个CSS文件时，如果CSS文件之间所定义的样式发生了冲突，将依据层次的先后来处理其样式对内容的控制。 2.1 CSS特性 2.1.1 继承性 HTML的文档结构决定了CSS样式的应用。如图1-3所示所示为HTML的一个简单结构图。 图1-3 HTML树形结构 CSS样式对内容控制能力的基础就在于图中元素的继承关系，可以发现每个元素都有一个“父”级元素或是“子”级元素，也可能“子”级和“父”级元素都有，并且“子”级元素又会继承“父”级元素的样式。 实例1.html。 html head title继承/title style type=text/css body { font-family:隶书; font-size:105px } p { font-size:25px } /style head body p查看该文字的字体/p /body /html 在1.html代码中，body{font-family:隶书;font-size:105px}定义了网页主体内容body的字体为隶书，字号为105像素；p{font-size:25px}定义了段落p的字号为25像素，字体为默认字体(宋体)。执行结果浏览器显示的字体为25像素大小的隶书，段落p的字体是继承了body所定义字体，显示为“隶书”，而字号是25像素，说明子级元素在继承父级元素属性时，仅继承的是本身没有定义的属性。 网页效果如图1-4所示。 图1-4 继承代码效果图 2.1.2层叠性 同一个HTML文件引用了多个样式表文件时，浏览器会按照样式定义的先后层次来应用样式，如果不考虑样式的优先级，一般都遵守“最近优先原则”。 实例2.html，分别定义段落字体颜色的代码，该段文字应用的是后定义的样式规则，即字体显示为“蓝色”。 html head title层叠性/title style type=text/css p { color:red; } p { color:blue; } /style head body p查看该文字的字体颜色/p /body /html 网页效果如图1-5所示。 图1-5 使用CSS的网页效果 3 CSS的使用 3.1 CSS的基本语法 CSS语法包括三部分：选择符，样式属性和属性值。 selector {property:value; property:value ……property:value } selector代表选择符，property代表属性，value代表属性值。 选择符包括多种形式，所有的HTML标记都可以作为选择符，如body、p、table等都是选择符。但在利用CSS的语法给它们定义属性和值时，其中属性和值要用冒号隔开。如：body { color:red } ,页面文字是红色。 如果属性的值由多个单词组成，并且单词间有空格，那么必须给值加上引号，如字体的名称经常是几个单词的组合。如：p{font-family:Courie New}，定义段落字体为Courie New。 如果需要对一个选择符指定多个属性时，用分号将属性分开。如：p{text-align:center;color:red;font-family:calibri}，定义段落居中排列，并且段落中的文字为红色，字体为calibri。为了