标签: inline-styles

一个js插件正在添加一种令我头疼的风格:

element.style {
     z-index: 100 !important;
}

所以我试过这个:

html body div#shell div#shellContent div#bottomPart div#rightCol div.containerBox    
div#embedContainer div#janrainEngageEmbed div.janrainContent div#janrainView   
div.janrainHeader[style] {
    z-index: 1 !important;
}

但仍然没有.

我正在搞乱GoogleDocs,它有非常非常原始的CSS支持.如果您上传MSWord .doc或HTML文件并将其导出为HTML,则所有样式都将内联应用.它们在html文件中有一个样式块,但是当您将HTML文件上传回谷歌文档时,它不会应用任何非内联样式.

所以我在想"也许这里有一个红宝石工具".有没有什么我可以使用一些CSS并将其解析为HTML节点,也许是一些nokogiri插件？

我想在我的ClojureScript应用程序中使用这个Om片段:

    (dom/img
     #js {:className "img-circle"
          :src "data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
          :style "width: 140px; height 140px;"
          :alt "Generic Placeholder Image"})

这会"爆炸"并停止整个页面的整个渲染!

我认为原因与React.js如何处理样式有关.根据内联样式:

在React中,内联样式未指定为字符串.相反,它们使用一个对象来指定,该对象的键是样式名称的camelCased版本,其值是样式的值,通常是字符串

有什么好方法可以解决这个问题？我通常不喜欢使用内联样式,但我想知道如何使这个示例工作.

当我在生产中加载 ReactJS 项目时，我在浏览器检查器（Chrome、Brave、Safari）中收到以下错误：

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src-elem 'self' https://fonts.googleapis.com". Either the 'unsafe-inline' keyword, a hash ('sha256-TMIFk5ZjGNpczjRE6YVaBrPXVNzANj9JRK+w2bh9TX8='), or a nonce ('nonce-...') is required to enable inline execution.

我使用以下命令构建ReactJS项目（它解决了内联脚本问题，但没有解决内联样式）：

INLINE_RUNTIME_CHUNK=false npm run build

这是 CSP 策略部分，参考样式：

Header set Content-Security-Policy "default-src 'self'; style-src 'self'; style-src-elem 'self' https://fonts.googleapis.com; ..."

我相信问题发生在构建阶段，当 React 生成块文件（名称如“ 2.3c013fe3.chunk.js ”）并在代码中嵌入内联样式时，尽管我在源代码中的任何地方都没有使用内联样式。所有样式都包含在 fileX.module.css 中并导入到 tsx 文件中，如下例所示：

示例.tsx

import styles from './Example.module.css';

const Example = () => (
    <div className={styles.container}>
        Hello world …

是否有可能实现这个梯度而不必首先定义它<defs>？

我正在开发一个网络地图,显示设备(交换机,路由器......)之间链路上的网络负载.我使用SVG绘制它,但我不想定义所有渐变,因为已经从后端系统向我提供了开始(上行链路)和结束(下行链路)颜色,并且可以通过我们的应用程序中的模板变量访问.

我希望使用内联样式,因为它更容易执行代码,因为我不必跟踪数千个链接引用并确保为每个链接指定正确的渐变,因为每个渐变将为'99 .9%'我在网络地图中绘制的每一行(链接加载)的时间都是唯一的

简单来说,我可以做一些事情: <line stroke=<linearGradient...？无需定义一个和引用它？像CSS中的样式:<span style='color: blue'> .. </span>

<svg width="1024" height="800">
 <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#000066;stop-opacity:1" />
      <stop offset="50%" style="stop-color:#000066;stop-opacity:1" />
      <stop offset="51%" style="stop-color:#00ffff;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#00ffff;stop-opacity:1" />
    </linearGradient>
  </defs>
<text x="50" y="50" fill="red">foo bar</text>a
<line stroke="url(#grad1)" x1="130.8757632890282"
      y1="163.6818288670081" x2="651.9483366457684" y2="415.704113030817" />
</svg>

(http://jsfiddle.net/GgJnB/)

我基本上打造了一篇长篇文章,其中散布着各种各样的图像.我希望第一张图片为"float:left",第二张图片为"float:right".我知道我可以像这样设计图像:

img {
float: left;
}

这使得每个图像具有相同的样式.如何对每张图片进行不同的样式设置 我试图将每个图像放在一个不同的div类中,这样我就可以对它们进行不同的设置,但它不起作用.

我也明白,我可以在html标签中设置每个图像的样式,如下所示:

<img src="ABCD.png" alt="Raoul Hausmann's ABCD" align="left" height="300px">

我一直听说最好将样式保存在外部样式表(CSS)中,与html分开.这是需要内联样式的情况吗？

我需要在我的应用程序中显示带内联样式的 html .有很多的文本必须在不同的意见,所以我不能使用网页视图(我试着用很多网页视图的,但应用程序变得很慢).正如我知道的TextView可以显示HTML,但它不能老是显示HTML内联样式.所以我该怎么做？有没有办法显示它或只生成带有内联样式的 HTML的简单标签的html ？

所以我需要像这样显示html:

<p style="text-align: center;"><span style="color: #ff0000; font-size: 36pt; font-family: 'comic sans ms', sans-serif;">Article Title</span></p>

但是TextView无法理解风格.

好的，我已经使用 Webpack 导入了一个 css 文件，style-loader如下css-loader所示：

import './style.css'

Webpack 通过style标签将其附加到我的页面。到目前为止，一切都很好。但是，当应用程序的状态发生变化时，我想删除这种特定的样式。当然，我可以使用 删除它document.querySelector('style')，但是有一些自然的 Webpack 方法可以做到这一点吗？

提前致谢。

例如，我有以下 CSS：

.myClass {
  background: -moz-linear-gradient(left, #FFF 0%, #000 100%), url("http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg"); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #FFF 0%, #000 100%), url("http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg"); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #FFF 0%,  #000 100%), url("http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg"); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

我正在创建一个带有渐变的图像。请注意，我需要使用三个background属性来处理对不同浏览器的支持。我如何在 React 中使用内联样式来做到这一点？

我知道 React 中的内联样式接受字典来表示我们的 CSS 样式，但在这种情况下，我最终会得到重复的background键。例如，在这种情况下，这将是我的字典：

const stylesDict = {
  background: "-moz-linear-gradient(left, #FFF 0%, #000 100%), url('http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg');", /* FF3.6-15 */
  background: "-webkit-linear-gradient(left, #FFF 0%, #000 100%), url('http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg');", /* Chrome10-25,Safari5.1-6 */
  background: "linear-gradient(to right, …

对于maps.googleapis.com的common.js文件，我在chrome开发者工具的控制台中多次收到以下错误

common.js:15 
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://fonts.googleapis.com https://s3.amazonaws.com https://maxcdn.bootstrapcdn.com". Either the 'unsafe-inline' keyword, a hash ('sha256-mmA4m52ZWPKWAzDvKQbF7Qhx9VHCZ2pcEdC0f9Xn/Po='), or a nonce ('nonce-...') is required to enable inline execution.

我需要使用严格的 CSP 策略，因此不能使用 unsafe-inline 或 unsafe-eval 来放松策略。为了支持严格的 CSP 策略，不允许内联样式和脚本编写。似乎内联样式已在 google 地图 api 的 common.js 中使用，因此我收到上述错误。

有什么建议吗？