Questions tagged «css»

CSS(层叠样式表)是一种表示样式表语言,用于描述HTML(超文本标记语言),XML(可扩展标记语言)文档和SVG元素的外观和格式,包括(但不限于)颜色,布局,字体,和动画。它还描述了如何在屏幕,纸张,语音或其他媒体上呈现元素。

15
在渐变背景中使用CSS3过渡
我试图在css上的缩略图上进行悬停过渡,以便在悬停时背景渐变消失。过渡不起作用,但是如果我简单地将其更改为一个rgba()值,则可以正常工作。不支持渐变吗?我也尝试过使用图像,它也不会转换图像。 我知道这是有可能的,就像在另一篇文章中有人做的那样,但我不知道具体如何。任何帮助>以下是一些可使用的CSS: #container div a { -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear; position: absolute; width: 200px; height: 150px; border: 1px #000 solid; margin: 30px; z-index: 2 } #container div a:hover { background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, …

15
如何在两列中显示无序列表?
使用以下HTML,将列表显示为两列的最简单方法是什么? <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> 所需显示: A B C D E 该解决方案必须能够在Internet Explorer上运行。

23
在Chrome / Mac上强制DOM重绘/刷新
Chrome有时会不正确地显示或完全不显示完全有效的HTML / CSS。通过DOM检查器进行挖掘通常足以使它意识到其方式的错误并正确重绘,因此可以证明标记是好的。在我正在研究的项目中,这种情况经常发生(并且可以预测)到足以在某些情况下强制执行重绘的代码位置。 这适用于大多数浏览器/操作系统组合: el.style.cssText += ';-webkit-transform:rotateZ(0deg)' el.offsetHeight el.style.cssText += ';-webkit-transform:none' 如前所述,调整一些未使用的CSS属性,然后要求一些信息以强制重绘,然后取消调整该属性。不幸的是,Mac版Chrome背后的聪明团队似乎找到了一种无需重新绘制即可获取offsetHeight的方法。从而杀死本来有用的黑客。 到目前为止,我想出的在Chrome / Mac上获得相同效果的最好方法是: $(el).css("border", "solid 1px transparent"); setTimeout(function() { $(el).css("border", "solid 0px transparent"); }, 1000); 在这种情况下,实际上迫使元素跳一点,然后冷静一秒钟再跳回去。更糟糕的是,如果将超时时间降低到500ms以下(不太明显),则通常不会达到预期的效果,因为浏览器在返回原始状态之前无法进行重绘。 有人在乎提供适用于Chrome / Mac的此重绘/刷新hack(最好基于上述第一个示例)的更好版本吗?

6
iPad和iPhone的输入按钮样式
我使用CSS在网站上设置输入按钮的样式,但是在IOS设备上,样式已由Mac的默认按钮取代。是否可以为iOS的按钮设置样式,或者制作类似于提交按钮的超链接?
214 iphone  css  ios  ipad 

3
@media媒体查询和ASP.NET MVC剃刀语法冲突
我有一个使用Razor视图引擎在ASP.NET MVC中运行的大型站点。 我有一个基本样式表,其中包含整个网站的所有通用样式。但是,有时我会在页面的中使用特定于页面的样式<head>-通常是一两行。 我不特别喜欢将CSS放入其中,<head>因为它不是严格地将关注点分开,但是对于真正针对该页面的一两行而言,我宁愿不必附加另一个文件并增加带宽。 我有一个实例,但我想将特定于页面的媒体查询放入<head>,但是由于媒体查询使用@符号和方括号{},因此与razor语法冲突: @section cphPageHead{ <style> /* PAGE SPECIFIC CSS */ ... @media only screen and (max-width : 960px) <-- the @ symbol here is clashing! { ... } } </style> } 有办法解决这个问题吗?

14
设置背景图片的不透明度而不影响子元素
是否可以设置背景图像的不透明度而不影响子元素的不透明度? 例 页脚中的所有链接都需要自定义项目符号(背景图片),并且自定义项目符号的不透明度应为50%。 的HTML <div id="footer"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div> 的CSS #footer ul li { background: url(/images/arrow.png) no-repeat 0 50%; } 我尝试过的 我尝试将列表项的不透明度设置为50%,但是链接文本的不透明度也为50%-似乎没有一种方法可以重置子元素的不透明度: #footer ul li { background: url(/images/arrow.png) no-repeat 0 50%; /* will also set …
214 css  opacity 

