CSS:body或html上的基本样式?

时间:2022-11-12 13:34:47

When I declare some base styles for my site I have used to do that on the body tag. Like for example

当我为我的网站声明一些基本样式时,我已经习惯在body标签上执行此操作。比如说

body {
  font-size: medium;
  line-height: 1.3em;
}

But I have also seen people do things like that on the html tag. And on both. Where should it be done? Should some be at one and some at the other? Should all be on one of them? Or does it simply not matter at all? Or?

但我也看到人们在html标签上做了类似的事情。两者兼而有之。它应该在哪里完成?有些人应该在一个人而在另一个人身上吗?它们都应该在其中一个吗?或者根本不重要?要么?

6 个解决方案

#1


2  

I like applying base declarations to html. Most of the time, I use body as a container, like so:

我喜欢将基本声明应用于html。大多数时候,我使用body作为容器,如下所示:

html {
 /* Base styles go here */
 font: 14px/1.5 Arial, sans-serif;
 background: darkgreen;
}

body {
 background: lightgreen;
 padding: 0 20px;
 width: 920px;
 margin: 0 auto;
}

View the demo: http://jsbin.com/atiso3

观看演示:http://jsbin.com/atiso3

Most people tend to use additional DIVs just to accomplish this basic behavior. It’s not necessary when you know how to use html and body in CSS ;)

大多数人倾向于使用额外的DIV来完成这种基本行为。当你知道如何在CSS中使用html和body时,没有必要;)

#2


2  

I'd add styling on the body tag as it makes more semantic sense (you're not going to style the head, title and so on).

我会在body标签上添加样式,因为它更具语义感(你不会为头部,标题等设置样式)。

Also I don't see a lot of people adding styles directly on the html tag anymore except to reset some default styles...

另外我没有看到很多人直接在html标签上添加样式,除了重置一些默认样式...

#3


1  

For the strict doctype, only body is necessary. However if the browser is in quirks mode, you'll very likely need to target table cells as well.

对于严格的doctype,只需要正文。但是,如果浏览器处于怪异模式,您很可能也需要定位表格单元格。

In both cases you may want to also target form elements, since they generally inherit the platform default.

在这两种情况下,您可能还希望定位表单元素,因为它们通常会继承平台默认值。

#4


1  

html is the container for body, so the latter will inherit from the former. Be careful when mixing:

html是body的容器,所以后者将继承自前者。混合时要小心:

html, body { font-size: 80%; } will make your body's font size to be 80% of 80%.

html,body {font-size:80%;将使你的身体的字体大小为80%的80%。

I always go for html, but there is an issue with ancient browser support and/or quirks mode.

我总是选择html,但古代浏览器支持和/或怪异模式存在问题。

#5


1  

From my personal experience, the only situation where putting certain base styles on both html and body is necessary is when you're doing some funky hacks that rely on 100% width or height ("sticky" divs or some such). In all other situations, it is perfectly OK to declare the base styles only on body. In other words,

从我个人的经验来看,唯一需要在html和body上放置某些基本样式的情况是你在做一些依赖于100%宽度或高度的时髦黑客(“粘性”div或其他一些)。在所有其他情况下,仅在主体上声明基本样式是完全可以的。换一种说法,

html, body {height:100%}

might actually be necessary, but

可能实际上是必要的,但是

html, body {font-family:Arial}

certainly won't. After all, all the elements on which you'll need the font-family will be children of body anyway, so there's no point in specifying it for html, too.

肯定不会。毕竟,无论如何,你需要font-family的所有元素都是body的子元素,所以为html指定它也没有意义。

#6


1  

I would either set to body itself. I tend to do that or a use a base div style, depends on what I'm doing, but putting it on the html object seems unintuitive.

我要么设置身体本身。我倾向于这样做或者使用基本div样式,取决于我正在做什么,但将它放在html对象上似乎不直观。

#1


2  

I like applying base declarations to html. Most of the time, I use body as a container, like so:

我喜欢将基本声明应用于html。大多数时候,我使用body作为容器,如下所示:

html {
 /* Base styles go here */
 font: 14px/1.5 Arial, sans-serif;
 background: darkgreen;
}

body {
 background: lightgreen;
 padding: 0 20px;
 width: 920px;
 margin: 0 auto;
}

View the demo: http://jsbin.com/atiso3

观看演示:http://jsbin.com/atiso3

Most people tend to use additional DIVs just to accomplish this basic behavior. It’s not necessary when you know how to use html and body in CSS ;)

大多数人倾向于使用额外的DIV来完成这种基本行为。当你知道如何在CSS中使用html和body时,没有必要;)

#2


2  

I'd add styling on the body tag as it makes more semantic sense (you're not going to style the head, title and so on).

我会在body标签上添加样式,因为它更具语义感(你不会为头部,标题等设置样式)。

Also I don't see a lot of people adding styles directly on the html tag anymore except to reset some default styles...

另外我没有看到很多人直接在html标签上添加样式,除了重置一些默认样式...

#3


1  

For the strict doctype, only body is necessary. However if the browser is in quirks mode, you'll very likely need to target table cells as well.

对于严格的doctype,只需要正文。但是,如果浏览器处于怪异模式,您很可能也需要定位表格单元格。

In both cases you may want to also target form elements, since they generally inherit the platform default.

在这两种情况下,您可能还希望定位表单元素,因为它们通常会继承平台默认值。

#4


1  

html is the container for body, so the latter will inherit from the former. Be careful when mixing:

html是body的容器,所以后者将继承自前者。混合时要小心:

html, body { font-size: 80%; } will make your body's font size to be 80% of 80%.

html,body {font-size:80%;将使你的身体的字体大小为80%的80%。

I always go for html, but there is an issue with ancient browser support and/or quirks mode.

我总是选择html,但古代浏览器支持和/或怪异模式存在问题。

#5


1  

From my personal experience, the only situation where putting certain base styles on both html and body is necessary is when you're doing some funky hacks that rely on 100% width or height ("sticky" divs or some such). In all other situations, it is perfectly OK to declare the base styles only on body. In other words,

从我个人的经验来看,唯一需要在html和body上放置某些基本样式的情况是你在做一些依赖于100%宽度或高度的时髦黑客(“粘性”div或其他一些)。在所有其他情况下,仅在主体上声明基本样式是完全可以的。换一种说法,

html, body {height:100%}

might actually be necessary, but

可能实际上是必要的,但是

html, body {font-family:Arial}

certainly won't. After all, all the elements on which you'll need the font-family will be children of body anyway, so there's no point in specifying it for html, too.

肯定不会。毕竟,无论如何,你需要font-family的所有元素都是body的子元素,所以为html指定它也没有意义。

#6


1  

I would either set to body itself. I tend to do that or a use a base div style, depends on what I'm doing, but putting it on the html object seems unintuitive.

我要么设置身体本身。我倾向于这样做或者使用基本div样式,取决于我正在做什么,但将它放在html对象上似乎不直观。