CSS网页样式设置

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

从上例中可以看到，文件1.css将所有的CSS代码从HTML文件中分离出来，然后在“<head>”和“</head>”标签之间加上 “<link href="1.css" type="text/css" rel="stylesheet">”语句，将CSS文件链接到页面中，对其中的标签进行样式控制。其显示效果如图11-6所示。
图11-4
行内样式
11.2.2 内嵌式
内嵌式样式表就是将CSS写在 <head>与</head>之间，并且用<style>和 </style>标签进行声明，如例11-5所示。
【例11-5】内嵌样式 <html> <head> <title>页面标题</title> <style type="text/css"> <!-p{
图11-5
内嵌式
11.2.3 链接式
链接式样式表是使用频率最高，也是最为实用的方法。它将HTML页面本身与 CSS样式风格分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好地分工合作。
图11-7
导入样式
11.3 复合CSS选择器
选择器（Selector）是CSS中的一个很重要的概念，所有HTML语言中的标签都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。
在本书的前面章节中，介绍了3种基本的选择器——标签选择器、类别选择器和 ID选择器。这里在介绍两种更为深入的选择器使用方法。
在本书第2章中，简单介绍了CSS的用法，但是CSS在网页设计中的作用远远不止于此。本章从CSS的概念出发，介绍 CSS语言的特点，以及如何在网页中引入 CSS，然后重点介绍CSS的基本语法。
11.1 CSS的概念
CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标签性语言。CSS是1996年由W3C审核通过并推荐使用的。简单地说，CSS的引入就是为了使HTML能够更好地适应页面的美工设计。
<h2>第二行标题2</h2> <p>紫红色、斜体、下划线、28px的效果 2</p> <h3>第三行标题3</h3> <p>紫红色、斜体、下划线、28px的效果 3</p> </body> </html>
例11-7在例11-6的基础上进行了修改，加入了“<h3>”的标题，前两行的效果与例 11-6中显示完全相同，如图11-7所示。可以看到新引入的“<h3>”标签由于没有设置样式，因此保持着默认的风格。
在HTML文件中导入样式表，常用的有如下几种“@import”语法，可以任意选择一种放在“<style>”与“</style>”标签之间：
（1）@import url(sheet1.css); （2）@import url("sheet1.css"); （3）@import url('sheet1.css'); （4）@import sheet1.css; （5）@import "sheet1.css"; （6）@import 'sheet1.css';
其实传统HTML的缺陷远不止例11-1中所反映的这一个方面，相比CSS为基础的页面设计方法，其所体现出的劣势主要有以下几点。
图11-1
给标题添加效果
（1）维护困难。（2）标签不足。（3）网页过胖。（4）定位困难。
11.1.2 CSS的引入
对于上例，倘若引入CSS对其中的 <h2>标签进行控制，那么情况将完全不同，如例11-2所示。
图11-6
链接式
11.2.4 导入式
导入式样式表与上节提到的链接式样式表功能上基本相同，只是语法和运作方式上略有区别。采用import方式导入的样式表，在HTML文件初始化时，会被导入到 HTML文件内，作为其一部分，类似内嵌式的效果。而链接式样式表则是在HTML的标签需要格式时才以链接的方式引入。
而且对于同一个CSS文件，可以链接到多个HTML文件中，乃至整个网站的所有页面中，使得网站整体风格统一、协调，并且后期维护的工作量也大大减少。链接式CSS样式表的使用如例11-6所示。
【例11-6】链接式样式首先创建HTML文件，如下所示： <html> <head> <title>标题在这里</title> <link href="1.css" type="text/css" rel="stylesheet"> </head> <body>
其显示效果如图11-5所示，从上例中可以看到，所有CSS的代码部分被集中在了同一个区域，方便了后期的维护，页面本身也大大瘦身。但如果是一个网站，拥有很多的页面，对于不同页面上的“<p>” 标签都希望采用同样的风格时，内嵌式的方法就显得略微麻烦，维护成本也不低。因此内嵌式仅适用于对特殊的页面设置单独的样式风格。
例如例11-7所示的代码。【例11-7】导入式样式 <html> <head> <title>标题在这里</title> <style type="text/css">  </style> </head> <body> <h2>第一行标题1</h2> <p>紫红色、斜体、下划线、28px的效果1</p>
【例11-3】浏览器的差异 <html> <head> <title>页面标题</title> <style> <!-ul{
list-style-type:none; display:inline; } --> </style> </head> <body>
<ul>
<li>浏览器区别1</li> <li>浏览器区别2</li> </ul> </body> </html>
它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等。CSS 的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。
11.1.1 传统HTML的缺点
11.3.1 选择器集体声明
在声明各种CSS选择器时，如果某些选择器的样式风格是完全相同的，或者部分相同，这时便可以利用集体声明的方法，将风格相同的CSS选择器同时声明，如例 11-8所示。
图11-8
集体声明
11.3.2 选择器的嵌套
在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标签进行声明，例如当“<p>”与“</p>”之间包含 “<b></b>”标签时，就可以使用嵌套选择器进行相应的控制。具体如例11-9所示。
这是一段很简单的HTML代码，并用 CSS对<ul>标签进行了样式上的控制。而这段代码在IE7中的效果与Firefox中的显示效果就存在差别，如图11-3所示。
图11-3 IE与Firefox的效果区别
11.2 使用CSS控制页面
在对CSS有了大致的了解后，便希望使用CSS对页面进行全方位的控制。本节主要介绍如何使用CSS控制页面，以及其控制页面的各种方法，包括行内样式、内嵌式、链接式、导入式等。
<h2>第一行标题1</h2> <p>紫红色、斜体、下划线、28px的效果 1</p> <h2>第二行标题2</h2> <p>紫红色、斜体、下划线、28px的效果 2</p> </body> </html>
然后创建文件1.css，如下所示：
h2{ color:#0000FF; } p{ color:#FF33CC; text-decoration:underline; font-style:italic; font-size:28px; }
图11-9
嵌套选择器
11.4 CSS设置文字效果
文字是网页设计中永远不可缺少的元素，各种各样的文字效果遍布在整个 Internet中。本节从基础的文字设置出发，讲解CSS设置各种文字效果的方法，然后再进一步讲解段落排版的相关内容。
11.4.1 CSS文字样式
使用过Word编辑文档的用户一定对会注意到，Word可以对文字的字体、大小、颜色等各种属性进行设置。CSS同样可以对HTML页面中的文字进行全方位的设置。本节主要介绍CSS设置文字各种属性的基本方法。
图11-10 CSS设置文字效果
wk.baidu.com
11.4.2 CSS文字段落
段落是由一个个文字组合而成的，同样是网页中最重要的组成部分之一，因此前面提到的文字属性，对于段落同样适用。但CSS针对段落也提供了很多样式属性，本节将通过实例进行详细介绍。
color:#FF00FF; text-decoration:underline; font-weight:bold; font-size:25px; } --> </style>
</head> <body> <p>紫色、粗体、下划线、25px的效果 1</p> <p>紫色、粗体、下划线、25px的效果 2</p> <p>紫色、粗体、下划线、25px的效果 3</p> </body> </html>
11.2.1 行内样式
行内样式是所有样式方法中最为直接的一种，它直接对HTML的标签使用style 属性，然后将CSS代码直接写在其中，如例11-4所示。
【例11-4】行内样式 <html> <head> <title>标题在这里</title> </head> <body>
<p style="color:#0000FF; font-size:18px; fontweight:bold;">CSS内容1</p> <p style="color:#000000; textdecoration:underline; font-style:italic;">正文 CSS2</p> <p style="color:#FF33CC; font-size:28px; font-weight:bold;">CSS正文内容3</p> </body> </html>
图11-2 CSS的引入
网上的浏览器各式各样，绝大多数浏览器对CSS都有很好的支持，因此设计者往往不用担心其设计的CSS文件不被用户所支持。但目前的问题在于，各个浏览器之间对CSS很多细节的处理上存在差异，设计者在一种浏览器上设计的CSS效果，在其他浏览器上的结果很可能大相径庭。
就目前主流的两大浏览器IE与Firefox 而言，在某些细节的处理上就不尽相同。 IE本身在IE6与发布不久的IE7之间，对相同页面的浏览效果都存在一些差异。例如例11-3所示的代码。
第11章 CSS网页样式设置
11.1
CSS的概念
11.2
使用CSS控制页面
11.3
复合CSS选择器
11.4
CSS设置文字效果
11.5
CSS设置图片效果
11.6
CSS设置页面背景
11.7
使用CSS设置超链接效果
11.8
使用CSS设置项目列表
11.9
实践与练习：CSS制作实用菜单
11.8
小结
通过前章节的学习，读者对HTML语言已经比较熟悉，它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。
在CSS还没有被引入页面设计前，传统的HTML要实现页面美工上的设计是十分麻烦的。
其在IE中的显示效果如图11-1所示，四个标题都变成了蓝色黑体字。这时如果希望将这四个标题改成红色，在这种传统的 HTML中就需要对每个标题的“<font>”标签都进行修改，倘若是整个网站，这样的工作量是没法让设计者接受的。
在CSS中文字都是通过“font”的相关属性进行设置的，例如通过“font-family” 属性来控制文字的字体，通过“font-size” 属性来控制文字的大小，通过“color”属性设置文字的颜色，通过“font-weight”属性来设置文字的粗细，通过设置“fontstyle”属性来控制文字是否为斜体，通过设置文字的text-decoration属性来实现文字的下划线、顶划线、删除线等