css样式引入-从 JavaScript（1） 生成 CSS。

bendan520 2023年8月21日 css 0

序言在过去几年

中，在JavaScript中生成CSS的想法变得越来越流行，这在很大程度上要归功于React和Svelte等响应式框架的主导地位。这样的框架不会强制使用 JavaScript 来设置组件的样式，但它们可以很好地工作。为此，出现了许多CSS-in-JS库来简化该过程。本文向您介绍了 CSS-in-JS，然后展示了一些有前途的框架来实现它。

JavaScript 中的 CSS 是什么？

旧式CSS基本上有两个选项：定义内联和从外部文件加载。在这两种情况下，浏览器都会加载 CSS，对其进行解析，然后将变体应用于标记。CSS-in-JS提供了第三种方法：在代码中以编程方式生成CSS。

这里最大的优点是 JavaScript 代码可以完全访问变量和条件，包括那些表示应用程序状态的变量和条件。为此css样式引入，可以创建CSS以完全响应实时上下文。缺点是降低了复杂性。这确实是一个折衷方案，因为传统CSS的用途之一是简单，至少在样式加载形式方面是这样。

CSS-in-JS提供了一种句子模式，可以将JavaScript转换为浏览器可以应用的样式。无论使用哪种框架，结果都将类似于示例 1。

示例 1：带有样式化组件框架的 CSS in JS

// Create a Title component that'll render an 
 tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a Wrapper component that'll render a 
 tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

示例 1 取自样式化组件框架。每个框架都有自己的约定，但此示例为您提供了任何系统的基本方面：

样式引入优先级_样式引入方式_css样式引入

1. 在 JavaScript 句子中定义 CSS。

2. 在标记中应用样式（如 JSX）。

组件级 CSS

小应用样式是出了名的臃肿。了解影响小布局中特定元素特征的激励措施可能具有挑战性，并且更难有效修改。这些漏洞使得维护CSS有时是一项艰巨的任务。

CSS-in-JS使用组件范围的CSS解决了这个问题。几乎所有的JavaScript框架都是面向组件的css样式引入，因此为这些组件生成CSS是一个自然的选择。

通过手动确保组件中的变体仅适用于该组件，应用程序开发人员无需设计全局唯一的类来应用于所有类型的页面和布局部件。组件级 CSS 意味着布局的组成方式自然会影响 CSS 样式的应用方式。

css样式引入_样式引入方式_样式引入优先级

事实上，应用程序仍然需要能够应用样式并从中继承。任何值得称道的CSS-in-JS框架都必须解决这个问题。

样式存在于使用它们的位置附近

CSS in-JS 的另一种用途

是样式可以在应用它们的位置附近定义，尽管并非所有 CSS-in-JS 框架都提供此功能。这对于编写和维护代码的开发人员来说是一个福音。将样式规则与使用它们的结构放在一起应该更容易理解正在发生的事情。据悉，在开发时，需要在组件级代码和标记以及全局级变体表之间切换概念上下文是一个巨大的胜利。这就像最好的内联 CSS 即时性和导出样式的可组合性。

CSS 如何设置边框透明度？

.CSS

提供 HTML 标记语言的样式说明，定义元素的显示方式。那么CSS是如何设置边框透明度的呢？让我们来看看CSS是如何设置边框透明度的

手抄报边框样式_css边框样式_边框样式属性

CSS 如何使边框透明：

使用RGBA，红红白之比为200，a为参数，可以将其设置为0到1之间的数字，但绝不为负值，语法如下：

.div {background： rgba（200，200，200，0.75）; }

手抄报边框样式_css边框样式_边框样式属性

接下来我们在 div 中添加样式，首先设置上下左右四个边框，同时设置四个边框以设置相同的高度和长度css边框样式，代码如下：

  1. div
  2. {
  3. 	width: 100px;    height:100px;
  4. 	border-top:10px solid  rgba(200,200,200,0.25);
  5. 	border-right:10px solid  rgba(200,200,200,0.5);
  6. 	border-bottom: 10px solid  rgba(200,200,200,0.75);
  7. 	border-left:10px solid  rgba(200,200,200,1);	
  8. }

显示功效：

手抄报边框样式_css边框样式_边框样式属性

我们可以通过更改参数来调整边框的透明度，a的参数越大，

颜色越深css边框样式，值为 0 表示透明度

css边框样式_手抄报边框样式_边框样式属性

RGBA 颜色模式与 RGB 相同，但在 RGB 模式下添加了 alpha 透明度

RGBA（R，G，B，A）

价值：

css边框样式_边框样式属性_手抄报边框样式

R：红色值。正整数 |百分比

G：绿色值。正整数 |百分比

B：蓝色值。正整数 |百分比

A：阿尔法透明度，在0~1之间

推荐：CSS 文档