前端入门：项目搭建与外部CSS引入规范

记录前端零基础起步的项目搭建流程，规范项目目录结构，详解外部CSS样式文件的创建与引入方式，对比三种样式表的特性与使用场景，记录日常开发规范细节。

最近正式开始系统学习HTML5+CSS3前端基础，从最基础的项目搭建开始打卡记录学习过程。很多初学小伙伴容易忽略项目规范，文件随意堆放、样式杂乱，后期写复杂页面会出现各种路径报错、样式冲突问题，所以这篇博客详细记录标准化的前端初始化流程。

首先是新建Web前端项目，使用开发工具创建全新项目文件夹，自定义项目名称，本地磁盘单独存放，避免中文路径和特殊符号，这是前端开发的基础规范。创建项目后，手动进行目录分层，在根目录新建 css、img 文件夹，分别统一存放样式文件和图片资源，让整个项目结构清晰整洁。

完成目录搭建后，在css文件夹下新建 style.css 全局样式文件，这是整个项目的核心样式文件，所有页面的公共样式都可以统一写在这里。想要让HTML页面关联外部样式表，需要在页面head标签中使用link标签引入，核心代码如下：

<link rel="stylesheet" type="text/css" href="css/style.css">

学习过程中详细区分了三种CSS样式写法的区别，日常开发可以根据场景灵活选用：

行内样式直接写在标签内部，优先级最高，但代码耦合性太强，结构和样式混杂，只适合临时调试样式，正式项目基本不会使用；内部样式通过style标签写在当前页面中，仅对单个页面生效，适合简单的单页demo；外部样式为独立css文件，支持多页面复用，便于统一维护和修改，是企业级开发的主流选择。

通过本次实操，彻底摆脱了随意写代码的习惯，养成了规范建项目、分层管理文件的开发思维，为后续复杂页面布局打下了良好基础。