企业官网建设流程全解析

网站开发从哪开始学,一般网站怎么做推广,网站做关键词排名每天要做什么,企业局域网组网方案你好#xff0c;准前端艺术家#xff01;在上一篇文章中#xff0c;我们用 HTML 搭建了网页的骨架。但说实话#xff0c;现在的网页看起来可能有点……惨不忍睹#xff08;就像是 90 年代的黑白报纸#xff09;。今天我们要学习的 CSS#xff08;层叠样式表#xff09;…你好准前端艺术家在上一篇文章中我们用HTML搭建了网页的骨架。但说实话现在的网页看起来可能有点……惨不忍睹就像是 90 年代的黑白报纸。今天我们要学习的CSS层叠样式表就是专门负责“颜值”的。个人理解如果说 HTML 是在决定“这里有一张桌子”那么 CSS 就在决定“这张桌子是什么颜色的、有多大、摆在房间的哪个角落”。HTML 负责结构CSS 负责表现。一、 CSS 的基本语法命令式美学CSS 的逻辑非常简单就是选中谁改什么改成啥。选择器 { 属性: 属性值; 属性: 属性值; }例如想让所有的段落文字变红p { color: red; font-size: 16px; }二、 样式写在哪三种引入方式新手经常纠结样式应该写在哪里。严谨地说有三种方式行内样式直接写在标签里p stylecolor: blue;。评价除非是紧急修 Bug否则强烈建议不要用代码会变得极其混乱。内部样式写在 HTML 的head标签里的style标签内。评价适合写只有一个页面的小 demo。外部样式推荐方案写在独立的.css文件里通过link标签引入。评价工程化的标准做法。它实现了“结构与表现分离”改一个文件就能让全站变色。三、 核心中的核心盒模型Box Model这是 CSS 学习中第一个、也是最重要的一个坎。个人理解网页上的每一个标签标题、图片、段落在 CSS 眼里都是一个盒子。这个盒子由内到外像洋葱一样包裹着四层Content (内容)盒子里装的东西文字或图片。Padding (内边距)内容和盒子边框之间的距离像快递箱里的泡沫填充物。Border (边框)盒子的外壳。Margin (外边距)这个盒子和其他盒子之间的距离。新手避坑指南很多时候你设置了width: 100px但发现盒子实际宽度变成了120px那是加上了 Border 和 Padding。记住box-sizing: border-box;这个属性它能救你的命让宽度设置变得直观四、 选择器精准打击的艺术你想给谁装修这取决于你的选择器元素选择器如p,h1通杀给所有同名标签换装。类选择器如.important最常用。给标签加上classimportant就能精准点名。ID 选择器如#header具有唯一性像身份证号一样。建议少用留给 JavaScript。五、 个人深度理解为什么叫“层叠”样式表CSS 的第一个单词是Cascading层叠。这意味着 如果两个规则冲突了比如一个说文字变红一个说变蓝浏览器会根据权重来决定听谁的。权重等级从高到低!important(核武器慎用) 行内样式ID 选择器类选择器元素选择器。我的心得当你的样式死活生效不了的时候90% 的情况是权重被别人压住了或者是选择器写错了。六、 布局初探从浮动到 Flexbox以前的网页布局靠“浮动Float”那简直是前端新手的噩梦。现代建议现在是 202X 年了请直接学习Flexbox弹性盒子。 只需要在父容器写上display: flex;你就能轻松实现垂直居中、等宽排列等以前需要写几十行代码的功能。它是现代布局的基石。七、 总结从结构思维转向视觉思维学习 CSS 不在于死记硬背几百个属性而在于理解盒模型理解空间是怎么被占用的。定位与布局理解元素是怎么摆放的。层叠性理解样式是怎么相互覆盖的。结语HTML 给了你骨架CSS 给了你皮囊。下一步你可以尝试学习JavaScript给你的网页注入“灵魂”让它能够动起来、思考起来如果你在装修网页的过程中遇到了“墙歪了”或者“颜色对不上”的问题欢迎在评论区留言我们一起 Debug别忘了点赞、收藏哦