什么是CSS?

点击打开在线编译器，边学边练

一、什么是CSS?

1. CSS指层叠样式表 (Cascading Style Sheets)；

2. 样式定义如何显示 HTML元素；

3. 样式通常存储在样式表中；

4. 把样式添加到HTML4.0中，是为了解决内容与表现分离的问题；

5. 外部样式表可以极大提高工作效率；

6. 外部样式表通常存储在 CSS文件中；

7. 多个样式定义可层叠为一个；

8. 在学习CSS之前，你需要具备HTML的基本知识。

总的来说，CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、为什么说CSS是网页的美容师？

CSS是层叠样式表(CascadingStyleSheets)的简称，有时我们也会称之为CSS样式表或级联样式表。

CSS是也是一种标记语言，CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等）、图片的外形（宽高、边框样式边距等）以及版面的布局和外观显示样式。CSS让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS可以美化HTML，让HTML更漂亮让页面布局更简单。

总结:

1. HTML主要做结构,显示元素内容；

2. CSS美化HTML,布局网页；

3. CSS最大价值:由HTML专注去做结构呈现，样式交给CSs，即结构(HTML)韦样式(CSS相分离。

三、为什么使用CSS？

1. CSS允许您针对HTML元素应用特定的样式；

2. CSS的主要好处在于，它允许你将样式与页面内容进行分离；

3. 仅使用HTML，样式将和页面内容格式混杂在一起，这样的页面将会变得难以维护；

4. 所有的web页面样式都可以（也应该）从HTML文档中分离出来，建立成一个单独的CSS文件再进行引用。

四、CSS的优点有那些？

1. 节省时间：可以编写一次CSS，然后在多个HTML页面中通过外部引入多次重复使用；

2. 页面加载速度更快：通过使用CSS，就不需要每次都编写HTML标记属性，只需要编写一个标记的CSS规则，并将其应用于该标记的所有实例，因此代码大大减少也就意味着下载时间短；

3. 易于维护：如果要进行全局更改，则只需更改样式，所有网页中的所有元素都将会自动更新；

4. 多设备兼容性：样式表允许针对多种不同类型的设备进行优化内容；

5. 浏览器在样式表中从上到下读取样式定义。这也说明我们在样式表中定义的样式将覆盖样式表中先前定义的任何先前样式，不过我们可以在后面的元素中重新定义则不会被覆盖。

五、为什么使用CSS？

它可以分离页面的样式和内容。

六、CSS的作用?

控制web文档的外观样式。

七、CSS 语言的特点

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

1. 丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2. 易于使用和修改

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

3. 多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

4. 层叠

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

5. 页面压缩

在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。

在这里给大家举一个css的例子：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
h1 {
  color: white;
  text-align: center;
}
p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>
<h1>我的第一个 CSS 实例</h1>
<p>这是一个段落。</p>
</body>
</html>

运行结果如图：

css实例