关于 robots-or-not.com 代码的几个 CSS 问题

发布于 2024-10-27 10:05:27 字数 641 浏览 5 评论 0原文

  body {
    background: #E2E2E2 url("/-/img/bg.jpg") repeat -20% -146px;
    color: #45445d;
    color: rgba(0, 0, 0, 0.7);
    font: normal 100%/1.5 Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    }

这是来自 robot-or-not.com 的代码片段 ...在一篇名为..响应式网页设计。我有两个关于文章中CSS的问题。

如果我想在整个网站上使用 em，我明白我需要一个基本字体大小，然后计算出 em 目标尺寸 / 基本尺寸 = EM。我是吗然后需要设置基本字体大小在“PX”中首先在正文中，然后在上面的代码 font: 100%/1.5 的作用是什么意思是？
我的第二个问题是关于背景属性..有什么作用重复“-20% -146px;”这意味着/做什么？我知道重复：不重复和重复-y，重复-x，但从未为此使用 % 或 PX..

原文

  body {
    background: #E2E2E2 url("/-/img/bg.jpg") repeat -20% -146px;
    color: #45445d;
    color: rgba(0, 0, 0, 0.7);
    font: normal 100%/1.5 Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    }

This is a code snippet from robot-or-not.com ...featured in an article called ..Responsive Webdesign. I have two questions about the CSS in the article.

If I want to use em's across a site I
understand that I need a base font
size and then work out the em by
TARGET SIZE / BASE SIZE = EM. Do I
need then to set the base font size
in "PX" in the body first and in the
code above what does font: 100%/1.5
mean?
My second question is about the
background property.. what does
repeat "-20% -146px;" this mean/do?
I know about repeat:no-repeat and
repeat-y, repeat-x but have never
used % or PX for this..

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瀟灑尐姊 2024-11-03 10:05:27

您不需要需要“基本尺寸”。字体的默认大小由用户在他/她的浏览器中配置。这就是浏览器使用的 1em（或 100%）。

您可以在正文中定义自己的“基本尺寸”（body { font-size: 12px }），然后继续使用 em（或 %）用于其他字体大小，例如 h1 { font-size: 1.5em } 而不是 h1 { font-size: 18px } (12px * 1.5 = 18 像素）。作为开发人员，这对您来说有一个“优势”：如果您选择更改“基本大小”，则所有其他字体大小（或其他基于 em 的值）将相应缩放。

然而，通过设置这种基于像素的基本大小，您可以使用您（设计者）的选择覆盖用户配置的（因此可能是首选的）字体大小。许多设计师这样做是因为他们相信他们的像素完美设计不能受到用户偏好的干扰。您是否需要这个或让用户选择是您的决定。

100%/1.5 是 的一部分font简写属性，是设置font-size: 100%和line-height: 1.5的缩写。

background 也是一个简写属性和 background: #E2E2E2 url("/-/img/bg.jpg") Repeat -20% -146px; 扩展到：

background-color: #E2E2E2;
background-image: url("/-/img/bg.jpg");
background-repeat: repeat;
background-position: -20% -146px;

background-position: -20% -146px 表示背景图像的左上角不位于其元素的左上角，而是向左推其元素宽度的 20%，向上推 146 像素。

You don't need a "base size". The default size for fonts is configured by the user in his/her browser. This is what the browser then uses for 1em (or 100%).

You can define your own "base size" in the body (body { font-size: 12px }) and then go ahead and use ems (or %) for other font-sizes, such as h1 { font-size: 1.5em } instead of h1 { font-size: 18px } (12px * 1.5 = 18px). This has the "advantage" for you as the developer that if you choose to change your "base size", then all other font-sizes (or other em based values) will scale accordingly.

However by setting such a pixel-based base size, you override the users configured (and thus probably preferred) font-size with your (the designers) choice. Many designers do this, because they believe their pixel-perfect design must not be disturbed by the users preferences. Whether you need this or let the user choose is your decision.

100%/1.5 is part of the font shorthand property and is the abbreviation for setting font-size: 100% and line-height: 1.5.

background is also a short hand property and background: #E2E2E2 url("/-/img/bg.jpg") repeat -20% -146px; extends to:

background-color: #E2E2E2;
background-image: url("/-/img/bg.jpg");
background-repeat: repeat;
background-position: -20% -146px;

background-position: -20% -146px means that the top left corner of the background image isn't positioned at the top left corner of its element, but it is pushed 20% of the width of its element to the left and 146 pixels up.

回复收藏 0 原文

~没有更多了~