7
滚动内容溢出的Flexbox
这是我用来实现上述布局的代码: .header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; } .sidebar { width: 140px; } .main { flex: 1; display: flex; flex-direction: column; } .content { flex: 1; display: flex; } .column { padding: 20px; border-right: 1px solid #999; …


5
Sass-将十六进制转换为RGBa以实现背景不透明度
我有以下Sass mixin,它是RGBa示例的一半完整修改: @mixin background-opacity($color, $opacity: .3) { background: rgb(200, 54, 54); /* The Fallback */ background: rgba(200, 54, 54, $opacity); } 我已经申请了$opacity确定,但现在我对这个$color零件感到困惑。我将发送到mixin的颜色将是十六进制而不是RGB。 我的示例用法是: element { @include background-opacity(#333, .5); } 如何在此混合中使用十六进制值?

6
为什么在CSS选择器/ HTML属性中首选使用破折号?
过去,我一直使用下划线在HTML中定义类和id属性。在过去的几年中,我改用破折号,主要是为了使自己适应社区中的趋势,而不一定是因为这对我来说很有意义。 我一直认为破折号有更多弊端,但我看不出这样做的好处: 代码完成和编辑 大多数编辑器将破折号视为单词分隔符,因此我无法跳到想要的符号。假设课程为“ featured-product”,我必须自动完成“ featured”,输入连字符,然后完成“ product”。 带下划线的“ featured_product”被视为一个单词,因此可以一步完成。 在文档中导航同样如此。跳字或双击类名会被连字符打断。 (更一般而言,我将类和id视为令牌,因此对令牌来说,令牌应该很容易拆分对于我来说没有任何意义。) 算术运算符的歧义 使用破折号会中断对象属性对 JavaScript中表单元素的访问。只有下划线才有可能: form.first_name.value='Stormageddon'; (不可否认,我自己不是以这种方式访问​​表单元素,但是当将破折号和下划线作为通用规则时,请考虑有人可能会这样做。) 诸如Sass之类的语言(尤其是在整个Compass框架中)已经以破折号作为标准,甚至对于变量名也是如此。他们最初也使用下划线。这被不同地解析的事实令我感到奇怪: $list-item-10 $list-item - 10 与跨语言的变量命名不一致 以前,我曾经用underscored_namesPHP,ruby,HTML / CSS和JavaScript 编写变量。这是方便且一致的,但是再次为了“适合”我现在使用: dash-case 在HTML / CSS中 camelCase 在JavaScript中 underscore_case 在PHP和ruby中 这实际上并没有给我带来太大的困扰,但是我想知道为什么它们似乎如此故意地变得如此混乱。至少使用下划线可以保持一致性: var featured_product = $('#featured_product'); // instead of var featuredProduct = $('#featured-product'); 差异造成了我们不得不不必要地转换字符串以及潜在错误的情况。 所以我问:为什么社区几乎普遍使用破折号,并且有什么理由要超过下划线? 从开始的那段时间开始就有一个相关的问题,但是我认为这不是(或者不应该)只是一个口味问题。我想了解一下,如果真的只是出于口味问题,为什么我们都同意这个约定。

7
更大的Glyphicons
如何在Twitter Bootstrap 3.0(而非2.3.x)中制作更大的Glyphicons。 这段代码会使我的字形变大: <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-th-list"> </span> </button> 如何仅使用span 而不使用btn-lg类来获得此大小? 这会产生一个小的字形: <span class="glyphicon glyphicon-link"></span>

16
如何设置dt和dd的样式,使它们处于同一行?
使用CSS,如何设置以下样式: <dl> <dt>Mercury</dt> <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd> <dt>Venus</dt> <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd> <dt>Earth</dt> <dd>Earth (1 AU) is …
212 html  css 

10
仅检测伪元素上的点击事件
我的代码是: p { position: relative; background-color: blue; } p:before { content: ''; position: absolute; left:100%; width: 10px; height: 100%; background-color: red; } 请查看此小提琴:http : //jsfiddle.net/ZWw3Z/5/ 我只想在伪元素(红色位)上触发点击事件。也就是说,我不希望点击事件在蓝色位触发。
212 javascript  jquery  css 

14
背景图像上的半透明颜色层?
我有一个DIV,我想放置一个图案作为背景。此图案是灰色的。为了使它更好一点,我想在上面放一个透明的颜色“层”。以下是我尝试过的方法,但是没有用。有没有办法将彩色图层放在背景图像上? 这是我的CSS: background: url('../img/bg/diagonalnoise.png'); background-color: rgba(248, 247, 216, 0.7);

3
CSS将一个项目与flexbox对齐
https://jsfiddle.net/vhem8scs/ 是否可以让两个项目与flexbox左对齐,而一个项目与flexbox右对齐?链接显示得更清楚。最后一个例子是我想要实现的。 在flexbox中,我有一块代码。使用float时,我有四个代码块。这就是为什么我更喜欢flexbox的原因之一。 的HTML <div class="wrap"> <div>One</div> <div>Two</div> <div>Three</div> </div> <!-- DESIRED RESULT --> <div class="result"> <div>One</div> <div>Two</div> <div>Three</div> </div> 的CSS .wrap { display: flex; background: #ccc; width: 100%; justify-content: space-between; } .result { background: #ccc; margin-top: 20px; } .result:after { content: ''; display: table; clear: both; } .result div …
212 css  alignment  flexbox 

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.