codecamp

网页设计中的CSS样式

一、CSS能做什么

CSS用于增强或控制网页样式,并允许将样式信息与网页内容分离。引用样式表的目的是将“网页结构代码”和“网页样式风格代码”分离开,从而使网页设计者可以对网页布局进行更多的控制。利用样式表,可以将整个站点上所有网页都指向某个CSS文件,设计者只需要修改CSS文件中的某一行,整个网页上对应的样式都会随之发生改变。



二、CSS的局限性

CSS具有这么多的作用,是不是就意味着它是无所不能、什么都能自由实现的呢?


1、属性无法继承

当然不是,CSS仍然存在有些属性不能被继承的问题,如border属性,它是用来设置元素边框的,它就没有继承性。多数背景和边框类属性,比如像padding(补白)、margin(边界)都是不能继承的。


2、显示效果不一致

此外,使用CSS指定特定元素外观时,对静态HTML能完美支持,但对于动态网站中服务器元素,还存在着在不同浏览器中输出不一致的问题。



三、网站CSS赏析


1、商务网站CSS样式赏析:


下图是一个企业网站,通过CSS控制图片灵活布局,实现浮雕效果。在这个网站,字体样式、页面背景、按钮样式和菜单都采用CSS修饰控制,如果没有CSS,展示在我们面前的只是一个朴素的HTML文字和图片网站。

商务网站CSS样式


2、游戏网站CSS样式赏析:


下图是一个CSS布局的游戏网站,SCC与JavaScript控制,实现缤纷的动态效果。在此网页中,字体样式、按钮样式、菜单样式都得到了充分的应用,并且值得一提的是广告上下浮动,也需要使用CSS样式定义DIV层。

游戏网站CSS样式

CSS的概念详解
编写CSS样式实例介绍
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }