css图片和边框之间有间隔_CSS和CSS3之间的区别

亦凉 2022-12-07 13:51 164阅读 0赞

![e649c2190b3e312cdb8eefcc61a846ab.png][]

css图片和边框之间有间隔

Here you will learn about difference between CSS and CSS3.

在这里，您将了解CSS和CSS3之间的区别。

Cascading style sheets have entirely shaped the way we view the web; they define the means by which we create the design, layout, and display variations on different screen sizes. Created in the early days of web publishing as an answer to the need for formatting information without using HTML tags, CSS has been constantly developing and adapting to the growing needs of the web ever since. Its most recent iteration, CSS3, offers exciting new elements – but how does it differ from the original standard? Here we will take a look at CSS vs CSS3 and explore the key factors which separate them.

级联样式表完全改变了我们查看Web的方式； 它们定义了我们在不同屏幕尺寸上创建设计，布局和显示变体的方式。 CSS是在Web发布的早期创建的，旨在解决不使用HTML标签而格式化信息的需求，自此以来，CSS一直在不断发展并适应Web的不断增长的需求。 它的最新版本CSS3提供了令人兴奋的新元素-但是它与原始标准有何不同？ 在这里，我们将看一下CSS vs CSS3，并探讨将它们分开的关键因素。

### CSS简介 **(**An Introduction to CSS**)** ###

[CSS is a style language][] which defines a number of different elements of HTML documents’ layout, including fonts, margins, background images and page margins. It is a sophisticated solution to offering style rules for all kinds of HTML documents and their presentation online. Supported on all browsers, it is widely accepted as the best means of providing structure to text. By separating presentation of documents from the content of documents, website maintenance is made vastly easier and more efficient. CSS works independently of HTML and can be used along with any other XML-based markup language. For a deep dive into the world of CSS and how to get started, take a look over [this guide][] and enjoy a direct insight into the various options CSS offers you.

[CSS是一种样式语言][CSS is a style language] ，用于定义HTML文档布局的许多不同元素，包括字体，边距，背景图像和页面边距。 它是一种复杂的解决方案，可为各种HTML文档及其在线演示提供样式规则。 它受所有浏览器的支持，被广泛认为是为文本提供结构的最佳方法。 通过将文档的显示形式与文档的内容分开，网站维护变得非常容易和高效。 CSS独立于HTML运作，并且可以与任何其他基于XML的标记语言一起使用。 要深入了解CSS领域以及如何入门，请阅读[本指南][this guide]并直接了解CSS为您提供的各种选项。

![1d24a1c4730367484d284d18cdd1b6f0.png][]

### CSS3简介 **(**An Introduction to CSS3**)** ###

CSS3 has been under development since 2005 and is the latest standard for the CSS language. It is backwards compatible, meaning that it works with all previous versions of CSS without depreciating the code. Broadly, CSS3 has worked on removing old bugs and extending previous features, like the use of [transition effects][]. More specifically, however, CSS3 focuses upon mobile compatibility, working to ensure that designs can adapt to different screen sizes quickly and easily. A central role of CSS3 is to prioritize and optimize page load speed, helping to create websites that are less reliant upon image files for design elements. However, some older browsers, such as Internet Explorer 9, do not support all of CSS3’s new features.

CSS3自2005年以来一直在开发中，它是CSS语言的最新标准。 它向后兼容，这意味着它可以与所有以前CSS版本一起使用，而不会降低代码的准确性。 广泛来说，CSS3致力于消除旧的错误并扩展了以前的功能，例如[过渡效果][transition effects]的使用。 但是，更具体地说，CSS3专注于移动兼容性，以确保设计可以快速，轻松地适应不同的屏幕尺寸。 CSS3的核心作用是确定优先级并优化页面加载速度，从而帮助创建不那么依赖于设计元素图像文件的网站。 但是，某些较旧的浏览器(例如Internet Explorer 9)不支持CSS3的所有新功能。

## CSS和CSS3之间的区别 **(**Difference between CSS and CSS3**)** ##

In this table, we have drawn out the key difference between CSS and CSS3. As you will see, CSS3 has taken the properties of CSS and developed them to include new features and offer greater ease of use for designers. Importantly, CSS has come to naturally include the adopted features of the CSS2 update, which are now generally regarded as the default current features.

