likes
comments
collection
share

开发者入门CSS指南：掌握样式与布局

作者站长头像
站长
· 阅读数 23

思考，输出，沉淀。用通俗的语言陈述技术，让自己和他人都有所收获。 作者：毅航😜

一份写给后端开发者的CSS入门指南。

前言

如果你使用过Word的话，你一定知道，在Word中我们可以文字信息设定如居中、颜色、大小等一系列操作，从而使得文本信息显得更加整齐和规范。

类似的，在前端中我们也可以为html的文本信息设定相应的样式信息，只不过不是通过点击的方式，而是需要通过一门名叫CSS语言的来完成。

我们并不会花费过多的篇幅去介绍CSS相关属性，相反我们会提纲挈领的列举出CSS中一些关键的知识点，让你快速掌握CSS中的重点内容。

在文章开始之前，不妨思考这样一个问题，如果让你来谈一谈CSS你会从哪些角度来入手呢？是分析CSS布局还是介绍CSS错综复杂的属性，亦或是阐述CSS在前端开发中承担的重要职责。相信无论从哪个角度都会有独属于你的理由。

接下来，不妨跟着笔者的思路，看看笔者是如来梳理CSS相关知识点的！相信看到最后你一定会有所收获的~

如果让笔者来总结CSS相关知识点，笔者会首先会将其归结为：1. 语法规范；2.功能角度 两部分。进一步，在语法规范中将包括CSS使用的基本规范，比如@Rule规则、选择器、基本书写规范等。而从功能角度来看，主要包括如下包括：布局、文字色彩、动画几个角度。

语法规范

CSS的语法规则可以分为两部分。一部分是key-value的形式的规则，即为对应的属性设定对应的值，然后浏览器在解析过程中会在页面中渲染出对应的样式。 这其实就是CSS的语法规范。除此之外，CSS 还有一种称为 @-rule，也就是 @ 规则。对于这个你可能所谓的at 规则你可能陌生，但是看到@Import,@charset这些你肯定不会陌生。**而这些@规则，主要用于定义样式表的特殊行为和规则。**具体来看：

  1. @charset:@charset 用于提示 CSS 文件使用的字符编码方式；
  2. @import : 主要用于引入另外一个 CSS 文件，你可以将其理解为java开发中import关键字；
  3. @ key-frames:其主要用于定义动画关键帧。

事实上，除了上述给出的@规则外，CSS中还有很多其他@规则，具体可参考：CSS标准。

明白了，CSS中的规则后，下一步就是将定义的key-value规则作用到对应的超文本标签上。回到我们熟悉的Word中来，在Word中我们可以通过点击的形式来完成信息的选择，而在CSS中则只能通过 选择器来完成。

所谓选择器，可能听起来很高大，但本质就是根据对应属性，选择对应标签的一种工具罢了。而在CSS中选择器的种类也有很多，但大致可以分为如下几种：

  • 简单选择器：针对某一特征判断是否选中元素。例如，类选择器，ID选择器、class选择器等。
  • 复合选择器：连续写在一起的简单选择器，其可以看做多个简单选择的共同组合形式。比如，期待找到所有div标签下class为app的div标签，此时便类选择器结合class选择器的形式来完成。此时你可能会疑惑，为什么不直接通过class选择器来完成呢？答案很简单，因为你并不能保证你的Html页面中只有一个class属性为app的标签。
  • 复杂选择器：由“（空格）”“ >”“ ~”“ +”“ ||”等符号连接的复合选择器，其主要根据父元素或者前序元素检查单个元素。

CSS的功能属性

布局

CSS 本身支持多种布局方式，我们可以选择自己适合的那一种。我们能够在网上看到关于正常流的各种有关资料，比如：块级格式化上下文、margin 折叠，浮动布局等等。接触了这么的概念，不知你是否真正想过CSS中当初接触CSS时谈及的正常流究竟是东西？

其实，正常流很好解释，无非就是依次排列，排不下了换行。 理解了正常流后，在看浮动将非常轻松。

什么是浮动呢？如果你经常使用word的话，浮动其实也很好理解，浮动本是就是Word中图片的环绕方式罢了,如下图所示：

开发者入门CSS指南：掌握样式与布局

上图的这个效果在Word中可以理解为嵌入,当然你可以将效果设定为浮于文字上方。可以看到浮动就是浮在正常文字流上方。

你看，当你理解了正常流的基本概念，剩下的功能东西其实只需要在它的基础上延伸一下就好啦！为了加深理解，我们再来对正常流进行一个具体介绍，这样你在后续理解的其他布局的时候就可以举一反三啦！

事实上，在 CSS 标准中，其规定了如何排布每一个文字或者盒的算法，我们可以认为排版过程是这样的：

格式化上下文 + 盒大小 = 位置

那什么是格式化上下文呢？格式化上下文（Formatting Context）是一种关于元素如何布局和相互作用的概念。它是一种渲染模型，用于决定元素在页面中的位置和尺寸。其大致如下几种：

  1. 块级格式化上下文（Block Formatting Context，BFC） ：BFC是一个用于布局块级盒子的独立上下文，其中的元素垂直排列。BFC中的元素不会与外部元素发生重叠，而是按照规则垂直排列，一个在另一个之下。常见情况下，块级元素、浮动元素、绝对定位元素。
  2. 内联格式化上下文（Inline Formatting Context，IFC） ：IFC用于布局内联元素的上下文，其中的元素水平排列，一个在另一个之后。

