css基本样式表_基本的即用型CSS样式

css基本样式表

View demo 查看演示 Download Source 下载源

Today we are going to dig a little bit more into process development. When you’re creating a website or an application from scratch, you may need a collection of patterns helping you building thing up. That is the point of today’s tutorial. Just for you, I baked a little suite of basic CSS snippets, ready for use! Before going any further, let me explain to you how I’ve built this up. I tried to classify things according to their type. So you have some enhancements for block-level elements, for links, for inputs, regular text, and so on. My point was also to focus on re-usability, that’s why I used classes. The styles are not directly applied to an element, but to a class with a not-so-semantic name, that can be used and re-used.

今天，我们将进一步研究过程开发。 从头开始创建网站或应用程序时，可能需要一系列模式来帮助您进行构建。 这就是本教程的重点。 我为您准备了一些基本CSS片段供您使用！ 在继续之前，让我向您解释我是如何构建的。 我试图根据事物的类型对其进行分类。 因此，您对块级元素，链接，输入，常规文本等进行了一些增强。 我的观点还在于关注可重用性，这就是为什么我使用类。 样式不是直接应用于元素，而是应用于具有不太语义名称的类，可以使用和重复使用。

You can also build classes of classes to custom things to suit your needs. It could look like this:

您还可以构建类的类来定制内容以满足您的需求。 它可能看起来像这样：

  .my-class {
    /* My awesome styles here */
  }

  .my-class.custom {
    /* Specific styles to .my-class only if it only has the .custom class */
  }

This way the .custom class by itself has no point but if you apply it to a .my-class element, you can tweak a little bit the .my-class styles. Do you see what I mean?

这样，.custom类本身没有任何意义，但是如果将其应用于.my-class元素，则可以对.my-class样式进行一些调整。 你明白我的意思吗？

Now you got the basic idea, let’s have a look at those patterns, starting with the block-level elements.

现在您有了基本的想法，让我们看一下这些模式，从块级元素开始。

Note that there are no vendor specific prefixes in this tutorial, but you can find the prefixed styles in the CSS.

请注意，本教程中没有特定于供应商的前缀，但是您可以在CSS中找到带前缀的样式。

块级元素 (Block-level elements)

You are creating an image gallery and want to give some subtle styles to the pictures? You are designing a template for your articles on your blog and want to emphasize the little “aside” block? You’re building your resume and want to make this little photo of you look nicer? There you go my friends.

您正在创建图片库，并希望给图片添加一些微妙的样式吗？ 您是否正在为博客上的文章设计模板，并希望强调一点“旁白”？ 您正在建立简历，并希望使您的这张小照片看起来更好吗？ 你去我的朋友们。

标记 (The Markup)

For this whole section, I took an a division with the class “block-level” and added the additional classes to it. You could of course do it on pretty much whatever you want as long as it is a block-level element. If you’re planning on applying one of those styles on an image, be sure to set display: block to it.

在整个部分中，我对“块级”类进行了划分，并在其中添加了其他类。 当然，只要它是块级元素，就可以在几乎任何您想要的地方进行。 如果您打算在图像上应用这些样式之一，请确保将display: block设置为该样式。

  <div class="block-level"></div>

基本CSS(The Basic CSS)

For the demo, I applied a few lines of CSS to my little div:

对于演示，我在我的小div中应用了几行CSS：

.block-level {
    width: 120px;
    height: 120px;
    margin: 20px;
    position: relative;
    float: left;
}

You’ll find some more styles for the font but that’s just for the demo, let’s focus on the main styles.

您会发现字体的更多样式，但这仅是演示，我们将重点放在主要样式上。

Undertow (Shadows)

One of the simplest way to give a little depth to a block-level element is to apply a little shadow to it. However, shadows are dangerous: they can screw up your design easily. If you don’t believe me, just have a look at those shadows on the “New eBay”.

向块级元素添加一些深度的最简单方法之一是对其施加阴影。 但是，阴影很危险：它们会轻易破坏您的设计。 如果您不相信我，请看看“ New eBay”上的那些阴影。

The idea behind this one is to give a very little and subtle shadow to a block element. Not a big black fat shadow making it look like “HEY IM HERE! OVERHERE!!”. Something quiet.

这背后的想法是给块元素一个很小而微妙的阴影。 没有太大的黑色阴影，看起来像“ HEY IM HERE！ 太！！” 安静的东西。

