stylesheet 相关问题

好的，所以我被赋予了重新创建此按钮的任务 https://s27.postimg.org/7e1upkf4j/BUTTONS.png 使用 HTML 的这一部分首页好的，所以我被赋予了重新创建此按钮的任务 https://s27.postimg.org/7e1upkf4j/BUTTONS.png 使用 HTML 的这一部分 <a href="#"> Home <i class="material-icons ico-style">home</i> </a> 我需要帮助，我对渐变以及部分是否应该是框阴影或插入边框等迷失了方向。请你解释一下答案这里是渐变部分的建议。您需要自己添加图标。 a { position: relative; display: inline-block; width: 120px; height: 50px; line-height: 50px; text-align: center; border-radius: 25px; border: 1px solid lightgray; background: linear-gradient(#999,#fff); text-decoration: none; } a::before { content: ''; position: absolute; left: 9px; top: 9px; width: 100px; height: 30px; border-radius: 15px; border: 1px solid gray; background: white; } a span { position: relative; } <a href="#"> <span>Home <i class="material-icons ico-style"></i></span> </a> 您可以使用此工具来设计按钮样式按钮生成器

html css button stylesheet styling

回答 2 投票 0

Nanoc 未编译 css

我想使用自定义样式表路径 /stylesheets/stylesheet.css 与 nanoc 一起使用，但 nanoc 不会在输出文件夹中渲染 css 文件。这是我的规则：编译'/stylesheets/'做过滤器：css...

css ruby stylesheet nanoc

回答 1 投票 0

Qt 5.10 使用样式表在 QMainWindow 上实现半透明背景

