【青训营】理解CSS

熊伟鑫
159 阅读13分钟

这是我参与「第五届青训营 」笔记创作活动的第2天

1.课程内容

  • CSS功能及基础组成，各类选择器的使用方式，颜色和字体

2.知识点

2.1CSS功能及基础组成

2.1.1CSS功能简介

CSS（Cascading Style Sheets)用来定义页面原色的样式，可以设置字体和颜色，设置位置和大小，添加动画效果。

2.1.2CSS基础组成

image.png

选择器：选择了代码中标签为h1的标签，{}内所有的代码指令将令h1这个标签发生变化

color为属性，用：向标签的某一属性输入某一属性值改变标签的属性

介绍一下CSS与HTML之间的融合方式：

CSS添加到HTML中的节点处（父节点，子节点均可），有些CSS样式只选择父节点紧跟着的子结点中满足要求的标签，也有些样式可以照顾到整个父节点下所有子节点中满足要求的标签 image.png

2.2各类选择器的使用方式

2.2.1常见的简单选择器

选择器的功能：找出页面中的指定的元素，给他们设置样式；可以按照标签名，类名或id，属性已经该元素在DOM树中的位置进行选择

2.2.1.1通配选择器

用 “*” 来选择所有标签，如下图事例中同时选中了< h1 >标签和< p >标签 image.png

2.2.1.2标签选择器

选择什么标签就将其标签名写在选择器中，如下图事例中选择h1标签将颜色改为橙色，那么该节点中所有h1标签的字体颜色都将变为橙色。 image.png

2.2.1.3id选择器

id选择器最重要的特点是你所选择的id最好在页面中是唯一的，你可以将自定义id赋给任意标签，用“#id名”的方式选择它

2.2.1.4类选择器

和id选择器不同，为了便于我们批量修改标签的样式，我们常常用类选择器来简化我们的操作，如下图：

image.png

通过 .类名的形式选择你要修改样式的类

2.2.1.4.1伪类（除了标签和属性以外另一种选择的方式，一种特殊的类选择器）
2.2.1.4.1.1状态性伪类

以链接为例，鼠标是否移动到链接上，鼠标是否点击链接，链接所呈现出来的状态都是不同的，通过某一元素在不同的状态来选择不同的样式，以下图为例：

image.png

  • link表示默认状态下的元素状态
  • visited表示访问过状态下的元素状态
  • hover表示鼠标移动到链接下的元素状态
  • active表示鼠标点击链接下的元素状态
2.2.1.4.1.2结构性伪类

根据元素在DOM树中节点所处的位置来决定是否选择

image.png

image.png

first-child选择的是出现的第一个li标签

last-child选择的是出现的最后一个li标签

2.2.1.5属性选择器

属性选择器可以选择含有某个属性的所有标签，或是选择某个标签当其某个属性值满足要求时，甚至可以选择某个属性值具有相同开头或结尾的某些标签，下图为一些事例：

image.png

其中[disabled]表示属性

image.png

图中所示 a[href^="#"] 表示在a标签下以#开头的都被选择 图中所示 a[href$=".jpg"] 表示在a标签下以.jpg结尾的都被选择

2.2.2.1各类组合方式及选择器组

选择器之间的各种组合方式 image.png

多个选择器用逗号相隔组成选择器组 image.png

2.2.2.2选择器的优先级

CSS 选择器的优先级是由它们的权重决定的。权重是一个由三部分组成的分数：

  1. 标签选择器的权重是 0，例如 h1 { }。
  2. 类选择器，伪类选择器和属性选择器的权重是 10，例如 .my-class { }、:hover { } 和 [type="text"] { }。
  3. ID 选择器的权重是 100，例如 #my-id { }。

比如

#my-id p{color:green}
.my-class p{color:red}

对于p元素来说，#my-id p 会覆盖 .my-class p

同时，若是有特殊要求我们可以使用 !important 标记来强制使用前面的规则，比如：

.class1 p{color:green}
.class2 p{color:red}

可以使用 !important 标记来强制使用 class1 的样式,

.class1 p{color:green !important}
.class2 p{color:red}

这样会让 class1 的样式优先级最高,对于p元素来说，.class1 p 的样式会生效

注意：使用 !important 标记会使得样式具有最高的优先级，因此应该谨慎使用，并且尽量避免使用它。因为过多使用 !important 会导致样式表难以维护和理解

2.3颜色和字体

2.3.1颜色

颜色 CSS里用RGB来表示/调制颜色--- rgb（0，0，0） 里面的数值可以取0-255

HSL（Hue色相0-360，Saturation饱和度0-100%，Lightness亮度0-100%）---hsl（0，0，0）

alpha不透明度=0时透明，=1时不透明--- hsla（0，0，0，0），rgba（0，0，0，0） 在原本基础上末尾加a

2.3.2字体