.drop-shadow {
    background: #9479fa;
}

.drop-shadow.top {
    box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4)
}

.drop-shadow.right {
    box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4)
}

.drop-shadow.bottom {
    box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4)
}

.drop-shadow.left {
    box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4)
}

Look how we use a negative spread value in order to give a little depth to the shadow. It looks way more realistic this way in my humble opinion.

看看我们如何使用负扩散值来给阴影一点深度。 以我的拙见，这种方式看起来更现实。

Note: the color used in the box-shadow declaration may vary depending on the background-color of your element. The lighter the box, the lighter the shadow has to be in order to preserve a decent contrast.

注意：框阴影声明中使用的颜色可能会根据元素的背景颜色而有所不同。 盒子越亮，阴影就越淡，以保持良好的对比度。

Note: you won’t be able to add multiple directional classes on the same element. The latter will override the others. If you would like a box to have more than one shadow, simply create a multiple box shadow.

注意：您将无法在同一元素上添加多个方向类。 后者将取代其他。 如果您希望一个盒子有多个阴影，只需创建一个多盒子阴影。

Those 4 examples aim at emphasize the content with an outer glow, black or white, blurred or not blurred, depending on what you want and more importantly on the background in the box (plain color, texture, image, etc.).

这四个示例旨在根据您想要的内容来强调带有黑色或白色，模糊或不模糊的外部辉光的内容，更重要的是，取决于框内的背景(纯色，纹理，图像等)。

div[class*="emphasize-"] {
    background: #69D2E7;
}

.emphasize-dark {
    box-shadow: 0 0 5px 2px rgba(0,0,0,.35)
}

.emphasize-light {
    box-shadow: 0 0 0 10px rgba(255,255,255,.25)
}

.emphasize-inset {
    box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5)
}

.emphasize-border {
    box-shadow: inset 0 0 0 7px rgba(255,255,255,.5)
}

Last but not least when it comes to shadows, two embossed effects. The first on is pretty subtle since it only applies a very small light reflection on the top of an object, and the second one is more complex. It looks particularly good on circle elements, like buttons.

最后但并非最不重要的一点是，有两个浮雕效果。 第一个非常微妙，因为它仅在对象的顶部施加很小的光反射，第二个更复杂。 在圆形元素(如按钮)上看起来特别好。

div[class*="embossed"] {
    background: #8ec12d;
    color: #333;
    text-shadow: 0 1px 1px rgba(255,255,255,0.9);
}

