Web前端开发入门学习笔记之CSS 41-42 --新手超级友好版- 综合案例实现-css文字格式美化篇

     Foreword写在前面的话：

  大家好，我是一名刚开始学习HTML的新手。这篇文章是我在学习html过程中的一些笔记和心得，希望能和同样在学习HTML的朋友们分享。由于我的知识有限，文章中可能存在错误或不准确的地方，欢迎大家在评论区提出建议和指正。我非常期待大家的反馈，以便我能不断学习和进步。同时，我也会在文章中注明参考的资料，以示对原作者的尊重。

PS：本帖以记录学习心得和课堂笔记为主，没有其他大博主那么专业，但是简单易懂^-^

本贴的其他相关学习笔记资料可以通过订阅专栏获取，喜欢的小伙伴可以多多点赞+关注呀！后续会 持续更新相关资源的~

  课程学习资源：根据b站‘前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员’ 视频学习记录而成。原视频网址：前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员_哔哩哔哩_bilibili

第四十一课：调试工具

作用：检查调试代码，帮程序员发现代码问题解决问题。

网页inspect

错误代码案例：字体大小设定时未写单位。

检查发现font size仍然是16px而非66px，发现了错误的位置。

方法一是直接点网页空白处点检查，看与预期代码的比对。

方法二是鼠标之间点击自己觉得有问题的地方右键，更方便看出代码的错误。

以下是方法二效果：

不仅告诉你错误是什么，还告诉你是哪个文件的哪一行（右上方）

调试工具的细节：如果是错误属性，会有黄色叹号；css属性前面有多选框，如果勾选就该属性生效，否则不生效。

第四十二课——综合案例-新闻详情网页

网页制作思路：从上到下，先整体后局部，先标签再美化。

让文字居中：text-align: center

取消加粗：font-weight: 400 （取值为700时是加粗）

缩进效果：text-indent: 2em

如何加粗局部文本？套上一个div标签可以指定style实现

注意：如果是需要强调的文本，就用strong标签加粗；如果不重要，不需要强调，就用font-weight css加粗。

strong标签套住要加粗的文本，不用css代码，十分方便

用类选择器，选中图片外面套的div标签实现对应效果，实现差异化设置。

类选择器：先定义再使用：在style里面就是.name{}，然后body的div部分标签尖括号里面要加上class=”name“

第四十二课：综合案例二-css（层叠样式表）简介呈现

依旧是先整体再局部的开发思路

font-size调整文字大小px

调整行距：行高：line-height: 30px

如何在文本内部的某字句设置超链接？将目标字句用a标签套住，href填地址即可

改变超链接文字的颜色？a标签u选择器即可

如果有多个超链接文字颜色不同，需不需要一开始就用.name{} +div标签class=“name”区分？

不需要，刚开始直接粗暴的在style标签里面用a标签选择器即可，后面不同再使用类选择器，这样的话的到的是普适的效果，统一的更好。

记忆：普适的效果当然要多享受嘛！

如果在文本内部输入标签检索，如何更快让vscode识别到你是在输入标签？剪切相关信息后先打一个空格，再输入标签关键字，系统就会识别到这是标签关键字。

无序号列表：ul标签里面套个li标签，粘贴对应文字即可

如果对于不同的标签，我想要同样的一套文字属性，那么直接再head上title下的style标签里面两类标签用逗号分隔，统领一个大括号即可！！

注意，无序号列表设置文字样式使用里面的li标签来指定文字，总要找关系最密切的才有用嘛！

但是这里由于是同时享有这一套属性，li的文字也有了缩进，效果不好，所以还是得分开使用对应的标签选择器。

字体颜色，行高，字体大小改变效果。

成果展示：

最后，感谢每一位阅读这篇文章的朋友，你们的反馈对我来说非常宝贵。如果有任何问题或建议，请随时告诉我。让我们一起学习和进步吧！如果您喜欢我的内容，别忘了点赞和关注哦，我会定期分享更多有价值的信息。