styles 相关问题

不要使用此标签。此标记目前没有单一的,明确定义的含义。它通常用于代替[css]或与[css]结合使用。它还用于有关用户界面外观和源代码格式问题的问题。

将XAML中Material Design中按钮样式的高度属性设置为默认

我在 XAML 框架中使用 MaterialDesign 来设计我的 WPF 应用程序。 在我的应用程序中的一个地方,我想使用一个通过 MaterialDesignPaperButton 设计样式的按钮。 因为我有点想要...

回答 1 投票 0

使用 #show - Typst 为标题编号

当我开始在 Typst 中使用 show 方法时,我丢失了标题编号。 我怎样才能把它拿回来? #显示标题:它 => [ #block(填充:白色,起始位置:5pt,半径:20%, 下划线(笔画:...

回答 1 投票 0

Tailwindcss 不会生成所有类

我知道 tailwindcss cli 根据 tailwins.config.js 中的“内容”选项仅创建项目使用的类。 但是...有没有办法避免这种优化(不考虑...

回答 2 投票 0

如何使用 Font 类以粗体打印用户输入

这是我的程序的一个片段,要求用户输入他们的船只坐标,我希望用户输入以粗体打印。 导入java.util.Scanner; 公共类工作区{ 公共静态...

回答 1 投票 0

包含的块的样式/脚本

好吧,我不确定我是否错过了这里的技巧。但我在文档或网上找不到任何解决方案。 基本上我试图在模板块中包含一大块 JavaScript,但是......

回答 2 投票 0

React 本机自定义字体在 700 中不起作用

我在react-native版本0.73.5中使用Quicksand作为自定义字体。当我提供所有字体时,这些值就起作用了。当字体粗细设置为 600 时,它可以工作,如果我愿意,我可以提供粗体字体。但是当字体重...

回答 1 投票 0

如何使用 css 设计 django 表单样式?

我早些时候尝试寻找答案,但似乎无法弄清楚一些事情。我正在 form.py 文件中创建表单,因此它是一个 python 文件。 这是我的 forms.py 文件: 类 UploadForm(ModelFo...

回答 5 投票 0

Openpyxl 创建带有样式的表格会生成意想不到的颜色

我正在使用openpyxl官方示例中的示例在excel中创建样式表。对于风格,我使用以下内容 样式 = TableStyleInfo(name="TableStyleMedium13", showFirstColumn=Fa...

回答 1 投票 0

通过外部包在React Native中应用阴影 by alan eu

我正在使用我下载的包将阴影应用到一个盒子上 https://github.com/alan-eu/react-native-fast-shadow 但我无法让阴影移动到物体的后面。 在这里我...

回答 1 投票 0

根据身体高度应用CSS样式

我有一个简单的例子,当div高度小于400px时应用样式。 .card-container { 容器类型:尺寸; ...</desc> <question vote="0"> <p>我有一个简单的例子,当 div 高度小于 400px 时应用样式。</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style&gt; .card-container { container-type: size; container-name: sidebar; } .card-container { background: #ffe4e8; width: 200px; height: 100px; } @container sidebar (max-height: 400px) { .card-container div:first-child { background: green; } } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&#34;card-container&#34;&gt; &lt;div&gt; 1 &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>我怎样才能做同样的事情,但身体高度不同?</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style&gt; .table-container tbody { container-type: size; container-name: sidebar; } @container sidebar (max-height: 400px) { .table-container tbody { background: green; } } table, th, td { border: 1px solid black; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table class=&#34;table-container&#34;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;123456789&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>也许我做错了什么或者 CSS 容器查询仅适用于 div?</p> <p>我需要根据身体高度将样式应用于桌子。</p> <p>当然我可以用JavaScript获取body高度并应用样式,但认为CSS和容器查询更清晰。</p> </question> <answer tick="false" vote="0"> <p>CSS 容器查询是一个强大的工具,但到目前为止,它们主要支持具有显式块级容器的元素(如 <pre><code>tbody</code></pre> 元素)。 但是你可以通过添加一个js脚本来检查<pre><code>tbody</code></pre>元素高度是否小于400px来添加类名<pre><code>special-size</code></pre>来实现这一点。</p> <pre><code>document.addEventListener(&#34;DOMContentLoaded&#34;, function() { var tbody = document.getElementById(&#39;my-tbody&#39;); if (tbody.offsetHeight &lt; 400) { tbody.classList.add(&#39;special-size&#39;); } }); </code></pre> <p>这是一个例子:</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.addEventListener(&#34;DOMContentLoaded&#34;, function() { var tbody = document.getElementById(&#39;my-tbody&#39;); if (tbody.offsetHeight &lt; 400) { tbody.classList.add(&#39;special-size&#39;); } });</code></pre> <pre><code> .table-container { border-collapse: collapse; width: 100%; } .table-container, th, td { border: 1px solid black; } .special-size { background: green; }</code></pre> <pre><code>&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;table class=&#34;table-container&#34;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;123456789&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody id=&#34;my-tbody&#34;&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;kkk&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

回答 0 投票 0

WPF 图表图例项目样式

我正在尝试在 WPF 图表中设置图例项的样式。我有以下 LegendStyle,但这不会改变任何内容。我究竟做错了什么? 谢谢! <question vote="1"> <p>我正在尝试在 WPF 图表中设置图例项目的样式。我有以下 LegendStyle,但这不会改变任何内容。我做错了什么?</p> <p>谢谢!</p> <pre><code>&lt;Style x:Key=&#34;LegendStyle1&#34; TargetType=&#34;{x:Type datavis:Legend}&#34;&gt; &lt;Setter Property=&#34;ItemContainerStyle&#34;&gt; &lt;Setter.Value&gt; &lt;Style TargetType=&#34;charting:LegendItem&#34;&gt; &lt;Setter Property=&#34;Template&#34;&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType=&#34;charting:LegendItem&#34;&gt; &lt;Border Background=&#34;{TemplateBinding Background}&#34; BorderBrush=&#34;{TemplateBinding BorderBrush}&#34; BorderThickness=&#34;{TemplateBinding BorderThickness}&#34;&gt; &lt;StackPanel Orientation=&#34;Horizontal&#34; VerticalAlignment=&#34;Center&#34;&gt; &lt;Rectangle Width=&#34;40&#34; Height=&#34;40&#34; Fill=&#34;{Binding Background}&#34; Stroke=&#34;{Binding BorderBrush}&#34; StrokeThickness=&#34;1&#34; VerticalAlignment=&#34;Center&#34; /&gt; &lt;datavis:Title Content=&#34;{TemplateBinding Content}&#34; VerticalAlignment=&#34;Center&#34;/&gt; &lt;/StackPanel&gt; &lt;/Border&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre> </question> <answer tick="false" vote="0"> <p>我想也许<pre><code>TargetType=&#34;charting:Legend&#34;&gt;</code></pre></p> <pre><code>&lt;Style x:Key=&#34;LegendStyle1&#34; TargetType=&#34;charting:Legend&#34;&gt; &lt;Setter Property=&#34;ItemContainerStyle&#34;&gt; &lt;Setter.Value&gt; &lt;Style TargetType=&#34;charting:LegendItem&#34;&gt; &lt;Setter Property=&#34;Template&#34;&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType=&#34;charting:LegendItem&#34;&gt; &lt;Border Background=&#34;{TemplateBinding Background}&#34; BorderBrush=&#34;{TemplateBinding BorderBrush}&#34; BorderThickness=&#34;{TemplateBinding BorderThickness}&#34;&gt; &lt;StackPanel Orientation=&#34;Horizontal&#34; VerticalAlignment=&#34;Center&#34;&gt; &lt;Rectangle Width=&#34;40&#34; Height=&#34;40&#34; Fill=&#34;{Binding Background}&#34; Stroke=&#34;{Binding BorderBrush}&#34; StrokeThickness=&#34;1&#34; VerticalAlignment=&#34;Center&#34; /&gt; &lt;datavis:Title Content=&#34;{TemplateBinding Content}&#34; VerticalAlignment=&#34;Center&#34;/&gt; &lt;/StackPanel&gt; &lt;/Border&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre> </answer> </body></html>

回答 0 投票 0

人鱼风格失败

我正在使用 mermaid 生成带有样式的基本 UML 类图并将其导入到draw.io。我正在尝试将类定义样式应用于我的类,但是我不断收到错误: `错误:

回答 1 投票 0

CSS - 转换

HTML \\\\ CSS .buttonFrame { 位置:相对; 宽度:55 像素; 身高... HTML \<div class="buttonFrame"\>\<div class="btn"\>\</div\>\</div\> CSS .buttonFrame { position: relative; width: 55px; height: 20px; border-radius: 12px; border: 2px solid black; overflow: hidden; top: 30%; left: 45%; z-index: 100px; } .btn { border-radius: 12px; width: 0%; height: 0%; background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100% ); background-position: 0 0; transition: width 2s, height 2s; /* Added height transition */ } .buttonFrame:hover .btn { /* Changed to target .btn on hover of .buttonFrame */ width: 100%; /* Adjusted width for hover effect */ height: 100%; /* Adjusted height for hover effect */ background-position: 0 0; /* transform: scaleX(2); */ } 过渡效果是从左上角核心开始,但需要从左上角开始 我尝试了互联网和人工智能的几种方法,但没有任何效果。基本上我试图使它像一个小的加载栏,当我将鼠标悬停在块上时加载。 正如 A Haworth 在评论中提到的,仅在悬停和过渡时设置 height 会使其从 0 更改为 100%。您可以将其删除并将 height 添加到按钮。 另外,z-index没有计量单位,应该是z-index:100; 保留您的代码: .buttonFrame { position: relative; width: 55px; height: 20px; border-radius: 12px; border: 2px solid black; overflow: hidden; top: 30%; left: 45%; /* z-index: 100px; */ z-index: 100; } .btn { border-radius: 12px; width: 0%; height: 0%; background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100%); background-position: 0 0; /* transition: width 2s, height 2s; */ transition: width 2s; height: 100%; } .buttonFrame:hover .btn { width: 100%; /* height: 100%; */ /* background-position: 0 0; */ } <div class="buttonFrame"> <div class="btn"></div> </div> 请注意,您可以使用 after 用一个元素来制作它。这是仅包含所需属性的片段。 .btn { width: 55px; height: 20px; border: 2px solid black; overflow: hidden; } .btn, .btn:after { border-radius: 12px; } .btn:after { display: block; content: ""; width: 0%; transition: width 2s; height: 100%; background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100%); } .btn:hover:after { width: 100%; } <div class="btn"></div>

回答 1 投票 0

如何在geo server css中添加if逻辑?

目前我的道路代码名称和道路代码并排显示。 例如:X123-高速公路 但当道路名称不存在时,它会显示道路代码-道路代码,反之亦然,显示道路名称-道路

回答 1 投票 0

如何在 Angular17 中更改 CSS 类的动态值

我尝试在类中更改动态值,在 React 中这非常容易,但我是 Angular 的新手,我不知道该怎么做。大家可以帮帮我吗T_T 在此处输入图像描述Html 文件包含值(c...

回答 1 投票 0

WPF - 根据 IsEnabled 属性更改按钮背景的样式

我为我的按钮做了这个样式,它加载得很好 但我现在尝试根据 IsEnabled 属性设置不同的背景,但这似乎不起作用 我为我的按钮制作了这种样式,并且加载得很好 但我现在尝试根据 IsEnabled 属性设置不同的背景,但这似乎不起作用 <SolidColorBrush x:Key="Color" Color="#FFADD2CC"/> <SolidColorBrush x:Key="Color_Disabled" Color="#FF8D9B98"/> <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="Height" Value="32"/> <Setter Property="Padding" Value="8,4,8,4"/> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border Background="{TemplateBinding Background}"> <Grid> <Rectangle x:Name="BackgroundRect" Fill="{StaticResource Color}" RadiusX="2" RadiusY="2"/> <ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </Border> <ControlTemplate.Triggers> <!-- DataTrigger to change the background color based on IsEnabled property --> <DataTrigger Binding="{Binding IsEnabled, RelativeSource={RelativeSource TemplatedParent}}" Value="True"> <Setter TargetName="BackgroundRect" Property="Fill" Value="{StaticResource Color}"/> </DataTrigger> <DataTrigger Binding="{Binding IsEnabled, RelativeSource={RelativeSource TemplatedParent}}" Value="False"> <Setter TargetName="BackgroundRect" Property="Fill" Value="{StaticResource Color_Disabled}"/> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> 我在我的主模板中使用它,就像这样 <Button Grid.Column="1" Content="Button Text" ToolTip="Some tooltip" Click="OnClick" Style="{StaticResource ButtonStyle}" Margin="0,0,4,0" IsEnabled="false"/> 我希望按钮根据 IsEnabled 值具有不同的颜色 感谢您的帮助 您只需要在 Trigger 属性上设置一个普通的 IsEnabled 即可设置按钮的 Background。 ControlTemplate 中的 Grid 和 Rectangle 是多余的。 <SolidColorBrush x:Key="BackgroundEnabled" Color="#FFADD2CC"/> <SolidColorBrush x:Key="BackgroundDisabled" Color="#FF8D9B98"/> <Style x:Key="ButtonStyle" TargetType="Button"> ... <Setter Property="Background" Value="{StaticResource BackgroundEnabled}"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border Background="{TemplateBinding Background}"> <ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Border> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Background" Value="{StaticResource BackgroundDisabled}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

回答 1 投票 0

浏览器中未加载样式和CSS

我已经更新了 React 项目上的软件包版本,并且样式现在未加载。 在代码中我使用这样的样式: 从“../WrappersCommon.scss”导入样式; ... 我已经更新了 React 项目上的软件包版本,并且样式现在未加载。 在代码中我使用这样的样式: import styles from "../WrappersCommon.scss"; ... <div className={styles["main-layout"]}> 在 webpack 配置中我有 test: /.(scss)$/, use: [ { loader: "css-loader", options: { modules: { localIdentName: "[path][name]__[local]--[hash:base64:5]", }, }, }, { loader: "postcss-loader", options: { postcssOptions: { plugins: [postcssPresetEnv()], }, }, }, "sass-loader", ], 终端中没有错误,我在应用程序中没有看到任何样式,它们甚至没有加载到浏览器中: 请帮忙,样式有什么问题吗? 你可以尝试使用这样的样式 <div className={styles.main_layout}> 而不是 <div className={styles["main-layout"]}> 请注意,我还将类名中的“-”替换为“_”。也在您的 scss 文件中更改它,然后再次检查。我希望它能解决问题,如果不能,我可以寻找其他解决方案。

回答 1 投票 0

是否可以使用CSS仅用这张图片制作动画效果?

我想使用“皮卡丘”运行的图像,而不必创建gif(因为它更重),并且我想使用他在css中运行的效果。我该如何使用这个鳕鱼...

回答 1 投票 0

如何在 React Native 中设置默认深色文本颜色而不修改 AppTheme 或创建文本包装器

在我的 React Native 项目中,对于 Android,我想为所有文本组件设置默认的深色/浅色文本颜色。以下是限制条件: 我不想修改 android/app/src/main/res/sty...

回答 1 投票 0

我想知道Elm中元素的html属性

我想知道Elm中某个元素的html属性,例如她的坐标。我正在尝试使用 Json.Decode。 我是 Elm 的新手,这是出于学习目的。 这是一个简单的代码,...

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.