Questions tagged «css»

screen和only screen媒体查询有什么区别？ <link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> 为什么要求使用only screen？screen本身是否提供的信息不足以仅在屏幕上呈现？ 我已经看到许多使用以下三种方式之一的响应式网站： @media screen and (max-width:632px) @media (max-width:632px) @media only screen and (max-width:632px)

486 css  media-queries 

在CSS文件中定义诸如背景图片URL之类的内容时，使用相对URL时，它相对于哪里？例如： 假设文件/stylesheets/base-styles.css包含： div#header { background-image: url('images/header-background.jpg'); } 如果我包括通过这个样式表到不同的文件<link ... />会在CSS文件中的相对URL是相对于样式表文件中/stylesheets/或相对于当前文档包括它是什么？可能的路径如下： /item/details.html /about/index.html /about/extra/other.html /index.html

484 html  css 

如何class="row"使用Twitter Bootstrap框架向元素添加边距顶部？

483 css  twitter-bootstrap 

我确定这一定是之前提到过/提出来的，但是一直在寻找一个没有运气的年龄，我的术语一定是错误的！ 我模糊地记得我前一段时间看到的一条推文，暗示一条css规则可用，该规则将删除样式表中先前为特定元素设置的所有样式。 一个很好的使用示例可能是在移动优先RWD网站中，在小屏幕视图中用于特定元素的许多样式需要针对桌面视图中的同一元素进行“重置”或删除。 一个css规则可以达到以下目的： .element { all: none; } 用法示例： /* mobile first */ .element { margin: 0 10; transform: translate3d(0, 0, 0); z-index: 50; display: block; etc.. etc.. } @media only screen and (min-width: 980px) { .element { all: none; } } 因此，我们可以快速删除或重新设置样式，而不必声明每个属性。 说得通？

481 css 

我试图创建一些可重用的CSS类，以提高网站的一致性和减少混乱，而且我坚持尝试标准化我经常使用的一件事。 我有一个<div>我不想为其设置高度的容器（因为它会根据其在网站上的位置而有所不同），并且在其中是一个header <div>，然后是一个无序的项目列表，所有这些项目都应用了CSS他们。 看起来很像这样： 我想无序列表占用容器中剩余的房间<div>，知道头部<div>是18px高大的。我只是不知道如何将列表的高度指定为“ 100%减去的结果18px”。 我已经在SO的其他几个上下文中看到了这个问题，但是我认为有必要再次询问我的特殊情况。在这种情况下，有人对您有任何建议吗？

479 css  height  pixel 

我一直在查看油脂猴子用户脚本的来源，并在他们的CSS中注意到以下内容： .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} 我可以理解，滑脂脚本希望将其可以捆绑的所有内容捆绑在源代码中，而不是将其托管在服务器上，这很明显。但是由于我以前没有看过这种技术，因此我考虑了它的使用，并且由于许多原因，它似乎很有吸引力： 它将减少页面加载时的HTTP请求数量，从而提高性能 如果没有CDN，则它将减少通过Cookie与图像一起发送而产生的流量 可以缓存CSS文件 CSS文件可以GZIPPED 考虑到IE6（例如）在背景图片缓存方面存在问题，这似乎不是最糟糕的主意... 那么，这是好事还是坏事，为什么您不使用它，以及使用哪种工具对图像进行base64编码？ 更新-测试结果 图片测试：http：//fragged.org/dev/map-shot.jpg-133.6Kb 测试网址：http : //fragged.org/dev/base64.html 专用CSS文件： http： //fragged.org/dev/base64.css-178.1Kb GZIP编码服务器端 发送给客户端的结果大小（YSLOW组件测试）：59.3Kb 发送到客户端浏览器的数据保存：74.3Kb 不错，但是我猜它对较小的图像用处不大。 更新：Google软件工程师Bryan McQuade在PageSpeed上表示，他在ChromeDevSummit 2013上表示，CSS中的data：uris被认为是在演讲期间提供关键/最小CSS的渲染阻止反模式#perfmatters: Instant mobile web apps。请参阅http://developer.chrome.com/devsum​​mit/sessions，并牢记这一点- 实际幻灯片