这其实就涉及到我们平时经常谈论的盒模型，通常我们需要排版的盒，是分为块级盒和行内级盒的，所以排版需要分别为它们规定了块级格式化上下文和行内级格式化上下文。

具体来看，如果我们单纯地看格式化上下文，规则其实是非常简单的。块级格式化上下文顺次排列元素：

开发者入门CSS指南：掌握样式与布局

行内级格式化上下文顺次排列元素：

开发者入门CSS指南：掌握样式与布局

更进一步，当我们要把正常流中的一个盒或者文字排版，需要分成三种情况处理。

  • 当遇到块级盒：排入块级格式化上下文。
  • 当遇到行内级盒或者文字：首先尝试排入行内级格式化上下文，如果排不下，那么创建一个行盒，先将行盒排版（行盒是块级，所以到第一种情况），行盒会创建一个行内级格式化上下文。
  • 遇到 float 盒：把盒的顶部跟当前行内级上下文上边缘对齐，然后根据 float 的方向把盒的对应边缘对到块级格式化上下文的边缘，之后重排当前行盒。

至此，正常流也就大致介绍完了，后续常见的布局形式大部分都是从此延伸而来，在此我们便不再具体赘述了。

文字色彩

文字和颜色，可以说是CSS中使用最频繁的属性了。CSS中通过设定字体样式可以改变字体形状，这是因为字体样式不仅包括字体的字号大小，还包括字体的粗细、风格和变体等属性。常见属性如下：

  1. font-family：用于指定字体的族类，可以设置多个备用字体，浏览器会按顺序查找可用的字体。
  2. font-size：用于设置字体的大小。
  3. font-style：用于设置字体的风格，例如斜体。

当我们在CSS中设定这些属性后，浏览器根据CSS样式规则和字体文件，将文本字符映射到相应的字形（字符的可视表示）。而不同字形的设计、尺寸和样式属性导致了文本呈现的多样性。所以通过调整这些字体样式属性，可以实现不同外观和排版的文本效果，从而满足设计和布局的需求。给我们展现出来的结果就是，通过设定某些字体属性就能实现某些效果。

动画

在CSS中的动画原理涉及到CSS属性和关键帧动画的结合，以实现元素的平滑过渡和动态效果。具体来看，有如下几种形式：

  1. CSS属性和关键帧动画：CSS动画基于CSS属性的变化，您可以定义一个或多个属性的初始状态和最终状态，然后通过关键帧动画来指定中间状态，从而创建动画效果。这些中间状态在动画的不同时间点上插值，以平滑过渡属性值。

  2. 关键帧：关键帧是动画的核心，它们定义了动画在不同时间点上的状态。关键帧使用@keyframes规则来声明，通常指定0%（初始状态）到100%（最终状态）之间的状态，也可以添加中间状态。具体如下：

    @keyframes myAnimation {
  0% {
    /* 初始状态 */
    transform: translateX(0);
  }
  50% {
    /* 中间状态 */
    transform: translateX(100px);
  }
  100% {
    /* 最终状态 */
    transform: translateX(200px);
  }
}

  3. 动画属性：要应用动画效果的元素通常使用animation属性。该属性包含动画的名称、持续时间、速度曲线、延迟时间等参数。

    cssCopy code
.animated-element {
  animation-name: myAnimation; /* 关键帧动画名称 */
  animation-duration: 2s; /* 持续时间 */
  animation-timing-function: ease-in-out; /* 速度曲线 */
  animation-delay: 1s; /* 延迟时间 */
}

  4. 触发动画：一旦为元素定义了动画属性，动画将在元素上触发。可以使用JavaScript、伪类、交互事件（如hover）或其他方式来触发动画。

    cssCopy code
.animated-element:hover {
  animation-name: myAnimation; /* 鼠标悬停时触发动画 */
}

  5. 动画执行：一旦动画被触发，它将根据指定的动画属性开始执行。元素将从初始状态逐渐过渡到最终状态，中间状态将根据关键帧进行插值。动画执行完成后，元素将保持在最终状态，除非您使用反向动画或其他方式将其还原。

事实上，CSS动画的原理在于通过CSS属性和关键帧来定义动画的状态和行为，然后通过浏览器的渲染引擎来执行动画。 进一步，动画的平滑性和性能通常由浏览器引擎来优化，以提供流畅的用户体验。

总结

CSS（Cascading Style Sheets）是一种用于控制网页或文档的外观和布局的样式表语言。它与Html结合使用，用于定义网页元素的样式和排版，从而实现网页的视觉效果。

简单来说，CSS的主要作用是：

  1. 颜色和字体：您可以用CSS指定文本的颜色、字体、大小等，让文字看起来漂亮。
  2. 布局：CSS可以帮助您控制元素的位置，比如页面的标题放在哪里，图片怎么摆放，以及如何将内容分成多列。
  3. 背景和边框：您可以添加背景颜色或图片，还可以给元素加上边框，让页面更有层次感。
  4. 响应式设计：CSS还可以用于创建响应式设计，使网页在不同设备上都能良好显示，包括手机、平板电脑和计算机。

总之，CSS是一种强大的工具，可以帮助您让网页看起来更漂亮、更有吸引力，并确保它们在不同设备上都能正常显示。而本文的作用在于抛砖引玉的向后端开发者介绍CSS同时，也在为前端开发者梳理CSS知识点。