初学者css常见问题_如何初学者接触CSS

初学者css常见问题

When people learn CSS they often focus on Selectors and Styles. They are important but don’t spend too much time on them! Know they exist, know what they do, bookmark your favorite reference site then move on to understanding CSS as a system.

人们学习CSS时，通常会专注于选择器和样式。 它们很重要，但不要在它们上花费太多时间！ 知道它们的存在，知道它们的作用，为您喜欢的参考站点添加书签，然后继续理解CSS作为一个系统。

A key part of the CSS system is that Selectors and Styles cascade. Cascading means that Selectors can select the same element and merge or overwrite Styles. So your style sheet might overwrite someone else’s styling… and someone else (maybe even yourself!) might overwrite your styling.

CSS系统的关键部分是选择器和样式级联。 级联意味着选择器可以选择相同的元素并合并或覆盖样式。 因此，您的样式表可能会覆盖其他人的样式……而其他人(甚至您自己！)可能会覆盖您的样式。

Where do these other style sheets come from? For starters, your web browser provides a default style sheet called the User Agent Style Sheet. This default style sheet is different for every browser. For example, if you write this style block:

这些其他样式表从何而来？ 首先，您的Web浏览器提供了一个默认样式表，称为“用户代理样式表”。 每个浏览器的默认样式表都不同。 例如，如果您编写以下样式块：

button { color:red; }

Then look at the styling in the browser, you will see something like this:

然后在浏览器中查看样式，您将看到以下内容：

button { 
color: red;
appearance: button;
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark(buttontext, rgb(170, 170, 170));
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: center;
align-items: flex-start;
cursor: default;
background-color: -internal-light-dark(rgb(239, 239, 239), rgb(74, 74, 74));
box-sizing: border-box;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 6px;
border-width: 2px;
border-style: outset;
border-color: -internal-light-dark(rgb(118, 118, 118), rgb(195, 195, 195));
border-image: initial;
}

All that extra styling comes from the browser’s User Agent Style Sheet. The User Agent Style Sheet can make it tricky to tell what your CSS is doing versus what the User Agent Style Sheet is doing. One way around this, especially while learning, is to cancel out the User Agent Style Sheet by using a CSS Reset. A reset is CSS that sets most of the styles to known default values that do as little as possible. There are many CSS Resets. A common one is Eric Meyer’s CSS Reset. Just include the reset before your CSS.

所有这些额外的样式都来自浏览器的用户代理样式表。 用户代理样式表可能很难告诉您CSS正在做什么以及用户代理样式表正在做什么。 解决此问题的一种方法(尤其是在学习时)是通过使用CSS重置来取消用户代理样式表。 重置是CSS，它将大多数样式设置为已知的默认值，这些值的作用尽可能小。 有许多CSS重置。 常见的是Eric MeyerCSS Reset 。 只需在CSS之前添加重置即可。

The cascade looks like this: User Agent CSS -> CSS Reset -> Your CSS.

级联如下所示：用户代理CSS-> CSS重置->您CSS。

Note, a Reset may not overwrite all User Agent CSS styles so you may still have some random styles sneaking into your CSS. For example, Eric Meyer’s Reset doesn’t reset button styling.

请注意，“重置”可能不会覆盖所有用户代理CSS样式，因此您可能仍有一些随机样式潜入CSS。 例如，Eric Meyer的“重置”不会重置按钮样式。

Next is to understand that your own CSS (or someone else’s CSS that you include) may inadvertently modify your CSS without you knowing it or meaning to. An obvious example of this is specifying a style using a selector that modifies all elements of a type. All elements will get that style!

接下来是要了解您自己CSS(或您包括的其他人CSS)可能会在不知不觉或无意的情况下无意间修改了CSS。 一个明显的例子是使用选择器指定样式，该选择器修改类型的所有元素。 所有元素都将具有该样式！

Because of this, most people prefer to write Selectors using classes rather than element types. Classes tend to be flexible, you can create infinite numbers of them, and a single element can have multiple classes.

因此，大多数人更喜欢使用类而不是元素类型来编写选择器。 类通常是灵活的，您可以创建无限数量的类，并且单个元素可以具有多个类。

Multiple classes let you mix and match your styles. For example, you can have classes called button, dark and light. This lets you specify a dark button and a light button without writing the same styles over and over.