.embossed-light {
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.embossed-heavy {
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 
        inset 0 2px 3px rgba(255,255,255,0.3), 
        inset 0 -2px 3px rgba(0,0,0,0.3),
        0 1px 1px rgba(255,255,255,0.9);
}

渐变色(Gradients)

Sometimes, you may want to apply a soft gradient to an element in order to give it some relief. The idea was to give you a gradient that you don’t have to change if you change the background color / image.

有时，您可能希望对元素应用柔和的渐变以减轻其负担。 这个想法是给您一个渐变，如果您更改背景颜色/图像，则不必更改。

div[class*="gradient"]{
    background-color: #DEB8A0;
    box-shadow: 0 0 0 1px #a27b62;
}

.gradient-light-linear {
    background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
}

.gradient-dark-linear {
    background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
}

Basically, it relies on applying a transparent to more transparent layer over your stuff, as you would do on Photoshop for example. Fairly simple.

基本上，它依赖于在您的内容上应用透明到更透明的层，例如您在Photoshop上所做的那样。 很简单。

Please note that gradients might not work in some browsers (e.g. IE9), you’ll have to provide some kind of fallbacks for them.

请注意，渐变可能在某些浏览器(例如IE9)中不起作用，您必须为其提供某种后备。

Okay, so that was the easy part. Now, let’s deal with radial gradients. You want to add some sweet light effects to your block elements, right? So you need radial gradients. First, the easy way for supported browsers.

好的，那是容易的部分。 现在，让我们处理径向渐变。 您想为块元素添加一些甜美的灯光效果，对吗？ 因此，您需要径向渐变。 首先，是支持浏览器的简便方法。

.gradient-light-radial {
    background-image: radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
}

.gradient-dark-radial {
    background-image: radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
}

Except the fact that I have to check out the syntax every single time I want to do a radial gradient, it was fairly simple. Right?

除了我每次都要进行径向渐变都必须检出语法外，这非常简单。 对？

圆角 (Rounded corners)

Have you noticed, we have fought for years to have an unprefixed border-radius in all major browsers and now that we have them, the trend wants to get rid of every rounded corner? That is irony.

您是否已经注意到，多年来我们一直在努力在所有主要浏览器中都拥有一个没有前缀的边界半径，而现在我们有了它们，趋势是否希望消除每个圆角？ 讽刺的是。

Depending on the design, sharp angles can be beautiful or very harmful. Anyway, you may want to add border-radius to a bunch of elements. Even small ones. So I’ve created some classes for that.

取决于设计，尖角可能是美丽的或非常有害的。 无论如何，您可能想要将边界半径添加到一堆元素中。 甚至很小的。 因此，我为此创建了一些类。

div[class*="rounded"] {
    background: #fca1cc;
}

.light-rounded {
    border-radius: 3px;
}

.heavy-rounded {
    border-radius: 8px;
}

.full-rounded {
    border-radius: 50%;
}

.barrel-rounded {
    border-radius: 20px/60px;
}

My theory on border-radius (depending on the size of the element):

我关于边界半径的理论(取决于元素的大小)：

• At 0px, you have sharp angles. True story.
  在0px处，您有锐角。 真实的故事。
• Between 1 and 4px, you have subtle rounded corners. Most people won’t be able to tell corners are rounded, but they won’t have the “sharp knife” impression.
  在1到4像素之间，您具有细微的圆角。 大多数人无法分辨出圆角是圆的，但他们不会有“锋利的刀”的印象。
• Between 5 and 10px, you have rounded corners. Not more, not less. Depending on the design, it can look very cheap, or absolutely lovely.
  在5到10像素之间，您有圆角。 不多不少。 根据设计，它可能看起来很便宜，或者绝对可爱。
• After 10px, you have -in my opinion- ugly rounded corners. It looks like you’re trying to recreate the “we do because we can” thing from the past. Plus, as I said earlier, the trend isn’t much into round corners any more.
  在10px之后，在我看来，您有个圆角。 看来您正在尝试重新创建过去的“我们之所以做”。 另外，正如我之前所说，这种趋势已不再是圆角。

There are two values you should remember when you’re using the border-radius property:

使用border-radius属性时，您应该记住两个值：

• border-radius: 50% draws a perfect circle as long as you’re dealing with a square. If it’s a rectangle, then you’ll turn it into an ellipse.

  border-radius: 50%只要您要处理正方形， border-radius: 50%画出一个完美的圆。 如果是矩形，则将其变成椭圆形。

• In order to achieve icon-like border-radius, the perfect ratio is 6.4 according to this tweet from Nina Giorgieva. So if you have a 100*100px square and want to turn it into an icon, you should apply it 16px border-radius (100 / 6.4 = 15.625).

  为了获得类似图标的边框半径，根据Nina Giorgieva的此推文，理想比例为6.4。 因此，如果您有一个100 * 100px的正方形并将其变成图标，则应将其应用为16px border-radius (100 / 6.4 = 15.625)。

链接 (Links)

We are done with block-level elements improvements. Let’s talk about links. Links are absolutely everywhere. From navigation to external links, passing by button for social networks and anchors, links are crowding every website.

我们完成了块级元素的改进。 让我们谈谈链接。 链接无处不在。 从导航到外部链接，通过按钮传递社交网络和锚点，链接正挤满每个网站。

From now on, let’s make a difference between inline links and block links. Inline links are mostly anchors from the current page to another page somewhere on the web. Block links are a little bit more multipurpose: buttons, nav menus, etc.

从现在开始，让我们区分内联链接和块链接。 内联链接通常是从当前页面到网络上其他页面的锚点。 块链接更具多功能性：按钮，导航菜单等。

标记 (The Markup)

You may have understood it already. For this section we will need two different contexts: a sentence with a link for the inline-link case, and a simple link for the block-link case. I use an anchor tag for the latter but you could use a submit input or a button as well.

您可能已经了解了。 在本节中，我们将需要两个不同的上下文：一个带有用于inline-link情况的链接的句子，以及一个用于block-link情况的简单链接。 我为后者使用了锚标记，但是您也可以使用提交输入或按钮。

内联链接(Inline links)

I tried to stay as far as possible from the default solid underline and the changing color on hover. I tried to be a little bit more creative to make you something cool. Is it cool?

我试图尽可能远离默认的实线下划线和悬停时更改的颜色。 我试图变得更有创意，使您变得更酷。 酷吗？

.inline-link-1 {
    display: inline-block;
    margin: 0 0.2em;
    padding: 3px;
    background: #97CAF2;
    border-radius: 2px;
    transition: all 0.3s ease-out; 
    /* Font styles */
    text-decoration: none;
    font-weight: bold;
    color: white;
}

.inline-link-1:hover {
    background: #53A7EA
}

.inline-link-1:active {
    background: #C4E1F8
}

.inline-link-1:visited {
    background: #F2BF97
}

Important: don’t forget to add a visited state to inline links. Some people like to know what links they have gone through when reading a site. Here, I applied a 180° rotation to the hue color wheel; I like this to really make a difference between default links and visited links.

重要提示：不要忘记将访问状态添加到内联链接中。 有些人喜欢知道阅读网站时经过了哪些链接。 在这里，我对色相色轮进行了180°旋转； 我喜欢这样，才能真正在默认链接和访问过的链接之间产生区别。

This example is very effective if you really want inline links to be seen. I’d say it depends on your design choice: some people want links to be very discrete, others want to make them big enough to trigger call-to-action. Your choice.

如果您确实希望看到内联链接，则此示例非常有效。 我要说的是，这取决于您的设计选择：有些人希望链接非常离散，另一些人希望使它们足够大以触发号召性用语。 你的选择。

This was the “heavy” example. Let’s see something lighter, mostly based on the default link styles.

这就是“沉重”的例子。 让我们看看更轻的东西，主要是基于默认链接样式的。

.inline-link-2 {
    display: inline-block;
    border-bottom: 2px dashed rgba(0,0,0,0.9);
    /* Font styles */
    text-decoration: none;
    color: #777;
}

.inline-link-2:hover {
    border-bottom-style: dotted;
}

.inline-link-2:active {
    border-bottom-style: solid;
}

.inline-link-2:visited {
    border-bottom: 2px solid #97CAF2;
}

The idea is to have a dashed line as a default state. When you hover the link, the line becomes dotted and finally when you click it, it’s a solid underline.

想法是将虚线作为默认状态。 当您将链接悬停时，该线将变为虚线，最后单击该线时，该线将变为实线。

Last idea, involving a pseudo-element to create a little arrow before the link. We could think of it as a way to show the user the link is leaving the website, or something.

最后一个想法，涉及到在链接之前创建一个小箭头的伪元素。 我们可以将其视为向用户显示链接正在离开网站的一种方式。

.inline-link-3 {
    display: inline-block;
    position: relative;
    padding-left: 6px;
    /* Font styles */
    text-decoration: none;
    color: #6AB3EC;
    text-shadow: 0 1px 1px rgba(255,255,255,0.9);
}

.inline-link-3:hover {
    color: #3C9CE7;
}

.inline-link-3:before {
    content: "25BA";
    font-size: 80%;
    display: inline-block;
    padding-right: 3px;
    pointer-events: none;
}

.inline-link-3:hover:before {
    color: #F2BF97;
}

封锁连结(Block links)

Now, let’s have a look at block-level links. In most cases, when the user can interact with your site or application, it involves a button. Submit a comment, go to the next page, log in, and many more. Whatever the type of element you’re using for that (<a>, <input type="submit">, <button>, etc.), you may want to apply some neat styles to it to attract the user.

现在，让我们看一下块级链接。 在大多数情况下，当用户可以与您的站点或应用程序进行交互时，它涉及一个按钮。 提交评论，进入下一页，登录等等。 无论您要使用哪种元素类型( <a> ， <input type="submit"> ， <button>等等)，您都可能希望对其应用一些简洁的样式以吸引用户。

The first example is a very very simple one. However, in some designs, in can fit very well. I’m thinking about Windows 8 of course. 😉

第一个例子是一个非常非常简单的例子。 但是，在某些设计中，非常适合。 我当然在考虑Windows 8。 😉

.metro {
    display: inline-block;
    padding: 10px;
    margin: 10px;
    background: #08C;
    /* Font styles */
    color: white;
    font-weight: bold;
    text-decoration: none;
}

.metro:hover {
    background: #0AF
}

Okay, let’s keep the same base but with some 3D effect! You might recognize this from the new design of CSS-Tricks. We will even use a child class for this one.

好吧，让我们保持相同的基础，但是要有一些3D效果！ 您可能会从CSS-Tricks的新设计中认识到这一点。 我们甚至会为此使用一个子类。

.metro.three-d {
    position: relative;
    box-shadow: 
        1px 1px #53A7EA, 
        2px 2px #53A7EA, 
        3px 3px #53A7EA;
    transition: all 0.1s ease-in;
}

.metro.three-d:active {
    box-shadow: none;
    top: 3px;
    left: 3px;
}

Doesn’t it look cool? Especially the active state, right? Okay, enough with the metro theme.

看起来不酷吗？ 尤其是活跃状态，对吗？ 好吧，地铁主题就足够了。

Let’s try something lighter. This one is transparent with a thick border and a subtle shadow.

让我们尝试一些更轻的东西。 这是透明的，带有粗边框和微妙的阴影。

.bordered-link {
    display: inline-block;
    padding: 8px;
    border: 3px solid #FCB326;
    border-radius: 6px;
    box-shadow: 
        0 2px 1px rgba(0, 0, 0, 0.2), 
        inset 0 2px 1px rgba(0, 0, 0, 0.2);
    /* Font styles */
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    color: #222;
}

.bordered-link:hover {
    border-color: #FDD68B
}

.bordered-link:active {
    border-color: #FEE8BD
}

Let’s create something a little bit more appealing.

让我们创建一些更具吸引力的东西。

.modern {
    display: inline-block;
    margin: 10px;
    padding: 8px 15px;
    background: #B8ED01;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    transition: all 0.3s ease-out;
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.5), 
        0 2px 2px rgba(0,0,0,0.3), 
        0 0 4px 1px rgba(0,0,0,0.2); 
    /* Font styles */
    text-decoration: none;
    text-shadow: 0 1px rgba(255,255,255,0.7);
}

