30 分钟从零开始入门 CSS

HTML CSS JS

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

30 分钟从零开始入门 CSS-CSDN博客

JavaScript 指南：从入门到实战开发-CSDN博客

前言

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

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

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

功能：控制网页元素的位置、颜色、字体等样式，实现"样式与结构分离"。
效果对比 ：

CSS前 → CSS修饰后

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

口诀：选谁？干啥？

css 复制代码

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

示例：

css 复制代码

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

选中所有<p>标签，设置文字颜色和大小。

三、引入CSS的三种方式

方式	语法	适用场景
行内样式	`<div style="color: red">`	快速调试，简单样式
内部样式	`<style> p { color: red; } </style>`	小型项目，代码量少
外部样式	`<link rel="stylesheet" href="style.css">`	企业开发，样式复用

💡 小贴士：

外部样式是主流选择，便于维护和复用！
行内样式就像"临时补妆"，用完即弃。

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

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

css 复制代码

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

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

css 复制代码

<div class="highlight">VIP用户</div>

运行 HTML

css 复制代码

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

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

css 复制代码

<button id="submit">提交</button>

运行 HTML

css 复制代码

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

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

css 复制代码

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

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

css 复制代码

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

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

1. 文字与颜色

css 复制代码

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

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

css 复制代码

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

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

css 复制代码

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

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

Padding（内边距）：内容与边框的距离
css 复制代码
```
.box { padding: 20px; }  /* 四周内边距20px */
```
Margin（外边距）：元素与其他元素的距离
css 复制代码
```
.box { margin: 10px; }   /* 四周外边距10px */
```

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

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

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

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

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

创建一个HTML文件，用外部样式表引入CSS。
使用类选择器为标题添加金色背景。
用盒模型调整段落的内外边距，让布局更舒适。

效果参考：

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 class="title">欢迎来到CSS世界！</h1>
  <p class="content">学习CSS，让网页焕然一新~</p>
</body>
</html>

运行 HTML

html 复制代码

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

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