Welcome to the CSS tutorial! This guide will help you understand the basics of Cascading Style Sheets, a language used to describe the presentation of a document written in HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

基础语法

CSS uses a simple syntax that consists of a selector and a declaration block. The selector points to the HTML element you want to style, and the declaration block contains one or more declarations that specify the style properties and values.

选择器

  • 元素选择器：直接使用 HTML 元素名称，例如 p 选择所有 <p> 元素。
  • 类选择器：使用 . 后缀，例如 .text 选择所有具有 text 类的元素。
  • ID 选择器：使用 # 后缀，例如 #header 选择具有 header ID 的元素。

属性和值

CSS 属性指定元素的样式，而值则是属性的特定设置。例如，color 属性可以用来设置文本颜色，而 red 就是它的值。

p {
  color: red;
}

实例

Here's a simple example of how CSS is used to style an HTML element:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Welcome to my website!</h1>
  <p>This is a paragraph with a specific font and color.</p>
</body>
</html>

进一步学习

To continue your learning journey, check out our HTML tutorial to understand the structure of web documents.

Here's an image to illustrate some CSS styling:

CSS_style_sample