前端css制作

CSS 基础语法与结构

CSS（层叠样式表）通过选择器和声明块控制HTML元素的样式。基本语法如下：

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

• 选择器：指定要样式化的HTML元素（如 p、.class、#id）。
• 声明块：包含一对花括号 {}，内部为属性-值对（如 color: red;）。

常用CSS属性

1. 文本与字体

   • color: 文字颜色（如 #FF0000 或 red）。
   • font-family: 字体类型（如 Arial, sans-serif）。
   • font-size: 字体大小（如 16px 或 1.2rem）。

2. 盒模型

   • width/height: 元素宽高。
   • margin: 外边距（如 margin: 10px auto;）。
   • padding: 内边距（如 padding: 5px;）。
   • border: 边框（如 border: 1px solid black;）。

3. 布局与定位

   

   • display: 控制显示类型（如 block、flex、grid）。
   • position: 定位方式（如 relative、absolute）。
   • flexbox 和 grid: 现代布局方案（需单独学习）。

CSS 引入方式

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

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

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

   

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

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

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

响应式设计

使用媒体查询（@media）适配不同设备屏幕：

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

• 断点通常设为 768px（平板）和 480px（手机）。

CSS 预处理器（可选）

Sass/Less 提供变量、嵌套等高级功能：

$primary-color: #333;
body {
  color: $primary-color;
  .container { width: 100%; }
}

调试与优化

• 浏览器开发者工具（F12）检查元素样式。
• 使用工具（如 PurgeCSS）删除未使用的CSS。
• 遵循 BEM 命名规范（如 .block__element--modifier）。

通过系统学习以上内容，可逐步掌握CSS的核心用法。