CSS 教程

Welcome to the CSS tutorial! CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in HTML. This tutorial will guide you through the basics of CSS, including syntax, selectors, and properties.

基本语法

CSS uses a simple syntax that consists of selectors and declarations. Here's an example:

selector {
  property: value;
}

For instance, to style the h1 element, you would use:

h1 {
  color: blue;
  font-size: 24px;
}

选择器

CSS selectors are used to target elements on a webpage. Here are some common selectors:

元素选择器: element
类选择器: .class
ID选择器: #id
后代选择器: parent child
兄弟选择器: element + sibling and element ~ sibling

属性

CSS properties define how an element is styled. Here are some common properties:

颜色: color, background-color
字体: font-family, font-size
布局: margin, padding, width, height
文本: text-align, line-height, text-decoration

实践

To practice what you've learned, try editing the following HTML and CSS code:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>This is a paragraph.</p>
</body>
</html>

/* styles.css */
h1 {
  color: red;
  font-size: 20px;
}

p {
  font-size: 16px;
  text-align: center;
}

You can find more examples and resources in our CSS教程 section.

Happy coding! 🚀