请按照以下步骤成为CSS Superstar

by Preetish HS

通过Preetish HS

请按照以下步骤成为CSS Superstar (Follow these steps to become a CSS Superstar)

CSS (Cascading Style Sheets) is one of the core technologies used for building webpages. Since it is the ONLY style sheet language that browsers can understand, it's important to learn CSS in depth to master web development.

CSS(层叠样式表)是用于构建网页的核心技术之一。 由于这是浏览器可以理解的唯一样式表语言，因此深入学习CSS以掌握Web开发非常重要。

It’s very easy to get started with CSS. With just a few hours of training, you can easily style texts, elements and layouts. However, it becomes progressively difficult and soon you’ll come to a situation where your code starts getting quite messy. The components which used to work before start breaking, and you google and find the fix which fixes your element but breaks 5 other elements, as the solution you found on google changed the display or position ?

开始使用CSS非常容易。 只需几个小时的培训，您就可以轻松设置文本，元素和布局的样式。 但是，它变得越来越困难，很快您就会遇到代码变得非常混乱的情况。 在开始断裂之前，曾经可以工作的组件，然后您在Google上搜索并找到可修复您的元素但破坏了5个其他元素的修复程序，因为您在Google上找到的解决方案更改了display或position ？

为什么正确学习CSS很重要 (Why learning CSS the right way is important)

If you don’t have a deeper understanding of the basics, CSS becomes more like a trial and error method. You’ll try different values for different properties and finally keep the one which sort of works close to what you wanted without actually understanding how it works.

如果您对基础知识没有更深入的了解，CSS会变得更像是反复试验的方法。 您将为不同的属性尝试不同的值，最后在不真正了解其工作原理的情况下，使那种工作接近所需的工作。

You’ll start googling basic things like “how to centre two divs” or “how to align a div and a text vertically” and copy paste the code from StackOverflow or codePen every time. Back in those days, when flexbox was not so popular, “how do you align a div both vertically and horizontally in a page?” was a classic CSS interview question. Many beginners could get the horizontal part right but only a few got the vertical part right too.

您将开始搜索诸如“如何使两个div居中”或“如何垂直对齐div和文本”之类的基本内容 ，然后每次都复制并粘贴来自StackOverflow或codePen的代码。 过去， Flexbox并不那么流行， “如何在页面中垂直和水平对齐div？” 是一个经典CSS面试问题。 许多初学者可以正确使用水平部分，但也只有少数人可以正确使用垂直部分。

路线图？ (The Roadmap ??)

1.基础知识？ (1. The Basics ?)

If you are just starting web development, learn some basics of HTML before starting CSS. In CSS, first read the theory on what CSS is, how it works in the browser, and its basic syntax and usage.

如果您刚刚开始Web开发，请在开始CSS之前学习HTML的一些基础知识。 在CSS中，首先阅读有关CSS是什么，在浏览器中如何工作以及其基本语法和用法的理论。

Learn about the different kinds of stylesheets available, their differences, selectors, and basic styling such as font-size, width, height etc.

了解可用的各种样式表，它们的区别，选择器和基本样式，例如font-size ， width ， height等。

You can get started by going through the tutorials at MDN.

您可以开始阅读MDN上的教程。

2. CSS Box模型？ (2. CSS Box Model ?)

Understand the basics of CSS box model and the properties associated with it such as margin, border, padding etc

了解CSS框模式 l的基础以及与之相关的属性，例如margin ， border ， padding等

3.图像和背景？ (3. Images and Background ?)

Images make the webpage come alive. There are many ways to add an image such as image tags, adding background colours/gradients and background images to various other tags. You could also apply what you have learnt previously such as setting borders to images or use multiple images and develop a simple gallery.

图片使网页生动起来。 有多种添加图像的方法，例如图像标签，将背景颜色/渐变和背景图像添加到其他各种标签中。 您还可以应用以前学到的知识，例如为图像设置边框或使用多个图像并开发一个简单的图库。

<img src="../images/wallpaper.jpg" ><div class="image" > </div>

.image {   background-image: url(../images/wallpaper.jpg);}

4.显示和位置？ (4. Display and Position ?)

These two are some of the most import properties in CSS where you need to pay attention to understand them correctly. Knowing these two properties well can make your CSS journey a lot smoother.

