Questions tagged «css»

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

6
为什么我们对脚本使用<script>而不对外部CSS使用<style>？
我的一个亲戚开始学习Web开发时问了我这个问题。 为什么&lt;script src="min.js"&gt;&lt;/script&gt;和&lt;link rel="stylesheet" href="min.css"&gt;？为什么不呢&lt;style href="min.css"&gt;&lt;/style&gt;？为什么我们使用linktag在页面中添加外部CSS，但是将CSS链接到页面却&lt;style&gt;...&lt;/style&gt;在内部编写CSS时使用&lt;head&gt;？ 我告诉他这是因为规格。还有更多要给他的信息吗？
76 javascript  css  html  w3c 
9
背景图片可以大于div本身吗？
我有一个100％宽度的页脚div。高约50像素，具体取决于其内容。 是否可以为#footer提供背景图像，从而使该div溢出？ 该图像约为800x600px，我希望将其放置在页脚的左下角。它的工作方式应该类似于我网站的背景图片，但是我已经在自己的身体上设置了背景图片。我需要在我的网站的左下角放置另一个图片，并且#footer div十分适合。 #footer { clear: both; width: 100%; margin: 0; padding: 30px 0 0; background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed; } 图像设置为页脚，但是不会溢出div。有可能做到这一点吗？ overflow:visible 没有做这份工作！
76 css  image  background 
1
firefox溢出-y不适用于嵌套的flexbox
我已经使用css3 flexbox设计了一个100％宽度100％高度的布局，该布局可在IE11上运行（如果对IE11的仿真正确，则可能在IE10上运行）。 但是Firefox（35.0.1），overflow-y无法正常工作。如您在该Codepen中所见：http ://codepen.io/anon/pen/NPYVga Firefox无法正确渲染溢出。它显示一个滚动条 html, body { height: 100%; margin: 0; padding: 0; border: 0; } .level-0-container { height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .level-0-row1 { border: 1px solid black; box-sizing: border-box; } .level-0-row2 …
7
使用CSS将旋转文本垂直居中
我有以下HTML： &lt;div class="outer"&gt; &lt;div class="inner rotate"&gt;Centered?&lt;/div&gt; &lt;/div&gt; div.outer是一条狭窄的垂直条。div.inner旋转90度。我想要文本“居中吗？” 出现在其容器div的中心位置。我不知道任何一个div的大小。 这很接近：http : //jsfiddle.net/CCMyf/2/。您可以从jsfiddle中看到，在transform: rotate(-90deg)应用样式之前，文本在垂直方向居中，但是在应用样式之后，文本有些偏移。div.outer短时尤其明显。 是否可以在不预先知道任何大小的情况下将文本垂直居中？我还没有找到transform-origin解决该问题的任何方法。
14
名称-值对的语义和结构
这是我一段时间以来一直在苦苦挣扎的问题。标记名称/值对的正确方法是什么？ 我喜欢&lt;dl&gt;元素，但这带来了一个问题：无法将一对对分开-它们没有唯一的容器。在视觉上，代码缺乏定义。不过从语义上来说，我认为这是正确的标记。 &lt;dl&gt; &lt;dt&gt;Name&lt;/dt&gt; &lt;dd&gt;Value&lt;/dd&gt; &lt;dt&gt;Name&lt;/dt&gt; &lt;dd&gt;Value&lt;/dd&gt; &lt;/dl&gt; 在上面的代码中，很难在代码和渲染上都在视觉上正确地偏移对。例如，如果我想在每对之间都设置边框，那将是一个问题。 我们可以指向表格。可以说名称-值对是表格数据。这对我来说似乎是不正确的，但我明白了。但是，HTML不会将名称与值区别开来，除非在位置或添加了类名。 &lt;table&gt; &lt;tr&gt; &lt;td&gt;Name&lt;/td&gt; &lt;td&gt;Value&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Name&lt;/td&gt; &lt;td&gt;Value&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; 从代码和CSS的视觉角度来看，这更有意义。设置上述边框的样式很简单。但是，如上所述，语义充其量是模糊的。 有想法，评论，问题吗？ 编辑/更新 也许这是我应该在结构上明确提及的内容，但是定义列表也存在不对语义进行分组的问题。add和a之间的有序和隐式边界dt很容易理解，但对我来说它们仍然有些许不适。
3
CSS：首字母不起作用
我正在尝试将CS​​S样式应用于从Microsoft Word文档生成的一些HTML代码段。Word生成的HTML相当糟糕，并且包含许多内联样式。它是这样的： &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;center&gt; &lt;p class=MsoNormal&gt;&lt;b style='mso-bidi-font-weight:normal'&gt;&lt;span style='font-size:12.0pt;line-height:115%;font-family:"Times New Roman"'&gt;Title text goes here&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/b&gt;&lt;/p&gt; &lt;p class=MsoNormal style='margin-left:18.0pt;line-height:150%'&gt;&lt;span style='font-size:12.0pt;line-height:150%;font-family:"Times New Roman"'&gt;Content text goes here.&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; ...非常简单，我想为标题部分的第一个字母设置样式。它只需要更大并且使用不同的字体即可。为此，我尝试使用:first-letter选择器，例如： p b span:first-letter { font-size: 500px !important; } 但这似乎不起作用。这是一个小提琴，说明了这一点： http://jsfiddle.net/KvGr2/ 任何想法有什么问题/如何正确设置标题部分的首字母？我可以对标记进行一些细微的更改（例如在事物周围添加包装器div），尽管并非没有困难。
76 html  css 
5
使用@ font-face使用多种自定义字体？
我确定我确实缺少一些直接的东西。正在使用具有常规字体的单个自定义字体： @font-face { font-family: CustomFont; src: url('CustomFont.ttf'); } 使用时一切正常，但是如果要添加其他自定义字体，该怎么办？我尝试用逗号分隔下一个字体或添加其他字体，但是无法使第二种字体起作用。
76 css  fonts  font-face 
2
为什么不能将特定于供应商的伪元素/类组合到一个规则集中？
在CSS中，可以placeholder使用供应商特定的伪类和伪元素的组合来为输入中的文本设置样式（以获得最佳的跨浏览器覆盖）。 这些都具有相同的基本属性（即：文本样式和颜色声明）。 但是，尽管我不可避免地希望使用相同的样式，而与浏览器供应商无关，但似乎无法将它们组合成一个逗号分隔的选择器（就像您想要两个选择器共享的其他CSS一样）相同的样式）。 例如，我倾向于使用以下四个选择器来定位占位符样式： input:-moz-placeholder input::-moz-placeholder input:-ms-input-placeholder input::-webkit-input-placeholder （尽管:-moz-placeholder 不赞成这样做，::-moz-placeholder但仅在FireFox 19发行时才发生，因此目前都需要两者都可以提供更好的浏览器支持）。 令人沮丧的是，声明和赋予每种（相同）样式会导致CSS内的大量重复。 因此，为确保占位符文本右对齐和斜体，我将得出以下结论： input:-moz-placeholder{ font-style: italic; text-align: right; } input::-moz-placeholder{ font-style: italic; text-align: right; } input:-ms-input-placeholder{ font-style: italic; text-align: right; } input::-webkit-input-placeholder{ font-style: italic; text-align: right; } 我真正想做的是将它们组合为一个逗号分隔的规则集，如下所示： input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder, input::-webkit-input-placeholder{ font-style: italic; text-align: right; } 但是，尽管在少数情况下尝试过此操作，但这似乎从未奏效。这让我担心，CSS的某些基本部分我不了解。 有人能阐明为什么会这样吗？
11
如何隐藏锚文本而不隐藏锚
说我有以下标记： &lt;li&gt;&lt;a href="somehwere"&gt;Link text&lt;/a&gt;&lt;/li&gt; 如果标签上有背景图片，我如何仅使用CSS隐藏链接文本？除了在ie7小斑点显示中之外，font-size：0似乎在a标签上可以正常工作。 谢谢 到目前为止，谢谢您的帮助。iv使用line-height：0; 和font-size：0; 和文本缩进：-999px；但它仍然在野生动物园中出现了一些斑点，有什么想法吗？
76 css 
10
在无序列表中的项目之后添加管道分隔符，除非该项目是一行中的最后一个
是否可以设置此html的样式？ &lt;ul&gt; &lt;li&gt;Dogs&lt;/li&gt; &lt;li&gt;Cats&lt;/li&gt; &lt;li&gt;Lions&lt;/li&gt; &lt;li&gt;Tigers&lt;/li&gt; &lt;li&gt;Zebras&lt;/li&gt; &lt;li&gt;Giraffes&lt;/li&gt; &lt;li&gt;Bears&lt;/li&gt; &lt;li&gt;Hippopotamuses&lt;/li&gt; &lt;li&gt;Antelopes&lt;/li&gt; &lt;li&gt;Unicorns&lt;/li&gt; &lt;li&gt;Seagulls&lt;/li&gt; &lt;/ul&gt; ... 像这样 ... ...无需将类添加到特定列表项，也无需使用javascript？如果是这样怎么办？ 换行符不固定；列表扩大以占用更多空间，并且列表项居中对齐。
76 html  css 
15
使用CSS强制边栏高度100％（底部带有粘性图像）？
数小时以来，我一直在脑海中摸索，试图找出这个问题，并认为这一定是我所缺少的。我已经在网上搜索过，但找不到任何有效的工具。HTML是： &lt;body&gt; &lt;div id="header"&gt; &lt;div id="bannerleft"&gt; &lt;/div&gt; &lt;div id="bannerright"&gt; &lt;div id="WebLinks"&gt; &lt;span&gt;Web Links:&lt;/span&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="Sidebar"&gt; &lt;div id="SidebarBottom"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="NavigationContainer"&gt; &lt;ul id="Navigation"&gt; &lt;li&gt;&lt;a href="#"&gt;Nav&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Nav&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Nav&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Nav&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Nav&lt;/a&gt;&lt;/li&gt; …
76 css  sidebar  sticky 
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.