» Archivo del weblog » 美化 CSS 高级课程 Niquelao 的 CSS Avanzado 说明 2009 年 11 月 8 日，由 Rumoroso 几天前我在萨拉戈萨教授了一门关于高级 CSS 的课程（包含在 CTIC 课程目录中）。 理所当然地，尤其是因为这是一门关于样式表和高级技术的课程，我使用 rumoslide 准备了演示文稿（大约 95% 的用户都这么叫它，最终它就叫这个名字了）。问题是由于教学大纲过于冗长（或时间太紧），导致我没能详细讲解我在演示文稿中使用的样式细节。 正因如此，我开始写这篇文章（好吧，也是为了恢复定期在博客写文章的习惯）。理所当然地，开始就从开始起，所以今天先聊聊封面：关于封面，我想讨论的是我对演示文稿标题所做的处理。我的想法是突出这两个词（CSS 和 avanzado），在赋予每个词足够强调的同时，确保它们之间仍保持整体感。 为此，我尝试了不同的字体大小和颜色（大且浅 vs 小且深）以及它们的位置（部分重叠）。首先，使用 HTML 代码：

CSS Avanzado

接下来是 CSS 代码及其说明： h1 { font-size: 7em;color: #ffc8a3; line-height: .8; font-style: italic; margin: .5em 0 .2em 20%; border-bottom: 3px solid; position: relative; overflow: hidden; } 我的想法是先给标题中的 CSS 字母设置样式。由于其余文本包含在 span 中，可以先为 h1 应用通用样式，然后再对其进行补偿。因此，我定义了一个足够醒目的字体大小 (7em)、一个能与其余样式协调且不过于浓烈的颜色、行高以及斜体样式。此外，我还设置了外边距，使其距离左侧总宽度的 20%。最后，我添加了一条 3px 的底线（颜色继承自字体）。由于我是通过绝对定位来实现文字重叠的（稍后详述），所以我将标题的后代元素坐标初始化为相对定位。 在设置完标题其余部分后，我事后添加了溢出控制 (overflow: hidden)（因为我发现这样结果更优雅）。这样可以使“avanzado”一词的底部在超出 h1 边界时被隐藏。接下来我为“avanzado”这个词设置样式： h1 :first-child { font-size: .5em;font-style: normal; color: #222; position: absolute; top: 60%; left: 15%; opacity: 0.75; -moz-opacity: 0.75; -ms-filter: alpha(opacity=75); } 为了避免额外的标记，我利用了选择器。“avanzado”位于 h1 的第一个后代元素中，因此通过伪类 :first-child 进行选择。 Lo primero, cambiar las propiedades de la fuente (reducir tamaño, cambiar color y eliminar la cursiva)。重叠是通过绝对定位实现的（由于 h1 已声明为相对定位，坐标将相对于 h1 的位置计算）。 Finalmente le di un toque extra jugando con su opacidad (recurrí a las propiedades con prefijos específicos que alloweden que se vea Correctamente en las versiones más reales de los navegadores)。 Y ahora la pregunta ¿como conseguí el efecto del degradado blanco?。

La respuesta es sencilla y se basa en el siguiente código: h1 span + span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent url(img/degrada.png) left bottom repeat-x; } El span vacío que añadí (y que seguro que a alguno ya le sonaba raro) es que se encarga de este efecto。事实上，想法很简单。 Se puede conseguir el efecto poniendo sobre el texto una imagen png con un degradado de color que vaya de blanco a transparente (el blanco es por el fonto de la página)。在选择器上下文中选择跨度中间值（es el span que va detrás de otro span ，con lo que span + span ），lo posicioné enabsoluto e hice que ocupase el 100% del ancho y alto del encabezado（al posicionar el span ，pasa a承认尺寸）。 Luego le añadí la imagen del degradado como foldo alineado en laparte lower (como es una imagen estrecha, hice que se repitiese sobre el eje x)。 Y 列表… El Resto de estilos aplicados a la portada (pié y logo) se mantienen Constantes a lo largo de las diapositivas de lapresentación. En General son bastante sencillos, por lo que los comentaré rápidamente (quizás lo detalle cuando mencione los estilos de otras secciones en artículosteriores)。 Decir que el pié es un contredor genérico que incluye una lista (a la que le he quitado losBullets)。 Le puse un color de foldo intenso próximo al naranja CTIC y una imagen (también de foldo) colocada a la derecha。 Además lo posicioné 固定在下部分 de la pantalla porque no quería que se desplazase con el 滚动垂直 (esto me Sirvió de ejemplo durante el curso)。尊重标志，包括 svg 和元素对象。在整个演示过程中，您的位置绝对正确。 En brevé comentaré algunos ejemplos de estilo que apliqué a lo largo de lapresentación, como por ejemplo, la forma en que conseguí el fando bicolor con las letras CSS, etc. 简短的评论2009 年 11 月 8 日 […] Niquelao 的完整文本：CSS Avanzado 的光标 […] Niquelao » 博客存档 » CSS 2009 年 11 月的其他光标 […] ya hice en la entrada anterior (CSS Avanzado 的光标)，请注意继续使用 Zaragoza 的 CSS 光标演示[…] 2009 年 12 月 CSS 12 的其他光标 […] ya hice en la entrada anterior (CSS Avanzado 的光标)，请参阅 CSS 的后续注释使用 CSS 的演示文稿 […] 并通过 RSS 2.0 提供评论评论。请参阅此处的引用引用。前面的文章：最好的…用CSS制作 文章如下：Otro toque de estilo en el Curso de CSS —> —> —> Esta obra está bajo una licencia de Creative Commons 。