欢迎来到天天文库
浏览记录
ID:37453302
大小:2.95 MB
页数:120页
时间:2019-05-24
《第4章 CSS 2.1》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、第4章CSSHTML标签原本被设计为用于定义文档内容。通过使用
、
2、元素。样式通常保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。4.1CSS基础4.1.1什么是CSS?CSS指层叠样式表(CascadingStyleSheets),样式定义如何显示HTML元素,样式通常存储在样式表中,把样式添加到HTML4.0中,是为了解决内容与表现分离的问题。外部样式表可以极大提高工作效率,外部样式表通常存储在CSS文件中,多个样式定义可层叠为一。使用CSS布局的优点:1.表现和内容相分离将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信
3、息。这样的页面对搜索引擎更加友好。2.提高页面浏览速度对于同一个页面视觉效果,采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。3.易于维护和改版只要简单的修改几个CSS文件就可以重新设计整个网站的页面。4.使用CSS布局更符合现在的W3C标准。先感性体验一下CSS。我们看看这个没有添加CSS的HTML文件,是一个普普通通的网页。http://www.csszengarden.com/zengarden-sample.html然而通过给这个文件添加的CSS规则,我们可以
4、得到十分美观的网页。http://www.csszengarden.com/这还不是全部,不改动HTML,只是通过添加不同的CSS规则,我们就可以得到各种不同样式的网页。http://www.csszengarden.com/?cssfile=/208/208.css&page=04.1.2CSS语法CSS语法由三部分构成:选择器、属性和值:selector{property:value}选择器(selector)通常是希望定义样式的HTML元素或标签,属性(property)是希望改变的属性,并且每个属性都有一个值。属性和值被冒号分开,并由花括
5、号包围,这样就组成了一个完整的样式声明(declaration)。例如:body{color:blue}上面这行代码的作用是将body元素内的文字颜色定义为蓝色。在上述例子中,body是选择器,而包括在花括号内的的部分是声明。声明依次由两部分构成:属性和值,color为属性,blue为值。l多重声明如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么的好处是,当你从
6、现有的规则中增减声明时,会尽可能的减少出错的可能性。就像这样:p{text-align:center;color:red;}你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:p{text-align:center;color:black;font-family:arial;}l空格和大小写大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:body{color:#000;background:#fff;margin:0;padding:0;font-family:Georgia
7、,Palatino,serif;}是否包含空格不会影响CSS在浏览器的工作效果,同样,与XHTML不同,CSS对大小写不敏感。不过存在一个例外:如果涉及到与HTML文档一起工作的话,class和id名称对大小写是敏感的。1.1.3CSS选择器Selectors 选择符 Selectors选择符Version版本Compatibility兼容性SyntaxSamples语法Description简介类型选择符(TypeSelectors)CSS1IE4+,NS4+E1以文档语言对象类型作为选择符通配选择符(UniversalSelector)
8、CSS2NONE*选定文档目录树(DOM)中的所有类型的单一对象包含选择符CSS1IE4+,NS4+E1E2选择所有被E1包含的E2(D
此文档下载收益归作者所有