Question

我正在尝试使用外部css文件为具有IPython输出单元格的html表输出设置样式。我想帮助理解如何做到这一点并创建了几个用于探索的测试用例。内联或外部样式都不像我期望的那样 -

我希望做的外部：

htmlstr = "<html><head><link rel='stylesheet' type=\"text/css\" href=\"local.css\"></head><body>TEST BODY</body></html>"
HTML(htmlstr)

似乎没有读取该文件。我尝试过不同的路径并移动文件;但是，它似乎没有得到认可。

内部样式：

htmlstr = "<html><head><style>body {background-color:yellow;}</style></head><body>TEST BODY</body></html>"
HTML(htmlstr)

在IPython中执行此操作会改变IPython本身的背景。这是所有IPython的背景更改为黄色，输入单元格保持白色。哪个很酷;但是，我想调整特定输出的样式。而且，我想将CSS存储在外部文件中。有人能帮我理解这种行为吗？

IPython非常适合提供许多可能性，并且有可能为我的需求提供更好的途径。

Answer 1

您可以简单地使用更具体的CSS属性！例如。在markdown单元格中（或者custom.css with是用于为笔记本及其内容设置样式的默认外部文件）

<style>
th {
background-color:#55FF33;
}
td {
background-color:#00FFFF;
}
</style>

使用以下代码

from IPython.display import HTML
table = "<table><tr><th>bar</th><th>bar</th></tr><tr><td>foo</td><td>foo</td></tr></table>"
HTML(table)

给出
enter image description here

Answer 2

如果将样式放置在单独的笔记本中（至少在Ubuntu 18.04的Jupyter Lab中用于），则样式将继承到其他笔记本中。

示例：

<style>
       h1 {
            color:red;
            font-size: 6em;
       }
   </style>

OR

    container = "jp-InputArea"
    style = "<style>"
    _dict = {}
    im = "!important"

    # -------------------------------------------------------------------------
    arr = {}
    arr['h1'] = ["color:red","font-size:6em;"]
# -----------------------------------------------------------------------------

    for i,(el, st) in enumerate(arr.items()):
        arr_str = ""


        for j in arr[el]:
            arr_str = arr_str + j + " !important; "

        style = style + (r".jp-InputArea %s { %s }\n") % (el,arr_str)

    style = style +"</style>"
    HTML(style)

CSS在IPython Notebook输出中的HTML样式

2 个答案: