欢迎来到广州墨动网络官网,墨动网络专业的广州网站设计公司

网页CSS样式设计

发布日期:2006-1-20 来源:墨动网络  标签:广州建站公司    浏览次数:13075

CSS是Cascading Sstyle Sheets(层叠样式表单)的简称。一般称为样式表,它是用于控制网页样式的一种标记语言。Css是1996年由W3C审核通过并推荐使用的。它以HTML语言为基础,提供了丰富的格式化功能,如字体、颜色、背景和整体排版等,网页设计者可以针对各种可视化浏览器设置不同的样式风格,包括显示器、打印机、打字机、投影仪和PDA等。。。。

网页CSS样式设计

1.什么是CSS
 

        CSS是Cascading Sstyle Sheets(层叠样式表单)的简称。一般称为样式表,它是用于控制网页样式的一种标记语言。Css是1996年由W3C审核通过并推荐使用的。它以HTML语言为基础,提供了丰富的格式化功能,如字体、颜色、背景和整体排版等,网页设计者可以针对各种可视化浏览器设置不同的样式风格,包括显示器、打印机、打字机、投影仪和PDA等。

    使用样式表将极大地提高工作效率,样式表定义如何显示HTML元素,通常保存在外部的.css文件中。通过编辑一个简单的CSS文档,使你有能力司时改变站点中所有页面的布局
 

2.如何编辑CSS
 

    CSS文件与HTML文件一样,都是纯文本文件,因此一般的文字处理软件都可以对CSS进行编辑,如记事本、UltraEdit等。
 

    Dreamweaver在代码模式下对HTML, CSS, JavaScript等代码有着非常好的语法着色和语法提示功能。在编写具体CSS代码时,按回车键或空格键都可以触发语法提示。如果对代码模式下编写CSS样式不是很熟练,还可以使用Dreamweaver  CSS面板来定义CSS样式。
 

    3.如何将CSS应用到文件上

    将样式与HTML结合共有四种方法,分别是内联样式、内部样式表、外部样式表和导入样才.
内联样式:在<body>内部的元素中使用<style>定义CSS,如<h3 style="">;
内部样式表:在文档<head>中用<style type="text/css"></style>定义;
外部样式表:使用<link>元素链接到外部的样式表单。<link rel="stylesheet" href="stylel.css">;
使用CSS"@import"标记来导入样式表单。
 

内联样式是最为简单的CSS使用方法,但由于需要为每一个标记设置style属性,后期维护成本很高,而且网页代码庞大,因此不推荐使用。

(2)内部样式表。内部样式表就是将css写在<head>和</head>之间,并且用<style>标记进行声明。所有css的代码部分初集中在同一个区域,方便了后期维护,页面代码本身也大瘦身。但如果一个网站,拥有很多页面,对于不同页面上的<p>标记都希望采用同样的风格时,内部样式的方法就显得略微麻烦,维护成本也不低。因此内部样式表仅对于特殊页面设置单独的样式风格。
(3)外部样式表。外部样式表是使用频率最高,也是最为实用的方法。它将HTML页面本身与Css
样式表分离为两个或者多个文件,实现了页面框架HTML代码与美工CSS代码的完全分离,使得前期制作和后期维护都十分方便,网站后台的技术人员与美工设计者也可以很好地分工合作。


同一个CSS文件可以链接到多个HTML文件中,甚至可以链接到整个网站的所有页面中,使得网站整体风格统一、协调,并且大大减少后期维护的工作量。下面是一个使用外部样式表的实例,如下所示。
 

<html>
<head>

<title>链接外部样式表</title>
<link href="http://www.chfish.net/my.css" rel="styleheet" type="text/css"/>
<body>

</body>
</head>
</html>

浏览器会从文件my.css中读到样式声明,并根据它来格式文档。外部样式可以在任何文本编辑器中进行编辑。文件不能包含任何的html标签。样式表应该以.css扩展名进行保存。
 

外部样式最大的优势在于CSS代码与HTML代码分离,并且同一个CSS文件可以被不同的HTML所链接使用。因此在设计整个网站时,可以将所有的页面都链接到同一个CSS文件,使用相同的样式风格。如果整个网站需要进行样式上的修改,就仅仅需要修改这一个CSS文件即可。这对大规模网站来说是十分关键的,上百个,甚至上千个页面都能共享同一组样式文件。
 

(4)导入样式。导入样式表与外部样式表的功能基本相同,只是语法和运作方式上略有区别。在HTML文件中导入样式表,使用@import语导入,和链接外部样式表的link用法很像,但必须放在<style>...</style>中,下面是一个@import的实例。

<html>
<head>
<title>导入名部样式表</title>
<style type="text/css">
<!--
@import url("my.css");
-->
</style>
</head>
<body></body>
</html>
link和@import的最根本区别就是,link是一个HTML的一个标签,而@import是CSS的一个标签,link除了调用CSS外还可以有其他作用,如声明页面链接属性一,声明目录,RSS等,而@import就只能调用CSS。
 

4.层叠次序
 

上面介绍了CSS控制页面的4种不同方法,各种方法都有其自身的特点。这4种方法如果同时运用到一个HTML文件的同一个标记上时,将会出现优先级的问题。如果在各种方法中设置的属性不一样,例如内联样式设置字体为宋体,内部样式表设置颜色为红色,那么显示结果会二者同时生效,为宋体红色。但当各种方法同时设置一个属性时,例如都设置字体的颜色,情况就会比较复杂,如下例所示。

    首先创建文件l.css,如下内容:




    上面实例中内联样式设置文字下划线,内部样式表设置背景颜色为黑色,链接样式2.css设置文字顶端空50 px的距离,链接样式1.css则设置文字为青色、斜体、大小40 px。这4种样式互不影响,各自都实现了应有的效果。

    但如果这4种样式同时设置字体颜色,而且分别设置不同的颜色,就存在优先级的问题。分别设置内联样式、内部样式表、链接样式、导入样式的颜色为红色、黑色、黄色、蓝色,进行测试发现内联样式的优先级最高,其次是采用<link>标记的链接式,再次是位于<style>和</style>之间的内部样式表,最后才是@import导入式。

................................................................................................................................

广州网站设计公司首选广州墨动网络(http://www.chfish.net),成立于2007年,具备7年建站经验的核心力量,一直致力于网页设计公司,推广优化服务.墨动网络经营宗旨:平民价格 高端作品 优质的售后服务.

上一篇:没有信息了
下一篇:网页布局设计中的相关元素
地址:广州番禺南浦大道民安路五十五街1巷1横巷7号之一 传真号码:020-84785358
版权所有广州墨动网络 Copyright© modong.org 2009-2016.All Rights Reserved . 粤ICP备14033222号-1   

粤公网安备 44011502000039号