小白前端学习|第三周笔记

小白在学习
0 阅读5分钟

小白前端第二周笔记

学习时间：2026年4月9日-4月16日

学习资源：b站“黑马程序员”前端Web开发HTML5/CSS3+移动web视频教程（第28-42集）

学习工具：VS Code+谷歌浏览器

本周学习到的知识点

1.体验CSS

  • CSS写在<tittle>下面，在<style>标签内填写，书写规范：选择器{属性名：属性值}
  • 常用：color、font-size（文字大小）、font-weight（文字粗细)、text-aligh（文字对齐）、line-height（行高）、text-decoration（下划线）👉这些主要是对文字的修饰
  • style是CSS的代码容器，没有属性数量限制
  • CSS的注释跟HTML一样（ctrl+/),表现方式/*注释*/

image.png

2.CSS引入方式

  • 内部样式表：学习使用(CSS代码写在style标签中，如1.体验CSS示意图那样）
  • 外部样式：开发使用。【代码写在单独的CSS文件中（.ss），在html中使用link标签引入】

image.png

image.png

  • 行内样式需要配合JS（负责交互和动态效果）使用，CSS写在标签的style属性值里

image.png

4.选择器与类选择器

  • 选择器：可以改变相同属性内容的样式，但不面能差异化相同属性的样式。

image.png

image.png

  • 类选择器：一个选择器可给多个标签使用，能做到查找标签，差异化标签的显示效果。（1.定义类选择器：.类名；2.使用类选择器：标签添加class=“类名”）
  • 【类选择器注意事项：①类名自定义，不要用纯数字或者中文，尽量用英文；②一个类选择器可以供多个标签使用；③一个标签可以使用多个类名，类名之间用空格隔开。】

image.png

image.png

  • 开发习惯：类名见名如意，多个单词可以使用“-”连接，例如：new-hcl

5.id选择器与通配符选择器

  • id选择器：查找标签，差异化设置标签的显示效果，一般需要配合JS使用，很少用来设置CSS样式。
  • 【步骤：①定义id选择器：#id名；②使用id选择器：标签添加id=“id名”】
  • 规则：同一个id选择器在同一个页面只能用一次

image.png

  • 通配符选择器：在开发大项目初期，清除标签默认样式时使用。用来查找页面所有标签，设置相同的样式。
  • 通配符：*，不需要在html中引用，浏览器自动查找页面所有标签，设置相同样式。

image.png

image.png

6.画盒子

  • 需要记住width宽、height高、background-color背景色，宽高需要填写单位

image.png

image.png

7.文字修饰属性：

  • 字体大小

  • 名：font-size；值：文字尺寸，常用单位px image.png

  • 文字粗细

  • 名：font-weight ；值：数字（开发使用）/400（常规）/700（加粗）

  • 关键字：normal（常规）；bold（加粗）

image.png

  • 文字倾斜（）
  • 名：fon-style 值：normal（不倾斜）；italic（倾斜）

image.png image.png

  • 行高：设置多行文本的间距
  • 名：line-height 值：数+px；数字是当前标签font-size属性值的倍数
  • 垂直居中：行高属性值等于盒子高度属性值。

image.png

image.png

image.png

  • 字体族
  • 名：font-family 值：字体名（中英都可以）
  • 拓展：font-family属性值可以写多个字体名，各字体用逗号隔开，执行是顺序从左往右依次查找，但为了避免网页在不同电脑中显示字体差异，在最后一个设置一个字体族名“sans-serif”，网页开发建设使用无衬线字体。

image.png

image.png

  • font复合性：设置网页文字公共样式
  • font：是否倾斜 是否加粗 字号/行高 字体（必须按顺序写，值之间用空格隔开，且字体与字号值必须书写，否则font属性不生效。

image.png

8.文本样式

  • 文本缩进
  • 名：text-indent 值：数+em（当前标签字号的大小） / 数+px

image.png

  • 文本对齐
  • 名：text-align 值：left（左对齐，默认）/center（居中，居中不是标签，是文字）/right（右对齐）

image.png

image.png

image.png

  • 水平对齐方式-图片
  • text-align本质是控制内容的对齐方式，图片这种直接呈现的标签需要在外面套一个外套（父级）

image.png

image.png

  • 文字修饰线
  • 名：text-decoration 值：none（无）/underline（下划线）/line-through（删除线）/overline（上划线）

image.png

image.png

  • 文字颜色
  • 名：color 值：（重复可缩写，如#0000ff👉#00f）

image.png

image.png

9.调试工具-谷歌浏览器

  • 作用：检查、调试代码；帮助程序员发现代码问题
  • 操作：查看网页效果👉浏览器窗口任意位置右键选中检查👉跳出的检查框选中检查框的左上角虚线箭头👉移动鼠标查看你想检查的内容。
  • （1）.如果错误的属性，有黄色感叹号。（2）.CSS属性的前面都会有多选框，选则生效，不选则不生效。

image.png

  • 代码有错误时

image.png

  • 不选属性标签时 image.png

本周遇到的问题

  • 知识点多，有关文字的标签不是全部font，还有其他的，记得不牢固很容易搞混淆，甚至很理所当然的写成text-size。需要时常翻书。
  • 重新做到笔记的时候，做了适当删减，等再看的时候，发现还是草稿纸更让我明了，所以在掘金的笔记尽量做的“手把手”的教自己。另外真的要夸一下黑马程序员这个课程，很适合我这样基础薄弱的小白学习。
  • 另外我觉得很有必要了解一下掘金的文章写作的功能，比如我现在就遇到了问题：1.标题的写法；2.文字的颜色设置。

下周计划

  • 我觉得很有必要放下时间去练习前面的知识点，新的一周我打算多多实践前面的知识点，把知识点连起来，学到了才是真的
  • 新的课程看情况定。
avatar
文章
阅读
粉丝