hf html与css读书笔记整理1

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

2.meta后面是编码格式

3.选择器的color
color
hf html与css读书笔记整理1_第1张图片

background-color

hf html与css读书笔记整理1_第2张图片

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

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

6.font-family的工作流程

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

hf html与css读书笔记整理1_第3张图片
延展问题:如果一个字体风格是两个单词怎么办??

font-family:“Courier New”,Courier

7.web字体引入

前面+@代表内置的css

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

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

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

hf html与css读书笔记整理1_第4张图片
hf html与css读书笔记整理1_第5张图片

小窍门: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使用是为了,边框半径的度量相对于字体的大小

你可能感兴趣的:(hf读书笔记,css,html,javascript)