这两个是CSS中最重要的导入属性，您需要注意正确理解它们。 充分了解这两个属性可以使您CSS旅程更加顺畅。

display: block | inline | inline-block | table | etc

Understand how each of these display properties are used. You’ll start to notice some HTML elements such as <div&gt; &lt;p> or <h1> behave like display: block and some elements like <img> <span&gt; behave like display: inline.

了解如何使用这些display属性。 您会开始注意到一些HTML元素，例如<d i v&g t;。 ＆ lt;p >或<H 1> behave l IKE显示：块和S ome e升ements像<IMG > <span&g吨; 行为类似于display：inline。

position: static | absolute | relative | fixed | sticky

This is one of the properties where even experienced programmers make mistakes. Learn how each of them works, how the position of one element affects its siblings or parent, in what situations you use them, etc.

这是即使经验丰富的程序员也会犯错误的属性之一。 了解每个元素的工作方式，一个元素的位置如何影响其兄弟姐妹或父元素，在什么情况下使用它们，等等。

This step is so important that you can repeat it again and again till you understand!

这一步非常重要，您可以一次又一次地重复直到您理解为止！

float: left | right

Though float layouts are a bit old school now, there are many old websites which still uses float layouts.

尽管浮动布局现在有点老套了，但仍有许多旧网站仍在使用浮动布局。

5.颜色，字体，列表和表格☑️ (5. Colours, Fonts, lists and Tables ☑️)

Understand different colour formats such as HEX code, rgb, rgba, hsl, hsla, transparent etc

理解不同的颜色格式，例如HEX代码， rgb ， rgba ， hsl ， hsla ， transparent等

color: white;color: #fff;color: rgb(255, 255, 255);color: rgba(255, 255, 255, 1);color: hsl(0, 100%, 100%);color: hsla(0, 100%, 100%, 1);color: transparent;

Learn how to use different fonts. Some fonts are not available on all browsers, so you’ll need to learn to add fonts manually with woff or ttf files or importing google fonts.

了解如何使用不同的字体。 某些字体并非在所有浏览器上都可用，因此您需要学习使用woff或ttf文件手动添加字体或导入Google字体。

CSS can turn a basic unordered list <ul> into a beautiful navigation bar! Years ago tables were used to create screen layouts, thank goodness we don’t do that anymore! ?

CSS可以将基本的无序列表 < ul>变成漂亮的导航栏！ 多年前，表格已用于创建屏幕布局，谢天谢地，我们不再这样做了！ ？

6.伪类和组合器➕ (6. Pseudo-classes and Combinators ➕)

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). A pseudo-class can be as simple as :hover or :visited or something complex like :nth-last-of-type(odd)

CSS 伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。 伪类可以像:hover或:visited一样简单，也可以像： nth-last-of-type(odd)这样复杂。

Combinators help us apply styles to child elements or siblings easily without having to create new classes for each of them.

组合器帮助我们轻松地将样式应用于子元素或同级元素，而不必为每个子元素或同级元素创建新的类。

/* all the paragraph elements inside the container will have color red */

.container > p {  color: yellow;}

7.调试和开发工具？ (7. Debugging and Dev tools ?)

CSS doesn't throw any errors. It silently breaks the UI if you don’t get the styles correct ? so learning how to use Dev tools is very important.

CSS不会引发任何错误。 如果您没有正确设置样式，它会以无提示方式破坏UI？ 因此学习如何使用开发工具非常重要。

Chrome Dev tools is an amazing tool for web developers. It's packed with a lot of great features for debugging your website in real-time and also has performance checking tools like lighthouse built into it.

Chrome开发人员工具对于网络开发人员来说是一个了不起的工具。 它具有许多用于实时调试网站的强大功能，并且还内置了诸如灯塔之类的性能检查工具。

8.实践实践实践？ (8. Practice Practice Practice ?)

The contents you learnt above are enough to develop a basic website, so at this point you should start practising by developing small websites. You’ll come across various challenges when you build a real application. For your practice, you can develop a simple website for a resort, or build an image gallery, or a blog, or you can also build a few basic features of your favourite social media such as Facebook or Instagram.

您上面学到的内容足以开发一个基本的网站，因此，此时您应该从开发小型网站开始练习。 构建真正的应用程序时，您会遇到各种挑战。 在实践中，您可以为度假胜地开发一个简单的网站，或建立一个图片库或博客，或者还可以建立自己喜欢的社交媒体(如Facebook或Instagram)的一些基本功能。