475 css  base64  background-image  data-uri 

例如： div > p.some_class { /* Some declarations */ } 这个>标志到底是什么意思？

475 css  css-selectors 

反正是有得到的圆角的轮廓的div element，类似border-radius？

473 html  css 

是否有一种方法可以根据将class属性的值设置为两个特定的类来选择CSS元素。例如，假设我有3个div： <div class="foo">Hello Foo</div> <div class="foo bar">Hello World</div> <div class="bar">Hello Bar</div> 基于它是foo AND bar类的成员，我可以写什么CSS来仅选择列表中的第二个元素？

471 css  css-selectors 

我一直在做一些关于媒体查询的研究，但我仍然不太了解如何定位某些尺寸的设备。 我希望能够定位台式机，平板电脑和移动设备。我知道会有一些差异，但是拥有可用于定位这些设备的通用系统会很好。 我发现了一些例子： # Mobile only screen and (min-width: 480px) # Tablet only screen and (min-width: 768px) # Desktop only screen and (min-width: 992px) # Huge only screen and (min-width: 1280px) 要么： # Phone only screen and (max-width:320px) # Tablet only screen and (min-width:321px) and (max-width:768px) # Desktop only screen …

470 css  mobile  media-queries  tablet 

我有一个JPEG文件，正在将其用作搜索页面的背景图像，并且由于要在Backbone.js上下文中进行工作，所以我正在使用CSS进行设置： background-image: url("whatever.jpg"); 我想一个CSS 3模糊滤镜应用只为背景，但只是一个元素，我不知道如何风格。如果我尝试： -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); background-image在CSS的下面，它为整个页面设置了样式，而不仅仅是背景。有没有办法只选择图像并对其应用滤镜？另外，是否有一种方法可以仅关闭页面上所有其他元素的模糊效果？

467 css  background-image  css-filters 

给定透明的PNG以白色显示简单形状，是否有可能通过CSS更改其颜色？某种覆盖还是什么？

464 css  image  colors  png  overlay 

我正在使用具有备用行颜色的表。 tr.d0 td { background-color: #CC9999; color: black; } tr.d1 td { background-color: #9999CC; color: black; } <table> <tr class="d0"> <td>One</td> <td>one</td> </tr> <tr class="d1"> <td>Two</td> <td>two</td> </tr> </table> 运行代码段隐藏结果展开摘要 在这里，我使用class tr，但是我只想使用table。当我将类用于表时，这适用于tr替代方法。 我可以使用CSS编写这样的HTML吗？ <table class="alternate_color"> <tr><td>One</td><td>one</td></tr> <tr><td>Two</td><td>two</td></tr> </table> 如何使用CSS使行具有“斑马条纹”？

462 html  css  html-table 

我想做的是 div对象悬停时，它将影响另一个对象的属性div。 例如，在此JSFiddle演示中，当您将鼠标悬停在#cube其上时，它会发生变化，background-color但是我想要的是，当我将鼠标悬停在上时#container，#cube它会受到影响。 div { outline: 1px solid red; } #container { width: 200px; height: 30px; } #cube { width: 30px; height: 100%; background-color: red; } #cube:hover { width: 30px; height: 100%; background-color: blue; } <div id="container"> <div id="cube"> </div> </div> 运行代码段隐藏结果展开摘要

459 html  css  hover 

我正在尝试在Flexbox中填充Flex项目的垂直空间。 .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } <div class="container"> <div class="flex-1"></div> <div class="flex-2"> <div class="flex-2-child"></div> </div> </div> 运行代码段隐藏结果展开摘要 这是JSFiddle flex-2-child …

458 css  flexbox