写在head中可以给整个body使用,而写在body中可能只能给某一个DIV使用,具体是要看怎么使用。本质上是没有什么差的,从整洁度上当然是head上更好了。
当讨论到Web标准时,一些事情总是被提及,那就是结构和表现分离的重要性。结构和表现分离可以给我们带来很多好处,比如样式复用、统一标准等等。而结构与标签分离的第一件是就是需要把所有设置元素样式的语句单独提取到一个css文件。
所以更推荐将样式表单独写一个文件,在head出调用来控制整个页面的表现。
垂直居中问题css
-----------------------------
虽然css有一个垂直居中属性,CSS垂直居中属性不能决绝如下问题:
存在的问题:
*
已知div高度
*
div动态内容,不确定高度
*
想要内容垂直居中
*
不用table
在IE下:
位于相对容器的一半高度.
div内容所占有的高度默认设置为div高度
在标准浏览器中如:Mozilla,
Opera,
Safari
等等是完全不同的.
div被当做一个table
被现实出来.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01//EN">
<html>
<head>
<title>Universal
vertical
center
with
CSS</title>
<style>
.greenBorder
{border:
1px
solid
green}
</style>
</head>
<body>
<div
class="greenBorder"
style="display:
table
height:
400px
#position:
relative
overflow:
hidden">
<div
style="
#position:
absolute
#top:
50%display:
table-cell
vertical-align:
middle">
<div
class="greenBorder"
style="
#position:
relative
#top:
-50%">
any
text<br>
any
height<br>
any
content,
for
example
generated
from
DB<br>
everything
is
vertically
centered
</div>
</div>
</div>
</body>
</html>
在浏览器中显示:
any
text
any
height
any
content,
for
example
generated
from
DB
everything
is
vertically
centered
需要准备的材料分别有:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<script>标签,输入js代码:$('head').append('<style>div{font-size: 32px}</style>')。
3、浏览器运行index.html页面,此时发现js成功将css代码添加到<head>标签的<style>标签中。