.modern:hover {
    background: #C7FE0A
}

We can even add some more complex box-shadows with the following class:

我们甚至可以使用以下类添加一些更复杂的盒形阴影：

.embossed-link {
    box-shadow: 
        inset 0 3px 2px rgba(255,255,255,.22), 
        inset 0 -3px 2px rgba(0,0,0,.17), 
        inset 0 20px 10px rgba(255,255,255,.12), 
        0 0 4px 1px rgba(0,0,0,.1), 
        0 3px 2px rgba(0,0,0,.2);
}

.modern.embossed-link {
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.5), 
        0 2px 2px rgba(0,0,0,0.3), 0 0 4px 1px rgba(0,0,0,0.2), 
        inset 0 3px 2px rgba(255,255,255,.22), 
        inset 0 -3px 2px rgba(0,0,0,.15), 
        inset 0 20px 10px rgba(255,255,255,.12), 
        0 0 4px 1px rgba(0,0,0,.1), 0 3px 2px rgba(0,0,0,.2);
}

.modern.embossed-link:active {
    box-shadow: 
        inset 0 -2px 1px rgba(255,255,255,0.2), 
        inset 0 3px 2px rgba(0,0,0,0.12);
}

Last, but not least, a class adding a pseudo-element to make it look like as if the button is a part of the background.