多个类使您可以混合和匹配样式。 例如，您可以具有称为按钮，深色和浅色的类。 这使您可以指定深色按钮和浅色按钮，而不必一遍又一遍地编写相同的样式。

<button class="button light"></button
<button class="button dark"></button>

Another way to prevent your CSS from accidentally “infecting” elements you didn’t mean to modify is to use more complex, specific selectors that limit your CSS to very specific elements.

防止CSS意外“感染”您不想修改的元素的另一种方法是使用更复杂的特定选择器，将CSS限制为非常特定的元素。

As well as cascading Styles, Styles on a container of your element might also affect your element’s Style. Because Styles can interact badly with other Styles for so many reasons, the best way to test your CSS is to use [JSFiddle](https://jsfiddle.net/) or [CodePen](https://codepen.io/) with just the styles and bare minimum elements you want to test or understand. This guarantees your sample CSS is “clean and working”. When you integrate it back into your main project and it doesn’t work, you can assume it’s a bad interaction with other CSS rather than bad CSS.

除层叠样式外，元素容器上的样式也可能会影响元素的样式。 由于多种原因，样式可能无法与其他样式交互，因此测试CSS的最佳方法是使用[JSFiddle]( https://jsfiddle.net/ )或[CodePen]( https://codepen.io/ )仅包含您要测试或理解的样式和最低限度的元素。 这样可以保证您的示例CSS是“干净且可运行的”。 当您将其重新集成到主项目中并且不起作用时，您可以认为这是与其他CSS的不良交互，而不是不良CSS。

Browsers like Chrome and Firefox can show you the styles that are being applied to your elements, let you edit them, and even help you track down where the styles are coming from. Never believe that only your CSS is styling an element! How to see CSS on an element in Chrome. How to do it in Firefox.

Chrome和Firefox等浏览器可以向您显示要应用于元素的样式，可以对其进行编辑，甚至可以帮助您跟踪样式的来源。 永远不要相信只有CSS可以样式化元素！ 如何在Chrome中的元素上查看CSS 。 如何在Firefox中进行操作。

There is a lot of complexity how Styles work. It’s not worth it to memorize, understand, or even recognize every style. However, it is a good idea to get a rough understanding of shared principles of most styles, as this understanding mostly applies to every style. Check out this article on CSS margin, padding, content, and border. Skim this style explanation, mainly to see how insanely complicated Styles can get. Then get a feel for standard flow, Box, FlexBox and Grid. But you don’t need to understand them deeply until you need them.

样式的工作方式非常复杂。 记住，理解甚至识别每种风格都是不值得的。 但是，最好大致了解大多数样式的共享原理，因为这种理解主要适用于每种样式。 查看有关CSS边距，填充，内容和border的文章。 略过此样式说明，主要是看复杂的样式如何变得疯狂。 然后体验一下标准流程，Box，FlexBox和Grid。 但是，除非需要它们，否则您无需深入了解它们。

CSS is always improving and growing. This means a lot of information about CSS is out-of-date. It also means that some features of CSS might not have been implemented by all browsers yet! Always check the date of your information and consult a website like Can I Use ___? to ensure your CSS can be used on most browsers. Also, look for multiple examples of solutions as newer solutions are often simpler and easier than older solutions.

CSS一直在进步和发展。 这意味着许多关于CSS的信息都是过时的。 这也意味着CSS的某些功能可能尚未被所有浏览器实现！ 始终检查您的信息日期，并访问“我可以使用___吗？”之类的网站。 以确保您CSS可以在大多数浏览器上使用。 另外，寻找解决方案的多个示例，因为较旧的解决方案通常较新的解决方案更简单，更容易。

Cascading Style Sheets can be very powerful but also very frustrating. Make sure your styles aren’t being overwritten or interacting badly by using CSS Resets and isolating your CSS in JSFiddles. Know that Selectors and Styles can be super complex! Don’t bother trying to learn them all, just know they exist, know what they generally do, and study them when you need them.

级联样式表可能非常强大，但也很令人沮丧。 通过使用CSS重置并在JSFiddles中隔离CSS，确保样式不会被覆盖或交互不正确。 知道选择器和样式可能非常复杂！ 不要费心尝试全部学习，只要知道它们的存在，知道它们的一般用途，并在需要时研究它们。

Further Reading: How to Learn CSS

进一步阅读：如何学习CSS

翻译自: https://medium.com/@doomgoober/how-to-approach-css-as-a-beginner-66258fd95b50

初学者css常见问题