我想使用 QMainWindow::setStyleSheet 方法设置 QMainWindow 类半透明背景。我做类似的事情： QMainWindow 窗口； window.setWindowFlags(Qt::Window | Qt::

c++ background stylesheet transparent qt5.10

回答 1 投票 0

新添加的 CSS 未出现在某些浏览器中（清除缓存、硬重置并确保链接样式表后）

我开始向我的网站添加一个新部分（使用 Firefox），一切看起来都很好。我正在添加到现有的 CSS 文件，但我已经意识到我已经添加了新的 CSS...

html css stylesheet

回答 1 投票 0

更改 QT Creator 中按钮的颜色

如何更改按钮颜色？我找到了通过写作来做到这一点的方法按钮->setStyleSheet("* { 背景颜色: rgb(255,125,100) }"); 在 Ui_Window.h 中但每次我 qmake 时，Ui_Window.h...

c++ qt button stylesheet qt-creator

回答 4 投票 0

QWidget setStyleSheet 支持哪种 CSS 标准？

据我了解，QtWidgets 可以使用 setStyleSheet 方法通过 CSS 设置样式。请参阅参考：QtWidgets styleSheet 问题是我不知道它是否支持 CSS3 或者从哪个开始

qt css stylesheet qwidget

回答 1 投票 0

使用javascript更改CSS样式表

我有以下内容： .el {颜色：蓝色；} 布拉布拉布拉布拉123 我需要使用 JavaScript 来...

javascript css stylesheet

回答 3 投票 0

如何在 JavaScript 中获取 HTML 元素的样式值？

我正在寻找一种方法，从具有由样式标签设置的样式的元素中检索样式。 #box {宽度：100px;} 在身体里 &... 我正在寻找一种方法，从具有通过样式标签设置的样式的元素中检索样式。 <style> #box {width: 100px;} </style> 在体内 <div id="box"></div> 我正在寻找不使用库的直接 JavaScript。我尝试了以下操作，但不断收到空白： alert (document.getElementById("box").style.width); alert (document.getElementById("box").style.getPropertyValue("width")); 我注意到，如果我使用 javascript 设置了样式，则只能使用上面的内容，但无法使用样式标签。 element.style属性让您只知道在该元素中定义为inline的CSS属性（以编程方式，或在元素的样式属性中定义），您应该获得计算的样式。跨浏览器的方式没那么容易做到，IE 有自己的方式，通过 element.currentStyle 属性，而 DOM Level 2 standard 方式，其他浏览器实现是通过 document.defaultView.getComputedStyle方法。这两种方式有区别，例如 IE element.currentStyle 属性希望您访问由两个或多个 camelCase 单词组成的 CCS 属性名称（例如 maxHeight、fontSize、backgroundColor、等），标准方法期望具有用破折号分隔的单词的属性（例如 max-height、font-size、background-color 等）。此外，IE element.currentStyle 将返回指定单位的所有尺寸（例如 12pt、50%、5em），标准方法将始终以像素为单位计算实际尺寸。我前段时间做了一个跨浏览器功能，可以让你以跨浏览器的方式获取计算样式： function getStyle(el, styleProp) { var value, defaultView = (el.ownerDocument || document).defaultView; // W3C standard way: if (defaultView && defaultView.getComputedStyle) { // sanitize property name to css notation // (hypen separated words eg. font-Size) styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase(); return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp); } else if (el.currentStyle) { // IE // sanitize property name to camelCase styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) { return letter.toUpperCase(); }); value = el.currentStyle[styleProp]; // convert other units to pixels on IE if (/^\d+(em|pt|%|ex)?$/i.test(value)) { return (function(value) { var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left; el.runtimeStyle.left = el.currentStyle.left; el.style.left = value || 0; value = el.style.pixelLeft + "px"; el.style.left = oldLeft; el.runtimeStyle.left = oldRsLeft; return value; })(value); } return value; } } 上述函数在某些情况下并不完美，例如对于颜色，标准方法将以 rgb(...) 表示法返回颜色，在 IE 上它们将按定义返回它们。我目前正在撰写该主题的一篇文章，您可以在这里关注我对此功能所做的更改。我相信你现在可以使用 Window.getCompulatedStyle() var style = window.getComputedStyle(element[, pseudoElt]); 获取元素宽度的示例： window.getComputedStyle(document.querySelector('#mainbar')).width 在 jQuery 中，你可以做 alert($("#theid").css("width"))。 -- 如果您还没有看过 jQuery，我强烈推荐它；它使许多简单的 javascript 任务变得毫不费力。更新郑重声明，这篇文章已经有 5 年历史了。 Web 已经发展、进步等等。有很多方法可以使用普通的旧 Javascript 来做到这一点，这是更好的。使用getComputedStyle功能，计算样式包含设置到元素的所有CSS属性。即使不为元素设置属性。您仍然会在计算样式中找到该属性。示例： <style> #Body_element { color: green; } </style> <body id="Body_element"> <script> alert(getComputedStyle(Body_element).color) </script> </body> 如果您想从同一元素获取多个样式规则，这是一个辅助函数。您将所需的元素和样式作为参数传递给它，它将返回它们的值 <style> #Body_element { color: green; } </style> <body id="Body_element"> <script> alert(getComputedStyle(Body_element).color) </script> </body> 现在，您可以像这样使用此功能： const convertRestArgsIntoStylesArr = ([...args]) => { return args.slice(1); } const getStyles = function () { const args = [...arguments]; const [element] = args; let stylesProps = [...args][1] instanceof Array ? args[1] : convertRestArgsIntoStylesArr(args); const styles = window.getComputedStyle(element); const stylesObj = stylesProps.reduce((acc, v) => { acc[v] = styles.getPropertyValue(v); return acc; }, {}); return stylesObj; }; 或 const styles = getStyles(document.body, "height", "width");

javascript html css stylesheet

回答 5 投票 0

如何在react-native中重置边距？

仍在习惯反应原生样式。我注意到重置边距的工作方式与普通网络略有不同。对于上下文，我正在使用react-native for web。如果您执行以下操作仍在习惯反应原生样式。我注意到重置边距的工作方式与普通网络略有不同。对于上下文，我正在使用react-native for web。如果您执行以下操作 <View style=[{ verticalMargin: 10 }, { margin: 0 }] /> 我的期望是视图将所有边距重置为 0，但实际上垂直边距没有重置，顶部和底部边距保持 10 作为其值。根据 docs，这对我来说没有意义数组中最后一个样式优先是因为verticalMargin比margin更具体吗？这是我们在使用可重用样式或组件时在 React Native 开发中面临的常见问题。要解决此边距问题，您可能需要从视图或任何其他组件的每一侧重置边距值。例如。 <View style={ [ { marginVertical: 10, marginHorizontal: 20 }, { marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0, }, ] } />

css react-native stylesheet react-native-stylesheet react-native-for-web

回答 1 投票 0

CSS中当子元素获得焦点时如何更改父元素样式

我想在子元素接收焦点时更改父样式。不幸的是，下面的代码根本不起作用。请帮我看看该怎么做？＃电子邮件 { 奥帕奇... 我想在子 <div> 元素接收焦点时更改父 <input> 样式。不幸的是，下面的代码根本不起作用。请帮我看看该怎么做？ #email { opacity: 0.3; } #exampleInputEmail1:focus < #email { background: #f90442; } <div class="form-group form-group-lg" id="email" tabindex="0"> <label>Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> 不幸的是，CSS 中没有父选择器，甚至在 CSS3 中也没有。您必须使用解决方法 – 即某种 JavaScript。如何使用 javascript 来解决这个问题必须根据具体情况来决定。可以说，最简单、最“易于访问”的解决方案可能是使用 jQuery，并且有很多选择。例如，您可以使用 :has() 选择器定位父包装器： $(".form-group").has(":focus") 这将针对任何具有 class="form-group [...]" 的元素，该元素的子代中具有焦点的元素（不仅仅是作为直接子元素）。或者您可以使用.closest()功能： $(":focus").closest(".form-group") 与类似的 .parents() 函数不同，一旦选择器匹配，.closest() 就会停止向上遍历 DOM 树。这可能使 .closest() 成为这两者中更有效的选择。上面的两个例子对于 DOM 结构来说都是宽松的，并且如果它发生变化也不太可能破坏。但是，如果包装元素always是<input>的直接父级，则可以使用.parent()函数（带有可选选择器）： // Option 1: Targets the immediate parent $("input:focus").parent() // Option 2: Targets the immediate parent, but only if it's a div $("input:focus").parent("div") 这 4 个选项的示例实现，通过切换包装器上的 .infocus 类（也可用作 jsfiddle）来工作： // Adds or removes a focus class. function updateFocus(e) { // Log the event to view details about it // console.log(e); // The "has focus" class name var focusClass = "infocus"; // The wrapper element selector var wrapperSel = ".form-group"; //*=========================================================== // Option 1: has(":focus") // - needs only the wrapper selector // =========================================================== var wrapper = $(wrapperSel); // Remove the class on all //wrapper.each(function() { $(this).removeClass(focusClass);}); wrapper.removeClass(focusClass); // Add class only to the one whose descendant has focus wrapper.has(":focus").addClass(focusClass); //*/ /* =========================================================== // Option 2: closest() // - needs the event and the wrapper selector // =========================================================== if (e.type === "focus") { $(e.target).closest(wrapperSel).addClass(focusClass); } else if (e.type === "blur") { $(e.target).closest(wrapperSel).removeClass(focusClass); } //*/ /* =========================================================== // Option 3: parents() // - needs the event and the wrapper selector // =========================================================== if (e.type === "focus") { $(e.target).parents(wrapperSel).addClass(focusClass); } else if (e.type === "blur") { $(e.target).parents(wrapperSel).removeClass(focusClass); } //*/ /* =========================================================== // Option 4: parent() // - needs only the event (the wrapper selector is optional) // =========================================================== if (e.type === "focus") { $(e.target).parent().addClass(focusClass); } else if (e.type === "blur") { $(e.target).parent().removeClass(focusClass); } //*/ } // Bind the updateFocus() function above to focus/blur of form elements. $('input, textarea, select').on("focus", function(event) { updateFocus(event); }).on("blur", function(event) { updateFocus(event); }); .form-group { opacity: 0.3; } .form-group.infocus { opacity: 1; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <label>Email</label> <input type="email" placeholder="Email"> </div> <div class="form-group"> <label>Name</label> <input type="text" placeholder="Name"> </div> 对此进行快速更新，这可以使用 focus-within 来完成： /* Selects a <div> when one of its descendants is focused */ div:focus-within { background: cyan; } 使用 jQuery。 $("#exampleInputEmail1").focus(function() { //change style }); 到目前为止，你所要求的在 CSS 中是不可能的。所以只有选项是使用 Jquery。如果有兴趣请继续阅读.. 使用 jquery 在 on focus 元素上绑定 input 事件，在这个事件中你只需要访问 parent 并更改它的 background-color。有如下所示的 CSS。 .background-color-RED{ background-color:#f90442; } Jquery 语法如下。 $("#exampleInputEmail1").on('focus',function() { $(this).parent().addClass('background-color-RED'); }); 额外：如果您想在用户焦点移出输入时删除背景颜色，则可以使用 blur 事件并按如下方式处理它。 $("#exampleInputEmail1").on('blur',function() { $(this).parent().removeClass('background-color-RED'); }); 这个问题已经过去很长时间了，但我看到仍然没有答案。你可以像这样做任何你想做的事： #email:has(input:focus) { /* some style */ } 如果能帮到你我会很高兴

javascript jquery html css stylesheet

回答 5 投票 0

XML 流式转换 (STX)

我正在使用样式表通过 STX 转换以下 XML 文档。但是，注释元素中 Kite 之后的所有内容在解析时都会被忽略。我如何访问...

xml xml-parsing streaming stylesheet

回答 1 投票 0

10秒后隐藏生成的CSS内容

我在内容之前添加了跨度，以使用 Font Awesome 创建问号图标，我需要在 10 秒后隐藏所有生成的 CSS 内容（之前），仅使用 CSS 代码，而不使用

css styles coding-style stylesheet

回答 1 投票 0

PyQt：为应用程序的所有文本提供颜色

我想更改 PyQt 中应用程序的外观。例如，我希望所有文本（按钮、标签等）都是白色的，所有按钮都是某种颜色。我可以改变吗...