Web 品质样式表学习笔记

什么是Web品质样式表

Web品质样式表，又被称为CSS（Cascading Style Sheets），是一种用于网页设计的样式表语言。它可以控制HTML元素的外观、布局和其他属性，如颜色、字体、背景、边框和间距等。

为什么要使用Web品质样式表

使用Web品质样式表有以下几个好处：

可以使网页更加美观，提升用户体验。
可以降低网页的加载时间，增强网站的性能。
可以减少HTML代码量，提高代码可读性和维护性。
可以方便地修改网页样式，避免重复劳动。

如何使用Web品质样式表

Web品质样式表有三种使用方式：

内部样式表：将CSS代码写在HTML文件的头部，使用style标签包裹。

htmlCopy Code
<head>
  <style>
    body {
      background-color: #f2f2f2;
    }
    h1 {
      color: red;
    }
  </style>
</head>

外部样式表：将CSS代码写在一个单独的CSS文件中，并在HTML文件中引入。
```
htmlCopy Code
<head>
  <link rel="stylesheet" href="style.css">
</head>
```
内联样式：将CSS代码直接写在HTML标签的style属性中。
```
htmlCopy Code
<h1 style="color: red;">Hello, World!</h1>
```

CSS实例

以下是一些常用的CSS样式:

cssCopy Code
/* 设置字体 */
body {
  font-family: Arial, sans-serif;
}

/* 设置背景 */
body {
  background-color: #f2f2f2;
}

/* 设置颜色 */
h1 {
  color: red;
}

/* 设置边框 */
img {
  border: 1px solid #ddd;
}

/* 设置圆角 */
button {
  border-radius: 5px;
}

/* 设置阴影 */
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

以上这些样式只是Web品质样式表中的冰山一角，如果想要深入了解CSS，可以查看相关的教程和文档。