最后但并非最不重要的一点是，一个类添加了一个伪元素以使其看起来好像按钮是背景的一部分。

.socle {
    position: relative;
    z-index: 2;
}

.socle:after {
    content: "";
    z-index: -1;
    position: absolute;
    border-radius: 6px;
    box-shadow: 
        inset 0 1px 0 rgba(0,0,0,0.1),
        inset 0 -1px 0 rgba(255,255,255,0.7);
    top: -6px;
    bottom: -6px;
    right: -6px;
    left: -6px;
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
}

You may want to change the value of the border-radius to suit your needs. Depending on the border-radius of the button, it may look weird.

您可能需要更改边界半径的值以适合您的需求。 根据按钮的边框半径，它可能看起来很奇怪。

That’s it pretty much with the links, but now you can create your own class to give some basic styles to your anchors.

链接几乎就是这样，但是现在您可以创建自己的类，为锚点提供一些基本样式。

输入项 (Inputs)

As I’ve said in my previous tutorial, forms are pretty much everywhere in the web, and so are inputs. Particularly text inputs. Sadly, the default styles for inputs are pretty ugly. I’m sure we can do better!

就像我在上一教程中所说的那样，表单几乎遍历网络中的所有地方，输入也是如此。 特别是文本输入。 可悲的是，输入的默认样式非常难看。 我相信我们可以做得更好！

