hf html与css读书笔记整理1

最新推荐文章于 2026-07-01 20:04:56 发布

原创最新推荐文章于 2026-07-01 20:04:56 发布 · 197 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

hf读书笔记

本文介绍了HTML文档类型的定义、元信息的设置、颜色属性的应用、link元素的作用及使用方法、CSS选择器与继承的顺序、字体家族的工作原理、web字体的引入方式、字体大小的设置技巧以及背景图像和内边距的具体应用。

1.html4顶部放置doctype定义。告诉浏览器你的文档类型，通过doctype浏览器能够更加准确的解释，html5直接就是<doctype html>,html5会向下兼容

2.meta后面是编码格式

3.选择器的color
color
在这里插入图片描述

background-color

在这里插入图片描述

4.link元素的内容
1.type是属性
2.rel是这个html与指定链接文件之间的关系
3.href指定路径
4.link是个单标签

5.选择器与继承的顺序
css先检查选择器再选择继承，选择器中相同的属性会选择最下面的那个继承器，代码排放最下面

6.font-family的工作流程

font-family本质就是一堆候选字体。最后由serif或者sans-serif并不是具体的名i，而是让浏览器选择一种默认字体来选择

在这里插入图片描述
延展问题:如果一个字体风格是两个单词怎么办？？

font-family：“Courier New”,Courier

7.web字体引入

前面＋@代表内置的css

可以引用多个web字体，但是要为每个web字体添加一个@

@font-face{
font-family:"字体自定义名字"
src:url(".........................................../xxx.woff"),
    url(".........................................../xxx.ttf");
}

8.字体的大小%与比例因子与关键字

在这里插入图片描述

小窍门：body中使用small或者mediu作为字体，这相当于页面默认大小，我们再body中只用了字体大小在后面就能更好地控制字体大小了

9.背景填充用img还是backgroud-imge?

backgroud-imge用途非常的特殊，这个标签并不是放置图像，而是设置背景。img是为了放置图片

backgroud-imge： url(..../..../..../)
url两边不需要引号

关于背景图片的修正：

1.默认的背景图片时候重读的

2.background-repeat：

repeat 在水平和默认方向上重读
on-repeat；代表不希望重复
repeat-x ;只在水平重复
repeat-y 只在垂直重复
inherit 按照父元素的设置来处理

如何只在左边设置内边距

padding：25px
padding-left：80px

注意这里的顺序非常的重要，如果我们交换了两条语句的顺序那么我们会先设置左边的内边距，然后调整为25px

只增加外边距是一个意思，千万别写反顺序了
margin:30px;
margin-right:250px;

设置四个角弧度

边框样式查文档，变宽也可以使用border-radius调整四个角度

border-top-left-radius：3em

这里使用em和px都可以，不过em使用是为了，边框半径的度量相对于字体的大小

标签

#css #html #javascript