9.响应式网页设计 (9. Responsive Web Design ??)

After learning web development for desktop there are a lot of other devices through which the websites are accessed. Supporting these devices is equally important. Before the Responsive design got popular, developers used to design a separate website for mobiles, a separate website for touch-enabled devices etc. remember m.facebook.com and touch.facebook.com?

在学习了针对台式机的Web开发之后，还有许多其他可以访问网站的设备。 支持这些设备同样重要。 在响应式设计流行之前，开发人员曾经为手机设计了一个单独的网站，为支持触摸的设备设计了一个单独的网站，等等。还记得m.facebook.com和touch.facebook.com吗？

There are 3 important things in Responsive web design:

响应式网页设计中有3件重要的事情：

Fluid Layouts:

流体布局：

Width set with px does not scale based on the browser window. To make the elements scale based on the browser size, we need to create fluid layouts by setting the sizes in % or rem units.

用px设置的宽度不会根据浏览器窗口缩放。 为了使元素根据浏览器的大小缩放，我们需要通过以%或rem单位设置大小来创建流畅的布局。

Media Queries:

媒体查询：

A media query is a technique to include a block of CSS properties only if a certain condition is true. We set breakpoints based on our design and change the CSS depending on the browser width.

媒体查询是一种仅在满足特定条件时才包含CSS属性块的技术。 我们根据设计设置断点，并根据浏览器宽度更改CSS。

@media only screen and (max-width: 600px) {  body {    background-color: lightblue;  }}

@media only screen and (max-width: 600px) { body { background-color: lightblue; } }

Responsive images:

响应图像：

Images scale down as the width of the browser window decreases or if the website is viewed in mobile devices. Sometimes it would be difficult to focus on the important details on a particular image so we’d need to use different images for different screens.

随着浏览器窗口宽度的减小或在移动设备中查看网站，图像会按比例缩小。 有时很难专注于特定图像的重要细节，因此我们需要针对不同的屏幕使用不同的图像。

10. Flexbox和网格◼️⬛？ (10. Flexbox and Grid ◼️ ⬛ ?)

It’s been around 10 years(!) since Flexbox was first introduced, but it was incorporated only recently in 2015. — source

它已经在10年以来Flexbox的首次推出，但它在2015年只有新近引入的(！) - 源

Flexbox and Grid are the styles used to create flexible layouts, and they make our lives so much easier! This is one of the best things that has ever happened to CSS. ?

Flexbox和Grid是用于创建灵活布局的样式，它们使我们的生活变得更加轻松！ 这是CSS发生过的最好的事情之一。 ？

The layout shown below would have taken more than 300 lines of CSS code without Flexbox or Grid.

如果没有Flexbox或Grid，下面显示的布局将占用300多行CSS代码。

11.变换，过渡和动画？ (11. Transforms, transitions and animations ?)

Learning basic transforms and transitions will come in handy if you want to create an interactive web page with moving parts on mouse events or keyboard events such as hover or click.

如果您想创建一个交互式网页，其中包含鼠标事件或键盘事件(如悬停或单击)上的活动部件，则学习基本的转换和过渡将非常有用。

Before CSS3, animations were done mostly using jQuery — A JavaScript library. Now CSS has become so powerful that we can do complex animations without any JavaScript.

在CSS3之前，动画大多使用jQuery(JavaScript库)完成。 现在CSS已经变得如此强大，以至于我们可以不用任何JavaScript就能制作复杂的动画。

12.预处理器✴️ (12. Preprocessors ✴️)

CSS preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations. Some of the popular ones are SASS, LESS, STYLUS and POSTCSS.

CSS预处理器是脚本语言，可扩展CSS的默认功能。 它们使我们能够在CSS代码中使用逻辑，例如变量，嵌套，继承，mixin，函数和数学运算。 一些流行的是SASS ， LESS ， STYLUS和POSTCSS 。

The SCSS format of SASS is more widely used, so it's good to get started with SASS for development.

SASS的SCSS格式得到了更广泛的使用，因此开始使用SASS进行开发是很好的。

The autoprefixer plugin of POSTCSS makes your CSS rules compatible across various browsers by adding extra rules such as -moz- and-webkit-.