在此表中，我们列出了CSS和CSS3之间的主要区别。 正如您将看到的，CSS3继承了CSS的特性并将其开发为包括新功能，并为设计人员提供了更高的易用性。 重要的是，CSS已经自然地包含了CSS2更新采用的功能，这些功能现在通常被视为默认的当前功能。

<table> 
 <tbody> 
  <tr> 
   <th>CSS</th> 
   <th>CSS3</th> 
  </tr> 
  <tr> 
   <td>Compatible with all current browsers.</td> 
   <td>Incompatible with older browsers, such as IE 9.</td> 
  </tr> 
  <tr> 
   <td>Image files required to design background elements, such as borders and image gradients.</td> 
   <td>Contains elements like rounded borders that can be included using just code.</td> 
  </tr> 
  <tr> 
   <td>Animation requires coding using a scripting language.</td> 
   <td>Animation features included along with text effects, such as text shadow.</td> 
  </tr> 
  <tr> 
   <td>No use of modules – overall more complex to use.</td> 
   <td>Incorporation of modules to group categories, enabling smooth updates of individual features.</td> 
  </tr> 
  <tr> 
   <td>Single text blocks predominantly supported.</td> 
   <td>Multi-column text blocks possible, improving on-page reading and design.</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th> CSS </th> 
   <th> CSS3 </th> 
  </tr> 
  <tr> 
   <td> 与当前所有浏览器兼容。 </td> 
   <td> 与较旧的浏览器(例如IE 9)不兼容。 </td> 
  </tr> 
  <tr> 
   <td> 设计背景元素(例如边框和图像渐变)所需的图像文件。 </td> 
   <td> 包含可以仅使用代码包括的圆角边框之类的元素。 </td> 
  </tr> 
  <tr> 
   <td> 动画需要使用脚本语言进行编码。 </td> 
   <td> 包含动画效果以及文本效果，例如文本阴影。 </td> 
  </tr> 
  <tr> 
   <td> 无需使用模块-总体上使用起来更复杂。 </td> 
   <td> 将模块合并到组类别中，可以平滑更新各个功能。 </td> 
  </tr> 
  <tr> 
   <td> 主要支持单个文本块。 </td> 
   <td> 可以使用多列文本块，从而改善页面阅读和设计。 </td> 
  </tr> 
 </tbody> 
</table>

These differences clearly show the direction that CSS is taking, driven by an online environment that values smooth transitions, clean design and fast load times. Looking ahead, we can only see this trend continuing. It is broadly acknowledged that HTML6 and CSS4 are in the early stages of development, but the biggest obstacle to their release and use will be lack of browser support. Until this changes, we can expect to see small alterations being made to the CSS3 framework that continues to hone and debug the language for current users.

这些差异清楚地显示了CSS的发展方向，这是由重视平稳过渡，简洁设计和快速加载时间的在线环境所驱动的。 展望未来，我们只能看到这种趋势持续下去。 众所周知，HTML6和CSS4处于开发的早期阶段，但其发布和使用的最大障碍将是缺乏浏览器支持。 在进行此更改之前，我们可以预期会对CSS3框架进行一些小的改动，从而继续为当前用户磨练和调试该语言。

> 翻译自: [https://www.thecrazyprogrammer.com/2017/11/difference-css-css3.html][https_www.thecrazyprogrammer.com_2017_11_difference-css-css3.html]

css图片和边框之间有间隔

[e649c2190b3e312cdb8eefcc61a846ab.png]: /images/20221123/29c29d7a234141b298064538fcb4f194.png
[CSS is a style language]: https://html.com/css/
[this guide]: https://www.1and1.co.uk/digitalguide/websites/web-design/css-coding-made-easy/
[1d24a1c4730367484d284d18cdd1b6f0.png]: /images/20221123/2423db2cea6b4a229e07ee94b223ea90.png
[transition effects]: https://www.thecrazyprogrammer.com/2013/09/know-more-about-css3-transitions-and.html
[https_www.thecrazyprogrammer.com_2017_11_difference-css-css3.html]: https://www.thecrazyprogrammer.com/2017/11/difference-css-css3.html