传智播客前端学习第四天总结

目录

3个注意点

书写规范

空格规范

选择器规范

文字行高的测量

CSS三大特性

层叠性

继承性

优先级

CSS背景（head+body）

背景颜色

背景图片

背景平铺

背景位置

背景滚动

背景属性连写

---

3个注意点

• 文字类块级元素（p，h1，dt）内不能放块级元素，会变成两个p标签和一个块级元素
• a链接内不要放a链接（跳转到哪个链接不明）
• a链接内可以放块级元素

书写规范

空格规范

• 选择器和 { 之间必须有空格（.class {}）
• 属性名与:之间不允许有空格
• :与属性值必须有空格

选择器规范

• 并集选择器每个选择器占一行，以逗号分隔
• 选择器嵌套不应该超过三级，应尽量精确（快速定位到即可）

文字行高的测量

• 单词：line-height
• 特点：顶线，中线，底线，基线（字符底部的最高处）。一个盒子分为上距离，内容高度，下距离。
• 使用：line-height：50；

 

• 注：文字行高与盒子的高度相同即可垂直居中，>则文字偏下，反之亦然

CSS三大特性

层叠性

• 若冲突，以写在后方的css为准
• 若不冲突，不会层叠

继承性

• 字标签会继承父标签的“某些样式”
• 一般以（text-，font-，line- 开头或color等属性会继承）

优先级

• color：pink!important；>行内样式>id样式>类，伪类样式>标签样式>*，继承（无论父亲权重多大，继承为0）样式
• 权重会叠加（p 0001   div p 0002  a：hover 0011）
• div div，div（0002 0001）

 

• 注：先找目标文字的几个标签（再进行叠加，只要能选出来就能叠加权重），若权重相同则遵循就近原则

CSS背景（head+body）

背景颜色

• 单词：background-color
• 特点：无
• 使用：background-color：pink；

背景图片

• 单词：background-image
• 特点：无
• 使用：background-image：url（image.jpg）

背景平铺

• 单词：background-repeat
• 特点：默认repeat，no-repeat，repeat-x，repeat-y
• 使用：background-repeat：no-repeat；

背景位置

• 单词：background-position
• 特点：百分数|由单位组成的长度值，单词（center，top，bottom，left，right）
• 使用：background-posoition：center center；（x y）

背景滚动

• 单词：background-attachment
• 特点：scroll（默认值）或fixed
• 使用：background-attachment：fixed；

背景属性连写

• 单词：background：color image repeat attachment position
• 特点：无固定顺序