autoprefixer插件通过添加额外的规则(例如-moz-和-webkit- ，使您CSS规则在各种浏览器中兼容。

13.框架 ？ (13. Frameworks ?)

Learning frameworks such as Bootstrap, Semantic-UI or Materialize is optional but very useful for faster development as they provide a lot of styles and layouts out of the box.

诸如Bootstrap ， Semantic-UI或Materialize之类的学习框架是可选的，但对于更快的开发非常有用，因为它们提供了许多现成的样式和布局。

These Frameworks are tested across various browsers, so using these will avoid some of the compatibility issues. Most of the frameworks follow the responsive design pattern and lots of free 3rd party templates are be available to get started quickly.

这些框架已在各种浏览器上进行了测试，因此使用它们将避免某些兼容性问题。 大多数框架都遵循响应式设计模式，并且有许多免费的第三方模板可供快速使用。

14.特异性 ？ (14. Specificity ?)

“tries to modify a button style of bootstrap but fails, googles for a solution, uses !important , gets all excited thinking that’s the right fix for all the problems!” And that's how you doomed your project! ? If you understand the concept of Specificity correctly, problems regarding overlapping rules in multiple stylesheets will be reduced significantly.

“ 尝试修改自举程序的按钮样式，但失败了，谷歌寻求解决方案，使用!important ，使所有激动的想法成为解决所有问题的正确方法！ ”这就是您注定项目的方式！ ？ 如果你理解了S的概念pecificity Çorrectly，关于多个样式表重叠的规则问题将得到显著减少。

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. Each selector has a different weight, and using multiple selectors can change the specificity. If the overall specificities are equal then the order is considered. See the example below:

特异性是应用于给定CSS声明的权重，它由匹配选择器中每种选择器类型的数量决定。 每个选择器都有不同的权重，使用多个选择器可以改变特异性。 如果总体特异性相同，则考虑顺序。 请参阅以下示例：

<style>div.wrapper p.paragraph {   color: pink;}#container p{   color: violet;}p {  color: green;}.paragraph {  color: yellow;}</style><div class="wrapper" id="container">   <p class="paragraph"> This is a dummy text </p></div>

<style>div.wrapper p.paragraph { color: pink; }#container p{ color: violet; }p { color: green; }.paragraph { color: yellow; } </style><div class="wrapper" id="container"> <p class="paragraph"> This is a dummy text </p> </div>

What do you think would be the colour of the paragraph? ?

您认为该段落的颜色是什么？ ？

15. CSS体系结构？ (15. CSS Architecture ?)

Writing CSS code is easy, but writing maintainable CSS code is hard. A proper structure and method have to be followed to write good CSS code. Just following the best practices is not sufficient to write maintainable CSS.

编写CSS代码很容易，但是编写可维护CSS代码却很困难。 要编写好CSS代码，必须遵循适当的结构和方法。 仅遵循最佳实践不足以编写可维护CSS。

Some of the Architecture patterns for CSS are BEM, OOCSS, SMACSS etc. You can go through the documentation and choose whichever pattern fits your tastes and project.

CSS的一些架构模式包括BEM ， OOCSS ， SMACSS等。您可以浏览文档并选择适合您的口味和项目的任何模式。

你有它！ ？ (There you have it! ?)

Mastering CSS takes patience and lots of practice. As you start practising you'll experience the awesomeness of CSS. 15 big steps might seem daunting at first but they’re actually not. I loved each and every step, and my experience got better every time. ?

精通CSS需要耐心和大量练习。 在开始练习时，您将体验到CSS的超凡脱俗。 起初有15个重大步骤似乎令人生畏，但实际上并非如此。 我爱每一步，每次我的经验都变得更好。 ？

Thanks for reading my article. I hope that you have found this useful. If so, be sure to leave lots of claps! ? (You can leave up to 50 ?)

感谢您阅读我的文章。 我希望您发现这很有用。 如果是这样，一定要拍手！ ？ (您最多可以保留50个？)

想雇用我参加下一个项目吗？ 给我发送电子邮件至contact@preetish.in？ (Want to hire me for your next project? Drop me an email at contact@preetish.in ?)

翻译自: https://www.freecodecamp.org/news/follow-these-steps-to-become-a-css-superstar-837cd6cb9b1a/