网站建设中的CSS基础

  • 2019-07-16 15:28:18
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

使用HTML丰富的标签可以轻松构建不同的网页结构,但是在设计网页时,控制网页显示效果方面,它的能力就比较弱,如果要在网站建设时设计美观大方、赏心悦目的网页效果,就要用到CSS。CSS弥补了HTML不足,为用户提供了强大的页面样式美化和布局功能。

1、认识CSS

CSS是在HTML语言基础上发展而来的,是为了克服HTML在网页布局方面存在的不足。在HTML语言中,各种显示效果的实现都是通过标签来实现,然后通过标签的各种属性来定义标签的显示样式。这造成了网页代码的臃肿、杂乱,网页后期维护和控制变得非常困难。

【示例】要在一段文字中把一部分文字变成蓝色,HTML标识代码如下:

<p><font color=blue>显示信息</font></p>

而使用CSS之后,则上例代码可以写成:

<p style="color: blue ">显示信息</p>

这样简单比较就可以看出CSS简化了HTML中各种繁琐的标签,使得各个标签的属性在网页设计时更具有一般性和通用性,并且样式表扩展了原先的标签功能,能够实现更多的效果,样式表甚至超越了网页本身显示功能,而把样式扩展到多种媒体上,显示了难以抗拒的魅力。这仅仅是一个小小的例子,如果把整个网页,甚至全部网站都用一张或几张样式表来专门设计网页的属性和显示样式,读者就会发现使用CSS的优越性,特别是对后期更改维护提供了方便。

样式表的另一个巨大贡献就是把对象引入了HTML,使得可以使用JavaScript脚本控制网页标签的显示效果,这在早期的HTML中实现起来会非常困难。CSS比较简单、灵活、易学。除了可以控制文本属性外,如字体、字号、颜色等,还可以设计复杂的网页样式,如对象位置、图片效果、网页布局等。通过CSS样式表,可以统一控制HTML中各标签的显示属性。对页面布局、字体、颜色、背景和其他图文效果实现更加精确的控制。用户只修改一个CSS样式表文件就可以实现改变一批网页的外观和格式,保证在所有浏览器和平台之间的兼容性,拥有更少的编码、更少的页数和更快的下载速度。

2、CSS基本语法

样式是CSS最小语法单元,每个样式包含两部分内容:选择器和声明(或称为规则)。

 •选择器(Selector):选择器告诉浏览器该样式将作用于页面中哪些对象,这些对象可以是某个标签、所有网页对象、指定Class或ID值等。浏览器在解析这个样式时,根据选择器来渲染对象的显示效果。   

•声明(Declaration):声明可以增加一个或者无数个,这些声明命令浏览器如何去渲染选择器指定的对象。声明必须包括两部分:属性和属性值,并用分号来标识一个声明的结束,在一个样式中最后一个声明可以省略分号。所有声明被放置在一对大括号内,然后整体紧邻选择器的后面。   

•属性(Property):属性是CSS提供的设置好的样式选项。属性名由一个单词或多个单词组成,多个单词之间通过连字符相连。这样能够很直观地表示属性所要设置样式的效果。   

•属性值(Value):属性值是用来定义显示样式的参数,包括数值和单位,或者关键字。

【示例】定义网页字体大小为12像素,字体颜色为深灰色,则可以设置如下样式:

body{font-size: 12px; color: #CCCCCC;}

多个样式可以并列在一起,不需要考虑如何进行分隔。例如,定义段落文本的背景色为紫色,则可以在上面样式基础上定义如下样式:                     body{font-size: 12px; color: #CCCCCC;}

p{background-color: #FF00FF;}

由于CSS语言忽略空格(除了选择器内部的空格外),因此可以利用空格来格式化CSS源代码,则上面代码可以进行如下美化:

body {    font-size: 12px;    color: #CCCCCC;}

p { background-color: #FF00FF; }

这样在阅读CSS源代码时就一目了然了,既方便阅读,也更容易维护。CSS使用“/*注释语句*/”对样式进行注释。例如,对于上面样式可以增加注释:

body {/*页面基本属性*/    font-size: 12px;    color: #CCCCCC;}

/*段落文本基础属性*/

p { background-color: #FF00FF; }

当前文章标题:网站建设中的CSS基础

当前URL:http://www.lyjtt.cn/news/wzzz/3053.html

上一篇:网页设计中的HTML属性

下一篇:网页设计时的CSS基本用法

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)