css简介_CSS简介

css简介

Note: The following tutorial expects readers to have some basic knowledge of HTML. If not, we strongly recommend you refer the HTML course here.

注意：以下教程希望读者具有HTML的一些基本知识。 如果没有，我们强烈建议您在此处参考HTML课程。

Suppose you have a brilliant startup idea or want to create a website for your business. Chances are time and money are a major concern to the aspiring web developer. Fortunately enough, just by mastering HTML and CSS you can develop amazing websites, saving both time and money, while improving your visitor's experience.

假设您有一个出色的创业想法或想为您的企业创建一个网站。 对于有抱负的Web开发人员来说，时间和金钱是一个主要问题。 幸运的是，仅通过掌握HTML和CSS，您就可以开发出令人赞叹的网站，既节省时间和金钱，又可以改善访问者的体验。

Cascading Style Sheet (www.w3.org/Style/CSS/) offers what web designers have been clamoring for over the years: more control over the layout of your website. As you might already know, HTML can also be used for formatting content on a webpage. For example, many of the HTML tags support the align attribute, which provides simple support for text alignment.

级联样式表( www.w3.org/Style/CSS/ )提供了网页设计师多年来一直在呼吁的东西：对网站布局的更多控制。 您可能已经知道，HTML也可以用于格式化网页上的内容。 例如，许多HTML标记都支持align属性，该属性为文本对齐提供了简单的支持。

<h1 align = "center">BIG CENTERED TEXT!</h1>

Now for those who come solely from an HTML background, knowing what a tag does, the align attribute is somewhat of a win-win situation. However most HTML tags also contain attributes like size, color etc., which are purely presentational.

现在，对于那些仅来自HTML背景并且知道标签作用的人来说，align属性在某种程度上是双赢的。 但是，大多数HTML标签还包含大小，颜色等属性，这些属性纯粹是表示性的。

Consider the <blink> tag. The following markup will cause the text to blink on Mozilla Firefox:

考虑<blink>标记。 以下标记将导致文本在Mozilla Firefox上闪烁：

<blink>Firefox is the King of Internet Browsers!</blink>

The problem with using HTML for formatting is that HTML is not very good at it, nor was it designed for it. Fortunately, we have a better way of formatting our webpage – Style Sheets.

使用HTML进行格式化的问题在于HTML并不是很擅长，也不是针对HTML设计的。 幸运的是，我们有一种更好的格式化网页的方式- 样式表 。

Here are 5 reasons why you should consider using CSS to style your website:

您应该考虑使用CSS设置网站样式的5个原因：

1. Consistency

   一致性

   By making one change to your CSS file, you can change the look for your entire website. The bigger your website, the more time CSS saves you. Also, with CSS, all the styles across your website are consistent.

   通过对CSS文件进行一次更改，您可以更改整个网站的外观。 您的网站越大，CSS为您节省的时间就越多。 此外，使用CSS，您网站上的所有样式都是一致的。

2. Bandwidth Reduction

   减少带宽

   When we write the styling code separately in a CSS file, we leave pure content in the HTML page, thereby reducing its size. When a website is loaded, the CSS file is loaded once and then cached by the browser, and for consecutive requests only the HTML page is requested, hence significantly reducing the bandwisth usage. Your reduced bandwidth needs will result in a faster load time and could cut your web hosting costs.

   当我们在CSS文件中分别编写样式代码时，我们会将纯内容保留在HTML页面中，从而减小了其大小。 加载网站时，CSS文件将加载一次，然后由浏览器缓存，并且对于连续的请求，仅请求HTML页面，因此大大减少了带宽使用。 您减少的带宽需求将导致更快的加载时间，并可以减少您的虚拟主机成本。

3. Search Engines

   搜索引擎

   CSS is considered a clean coding technique, which means search engines won't have to struggle to read its content. Also, using CSS will leave your website with more content than code – and content is critical to your search engine success.

   CSS被认为是一种干净的编码技术，这意味着搜索引擎将不必费劲地阅读其内容。 另外，使用CSS会使您的网站内容比代码更多–内容对于搜索引擎的成功至关重要。

4. Browser Compatibility

   浏览器兼容性

   CSS stylesheets increase your website's adaptability and ensure that more visitors will be able to view your website in the way you intended.

   CSS样式表可提高您网站的适应性，并确保更多的访问者能够以您期望的方式查看您的网站。

5. Viewing options

   查看选项

   Another common web design concern is the increasing need to make websites available for different media. CSS can help you tackle this challenge by allowing the same markup page to be presented in different viewing styles, for example, you may create a separate stylesheet for print or for a mobile device.

   另一个常见的Web设计问题是，越来越需要使网站可用于不同的媒体。 CSS可以通过允许以不同的查看样式显示相同的标记页面来帮助您解决这一难题，例如，您可以为打印或移动设备创建单独的样式表。

CSS1 first marked its appearance in 1996 and CSS2 quickly followed it, making some significant improvements. The current version, CSS3 has added many useful features. Newer browsers are far better than older ones in terms of performance and support, but issues still remain. Browser bugs still exist, developer education and uptake is lagging.

CSS1于1996年首次标志着它的出现，而CSS2紧随其后，进行了重大改进。 当前版本， CSS3添加了许多有用的功能。 较新的浏览器在性能和支持方面要比旧的浏览器好得多，但是仍然存在问题。 浏览器错误仍然存​​在，开发人员的教育和采用水平滞后。

But don't worry! We are here to help you learn the art of styling webpages step by step. Now, before we move on to our first look at CSS, check out the pictures below. With only HTML you can build pretty basic forms, but add a little CSS to it and you have a far better looking webpage at your service!

但是不用担心！ 我们在这里可以帮助您逐步了解网页样式的技巧。 现在，在我们开始看CSS之前，请查看下面的图片。 仅使用HTML，您可以构建非常基本的表单，但向其中添加一些CSS，就可以得到一个外观更好的网页！

Before CSS

在CSS之前

After CSS

在CSS之后

翻译自: https://www.studytonight.com/cascading-style-sheet/introduction-to-css

css简介