Web网页设计和制作小论文.docx
- 文档编号:27734060
- 上传时间:2023-07-04
- 格式:DOCX
- 页数:11
- 大小:95.11KB
Web网页设计和制作小论文.docx
《Web网页设计和制作小论文.docx》由会员分享,可在线阅读,更多相关《Web网页设计和制作小论文.docx(11页珍藏版)》请在冰豆网上搜索。
Web网页设计和制作小论文
Web网页设计和制作小论文
Web网页设计和制作
刘伟锋
(天津市大学软件学院,天津300330)
(TianjinInstituteofSoftwareEngineering,Tianjin300330)
摘要:
CSS全称为“层叠样式表(CascadingStyleSheets)”,是一种为HTML网页内容设定统一规则的样式表。
本文主要介绍了CSS的基本概念,CSS基本语法、样式表类型及其应用方法、CSS选择器、标签元素的分类、CSS布局模型等知识。
关键词:
CSS;概念;语法;样式表;选择器;标签类型;布局模型
Abstract:
CSSfullnameis”CascadingStyleSheets”,itisakindofHTMLpagecontentsetunifiedrulesofthestylesheets.ThispapermainlyintroducesthebasicconceptsofCSS,CSSbasicsyntax,stylesheettypeanditsapplicationmethod,CSSselector,tagelementclassification,CSSlayoutmodeandotherknowledge.
KeywordsCSS;Concepts;Syntax;StyleSheetType;Selector;TagType;Layoutmode
1.引言
网站变得越来越普及,对其开发技术和工具的要求也越来越高。
目前,成熟的网页的新标准是W3C,模式是HTML+CSS+JavaScript。
即HTML是网页的结构,CSS是网页的样式,JavaScript是行为。
就是盖房子一样,先要把结构建出来,然后用CSS来装饰,JavaScript就像电影特效会让整个设计变得更加生动。
网站作为一种信息传播的载体,除了有HTML所搭建的合理的架构以外,更多的需要CSS的点缀,以达到更广泛的传播信息的作用。
2.初始CSS
2.1概念
CSS(CascadingStyleSheets,层叠样式表)是对网页元素外观进行精确控制的一组设置规则,于1996年正式推出。
CSS是控制网页布局样式的基础,是能够使网页表现与内容分离的一种样式设计语言。
在网页设计中,CSS主要用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等;可对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.2优势
CSS作为一款目前最优秀的表现设计语言,其优势主要有:
可以支持众多浏览器,实现了在众多平台及浏览器下对样式的表现最为接近;真实实现了表现与内容分离;拥有样式设计的强大控制力;具有优越的继承性,最大限度的达到了代码重用,从而降低了维护成本。
2.3角色
所有HTML页面都是由“内容、结构、表现和行为”这几方面组成。
即根据内容设计结构和表现,最后再对其进行“行为”的控制操作。
如下图表1所示网页设计的整个系统架构:
Ø内容层:
是网页实际要传达的真正信息,包含数据、文档或者图片等。
Ø结构层:
是由文档的主体部分,再加上结构化标记组成。
Ø表现层:
是你赋予内容一种样式,就是文档看起来的样子。
Ø行为:
是对内容的交互及操作效果。
其中,CSS作为一种表现而单独存在,它实现了表现与结构的分离。
对于网页的修改,可以只对CSS的修改而带来网页样式的变化。
3.CSS基本语法
CSS样式由选择符和声明组成,而声明又由属性和值组成,如下图表2所示:
Ø图表2
◆选择符:
又称选择器,指明网页中要应用样式规则的元素,如本例中的网页中的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
◆声明:
在英文大括号“{}”中的就是声明,属性和值之间用英文冒号“:
”分隔。
当有多条声明时,中间可用英文分号“;”分隔,如下所示:
p{font-size:
12px;color:
red;}
4.CSS三种基本样式
CSS样式的代码插入有三种形式:
内联式、嵌入式、外部式
4.1内联式
把css代码直接写在现有的HTML标签中,如下代码:
red">红色文本
css样式代码要写在style=””双引号中,如果有多条CSS样式代码设置可以写在一起,中间用分号隔开。
如下代码:
red;font-size: 12px">这里文字是红色。
4.2嵌入式
将css样式代码写在
如下面代码实现把标签中的文字设置为红色:
span{
color:
red;
}
4.3外部式(外联式)
把CSS代码写在一个单独的外部文件中,此css样式文件以“.css”为扩展名,在
内)(不是在