HTML基础4

视频1).3个注意点:
① P和h1~h6都是文字组成的块级元素,因此里面是不能放块级元素
② 标签里面是不能再加a标签的(链接里面不能再加链接),a里面可以放块级元素,行内元素只能容纳文本和其他行内元素

视频2).行高的问题:
① 选择器的嵌套不应该超过3级,位置靠后的限定条件应该尽可能的准确
② 行高的测量:
在这里插入图片描述
基线和基线的距离叫作行高(英文),中文是对应线就可以
在这里插入图片描述
上距离和下距离相等,所以可以看出文字总是垂直居中的
Line-height大于height的时候,文字会下移,同理小的时候,会上移

视频3)CSS(层叠样式表)的三大特性(层叠性、优先级、继承性)
① 层叠性
在这里插入图片描述
总结:长江后浪推前浪,前浪死在沙滩上
② 继承性:书写CSS样式表的时候,子标签会继承父标签的某些样式,如文本颜色和字号,想要设置一个可继承的属性,只需将它应用于父元素即可。
简单的理解:子承父业;
CSS最后的执行口诀:龙生龙,凤生凤,老鼠的孩子会打洞
③ 优先级:
(伪)类选择器权重:0,0,1,0
标签(元素)选择器权重:0,0,0,1
ID选择器权重:0,1,0,0
行内样式表权重:1,0,0,0
!important权重:∞
继承或者*选择器权重:0,0,0,0

视频4).权重的计算:
① 权重相同,则遵循就近原则
② 权重会叠加
在这里插入图片描述
视频5)背景:
Background-repeat
repeat-x:
背景图像在横向上平铺
repeat-y:
背景图像在纵向上平铺
repeat:
背景图像在横向和纵向平铺
no-repeat:
背景图像不平铺

Background-attachment:背景附着
fixed:
背景图像相对于窗体固定。
scroll:
背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。

背景简写:
在这里插入图片描述
视频7)背景半透明
Background-color:rgba(0,0,0,0.1);
Rgba分别代表red,green,blue,alpha(透明度)的意思,其中alpha的取值范围在0到1之间,,只是背景半透明,盒子里面的文字内容是没有影响的

视频8)体会边框:
CSS三大模块(盒子模型、浮动、定位),盒子模型就是把HTML页面的元素看做是一个矩形的盒子,也就是盛装内容的容器,每个矩形都由元素的内容、内边距(padding)、边框(border)、外边距(margin)组成

网页布局本质:把网页元素比如文字图片等等放入盒子里面,然后利用CSS摆放盒子的过程就是网页布局

盒子模型:
1) 盒子边框(border),边框可以理解为就是一层皮
border : border-width || border-style || border-color

视频9)表格细线边框:
在这里插入图片描述
视频10)认识内边距(padding)
Padding属性用于设置内边距,是指边框和内容之间的距离
Padding-top:上内边距
Padding-right:右内边距
Padding-bottom:下内边距
Padding-left:左内边距
在这里插入图片描述
视频13)
padding: 10px 20px 30px 40px;分别表示上右下左(顺时针方向),就是上面的这个图

视频15)外边距:
在这里插入图片描述
具体详细的笔记同样在HTML系统学习1

posted @ 2019-08-01 22:05  lures  阅读(6)  评论(0)    收藏  举报