Ubuntu/Debian

本文是CSS入门教程，围绕新手建站全流程实战，从域名解析、服务器配置、宝塔面板安装、程序部署到CSS美化，帮助网站从可用变美观，适合零基础用户掌握建站与样式优化。

CSS入门教程：从服务器到样式，新手建站全流程实战

建站时最尴尬的不是服务器配不通，而是网站跑起来了，页面却丑得不敢发朋友圈，很多人把时间耗在找主题、改插件上，结果一动样式就崩，这份CSS入门教程不是只讲color和font-size，而是把域名、服务器、面板、程序部署到CSS美化整条链路一次讲清，让你先跑通网站,再用CSS把页面改到能上线。

Ubuntu/Debian

适用人群说明

这份CSS入门教程适合以下人群：

• 完全零基础,但想拥有一个自己网站的人；
• 已经买了服务器和域名,却卡在配置环节的新手；
• 用宝塔或WordPress建站后,页面难看又不会改样式的人；
• 想理解“域名—服务器—面板—程序—CSS”完整建站链路的人；
• 不想只看CSS片段,而是希望边建站边学样式落地的实战型学习者。

如果你只是想在本地写个HTML页面玩，这篇文章同样适合,但重点会放在线上网站从零到上线到美化的完整过程。

完整建站流程：先跑通，再美化

CSS入门教程必须放在真实网站环境里讲，否则你连网页都打不开，样式根本无从谈起,整个流程可以简化为：

域名解析 → 服务器环境 → 面板安装 → 程序部署 → CSS美化

先不要急着写CSS，先把前四步跑通,下面一步一步说。

第一步：域名解析，把域名指向服务器

域名解析是把你的域名和服务器公网IP绑定起来。

操作要点：

1. 在域名注册商后台找到“DNS解析”或“域名解析”；
2. 添加两条A记录：
   • 主机记录填 ,记录值为服务器公网IP；
   • 主机记录填 www,记录值同样是服务器公网IP；
3. TTL默认600秒即可,不用改；
4. 保存后等待生效。

注意：如果你用的是中国大陆服务器，域名必须完成ICP备案才能通过80端口访问，香港或海外服务器一般无需备案，解析是否生效，可以在本地命令行执行 ping 你的域名 查看是否返回服务器IP。

第二步：服务器环境配置

建议新手选择Linux服务器，不要用Windows Server,因为宝塔等面板对Linux支持更好。

推荐系统：

• Ubuntu 22.04
• Debian 12
• CentOS 7.9

服务器开通后，先到云厂商控制台的安全组/防火墙放行以下端口：

• 22：SSH登录；
• 80：网站HTTP访问；
• 443：网站HTTPS访问；
• 8888：宝塔面板默认端口（后续可改）。

然后SSH登录服务器,先更新系统：

# CentOS
yum update -y

环境本身不需要手动编译安装Nginx、PHP,面板会帮你装。

第三步：面板安装与站点创建

新手强烈建议用宝塔Linux面板，可视化操作,门槛低。

安装宝塔面板时，直接到宝塔官网获取对应系统的安装命令，以Ubuntu为例,通常是：

wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh

安装完成后，终端会显示面板地址、用户名和密码,务必保存。

登录面板后：

1. 首次登录会提示安装LNMP或LAMP环境；
2. 选择 Nginx + MySQL + PHP 8.0以上 组合；
3. 等待安装完成；
4. 进入“网站” → “添加站点”，填写你的域名,创建数据库和FTP。

站点创建后,网站根目录通常位于：

/www/wwwroot/你的域名

此时如果你上传一个 index.html，访问域名理论上就能看到页面，如果看不到,先检查安全组80端口和Nginx是否启动。

第四步：程序部署

如果你打算用WordPress建站：

1. 在面板“网站”中点击你的站点,进入根目录；
2. 上传WordPress压缩包并解压；
3. 将文件移动到站点根目录；
4. 访问域名,按提示填写数据库信息完成安装。

如果你主要想练习CSS入门教程，建议先用纯HTML+CSS部署，不要一上来用WordPress，原因是WordPress主题和插件会干扰CSS调试，你改了半天可能发现是主题缓存或插件样式覆盖,用纯HTML文件更直观。

CSS入门教程：让页面不再丑

前四步跑通后，你的网站能访问了，但可能只是一片白底黑字,现在进入CSS入门教程的核心部分。

CSS写在哪里

CSS有三种引入方式：

• 内联样式：<p style="color:red">，不推荐,维护困难；
• 内部样式表：写在HTML的<style>标签里,适合单页测试；
• 外部样式表：单独创建 style.css 文件，再用<link>引入，推荐使用。

外部样式表引入方式：

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

CSS基础语法

CSS由选择器和声明块组成：

选择器 {
  属性: 值;
}

示例：

h1 {
  color: #333;
  font-size: 28px;
}
p {
  color: #666;
  line-height: 1.8;
}

常用选择器

新手掌握这几种就够用：

• 标签选择器：h1、p、a,直接写标签名；
• 类选择器：.card，在HTML里用class="card"；
• ID选择器：#header，在HTML里用id="header"；
• 后代选择器：.card p，选中.card内部所有p

<div class="card">
  <h1>我的第一个网站</h1>
  <p>从零开始学CSS入门教程。</p>
  <a href="#">了解更多</a>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.card {
  width: 400px;
  background-color: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  text-align: center;
}
.card h1 {
  font-size: 26px;
  color: #1f2937;
  margin-bottom: 12px;
}
.card p {
  font-size: 15px;
  color: #6b7280;
  line-height: 1.7;
  margin-bottom: 20px;
}
.card a {
  display: inline-block;
  padding: 10px 24px;
  background-color: #2563eb;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}
.card a:hover {
  background-color: #1d4ed8;
}