Niquelao » 博客档案 » CSS Curso 中的其他主题

» Archivo del weblog » CSS 课程的另一抹风格 Niquelao CSS 2009年11月11日，由 Rumoroso 发布，由 Rumoroso 就像我在之前的文章（关于高级 CSS 课程的样式设计）中所做的那样，我将继续讨论我在萨拉戈萨 CSS 课程演示文稿中使用的一些样式。今天来一个简单的。 这个列表有点太长，无法在屏幕上垂直排列（尤其是我想在同一张幻灯片中添加另一个列表时），所以我决定将其设为行内排列。我的意图再次是利用演示文稿本身作为示例（提醒大家，我是用 rumoslide 制作的，它基本上就是 XHTML、CSS 和 javascript），来展示样式表能实现的效果。下面我附上该列表。我用图片形式呈现，以便展示它在没有样式时的样子（仅显示 Firefox 默认应用的样式）： HTML 实现很简单。 这是一个列表，其中每个项目都由一个包含文本的 code 元素组成：

• border-collapse
• border-spacing
• caption-side
• color
…
• widows
• word-spacing

…我想获得的结果（并且显然得到了）如下（再次附上截图）： Los estilos empleados para conseguir este resultado son: code { font: .8em monospace; }颜色：#009； } .herencia li { 显示：内联； } .herencia li:after { 内容: ’, ’; } .herencia li:last-child:after { 内容: ’ ’; } 首先，我对 code 元素进行了样式设计，以便将其与其余文本区分开。为此，我调整了字体大小、字体系列和颜色。如你所见，非常简单。为了让最初垂直的列表变为对齐，我将项目的 display 属性改为 inline。 然后，我通过 content 属性（生成内容）添加了一个逗号和一个空格（“, “）。我将其应用于 :after 伪元素。最后，由于这会导致最后一个项目也出现逗号，所以我将最后一个项目的生成内容设为空（content: ’ ’）。好吧，显然有一个我还没提到的问题，我希望有人已经注意到了（理想情况下是参加课程的学生）。为了选择最后一个项目，我使用了 CSS3 的 :last-child 伪类，但其支持度非常低。你们可能会认为我本可以使用仅限 CSS 2.1 的选择器。例如，我可以在每个项目之前（而不是之后）使用 :before 生成内容，然后使用 :first-child 选择第一个项目并去掉它前面的逗号。 ¿Por qué no lo hice?… por lo siguiente: 当一个项目位于行首时，逗号会出现在每行的开头，这显然是不正确的。为了避免这种情况，并且知道我要使用的浏览器支持该特性，我决定使用 CSS3……我知道 :last-child 在浏览器中的普及度不够，但至少在最新版本中是支持的……对于这次演示来说已经足够完美了。经过这一番讨论，可以得出一个结论：我热爱 CSS，而能将课程演示作为示例让我更加热爱。不过，请给我们更多支持的浏览器，并希望 CSS3 尽快普及。

可以将 CSS 相关的详细信息与基础导航器中的 CSS 等级相关联： http://www.webdevout.net/browser-support-css#css3standards http://www.quirksmode.org/css/contents.html 在此，我将介绍如何使用 CSS 3…显然，我没有看到阿尔古纳斯·埃斯基纳斯。 En un próximo artículo os lo comentaré… Otro toque de estilo en el Curso de CSS 类别：CSS —> 2 条评论 提及 Niquelao 的推文 » Archivo del weblog » Otro toque de estilo en el Curso de CSS — Topsy.com 12 de Noviembre de 2009 […] Jorge 在 Twitter 上提到了这篇文章谣言，豪尔赫·谣言。 Jorge Rumoroso 说：#niquelao CSS 课程中的另一种风格 http://bit.ly/J7vm9（en inglés parece más Cool, verdad！ […] Otro toque de estilo en el Curso de CSS 12 de Noviembre de 2009 […] Texto completo en Niquelao：Otro toque de estilo en el Curso de CSS […]继续阅读 RSS 2.0 的评论。 前面的文章引用如下：CSS 的当前文章：CSS 3 的多个图片 —> —> —> 已获得 Creative 许可证。公共资源。