程序设计 css

7

我正在生成使用内部样式表的html电子邮件，即 <!doctype html> <html> <head> <style type="text/css"> h2.foo {color: red} </style> </head> <body> <h2 class="foo">Email content here</foo> </body> </html> 在Gmail中查看时，似乎会忽略内部样式表中的所有样式。Gmail似乎会忽略除内联规则以外的所有样式，例如 <h2 style="color: red">Email content here</foo> 这是我使用Gmail查看HTML电子邮件样式时唯一的选择吗？

99 html css gmail html-email

5

如何使用外部CSS覆盖内联样式？

我有使用内联样式的标记，但是我无权更改此标记。如何仅使用CSS覆盖文档中的内联样式？我不想使用jQuery或JavaScript。 HTML： <div style="font-size: 18px; color: red;"> Hello World, How Can I Change The Color To Blue? </div> CSS： div { color: blue; /* This Isn't Working */ }

99 css

6

如何使<div>填充<td>高度

我已经看过StackOverflow上的几篇文章，但未能找到这个相当简单的问题的答案。我有这样的HTML结构： <table> <tr> <td class="thatSetsABackground"> <div class="thatSetsABackgroundWithAnIcon"> <dl> <dt>yada </dt> <dd>yada </dd> </dl> <div> </td> <td class="thatSetsABackground"> <div class="thatSetsABackgroundWithAnIcon"> <dl> <dt>yada </dt> <dd>yada </dd> </dl> <div> </td> </tr> </table> 我需要的是div填充的高度td，因此我可以将div的背景（图标）放置在的右下角td。您如何建议我去解决这个问题？

99 html css html-table

29

真棒字体未显示图标

我正在使用Font Awesome，并且不希望通过HTTP添加CSS。我下载了Font Awesome并将其包含在我的代码中，但是Font Awesome显示的是带边框的方框而不是图标。这是我的代码： <html> <head> <link rel="stylesheet" href="../css/font-awesome.css"> <link rel="stylesheet" href="../css/font-awesome.min.css"> </head> <body> <div style="font-size: 44px;"> <i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x </div> </body> </html> 我想知道如何显示图标而不是带边框的方形框。

99 html css font-awesome

6

用什么代替:: ng-deep

我正在尝试对路由器插座放置的元素进行倾斜设置，以确保生成的元素的宽度为100％从大多数答复中，我看到我应该使用::ng-deep选择器，但是从Angular的文档中，它已被弃用。有替代品::ng-deep吗？

99 html css angular

12

在jQuery中获取CSS规则的百分比值

假设规则如下： .largeField { width: 65%; } 有没有办法以某种方式获得“ 65％”的回报，而不是像素值？谢谢。编辑：不幸的是，在我的情况下，使用DOM方法是不可靠的，因为我有一个导入其他样式表的样式表，因此cssRules参数最终以null或未定义的值结尾。但是，这种方法在大多数直接情况下都可以使用（一个样式表，文档的head标记内的多个单独的样式表声明）。

98 jquery css

3

style =“ clear：both”的用途是什么？

我碰巧看到一个div有风格的clear:both！clearin有style什么用？ <div style="clear:both">

98 html css

4

CSS属性：显示与可见性

显示属性和可见性属性之间有何区别？

98 css

6

CSS Z-index悖论花

