云搭

Appearance

以下是一份适合初学者的CSS基础教程大纲，包含代码示例和核心概念讲解：

CSS 基础教程 ​

一、基础语法 ​

css
/* 注释方式 */
选择器 {
  属性: 值;
  属性: 值;
}

/* 示例 */
h1 {
  color: blue;
  font-size: 24px;
}

二、选择器 ​

css
/* 元素选择器 */
p {
  line-height: 1.5;
}

/* 类选择器 */
.text-red {
  color: red;
}

/* ID选择器 */
#header {
  background: #f0f0f0;
}

/* 后代选择器 */
nav ul li {
  display: inline-block;
}

/* 伪类选择器 */
button:hover {
  background: darkblue;
}

三、盒模型 ​

css
.box {
  width: 300px;         /* 内容宽度 */
  height: 200px;
  padding: 20px;        /* 内边距 */
  border: 2px solid #000; /* 边框 */
  margin: 30px;         /* 外边距 */
  box-sizing: border-box; /* 盒模型计算方式 */
}

四、常用属性 ​

css
/* 颜色与背景 */
body {
  color: rgba(0,0,0,0.8);  /* 文字颜色 */
  background-color: #fff;
  background-image: url("bg.jpg");
  background-size: cover;
}

/* 字体与文本 */
h1 {
  font-family: Arial, sans-serif;
  font-size: 2em;
  text-align: center;
  text-decoration: underline;
}

/* 边框与圆角 */
.button {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

五、布局技术 ​

1. Flex布局 ​

css
.container {
  display: flex;
  justify-content: space-between; /* 主轴对齐 */
  align-items: center;    /* 交叉轴对齐 */
  gap: 20px;              /* 元素间距 */
}

.item {
  flex: 1;  /* 等分剩余空间 */
}

2. Grid布局 ​

css
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 三列布局 */
  grid-gap: 10px;
}

.grid-item {
  grid-column: 1 / 3;  /* 跨越1-3列 */
}

六、定位方式 ​

css
.relative-box {
  position: relative;
  top: 10px;
  left: 20px;
}

.absolute-box {
  position: absolute;
  right: 0;
  bottom: 0;
}

.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
}

七、响应式设计 ​

css
/* 媒体查询 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .menu {
    display: none;  /* 移动端隐藏菜单 */
  }
}

/* 移动优先设计 */
@media (min-width: 1024px) {
  .card {
    width: 33.33%;
  }
}

八、综合案例：卡片组件 ​

html
<div class="card">
  <img src="image.jpg" alt="示例图片">
  <div class="card-content">
    <h3>卡片标题</h3>
    <p>卡片描述文字...</p>
    <button class="card-btn">了解更多</button>
  </div>
</div>
css
.card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 15px;
}

.card-btn {
  display: inline-block;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.card-btn:hover {
  background: #0056b3;
}

学习建议 ​

  1. 使用浏览器开发者工具（F12）调试CSS
  2. 推荐学习顺序： 基础语法 → 盒模型 → Flex/Grid布局 → 响应式设计
  3. 实践项目：
    • 个人简历页面
    • 电商产品卡片
    • 导航菜单
  4. 后续学习：
    • CSS预处理器（Sass/Less）
    • CSS动画（@keyframes）
    • CSS框架（Tailwind/Bootstrap）

这份教程涵盖了CSS的核心基础概念，建议配合HTML文档进行实践练习。需要更深入的某个部分讲解或更多实际案例可以随时告诉我！