首页 > 网站建设 >

网站制作之什么是CSS语言?之“如何使用css语言”(二)

发布时间:2018-08-30 作者:深圳网站制作

 深圳网站制作就上篇文章:《网站制作之什么是CSS语言?(一)》的css语言介绍,今天继续分享css语言的基本用法做一个分享。
一、静态网页制作之CSS基本用法
CSS样式代码必须保存在.css类型的文本文件中,或者放在网页内<style>标签中,或者插在网页标签的style属性值中,否则是无效的,浏览器会视其如普通的字符串,而不对其进行解析。详细说明如下:
1.直接放在标签的style属性中。
【示例1】在下面代码中,直接使用style属性为标签定义样式。
<spanstyle="color:red;">红色字体</span>
<divstyle="border:solid1pxblue;width:200px;height:200px;"></div>这样当浏览器解析这些标签时,检测到该标签包含有style属性,于是就调用CSS引擎来解析这些样式码,并把效果呈现出来。这种通过style属性直接把样式码放在标签内的做法被称之为行内样式,因为它与传统网页布局中在标签增加属性的设计方法没有什么两样,这种方法实际上还没有真正把HTML结构和CSS表现分开进行设计,因此不建议使用。除非为页面中个别元素设置某个特定样式效果而单独进行定义。
2.把样式代码放在<style>标签内。
【示例2】在下面代码中,把样式代码放置在<style>标签内。
<styletype="text/css">
body{/*页面基本属性*/
font-size:12px;
color:#CCCCCC;
}
/*段落文本基础属性*/
p{background-color:#FF00FF;}
</style>
在设置<style>时应该指定type属性,告诉浏览器该标签包含的代码是CSS源代码。这样当浏览器解析<style>标签所包含的代码时,会自动调用CSS引擎进行解析。这种CSS应用方式也被称为网页内部样式。如果仅为一个页面定义CSS样式时,使用这种方法比较高效,且管理方便。但是在一个网站中,或多个页面之间引用时,使用这种方法会产生代码冗余,不建议使用,而且一页页管理样式也是不经济的。内部样式一般放在网页的头部区域,目的是让CSS源代码早于页面源代码下载并被解析,这样避免当网页信息下载之后,由于没有CSS样式渲染而使页面信息无法正常显示。
3.保存在.css类型的文件中。把样式代码保存在单独的.css类型文件中,然后使用<link>标签或者@import关键字导入。这样当浏览器遇到这些代码时,会自动根据它们提供的URL把外部样式表文件导入到页面中并进行解析。关于这个话题将在下面详细分析。这种应用样式的方式也被称为外部样式。一般网站都采用外部样式来设计网站的表现层问题,以便统筹设计CSS样式,并能够快速开发和高效管理。

二、静态网页制作之CSS样式表
一个或多个CSS样式可以组成一个样式表。样式表包括内部样式表和外部样式表,它们没有本质区别,都是由一个或者多个样式组成。
1.内部样式表内部样式表包含在<style>标签内,一个<style>标签就表示一个内部样式表。而通过标签的style属性定义的样式属性就不是样式表。如果一个网页文档中包含多个<style>标签,就表示该文档包含了多个内部样式表。
2.外部样式表如果CSS样式被放置在网页文档外部的文件中,则称为外部样式表,一个CSS样式表文档就表示一个外部样式表。实际上,外部样式表也就是一个文本文件,扩展名为.css。当把CSS样式代码复制到一个文本文件中后,另存为.css文件,它就是一个外部样式表。如图所示就是禅意花园的外部样式表(http://www.csszengarden.com/)。
可以在外部样式表文件顶部定义CSS源代码的字符编码。
【示例】下面代码定义样式表文件的字符编码为中文简体。@charset"gb2312";如果不设置CSS文件的字符编码,可以保留默认设置,则浏览器会根据HTML文件的字符编码来解析CSS代码。深圳网站制作博纳网络编辑整理,全文未完,敬请持续关注本站网站。
 
文章标题:网站制作之什么是CSS语言?之“如何使用css语言”(二)
本文地址:https://www.198bona.com/news/1288.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