×

深圳网站建设—APP开发—网站制作—小程序开发_博纳网络公司

0755 -
82538016
82560826
网站制作资讯

网站制作之什么是CSS语言?(一)

文章编辑:网站建设 文章来源:建站行业资讯 浏览量:

 深圳网站制作设计公司,根据多年行业经验结合客户的日常建站咨询,认为有必要编辑整理一些关于网页制作的一些相关知识,其目的是为了客户不仅仅是需要网站而建站,更希望客户能通过网站制作完成平台营运后期,能真正熟悉自己的网站架构,对一些非功能性的前端界面能自行进行修改调整。这样就会起到事半功倍的效果。深圳网站制作公司博纳网络在前面的文章中介绍了HTML静态语法基础,现在我们就css语言在网页制作中所起的作用以及他的属性。
网页制作之CSS基础
使用HTML丰富的标签可以轻松构建不同的网页结构,但是在控制网页显示效果方面,它的能力就比较弱,如果要设计美观大方、赏心悦目的网页效果,就要用到CSS。CSS弥补了HTML不足,为用户提供了强大的页面样式美化和布局功能。
(1)认识CSSCSS是在HTML语言基础上发展而来的,是为了克服HTML在网页布局方面存在的不足。在HTML语言中,各种显示效果的实现都是通过标签来实现,然后通过标签的各种属性来定义标签的显示样式。这造成了网页代码的臃肿、杂乱,网页后期维护和控制变得非常困难。
【示例】要在一段文字中把一部分文字变成蓝色,HTML标识代码如下:
<p><fontcolor=blue>显示信息</font></p>
而使用CSS之后,则上例代码可以写成:
<pstyle="color:blue">显示信息</p>
这样简单比较就可以看出CSS简化了HTML中各种繁琐的标签,使得各个标签的属性更具有一般性和通用性,并且样式表扩展了原先的标签功能,能够实现更多的效果,样式表甚至超越了网页本身显示功能,而把样式扩展到多种媒体上,显示了难以抗拒的魅力。这仅仅是一个小小的例子,如果把整个网页,甚至全部网站都用一张或几张样式表来专门设计网页的属性和显示样式,读者就会发现使用CSS的优越性,特别是对后期更改维护提供了方便。样式表的另一个巨大贡献就是把对象引入了HTML,使得可以使用JavaScript脚本控制网页标签的显示效果,这在早期的HTML中实现起来会非常困难。CSS比较简单、灵活、易学。除了可以控制文本属性外,如字体、字号、颜色等,还可以设计复杂的网页样式,如对象位置、图片效果、网页布局等。通过CSS样式表,可以统一控制HTML中各标签的显示属性。对页面布局、字体、颜色、背景和其他图文效果实现更加精确的控制。用户只修改一个CSS样式表文件就可以实现改变一批网页的外观和格式,保证在所有浏览器和平台之间的兼容性,拥有更少的编码、更少的页数和更快的下载速度。
(2)CSS基本语法样式是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语言的介绍今天我们就介绍到这里,全文未完,如果您认为关于网页制作方面的只是对您的工作有所帮助,敬请持续关注本站(网站制作之什么是CSS语言二), 深圳网站制作博纳网络编辑整理。
 

当前文章链接:/construction/jzhyzx/1278.html
如果您觉得案例还不错请帮忙分享:

[声明]本网转载网络媒体稿件是为了传播更多的信息,此类稿件不代表本网观点,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的内容侵犯了您的版权,请您的相关内容发至此邮箱【qin@198bona.com 】,我们在确认后,会立即删除,保证您的版权。