标记 (The Markup)

<input type="text" placeholder="Input name">

CSS(The CSS)

Let’s start with something very simple: replacing the default border and adding a border radius.

让我们从一个非常简单的事情开始：替换默认边框并添加边框半径。

.simple-input {
    display: block;
    padding: 5px;
    border: 4px solid #F1B720;
    border-radius: 5px;
    color: #333;
    transition: all 0.3s ease-out;
}

.simple-input:hover {
    border-radius: 8px
}

.simple-input:focus {
    outline: none;
    border-radius: 8px;
    border-color: #EBD292;
}

Inputs are kind of weird elements, so here we set them to display: block; to make things easier. Padding is there to give some space to the content.

输入是一种奇怪的元素，因此在这里我们将它们设置为display: block; 使事情变得容易。 填充是为了给内容留一些空间。

Ever wanted to replicate iOS inputs?

是否曾经想复制iOS输入？

.mac {
    display: block;
    border: none;
    border-radius: 20px;
    padding: 5px 8px;
    color: #333;
    box-shadow: 
        inset 0 2px 0 rgba(0,0,0,.2), 
        0 0 4px rgba(0,0,0,0.1);
}

.mac:focus {
    outline: none;
    box-shadow: 
        inset 0 2px 0 rgba(0,0,0,.2), 
        0 0 4px rgba(0,0,0,0.1), 
        0 0 5px 1px #51CBEE;
}

Let’s try something with a gradient as a background and some inset box shadow.

让我们尝试使用渐变作为背景以及一些内嵌框阴影的方法。

.depth {
    display: block;
    border: 1px solid rgba(255,255,255,0.6);
    background: linear-gradient(#eee, #fff);
    transition: all 0.3s ease-out;
    box-shadow: 
        inset 0 1px 4px rgba(0,0,0,0.4);
    padding: 5px;
    color: #555;
}

.depth:focus {
    outline: none;
    background-position: 0 -1.7em;
}

As a last example, something a bit more original. Not a box, only a line. You could eventually couple this with a sweet font, and you have a nice form!

最后一个例子是一些更原始的东西。 不是盒子，只有一行。 最终，您可以将其与可爱的字体结合使用，并且表格形式也不错！

.line {
    display: block;
    border: none;
    color: #333;
    background: transparent;
    border-bottom: 1px dotted black;
    padding: 5px 2px 0 2px;
}

.line:focus {
    outline: none;
    border-color: #51CBEE;
}

最后的话(Final words)

Designing out of context is difficult. But having those kinds of “pre-built classes” are a huge time saver when you’re creating a website or and application, especially when you’re not a CSS ninja.

脱离上下文进行设计很困难。 但是，当您创建网站或应用程序时，尤其是当您不是CSS忍者时，拥有这类“预构建类”可以节省大量时间。

The main idea is simply to have those classes in your style sheet (or in a specific file if your using a pre-processor) and to call them easily when you build your markup. Or simply copy the styles that you need to style something quickly.

主要思想只是在样式表中(或在使用预处理器的情况下在特定文件中)具有这些类，并在构建标记时轻松地调用它们。 或简单地复制快速样式化所需的样式。

Last, I can only encourage you to create your own design classes, suiting your tastes, fitting your needs. Take a few hours to build some sort of UI kit, it will really save you some time during the design process. You’ll thank yourself, trust me. 😉

最后，我只能鼓励您创建自己的设计类，以适合您的口味并满足您的需求。 花费几个小时来构建某种UI工具包，它确实可以为您节省设计过程中的时间。 您会感谢自己，相信我。 😉

Thank you for reading this tutorial. And as always, if you have any questions just ask, or if you have your own classes to show, please do!

感谢您阅读本教程。 和往常一样，如果您有任何问题要问，或者您有自己的课程要显示，请这样做！

翻译自: https://tympanus.net/codrops/2012/10/23/basic-ready-to-use-css-styles/

css基本样式表