30 分钟从零开始入门 CSS

前言

最近也是在复习，把之前没写的博客补起来，之前给大家介绍了 html，现在是 CSS 咯。

30分钟从零开始入门拿下 HTML_html教程-CSDN博客

---

一、CSS简介：给网页“化妆”的神器

CSS（层叠样式表）就像“化妆“，能让HTML页面瞬间焕然一新。

• 功能：控制网页元素的位置、颜色、字体等样式，实现“样式与结构分离”。

• 效果对比：

  
  CSS前 → CSS修饰后

---

二、CSS基础语法：精准定位，精细操作

口诀：选谁？干啥？

选择器 {
  属性: 值;   /* 声明 */
}

• 示例：

  p {
    color: red;          /* 文字变红 */
    font-size: 20px;     /* 字号20像素 */
  }

  选中所有

  标签，设置文字颜色和大小。

---

三、引入CSS的三种方式

方式	语法	适用场景
行内样式		快速调试，简单样式
内部样式		小型项目，代码量少
外部样式		企业开发，样式复用

小贴士：

• 外部样式是主流选择，便于维护和复用！

• 行内样式就像“临时补妆”，用完即弃。

---

四、CSS选择器：精准定位目标元素

1. 标签选择器：批量操作

a { color: blue; }  /* 所有标签变蓝 */

2. 类选择器（.class）：精准定制

VIP用户

运行 HTML

.highlight { background: gold; }  /* 所有class为highlight的元素 */

3. ID选择器（#id）：独一无二

提交

运行 HTML

#submit { width: 100px; }  /* 仅作用于id="submit"的元素 */

4. 复合选择器：组合出击

ul li a { color: green; }  /* 选中ul下的li下的所有 */

5. 通配符选择器（*）：全员生效

* { margin: 0; }  /* 所有元素的外边距清零 */

---

五、常用CSS属性：让你的页面活起来

1. 文字与颜色

.text {
  color: #ff0000;       /* 红色（十六进制） */
  font-size: 18px;      /* 字号 */
  font-family: Arial;   /* 字体 */
}

2. 边框（border）：元素的“外衣”

.box {
  border: 2px dashed #000;  /* 2像素黑色虚线边框 */
  /* 分解设置：*/
  border-width: 2px;
  border-style: dashed;
  border-color: black;
}

3. 宽高（width/height）：控制元素尺寸

.block {
  width: 200px;   /* 宽度 */
  height: 100px;  /* 高度 */
  display: block; /* 转为块级元素（独占一行） */
}

4. 盒模型：理解元素的“地盘”

• Padding（内边距）：内容与边框的距离

  .box { padding: 20px; }  /* 四周内边距20px */

• Margin（外边距）：元素与其他元素的距离

  .box { margin: 10px; }   /* 四周外边距10px */

---

六、代码规范：写出优雅的CSS

• 命名：使用小写字母（如 .main-title）。

• 缩进：2空格或4空格，保持统一。

• 注释：用 /* 注释 */ 说明复杂逻辑。

---

动手练习：打造你的第一个美化页面

1. 创建一个HTML文件，用外部样式表引入CSS。

2. 使用类选择器为标题添加金色背景。

3. 用盒模型调整段落的内外边距，让布局更舒适。

效果参考：

  


  
欢迎来到CSS世界！
  
学习CSS，让网页焕然一新~

运行 HTML

/* style.css */
.title {
  background: gold;
  padding: 20px;
}
.content {
  margin: 15px;
  border: 1px solid #ccc;
}

---

总结：CSS就像网页的“化妆师”，通过选择器和属性精准控制样式。掌握基础后，你就可以给你的网页化妆，装饰咯，感谢阅览！！