CSS中的font属性用于设置文本的字体样式。它是一个缩写属性，可以用来设置字体的多个属性，包括字体样式，字体大小，字体粗细和字体系列。

语法：

image.png

例如：

image.png

这个例子设置了文本的字体为斜体、小型大写字母、粗体、大小为12像素，行高为1.5倍的Arial字体，如果Arial不可用，则使用sans-serif字体

2.4元素属性的继承

继承是指子元素会继承父元素的样式。这意味着，如果您在父元素上定义了某些样式，那么这些样式将会自动应用到父元素的子元素上

比如说

HTML代码:

<div class="parent">
    <p>This is a child paragraph.</p>
    <p>This is another child paragraph.</p>
</div>

CSS代码:

.parent {
    font-size: 16px;
    color: blue;
}

在这个例子中，父元素是一个含有 class 为 "parent" 的 div 元素，而子元素是两个 p 元素。在 CSS 中，我们为父元素定义了 font-size 和 color 属性。这两个属性都是可以继承的，所以它们会自动应用到子元素上。所以这两个 p 元素的文本都是16px并且是蓝色的。

除此之外，在 CSS 中，我们可以使用关键字 inherit 来显式地继承父元素的样式。这意味着，当我们在子元素上使用 inherit 时，它会继承父元素上相同的属性值。

比如说 HTML代码：

<div class="parent">
    <p>This is a child paragraph.</p>
    <p class="inherit-color">This is another child paragraph.</p>
</div>

CSS代码:

Copy code
.parent {
    color: blue;
}
.inherit-color {
    color: inherit;
}

在这个例子中，父元素是一个含有 class 为 "parent" 的 div 元素，而子元素是两个 p 元素。在 CSS 中，我们为父元素定义了 color 属性。第一个 p 元素会继承父元素的 color 属性，而第二个 p 元素使用了 inherit 关键字来显式地继承父元素的 color 属性

这样就可以达到更好的继承父元素样式的效果

需要注意的是，对于不能继承的属性是不能使用 inherit 关键字来继承的

这就有了我们需要区分的有些属性是可以继承的，有些属性是不可以继承的，比如说

  • font-size, font-family, color 等文本相关的属性是可以继承的
  • padding, margin, border, width, height 等尺寸相关的属性是不可以继承的
  • display, visibility, position 等布局相关的属性是不可以继承的

如果一个属性不能继承，那么就需要在子元素上单独定义这个属性。

继承机制是为了让我们在编写样式时更加方便，减少重复的工作。

2.5CSS布局（Layout）

三种常见的布局技术介绍：

  1. 常规流(Normal Flow): 常规流是默认的文档布局方式，所有元素都在常规流中按照文档顺序排列，并且元素会换行显示。
  2. 浮动(Float): 浮动是一种布局技术，它可以将元素浮动在文档的左侧或右侧，并且其他元素会围绕在浮动元素周围排列。常用于构建多列布局。
  3. 绝对定位(Absolute Positioning): 绝对定位是一种布局技术，它可以将元素定位到文档的指定位置，并且其他元素不会受到影响。绝对定位元素会脱离文档流，不占据空间。

image.png

上图是一个常见盒模型，盒模型是 CSS 中用来描述元素呈现在页面上的矩形框，它包含了元素的内容、内边距、边框和外边距。它是一种盒子模型，由于这种模型的引入，我们能够对元素进行精确的布局。下方会介绍一些常见的布局样式：

  1. width: 该属性用于定义元素的宽度。可以使用绝对值（px）或相对值（%）来定义。相对值是相对于父元素的宽度来计算的。

例如:

.example {
    width: 100px; /* 绝对值 */
}

.example-relative {
    width: 50%; /* 相对值，宽度为父元素宽度的50% */
}
  1. height: 该属性用于定义元素的高度。可以使用绝对值（px）或相对值（%）来定义。相对值是相对于父元素的高度来计算的。
  2. padding: 该属性用于定义元素内容与元素边框之间的空白区域。它可以使用绝对值（px）或相对值（%）来定义，并且可以分别定义上下左右四个方向的值。相对值是相对于元素宽度/高度来计算的。
  3. border: 该属性用于定义元素边框的样式、宽度和颜色。它可以使用绝对值（px）或相对值（%）来定义，并且可以分别定义上下左右四个方向的值。可以使用绝对值（px）来定义边框宽度。
  4. margin: 该属性用于定义元素与其相邻元素之间的空白区域。它可以使用绝对值（px）或相对值（%）来定义，并且可以分别定义上下左右四个方向的值。相对值是相对于父元素宽度/高度来计算的。

这些用法都是常见的CSS的属性用法，在实际的开发中需要根据页面需求来灵活使用。 需要注意的是，使用相对值时，需要有一个参考元素来计算相对值。例如，使用width: 50%时，需要有一个父元素来作为参考。