我想通过z-index CSS属性创建一个自相矛盾的效果。在我的代码中，我有五个圆圈，如下图所示，它们都绝对定位，没有定义z-index。因此，默认情况下，每个圆都与前一个圆重叠。现在，圆5与圆1重叠（左图）。我想实现的悖论是，同时在圆2下方和圆5上方具有圆1（如右图所示）。（来源：schramek.cz）这是我的代码标记： <div class="item i1">1</div> <div class="item i2">2</div> <div class="item i3">3</div> <div class="item i4">4</div> <div class="item i5">5</div> 的CSS .item { width: 50px; height: 50px; line-height: 50px; border: 1px solid red; background: silver; border-radius: 50%; text-align: center; } .i1 { position: absolute; top: 30px; left: 0px; …

98 css z-index

5

星号（*）在CSS选择器中做什么？

我找到了这个CSS代码，然后运行它来查看其功能，并在页面上概述了每个元素，有人可以解释一下Asterisk *在CSS中的作用吗？ <style> * { outline: 2px dotted red } * * { outline: 2px dotted green } * * * { outline: 2px dotted orange } * * * * { outline: 2px dotted blue } * * * * * { outline: 1px solid red } * …

98 css css-selectors

7

webkit转换后，css z-index丢失了

我有两个绝对重叠的div元素。两者都通过CSS设置了z-index值。我使用translate3dwebkit转换在屏幕外为这些元素设置动画，然后再回到屏幕上。转换后，元素不再遵守其设置z-index值。一旦我对它们进行webkit转换，谁能解释div元素的z-index / stack-order会发生什么？并说明如何保持div元素的堆叠顺序？这是有关我如何进行转换的更多信息。在转换之前，每个元素都会通过CSS设置这两个Webkit转换值（我正在使用jQuery进行.css()函数调用： element.css({ '-webkit-transition-duration': duration + 's' }); element.css({ '-webkit-transition-property': '-webkit-transform' }); 然后使用translate3d -webkit-transform对元素进行动画处理： element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' }); 顺便说一句，我试图将3rd参数设置translate3d为几个不同的值，以尝试在3d空间中复制堆栈顺序，但是没有运气。另外，iPhone / iPad和Android浏览器是我的目标浏览器，此代码需要在其上运行。两者都支持Webkit过渡。

98 css webkit transform

1

为什么Bootstrap 3切换为box-sizing：border-box？

我正在将Bootstrap主题从v2.3.2迁移到v3.0.0，我注意到的一件事是，由于bootstrap.css中的以下样式，许多尺寸的计算方式有所不同。 *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 谁能解释为什么Bootstrap将所有元素的框大小切换为border-box？我怀疑这与基于百分比的新网格系统有关，但是上面的选择器显然不仅适用于网格元素。似乎有点激进的恕我直言:-) 有人愿意提供一些见识吗？

98 css twitter-bootstrap twitter-bootstrap-3 boxsizer

15

如何创建切换按钮？

我想使用CSS在html中创建一个切换按钮。我想要它，以便当您单击它时，它保持推入状态，而不是再次单击时它弹出。如果没有办法只使用css。有没有办法使用jQuery？

98 jquery html css

6

Webfonts还是本地加载的字体？

自从使用Cufon带来麻烦之后，我就冒险不使用外部字体资源，但是最近，我一直在寻找替代方法来加载字体，以查看是否有更好的方法。更好的方法有一种突如其来的出现方式。那里有很多新方法，每种方法似乎都有变化。我应该使用typekit吗？或Google webfonts（使用js或css）？我应该继续使用本地加载的字体（例如fontsquirrel.com生成的方法）吗？我将在下面列出一些测试方法，这些方法似乎是最受人们欢迎的方法，但是真的值得一试使用webfont吗？似乎它将承担较高的资源负载（http请求），而文件格式类型较少（兼容性较差）等。但是在大多数情况下，文件似乎是异步且高效地加载的。这只是情况和需求的问题吗？如果是这样，它们是什么？这些方法之间是否存在巨大差异？有没有我没有列出的更好的方法？专业人士的表现/缺点是什么？看？依赖？兼容性？我确实在这里寻找最佳实践，性能是一件大事，但可伸缩性和易用性也是如此。更不用说，外观和感觉。 Google CSS 仅使用外部样式表仅使用最小的兼容文件类型可以使用@import或<link>获取styleshee（@font-face）的内容，并将其直接放入您自己的样式表中。检测结果 78ms load of html 36ms load of css Google JS方法用于webfont.js加载样式表仅使用最小的兼容文件类型 :root用类追加元素将脚本添加到头部。检测结果 171ms load of html 176ms load of js 32ms load of css Typekit方法 :root用类追加元素。可以使用*.js摘要或外部加载的文件*.js文件使用data:font/opentype代替字体文件。将脚本添加到头部将嵌入式CSS添加到头部将外部样式表添加到头部您可以从typekit.com轻松添加/删除/调整字体和目标选择器 …

98 javascript css fonts webfonts

5

HTML / CSS：使div对点击“不可见”吗？

由于各种原因，我需要<div>在某些文本上（大部分）保持透明。但是，这意味着无法单击文本（例如，单击链接或将其选中）。是否可以简单地使该div对点击和其他鼠标事件“不可见”？例如，overlaydiv覆盖了文本，但我希望能够通过overlaydiv 单击/选择文本： <div id="container"> <p>Some text</p> <div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height:100%"> ... some content ... </div> </div>

98 html css events

Questions tagged «css»