Web开发新手求助：CSS不生效、缩进规范及HTML/CSS学习顺序问题

问题1：CSS样式未生效排查方案 #

按优先级依次排查：

• 确认HTML文件中已正确引入独立CSS文件，需在<head>标签内添加如下代码，href属性填写CSS文件的正确相对路径：

  <link rel="stylesheet" href="你的CSS文件名.css">
  

• 核对CSS文件名、后缀是否正确，避免出现style.css.txt（Windows默认隐藏后缀易出现该问题）、大小写不匹配（如实际文件为Style.css但引入时写style.css，部分服务器对大小写敏感）的问题
• 强制刷新浏览器缓存，按下Ctrl+F5（Windows）/Cmd+Shift+R（Mac）跳过缓存加载资源，也可以打开F12开发者工具，在「网络」面板勾选「禁用缓存」后刷新
• 打开F12开发者工具的「元素」面板，选中<p>标签查看样式列表，确认CSS规则是否被加载、是否被其他更高优先级的规则覆盖
• 检查CSS文件语法是否正确，避免出现大括号缺失、分号误用、选择器拼写错误等问题

问题2：img元素位置调整方案 #

可根据需求选择不同的CSS实现方式：

边距调整（基于原文档流位置偏移） #

通过margin调整元素和其他内容的间距，示例：

img {
  /* 左外边距50px，元素整体向右偏移50px */
  margin-left: 50px;
  /* 上外边距20px，元素整体向下偏移20px */
  margin-top: 20px;
}

水平居中 #

将img转为块级元素后设置左右外边距自动，示例：

img {
  display: block;
  margin: 0 auto;
}

自由定位 #

使用position属性自定义位置：

• 相对定位（相对于自身原位置偏移，不影响其他元素布局）：

  img {
    position: relative;
    left: 30px;
    top: 10px;
  }
  

• 绝对定位（相对于最近的非static定位父元素定位，脱离原文档流）：

  img {
    position: absolute;
    /* 固定在页面右上角，距离顶部0，距离右侧20px */
    top: 0;
    right: 20px;
  }
  

全局布局调整 #

给父元素设置flex布局，可批量调整子元素位置，示例（将页面所有内容垂直水平居中）：

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

问题3：前端代码缩进规范 #

通用规范如下：

• 缩进长度统一，全项目统一使用2空格或4空格缩进，禁止Tab和空格混用、禁止2空格和4空格混用
• 嵌套结构逐层缩进：HTML中子标签比父标签缩进一层，CSS中大括号内的属性比选择器缩进一层
• 单标签多个属性换行时，所有属性比标签名缩进一层，可选择对齐第一个属性的位置
• 避免行尾多余空格，单个文件末尾保留1个空行

问题4：Web开发学习顺序建议 #

不需要分开花1年时间单独学HTML或1年单独学CSS，二者强关联必须同步学习：

• 第一阶段（1~2个月）：同步学习HTML核心标签、CSS核心样式，每学一个HTML元素就同步练习对应的样式配置，学完后可以独立完成静态页面布局
• 第二阶段（2个月以内）：完成3~5个静态页面小项目巩固HTML+CSS的使用，掌握响应式布局、CSS动画等进阶内容
• 第三阶段（2年学习JavaScript）：从JS基础语法、DOM操作开始学习，逐步过渡到异步编程、ES6+新特性、工程化、框架等内容，学习过程中可以结合HTML+CSS做交互类小项目，巩固所学内容

内容的提问来源于stack exchange，提问作者Beginnertojavascript