第三课深入css笔记 | 青训营

82 阅读2分钟

CSS用于控制网页的样式和布局。在学习学习第三节课深入了解CSS的过程中,我总结了一些学习笔记,希望能够帮助我们更好地掌握这门技术

1、 CSS的基本语法

CSS由一系列的规则组成,每个规则由选择器和一组声明块构成。选择器用于选择HTML元素,而声明块包含了一系列的属性和值,用于定义元素的样式。例如,以下是一个简单的CSS规则:

 


h1 {

  color: red;

  font-size: 24px;

}

 

在这个规则中,h1是选择器,表示选择所有的<h1>元素。colorfont-size是属性,red24px是对应属性的值。这个规则的作用是将所有的<h1>元素的文字颜色设置为红色,字体大小设置为24像素。

2、 CSS选择器

择器用于选择HTML元素并为其添加样式。常见的选择器有标签选择器、类选择器、ID选择器等。标签选择器通过HTML元素的标签名进行选择,例如h1p等。类选择器通过元素的class属性进行选择,例如.container.header等。ID选择器通过元素的id属性进行选择,例如#logo#nav等。选择器的选择范围越具体,优先级越高。

除了基本的选择器,还有一些高级的选择器可以用于更精确地选择元素。例如,属性选择器可以根据元素的属性值进行选择,伪类选择器可以选择特定状态的元素,伪元素选择器可以选择元素的特定部分。了解和掌握这些高级选择器可以提高CSS的灵活性和可扩展性。

3、 CSS属性和值

CSS属性用于定义元素的样式,而值则决定了属性的具体表现。常见的属性有color(颜色)、font-size(字体大小)、margin(外边距)、padding(内边距)等。每个属性都有一系列的值可以选择,例如,color属性的值可以是颜色名称(如redblue),也可以是十六进制值(如#FF0000#0000FF)。了解每个属性的可选值以及其对元素样式的影响是非常重要的。

4、 CSS的盒模型

盒模型决定了元素的尺寸和布局。每个元素都被视为一个矩形的盒子,由内容区、内边距、边框和外边距组成。掌握盒模型可以帮助我们更好地理解和控制元素的布局和间距。