第一个例子

例子来自W3School TIY Editor, 直接打开链接参与本教程. 或者在电脑上新建一个a.html文件, 然后用文本编辑器打开, 输入以下代码:

如果没接触过html, 先看html教程的第一篇文章.

<!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>

在本地编辑的需要用浏览器打开a.html文件才能看到以下效果, 在线编辑的点击运行代码之后可以直接看到效果, 刚打开链接时无需点击.

image-20220525190831971

<style></style>叫做样式标签, 写在里面的代码就是CSS代码. 

body {
  background-color: lightblue;
}

上面的代码表示, 选择所有<body></body>标签, 设置它们的背景颜色为亮蓝色.

h1 {
  color: white;
  text-align: center;
}

上面的代码表示, 选择所有<h1></h1>标签, 设置文本颜色为白色, 设置文字排列为居中, 此时文字会在body标签内居中显示.

p {
  font-family: verdana;
  font-size: 20px;
}

上面的代码表示, 选择所有的<p></p>标签, 设置字体为verdana, 字体大小为20像素.

更多教程请看CSS 教程 (w3school.com.cn)