2.5.1布局方式FlexBox

Flexbox 是一种布局方式，它提供了一种简单的方法来实现灵活的布局。它可以让元素在一个容器中沿着主轴或次轴进行对齐、排列和分配空间。Flexbox 主要用于单行布局。

  • 为了使用 Flexbox 布局，首先需要为容器元素设置 display: flex;
  • flex-wrap属性设置当子元素溢出时是否换行（默认不换行）
  • flex-direction属性设置子元素的排列方向（默认是横向）
  • justify-content属性设置子元素在主轴上的对齐方式
  • align-items属性设置子元素在交叉轴上的对齐方式
  • align-content属性设置多行子元素在交叉轴上的对齐方式

Flexbox 容器上的每一个子元素都是一个 flex 项目，还可以通过以下属性来设置每个 flex 项目：

  • order属性设置 flex 项目的排列顺序

  • flex-grow属性设置 flex 项目所占用剩余空间的比例

  • flex-shrink属性设置 flex 项目在空间不足时的缩小比例

  • flex-basis属性设置 flex 项目的默认大小

  • align-self属性设置单独的 flex 项目在交叉轴上的对齐方式

例如:

.container {
    display: flex; /* 设置 flex 布局 */
    flex-wrap: wrap; /* 子元素溢出时换行 */
    justify-content: center; /* 子元素在主轴上居中对齐 */
    align-items: center; /* 子元素在交叉轴上居中对齐 */
}

.item {
    flex-grow: 1; /* flex 项目占用剩余空间的比例 */
    align-self: flex-start; /* 单独的 flex 项目在交叉轴上顶部对齐 */ 
}

2.5.2布局方式Grid

Grid 是另一种布局方式，它提供了一种网格布局的方式。它可以让元素沿着行和列进行对齐、排列和分配空间。Grid 主要用于多行布局。

  • 为了使用 Grid 布局，首先需要为容器元素设置 display: grid;
  • grid-template-rows和grid-template-columns属性设置网格的行和列的大小
  • grid-row-gap和grid-column-gap属性设置行和列之间的间隔
  • grid-template-areas属性设置网格区域的名称
  • grid-row和grid-column属性设置元素在网格中的位置
  • grid-area属性设置元素所占网格区域
  • justify-items和align-items属性设置元素在行和列上的对齐方式
  • justify-content和align-content属性设置多行元素在行和列上的对齐方式

例如:

.container {
    display: grid; /* 设置 grid 布局 */
    grid-template-columns: repeat(3, 1fr); /* 设置三列，每列的大小相等 */
    grid-template-rows: 100px 200px; /* 设置两行，第一行高100px,第二行高200px */ 
    grid-template-areas: "header header header" "nav main main" "footer footer footer"; /* 设置网格区域的名称 */ 
    grid-row-gap: 10px; /* 设置行之间的间隔 */ 
    grid-column-gap: 20px; /* 设置列之间的间隔 */ 
    justify-content: center; /* 多行元素在行上居中对齐 */ 
    align-content: center; /* 多行元素在列上居中对齐 */ }

.header { 
grid-area: header; /* 将 header 元素放置在 header 区域 */ 
}

.nav { 
grid-area: nav; /* 将 nav 元素放置在 nav 区域 */ 
justify-self: center; /* 将 nav 元素在行上居中对齐 */ 
align-self: center; /* 将 nav 元素在列上居中对齐 */ 
}

Grid布局相比Flexbox更加灵活，可以用来实现更复杂的布局。但是它的语法和用法会比Flexbox复杂一些，需要更多的掌握和理解。

2.5.3float&position

float 属性用来设置元素的浮动，可以将元素浮动在文档流之外。常用值有 left 和 right。

例如:

img {
    float: left; /* 将图片浮动在文本左侧 */
}

position 属性用来设置元素的定位。常用值有 relative，absolute，fixed。

  • relative 定位是相对定位，相对于元素在文档流中的原位置进行定位。
  • absolute 定位是绝对定位，相对于最近的已定位祖先元素进行定位。
  • fixed 定位是固定定位，相对于浏览器窗口进行定位。

例如:

.container {
    position: relative; /* 设置容器相对定位 */
}

.item {
    position: absolute; /* 设置子元素绝对定位 */
    top: 10px; /* 设置子元素距离顶部的距离 */
    left: 20px; /* 设置子元素距离左侧的距离 */
}

Float和Position都是用来解决布局问题的，但是它们的使用场景和效果是不同的。float属性用来解决文字环绕图片，清除浮动等问题；Position属性用来解决绝对定位，相对定位等问题。

3.个人总结

本次课程主要介绍了CSS的原理和功能，并接触了CSS的各类基本样式语法和排版格式，语法和运用方面需要在课后多加实践

avatar
文章
阅读
粉丝