30 分钟从零开始入门 CSS
前言
最近也是在复习，把之前没写的博客补起来，之前给大家介绍了 html，现在是 CSS 咯。
30分钟从零开始入门拿下 HTML_html教程-CSDN博客
一、CSS简介：给网页“化妆”的神器
CSS（层叠样式表）就像“化妆“，能让HTML页面瞬间焕然一新。
-
功能：控制网页元素的位置、颜色、字体等样式，实现“样式与结构分离”。
-
效果对比：
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. 标签选择器：批量操作
a { color: blue; } /* 所有<a>标签变蓝 */2. 类选择器（.class）：精准定制
<div class="highlight">VIP用户</div>运行 HTML
.highlight { background: gold; } /* 所有class为highlight的元素 */3. ID选择器（#id）：独一无二
<button id="submit">提交</button>运行 HTML
#submit { width: 100px; } /* 仅作用于id="submit"的元素 */4. 复合选择器：组合出击
ul li a { color: green; } /* 选中ul下的li下的所有<a> */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空格，保持统一。
注释：用
/* 注释 */说明复杂逻辑。
动手练习：打造你的第一个美化页面
-
创建一个HTML文件，用外部样式表引入CSS。
-
使用类选择器为标题添加金色背景。
-
用盒模型调整段落的内外边距，让布局更舒适。
效果参考：
<!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
/* style.css */
.title {
background: gold;
padding: 20px;
}
.content {
margin: 15px;
border: 1px solid #ccc;
}🚀 总结：CSS就像网页的“化妆师”，通过选择器和属性精准控制样式。掌握基础后，你就可以给你的网页化妆，装饰咯，感谢阅览！！