网站制作css用法

CSS 基础语法

CSS（层叠样式表）用于控制网页的样式和布局。基本语法由选择器和声明块组成：

选择器 {
  属性: 值;
  属性: 值;
}

例如：

p {
  color: blue;
  font-size: 16px;
}

选择器类型

• 元素选择器：直接使用 HTML 标签名（如 p、h1）。
• 类选择器：以 . 开头（如 .header），通过 HTML 的 class 属性调用。
• ID 选择器：以 # 开头（如 #main），通过 HTML 的 id 属性调用。
• 后代选择器：用空格分隔（如 div p 选择 div 内的所有 p 元素）。

常用 CSS 属性

• 文本样式：

  color: #333;          /* 文字颜色 */
  font-family: Arial;    /* 字体 */
  text-align: center;    /* 对齐方式 */

• 盒模型：

  width: 100px;         /* 宽度 */
  padding: 10px;        /* 内边距 */
  margin: 20px;         /* 外边距 */
  border: 1px solid #000; /* 边框 */

• 背景与颜色：

  background-color: #f0f0f0;
  background-image: url("image.jpg");

布局技术

• Flexbox：弹性布局，适合一维排列。

  .container {
    display: flex;
    justify-content: space-between;
  }

• Grid：网格布局，适合二维结构。

  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

响应式设计

通过媒体查询适配不同设备：

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

引入 CSS 的方式

1. 内联样式：直接在 HTML 标签中使用 style 属性。

   <p style="color: red;">文本</p>

2. 内部样式表：在 HTML 的 <style> 标签中编写。

   <style>
     p { color: blue; }
   </style>

3. 外部样式表：通过 <link> 引入独立的 .css 文件（推荐）。

   <link rel="stylesheet" href="styles.css">

调试技巧

• 使用浏览器开发者工具（F12）检查元素样式。
• 通过 border: 1px solid red; 临时高亮元素边界。

以上内容涵盖了 CSS 的核心用法，可根据实际需求进一步学习高级特性如动画、变量（CSS Custom Properties）等。