救助:在静态网页上加CSS样式

html-css025

救助:在静态网页上加CSS样式,第1张

方法/步骤

<html> <div style="background:blue"></div></html>

以上是最简单的一种方式,可以在网页中直接加入,不过不能多代码的加入,只可以简单的几行代码的加入。

<html><style type="text/css"> div{ background-color: blue}</style> <div></div></html>

同在一个屋檐之下的一种表达方式,也是可以的,代码量可以加大,只是属于个人作品的一种表达方式,不是属于团队的开发之一。

<html><head> <link rel="stylesheet" type="text/css" href="baidu.css"></head></html>

使用上面的一种文档的方式,也是在企业中要用到的,不过CSS可能是用专人员来写,代码可以很长,也可以很细。

然后开发人员,可以直接使用的一种方式,团员开发的重点之重。

以上的三中方式,可能并不只是体现在差异性方面,更多的可能是开发时的实用性的一种主要体现。个人小程序可能也就不要分开来写;专业开发可能不必要文档;团队开发可能用文档比较专业一些,工作可能会更简单一些。

三种表达方式的总结说明:

空间表达:

内嵌

分层

外嵌

职业表达:

个人

私人

团队

分工表达:

简单

中等

难度

系统原来的更换CSS模板是要重新刷新一下儿页面的,我一直都对这个功能很不满意,百分之九十五的功能都用AJAX无刷新的实现了,难道要在这个小小的更换页面CSS模板上给用户添点恶心吗?于是,昨天晚上好好考虑了这个功能上的实现,原来发现其实并不难,小改一下就OK了,现在系统上的模板更换是不用刷新页面来完成的,明显在感觉上比原来好得多了,下面谈谈经验吧:

对于一个多页面的网站来说了,CSS的更换不能只简单的在一个页面中调用更换CSS功能更新这个页面头上链接的CSS地址,因为它不能保证在点击了别的页面后新的样式应该到新打开的页面中去,因此,一定要有一个全局性的变量来记录它,我选用的是SESSION,在用户点击了侧边模板下拉框中的模板时,触发了下拉框的ONCHANGE事件,执行了一段AJAX程序,程序的功能是将用户选中的模板信息发送给服务器,服务器接收新的模板信息后更新表示模板的SESSION值,然后向客户端返回成功信息,客户端则根据返回的成功信息来改变页面样式,注意:我在页面头中写的CSS链接信息是这样子的:

程序代码

<LINK

id=cssLink

href="css.aspx"

type=text/css

rel=stylesheet>

css.aspx是一个ASP.net的页面,它的作用只是单一的根据SESSION中的当前CSS模板信息来转向所应CSS样式表文件!这样子的处是客户端在接收到了服务器端成功更新SESSION的信息后刚不用考虑其它的东西,直接一句:

document.getElementById("cssLink").href=document.getElementById("cssLink").href

将cssLink的href重新写一下儿,虽然是前后一模一样子的值,但这会激发CSS.ASPX页面重新读一下儿,这样子CSS.ASPX页面就能转到新更新的CSS样式表了!由于网站别的页面的样式表链接信息都是这样写的,所以每个页面加载时都是会应用最新更新的样式表的,这样子,网站无刷新的全局更新样式表就实现了!!

希望我的回答可以帮到您哦

<html>

<head>

<title>CSS简单网页</title>

<style>

#box{width:500pxheight:500pxposition:relativelytop:50%left:50%margin-top:-250pxleft:-250pxbackground:#f00color:#fff}

</style>

</head>

<body>

<div id="box">这是一个简单的水平,垂直居中的盒子</div>

</body>

</html>