什么是CSS

2023年8月11日

编辑

要实现一个优雅、高级、有审美趣味网站，把就必须掌握CSS。CSS是网站的各种化妆品💄，而你就是用这些化妆品给网站上妆的化妆师💅，你对这些化妆品的了解程度、以及你的化妆技巧直接决定了这个网站的最后呈现的上妆后效果。

CSS全称Cascading Style Sheets，中文翻译过来叫做层叠样式表，其实它的名字已经蕴含了它本身非常重要的工作机制，但是我们目前先不聊得这么深入。

我们先从比较浅显的层面来理解下它的这个名字，就是这个表📝，就是表格，表单 - sheet翻译过来的意思。CSS本身不可能是一个表，而是一种网页开发技术的语言，用CSS语法规则写的文件，才应该是所谓的这个表。而表格表单，我们一般都是用来去记录和存储数据，并且用这些数据去描述情况，说明问题。

如果表所记录的信息，核心的作用就是描述，那么层叠样式表，既然它是和网页有关，那么它必然是用来描述网页元素的，也就是🎏HTML文件中的各个元素（标签）。那它是如何描述的呢？

我们先来简单的用我们生活中的方式来描述一个东西。比如，你朋友问你喜欢什么类型的女生👩🏻，你可能会跟他说：

长头发的、苗条的、斯文的、别太高，一米7以下的……

如果我们把这种描述方式转换成书面的精确一些的话，比如用表格做个记录🧾：

有兴趣的女生类型
------
发型：长发
身材：苗条
性格：斯文
身高：1米七以下

那么CSS也是类似的，只不过因为CSS是一种语言，它是有自己的书写规则，所以假如我们把上面这个表格内容转换成类似CSS的写法的话，大概是这样的：

girlInterested {
	hair-style:long;
	body-shape:slim;
	personality:ladylike;
	height:under 1.7m;
}

跟我们前面的描述很像，🥳只是用英文字符，然后搭配上花括号，每一个具体的描述后面加个分号。

这就是CSS的最基本的书写方式，只不过如果我们是要写真正的CSS，我们需要描述的是网页当中的元素，而不是某个心仪的姑娘。那网页当中的元素一般有什么特性需要去描述呢？先说几个大家比较好理解的特性，也就是所谓的CSS属性：

比如，我们来描述下div元素：

div{
	height:100px; // 高
	width:200px;  // 宽
	background-color:#002021; // 背景颜色
}

从这也不难看出，所有的属性名称都是英文的，然后属性的值，不同类型的属性可以设置不同的值。

这几个演示的都是非常简单非常基础的样式属性，而CSS除了能决定🥇元素的样式，还能决定元素的🥈定位和布局，还能实现元素的🥉动画效果。CSS 的这三个能力，也是我们去学习的核心与重点。

CSS的相关属性非常非常多，当然都是各种英文字符了，如果你英文还行，其实你看很多的属性名称就知道它们是用来描述元素的什么特性。别担心，虽然CSS属性非常多，但是不需要都记住，常用的主要也就那一小部分，我们只要了解常用的，不常用的，等用到的时候再去查就好了👻。

比如像这样一个按钮，如果没有CSS，它是这样的，如果搭配上CSS，它就是这样的，感觉天差地别吧，一看就是化妆前与化妆后的对比：

//上方美化按钮所用的CSS设定
button {
  background: linear-gradient(30deg, #2152f3, #1f18de); /* 渐变背景 */
  border: none; /* 去掉按钮边框 */
  color: white; /* 字体颜色 */
  padding: 15px 32px; /* 按钮内边距 */
  text-align: center; /* 文字居中 */
  text-decoration: none; /* 去掉下划线 */
  display: inline-block; /* 行内块元素 */
  font-size: 16px; /* 字体大小 */
  border-radius: 10px; /* 圆形按钮 */
  box-shadow: 0px 2px 5px rgba(76, 70, 249, 0.2); /* 投影效果 */
  font-size: larger; /* 字体大小 */
  letter-spacing: 1px; /* 字间距 */
}

如何生效

CSS写的代码要起作用，一般有三个方式：

直接写在html文件的style标签中

//html文件
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css"> 
    <style> 👈
      button{
        color: white; /* 字体颜色 */
        padding: 15px 32px; /* 按钮内边距 */
        text-align: center; /* 文字居中 */
        text-decoration: none; /* 去掉下划线 */
        display: inline-block; /* 行内块元素 */
        font-size: 16px; /* 字体大小 */
      }
    </style>
 </head>
<body>
  <button>Button</button>
</body>

</html>

或者直接写html元素上的style属性中

//html文件
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css"> 
 </head>
<body>
  <button style="font-size:18px;color:white">Button</button> 👈
</body>

</html>

或者单独写一个扩展名为.css的文件然后通过link标签引入到html文件中

//style.css
button{
  color: white; /* 字体颜色 */
  padding: 15px 32px; /* 按钮内边距 */
  text-align: center; /* 文字居中 */
  text-decoration: none; /* 去掉下划线 */
  display: inline-block; /* 行内块元素 */
  font-size: 16px; /* 字体大小 */
}

//html文件
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css"> 👈
 </head>
<body>
  <button>Button</button>
</body>

</html>