【CSS | 青训营笔记】

41 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天。
今天学习的内容是前端的技术栈CSS,通过本次课程我学会了如何使用 CSS 来添加背景、格式化文本、以及格式化边框,并定义元素的填充和边距。同时,也了解了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后,以及向某些选择器添加特殊的效果,比如链接等等。那么下面我主要从以下几点我认为印象比较深刻的内容进行分享和总结。
1.CSS样式规则
(1)选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。
(2)属性和属性值以“键值对”的形式出现。
(3)属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
(4)属性和属性值之间用英文“:”连接。
(5)多个“键值对”之间用英文“;”进行区分。

2.CSS盒子模型
盒子模型的意思就是所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子模型中也有不同部分的元素需要我们去了解清楚:

  • Margin(外边距):清除边框外的区域,外边距是透明的。
  • Border(边框):围绕在内边距和内容外的边框。
  • Padding(内边距):清除内容周围的区域,内边距是透明的。
  • Content(内容):盒子的内容,显示文本和图像。

3.CSS三大特性:层叠、继承、优先级
(1)层叠性
所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。如果样式不冲突,就不会层叠。

(2)继承性
所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,就是子承父业的意思。

(3)优先级
优先级的次序如下:

  • 使用了 !important声明的规则。
  • 内嵌在 HTML 元素的 style属性里面的声明。
  • 使用了 ID 选择器的规则。
  • 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
  • 使用了元素选择器的规则。
  • 只包含一个通用选择器的规则。
  • 同一类选择器则遵循就近原则。