CSS3 The missing manual 3th edition spanish

Traducido del inglés al español - www.onlinedoctranslator.com www.it-ebooks.info www.it-ebooks.info CSS3 Tercera edicion El libro que debería haber estado en la caja® David Sawyer McFarland Pekín | Cambridge | Farnham | Colonia | Sebastopol | tokio www.it-ebooks.info CSS3: El manual perdido, tercera edición por David Sawyer McFarland Copyright © 2013 Sawyer McFarland Media, Inc. Todos los derechos reservados. Impreso en los Estados Unidos de América. Publicado por O'Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. Los libros de O'Reilly se pueden comprar con fines educativos, comerciales o de promoción de ventas. Las ediciones en línea también están disponibles para la mayoría de los títulos (http://my.safaribooksonline.com). Para obtener más información, comuníquese con nuestro departamento de ventas corporativo/institucional: (800) 998-9938 o corporativo@oreilly.com. agosto de 2006: Primera edición. agosto de 2009: Segunda edicion. Diciembre 2012: Tercera edicion. Historial de revisiones de la tercera edición: 2012-12-07 Primera versión Verhttp://oreilly.com/catalog/errata.csp?isbn=0636920024996para detalles de lanzamiento. The Missing Manual es una marca comercial registrada de O'Reilly Media, Inc. El logotipo de Missing Manual y "El libro que debería haber estado en la caja" son marcas comerciales de O'Reilly Media, Inc. Muchas de las designaciones utilizadas por los fabricantes y los vendedores para distinguir sus productos se reclaman como marcas registradas. Cuando esas designaciones aparecen en este libro, y O'Reilly Media tiene conocimiento de un reclamo de marca registrada, las designaciones se escriben en mayúscula. Si bien se han tomado todas las precauciones en la preparación de este libro, el editor no asume ninguna responsabilidad por errores u omisiones, o por daños que resulten del uso de la información contenida en él. ISBN-13: 978-1-449-32594-7 [V] www.it-ebooks.info Contenido Los créditos que faltan. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .viii Introducción. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1 Parte uno: CAPÍTULO 1: Conceptos básicos de CSS HTML para CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17 HTML: pasado y presente. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Escribir HTML para CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20 La Importancia del Doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30 Asegurarse de que Internet Explorer esté actualizado . . . . . . . . . . . . . . . . . . . . . . . . . . 32 CAPITULO 2: Creación de estilos y hojas de estilo. . . . . . . . . . . . . . . . . . . . . . . . . .35 Anatomía de un estilo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Descripción de las hojas de estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Hojas de estilo internas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 hojas de estilo externas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Tutorial: creación de sus primeros estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43 CAPÍTULO 3: Selectores: identificar qué estilo. . . . . . . . . . . . . . . . . . . . . .55 Selectores de etiquetas: estilo en toda la página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56 Selectores de clase: Control preciso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Selectores de ID: Elementos de página específicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60 Estilo de grupos de etiquetas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Estilo de etiquetas dentro de etiquetas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63 Pseudoclases y pseudo-elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68 Selectores de atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Selectores secundarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 hermanos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 El :no( ) seleccionador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80 Tutorial: Selector Sampler. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 CAPÍTULO 4: Ahorro de tiempo con herencia de estilo. . . . . . . . . . . . . . . . . . . . . . .93 ¿Qué es la herencia? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Cómo simplifica la herencia las hojas de estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . .95 Los límites de la herencia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .95 Tutorial: Herencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 iii www.it-ebooks.info CAPÍTULO 5: Gestión de varios estilos: la cascada. . . . . . . . . . . . . . . . . .103 Cómo Estilos en Cascada. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Especificidad: qué estilo gana. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Control de la cascada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Tutorial: La cascada en acción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117 La segunda parte:CSS CAPÍTULO 6: aplicado Dar formato al texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127 Uso de fuentes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Uso de fuentes web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Descubriendo las fuentes web de Google . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Adición de color al texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Cambiar el tamaño de fuente. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Formateo de palabras y letras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Agregar sombra de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 Dar formato a párrafos completos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Listas de estilo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Tutorial: Formato de texto en acción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 CAPÍTULO 7: Márgenes, relleno y bordes. . . . . . . . . . . . . . . . . . . . . . . . . .193 Comprender el modelo de caja. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Control del espacio con márgenes y relleno . . . . . . . . . . . . . . . . . . . . . . . . . 195 Adición de bordes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .202 Colorear el fondo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Creación de esquinas redondeadas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .207 Adición de sombras paralelas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Determinación de la altura y el ancho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Contenido envolvente con elementos flotantes. . . . . . . . . . . . . . . . . . . . . . . . . . 220 Tutorial: Márgenes, fondos y bordes . . . . . . . . . . . . . . . . . . . . . . . . .225 CAPÍTULO 8: Adición de gráficos a páginas web. . . . . . . . . . . . . . . . . . . . . . . . . .239 Descubriendo CSS y la etiqueta <img>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239 Adición de imágenes de fondo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Control de la repetición . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Colocación de una imagen de fondo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .245 Uso de la abreviatura de propiedades de fondo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .255 Uso de múltiples imágenes de fondo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .257 Utilización de fondos degradados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .259 Aplicación de degradados sencillos con Colorzilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269 Tutoría: Mejora de imágenes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Tutorial: creación de una galería de fotos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .278 Tutorial: uso de imágenes de fondo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .283 IV Contenido www.it-ebooks.info CAPÍTULO 9: Mejorar la navegación de su sitio. . . . . . . . . . . . . . . . . . . . . .293 Seleccionando qué enlaces al estilo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293 Estilo de enlaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297 Construcción de barras de navegación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303 Rollovers de precarga estilo CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 Diseño de tipos particulares de enlaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 Tutorial: Estilo de enlaces. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318 Tutorial: Creación de una barra de navegación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324 CAPÍTULO 10: Transformaciones, transiciones y animaciones CSS. . . . . . . . . . . .335 Transforma. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .335 Transiciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .345 Animaciones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .354 Tutoría . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .366 CAPÍTULO 11: Formateo de tablas y formularios. . . . . . . . . . . . . . . . . . . . . . . . . . . .375 Usando tablas de la manera correcta. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375 Mesas de diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .378 Formularios de estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384 Tutorial: Dar estilo a una tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390 Tutorial: aplicar estilo a un formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .395 Parte tres:Diseño de página CSS CAPÍTULO 12: Introducción al diseño CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .405 Tipos de diseños de páginas web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 Cómo funciona el diseño CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408 Estrategias de diseño. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412 CAPÍTULO 13: Creación de diseños basados en flotadores. . . . . . . . . . . . . . . . . . . . . . . . . . . .417 Aplicar flotantes a sus diseños. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 Superación de problemas de flotación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .425 Tutorial: Diseños de varias columnas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440 CAPITULO 14: Diseño web adaptable. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .453 Conceptos básicos del diseño web responsivo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454 Configuración de una página web para RWD. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .455 Consultas de medios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .457 Rejillas Flexibles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465 imágenes fluidas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .470 Tutorial de Diseño Web Responsivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .474 Contenido www.it-ebooks.info v CAPÍTULO 15: Posicionamiento de elementos en una página web. . . . . . . . . . . . . . . . . . . .487 Cómo funcionan las propiedades de posicionamiento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488 poderosas estrategias de posicionamiento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .502 Tutorial: Colocación de elementos de página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .507 Cuarta parte:CSS CAPITULO 16: avanzado CSS para la página impresa. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .519 Cómo funcionan las hojas de estilo multimedia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519 Cómo agregar hojas de estilo de medios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .522 Creación de hojas de estilo de impresión. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .523 Tutorial: Creación de una hoja de estilo de impresión . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530 CAPITULO 17: Mejorar sus hábitos de CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .539 Adición de comentarios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .539 Organización de estilos y hojas de estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541 Eliminación de la interferencia del estilo del navegador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548 Uso de selectores de descendientes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .553 Probar diferentes CSS para Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . .558 Quinta parte:Apéndices Apéndice A: Referencia de propiedad CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .563 Valores CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .563 Propiedades del texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .567 Propiedades de la lista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .572 Relleno, bordes y márgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .573 Fondos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .579 Propiedades de diseño de página. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .582 Propiedades de animación, transformación y transición. . . . . . . . . . . . . . . . . . . . . .588 Propiedades de la tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .593 Propiedades misceláneas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .595 Apéndice B: Recursos CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .599 Referencias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .599 CSS Ayuda. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600 CSS Sugerencias, trucos y consejos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600 CSS Navegación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Diseño 601 CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602 sitios de exhibición . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603 Libros CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604 Software CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604 Índice. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .607 vi Contenido www.it-ebooks.info Los créditos que faltan Sobre el Autor David Sawyer McFarlandes presidente de Sawyer McFarland Media, Inc., una empresa de capacitación y desarrollo web en Portland, Oregón. Ha estado construyendo sitios web desde 1995, cuando diseñó su primer sitio web: una revista en línea para profesionales de la comunicación. Se desempeñó como webmaster en la Universidad de California en Berkeley y en el Centro de Investigación Multimedia de Berkeley, y ayudó a crear, diseñar y programar numerosos sitios web para clientes, incluidos Macworld.com. Además de crear sitios web, David también es escritor, capacitador e instructor. Ha enseñado diseño web en la Escuela de Graduados de Periodismo de UC Berkeley, el Centro de Arte Electrónico, la Academia de Arte College, el Centro Ex'Pressions para Nuevos Medios y el Instituto de Arte de Portland. Actualmente enseña en el Programa Multimedia en la Universidad Estatal de Portland. Ha escrito artículos sobre diseño web paraDiseño Web Práctico, Macworldrevista, yCreativePro.com. David es también el autor deDreamweaver: El manual perdidoyJavaScript: el manual perdido. Da la bienvenida a los comentarios sobre este libro por correo electrónico:faltando@sawmac.com. (Sin embargo, si busca ayuda técnica, consulte las fuentes enumeradas en el Apéndice B). ACERCA DEL EQUIPO CREATIVO peluquero(editor) ha trabajado con la serie Missing Manual desde el siglo anterior. Vive en Massachusetts con su esposo y su iMac. Correo electrónico:nanbarber@oreilly.com _. acebo bauer(editora de producción) vive en Ye Olde Cambridge, Massachusetts, donde es una ávida cocinera casera, prolífica aficionada al bricolaje y entusiasta del diseño moderno de mediados de siglo. Correo electrónico: holly@oreilly.com. nancy reinhardt(correctora de pruebas) vive en el Medio Oeste, donde disfruta los fines de semana de verano en el lago, pasea en bote, nada y lee vorazmente. Nan no solo es correctora y correctora de estilo independiente, sino que también es una novelista romántica publicada. Mira su trabajo en www.nanreinhardt.com. Correo electrónico:nanleigh1@gmail.com. Nancy A. Guenther(indexador) indexó este libro en nombre de Potomac Indexing, LLC, una asociación de indexación internacional enwww.potomacindexing.com. Ha sido indexadora independiente a tiempo completo desde 1983, especializándose en software de computadora, estudios estadounidenses y negocios. su sitio web eswww.guenther.bizland.com. los creditos que faltan www.it-ebooks.info viii Daniel J Quinn(revisor técnico) es un desarrollador web independiente en DQuinn.net. Durante los últimos cinco años, ha trabajado como ingeniero senior de interfaz de usuario en la galardonada agencia digital Genuine Interactive, especializándose en WordPress y estrategia de contenido para marcas como Sam Adams, MassMutual y Children's Hospital Boston. Hoy, Daniel se desempeña como desarrollador web para el departamento de Comunicaciones Digitales de la Universidad de Harvard. Trabaja regularmente con un equipo de diseñadores locales y puede ser contactado en daniel@dquinn.net. jason arnold(revisor técnico) vive en Santa Rosa, California, con su esposa y sus tres hijas. Trabaja en el Hospital del Distrito de Healdsburg como Técnico de Telemetría y enseña Kenpo Karate a niños. Actualmente está trabajando para obtener su título de enfermería en Santa Rosa Junior College. En su tiempo libre, practica Kenpo Karate con sus hijas y siempre está buscando un proyecto tecnológico adicional para mantenerse ocupado. Agradecimientos Muchas gracias a todos los que ayudaron con este libro, incluidos mis alumnos, que siempre me ayudan a ver conceptos complejos a través de los ojos de un principiante. Gracias a mis editores técnicos, Daniel Quinn y Jason Arnold, quienes me salvaron de cualquier error vergonzoso, y a Zoe Gillenwater, cuyos valiosos consejos para la primera edición de este libro siguen vigentes. Además, todos tenemos una gran deuda de gratitud con los muchos diseñadores web que han abierto nuevos caminos al usar CSS de manera creativa y han compartido sus descubrimientos con la comunidad de diseño web. Finalmente, gracias a David Pogue, cuyo incansable entusiasmo y resistencia son inspiradores; Nan Barber por refinar mi escritura, corregir mis errores y mantenerme encaminado; a mi esposa, Scholle, por su amor y apoyo; mi hijo, Graham, quien sugirió que terminaría este libro mucho más rápido si simplemente escribiera "¡Bla, bla, bla, bla, BOO!" para cada capítulo; mi maravillosa hija, Kate, cuya sonrisa siempre es un gran estímulo; ya mi familia: mamá, Doug, Mary, David, Marisa, Tessa, Phyllis, Les, Del, Patricia y Mike. —David Sawyer McFarland LA SERIE DE MANUALES PERDIDOS Missing Manuals son guías ingeniosas y magníficamente escritas para productos informáticos que no vienen con manuales impresos (que son casi todos). Cada libro presenta un índice hecho a mano y referencias cruzadas a páginas específicas (no solo a capítulos). Los títulos recientes y próximos incluyen: Access 2010: El manual perdidopor Matthew MacDonald Access 2013: El manual perdidopor Matthew MacDonald Adobe Edge Animate: El manual perdidopor Chris Grover Comprar una casa: el manual perdidopor Nancy Conner Creación de un sitio web: el manual perdido, tercera edición,por Matthew MacDonald viii los creditos que faltan www.it-ebooks.info Fotografía digital de David Pogue: El manual perdidopor David Pogué Dreamweaver CS6: El manual perdidopor David Sawyer McFarland Droide 2: El manual perdidopor Preston Gralla Droide x2: El manual perdidopor Preston Gralla Excel 2010: El manual perdidopor Matthew MacDonald FileMaker Pro 12: El manual perdidopor Susan Prosser y Stuart Gripman Flash CS6: El manual perdidopor Chris Grover Galaxy S II: El manual perdidopor Preston Gralla Galaxy Tab: El manual perdidopor Preston Gralla Google+: El manual perdidopor Kevin Purdy Google SketchUp: El manual perdidopor Chris Grover HTML5: El manual perdidopor Matthew MacDonald iMovie '11 e iDVD: El manual perdidopor David Pogue y Aaron Miller iPad: El manual perdido, cuarta ediciónpor JD Biersdorfer iPhone: El manual perdido, quinta ediciónpor David Pogué Desarrollo de aplicaciones para iPhone: El manual perdidopor Craig Hockenberry iPhoto '11: El manual perdidopor David Pogue y Lesa Snider iPod: The Missing Manual, décima ediciónpor JD Biersdorfer y David Pogue JavaScript y jQuery: El manual perdido, segunda ediciónpor David Sawyer McFarland Kindle Fire: El manual perdidopor Peter Meyers Living Green: El manual perdidopor Nancy Conner Mac OS x Mountain Lion: El manual perdidopor David Pogué Microsoft Project 2010: El manual perdidopor Bonnie Biafore Motorola xoom: El manual perdidopor Preston Gralla Netbooks: El manual perdidopor JD Biersdorfer NOOK HD: El manual perdidopor Preston Gralla Office 2010: El manual perdidopor Nancy Conner, Chris Grover y Matthew MacDonald Office 2011 para Macintosh: El manual perdidopor Chris Grover Office 2013: El manual perdidopor Nancy Conner y Matthew MacDonald Inversión personal: el manual perdidopor Bonnie Biafore los creditos que faltan www.it-ebooks.info ix Photoshop CS6: El manual perdidopor Lesa Snider Photoshop Elements 10: El manual perdidopor Bárbara Brundage PHP & MySQL: El Manual Perdido, Segunda Ediciónpor Brett McLaughlin QuickBooks 2012: El manual perdidopor Bonnie Biafore Cambiando a la Mac: The Missing Manual, Lion Editionpor David Pogué Windows 7: El manual perdidopor David Pogué Windows 8: El manual perdidopor David Pogué Tu cuerpo: el manual perdidopor Matthew MacDonald Tu cerebro: el manual perdidopor Matthew MacDonald Tu dinero: el manual perdidopor JD Roth Para obtener una lista completa de todos los manuales faltantes impresos, vaya awww.missingmanuals.com/library. html. X los creditos que faltan www.it-ebooks.info Introducción i C Las hojas de estilo en cascada (CSS para abreviar) le brindan control creativo sobre el diseño y el diseño de sus páginas web. Con CSS, puede adornar el texto de su sitio con titulares llamativos, capitulares y bordes, como los de las revistas de moda. También puede organizar imágenes con precisión, crear columnas y pancartas y resaltar sus enlaces con efectos de rollover dinámicos. Incluso puede hacer que los elementos aparezcan o desaparezcan gradualmente, mover objetos por la página o hacer que un botón cambie lentamente de color cuando un visitante pasa el mouse sobre él. Cualquier cosa que pueda hacer todo eso debe ser bastante complicada, ¿verdad? ¡Au contraire! La idea detrás de CSS es agilizar el proceso de diseño de páginas web. En las próximas páginas, aprenderá los conceptos básicos de CSS. En el Capítulo 1, se pondrá manos a la obra para crear una página web basada en CSS. Cómo funciona CSS CSS funciona con HTML, pero no es HTML. Es un idioma completamente diferente. Mientras que HTML proporciona estructura a un documento al organizar la información en encabezados, párrafos, listas con viñetas, etc., CSS funciona mano a mano con el navegador web para hacer HTML.mirarbien. Por ejemplo, puede usar HTML para convertir una frase en un encabezado de nivel superior, lo que indica que introduce el contenido en el resto de la página. Sin embargo, usaría CSS para formatear ese encabezado con, digamos, letra roja grande y en negrita y colocarlo a 50 píxeles del borde izquierdo de la ventana. En CSS, ese formato de texto comprende un estilo, una regla que describe la apariencia de una parte particular de una página web. Un estilohojaes un conjunto de estos estilos. 1 www.it-ebooks.info Los beneficios de CSS También puede crear estilos específicamente para trabajar con imágenes. Por ejemplo, un estilo puede alinear una imagen a lo largo del borde derecho de una página web, rodear la imagen con un borde colorido y colocar un margen de 50 píxeles entre la imagen y el texto que la rodea. Una vez que haya creado un estilo, puede aplicarlo a texto, imágenes, encabezados u otros elementos en una página. Por ejemplo, puede seleccionar un párrafo de texto y aplicar un estilo para cambiar instantáneamente el tamaño, el color y la fuente del texto. También puede crear estilos para etiquetas HTML específicas, por ejemplo, todos los encabezados de primer nivel (<h1>tags) en su sitio se muestran con el mismo estilo, sin importar dónde aparezcan. Los beneficios de CSS Antes de CSS, los diseñadores web estaban limitados a las opciones de diseño y estilo de HTML. Y si navegó por Internet en 1995, comprenderá el énfasis enlimitado. HTML sigue siendo la base de todas las páginas de la World Wide Web, pero simplemente no es una herramienta de diseño. Claro, HTML proporciona opciones básicas de formato para texto, imágenes, tablas y otros elementos de la página web, y los webmasters pacientes y meticulosos pueden hacer que las páginas se vean bastante bien usando solo HTML. Pero el resultado suele ser páginas web lentas cargadas de código torpe. CSS, en cambio, ofrece las siguientes ventajas: • Las hojas de estilo ofrecen muchas más opciones de formato que HTML. Con CSS, puede dar formato a los párrafos tal como aparecen en una revista o periódico (la primera línea con sangría y sin espacio entre cada párrafo, por ejemplo) y controlar el principal(el espacio entre líneas de texto en un párrafo). • Cuando usa CSS para agregar una imagen de fondo a una página, puede decidir si desea y cómolosas(repite). HTML ni siquiera puede comenzar a hacer eso. • Aún mejor, los estilos CSS ocupan mucho menos espacio que las opciones de formato de HTML, como el tan odiado <fuente>etiqueta. Por lo general, puede recortar una gran cantidad de kilobytes de páginas web con mucho texto utilizando CSS. Como resultado, sus páginas se ven geniales ycargar más rápido. • Las hojas de estilo también facilitan la actualización de su sitio. Puede recopilar todos sus estilos en una sola hoja de estilo externa que está vinculada a cada página de su sitio. Luego, cuando edita un estilo, ese cambio se propaga inmediatamente a través de su sitio.lo que seaaparece ese estilo. Puede cambiar por completo la apariencia de un sitio simplemente editando una sola hoja de estilo. Lo que necesitas saber Este libro asume que ya tiene algún conocimiento de HTML (y tal vez también algo de experiencia con CSS). Tal vez haya creado un sitio o dos (o al menos una página o dos) y esté familiarizado con el mar de etiquetas—<html>, <p>, <h1>, <tabla>, 2 Css3: el manual perdido www.it-ebooks.info y así sucesivamente, que conforman el lenguaje de marcado de hipertexto. CSS no puede hacer nada sin HTML, así que para avanzar necesitas saber cómo crear una página web Documento TIPOS utilizando HTML básico. Si ha usado HTML en el pasado para crear páginas web, pero siente que su conocimiento está un poco oxidado, la siguiente sección le ofrece un repaso básico. CONSEJOSi solo está comenzando a aprender HTML, consulte estos tutoriales gratuitos en línea: HTML Dog ( www.htmldog.com/guides/htmlbeginner) y W3Schools (www.w3schools.com/html). Si es un aficionado a las páginas impresas, tal vez quiera hacerse con una copia deCreación de un sitio web: el manual perdido,Tercera edición oHead First HTML y CSS,Segunda edición (ambos O'Reilly). HTML: la estructura básica HTML (lenguaje de marcado de hipertexto) utiliza comandos simples llamadosetiquetaspara definir las diversas partes de una página web. Por ejemplo, este código HTML crea una página web simple: <!doctipo html> <html> <cabeza> <juego de caracteres meta="UTF-8"> <title>Oye, soy el título de esta página web</title> </ head> <cuerpo> <p>Oye, soy un párrafo en esta página web.</p> </ body> </html> Puede que no sea emocionante, pero este ejemplo tiene todos los elementos básicos que necesita una página web. Notarás algo llamadotipo de documentodeclaración al principio del código, seguida de <HTML> (con los corchetes), una cabeza, un cuerpo y algunas cosas, el contenido real de la página, dentro del cuerpo, que termina en un </ final.html>. Tipos de documentos Todas las páginas web comienzan con un tipo de documento, una línea de código que identifica qué tipo de HTML usó para escribir la página. Se han utilizado dos tipos de documentos durante años: HTML 4.01 y xHTML 1.0, y cada uno de esos tipos de documentos tiene dos estilos:estrictoytransicional. Por ejemplo, el tipo de documento de transición HTML 4.01 tiene el siguiente aspecto (los otros tipos de documento para HTML 4.01 y xHTML 1.0 tienen un aspecto similar): <!DOCTYPE HTML PÚBLICO "-//W3C//DTD HTML 4.01 Transicional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> NotaPara ver ejemplos de todos los tipos de documentos, visitewww.webstandards.org/learn/reference/templates. introducción www.it-ebooks.info 3 cómo hTML etiquetas de trabajo Si observa el código de la página HTML de muestra en esta sección, verá que utiliza un tipo de documento mucho más sucinto: <!doctipo html> Ese es el tipo de documento nuevo y más simple de HTML5. HTML5 está destinado a ser más fácil de usar y más optimizado que sus predecesores. Este libro utiliza el tipo de documento HTML5, que es compatible con todos los navegadores populares (incluso el antiguo Internet Explorer 6). Y debido a que HTML5 es el futuro de la Web, no hay motivo para seguir usando los tipos de documento más antiguos. NotaEl hecho de que el tipo de documento HTML funcione en navegadores más antiguos no significa que esos navegadores entiendan todas las etiquetas o características de HTML5. Internet Explorer 8 y anteriores, por ejemplo, no reconocen las nuevas etiquetas HTML5. Para diseñar etiquetas con CSS para esas versiones de IE, debe emplear un poco de JavaScript. Aprenderá cómo actualizar los navegadores más antiguos en la página 30. Pero no importa qué tipo de documento prefieras, lo importante es usar siempre uno. Sin él, sus páginas se verán diferentes según el navegador de su visitante, ya que los navegadores muestran CSS de manera diferente si no tienen un tipo de documento como guía. Cada tipo de documento requiere que escriba su HTML de cierta manera. Por ejemplo, la etiqueta para un salto de línea se ve así en HTML 4.01: <br> Pero en xHTML, se ve así: <br /> Y hay otra ventaja de HTML5: acepta cualquiera de los dos. Cómo funcionan las etiquetas HTML En el ejemplo HTML simple de la página 3, como en el código HTML de cualquier página web, la mayoría de los comandos aparecen en pares que rodean un bloque de texto u otros comandos. Intercalados entre paréntesis, estosetiquetasson instrucciones que le dicen a un navegador web cómo mostrar la página web. Las etiquetas son la parte de "marcado" del lenguaje de marcado de hipertexto. El inicio (apertura) de cada par le dice al navegador dónde comienza la instrucción, y la etiqueta final le dice dónde termina la instrucción. terminando oclausuralas etiquetas siempre incluyen una barra diagonal (/) después del primer símbolo de paréntesis (<). En cualquier página web, normalmente encontrarás al menos estos cuatro elementos. • La primera línea de una página web es laDeclaración DOCTYPE, discutido en la sección anterior. • El<html>La etiqueta aparece una vez al principio de una página web y otra vez (con una barra diagonal añadida) al final:</html>. Esta etiqueta le dice a un navegador web que 4 Css3: el manual perdido www.it-ebooks.info la información contenida en este documento está escrita en HTML, a diferencia de algún otro idioma. Todo el contenido de una página, incluidas otras etiquetas, aparece entre la XhTML, también apertura y el cierre <html>etiquetas Si tuviera que pensar en una página web como un árbol, el <html>la etiqueta serían sus raíces. Del tronco brotan dos ramas que representan las dos partes principales de cualquier página web: elcabezay elcuerpo. • Elcabezade una página web contiene el título de la página ("Lápices de pedido por correo de Izzie"). También puede incluir otra información invisible, como la descripción de una página, que utilizan los navegadores y los motores de búsqueda. Rodeas la cabecera con apertura y cierre.<cabeza>etiquetas Además, la sección de encabezado puede incluir información que los navegadores usan para formatear el HTML de la página y agregar interactividad. Como verás, el <cabeza> puede contener código CSS (como el que aprenderá a escribir en este libro) o un enlace a otro archivo que contenga información CSS. • Elcuerpo, como se distingue por su entorno<cuerpo>etiquetas, contiene todo el contenido que aparece dentro de una ventana del navegador: titulares, texto, imágenes, etc. Dentro del <cuerpo>etiqueta, comúnmente encontrará etiquetas como estas: • Le dices a un navegador web dónde comienza un párrafo de texto con un<p>(etiqueta de párrafo de apertura), y donde termina con un</p>(etiqueta de párrafo de cierre). • El<fuerte>la etiqueta enfatiza el texto. Cuando rodea algún texto con él y su etiqueta de socio,</fuerte>, obtienes negrita. El fragmento HTML <fuerte> ¡Advertencia!</strong>le dice a un navegador web que enfatice fuertemente la palabra "¡Advertencia!" • El<un>etiqueta, o etiqueta de anclaje, crea unaHipervínculoen una página web. Al hacer clic, aparece un hipervínculo, oenlace— puede llevar a cualquier parte de la Web. Le dices al navegador a dónde apunta el enlace poniendo una dirección web dentro del <un>etiquetas Por ejemplo, puede escribir <a href="http://www.missingmanuals.com">¡Haga clic aquí!</a>. El navegador sabe que cuando su visitante hace clic en las palabras "¡Haga clic aquí!" debe ir al sitio web de Missing Manual. Elhrefparte de la etiqueta se llama atributo, y la URL (el Localizador Uniforme de Recursos o dirección web) es elvalor. En este ejemplo,http://www.missingmanuals.comes elvalordelhrefatributo. XHTML, también Como cualquier tecnología, HTML ha evolucionado con el tiempo. Aunque el HTML estándar ha cumplido bien su propósito, siempre ha sido un lenguaje algo descuidado. Entre otras cosas, le permite usar letras mayúsculas, minúsculas y mayúsculas y minúsculas en las etiquetas. (<cuerpo>y < CUERPO>son correctas, por ejemplo) y permite etiquetas no cerradas (por lo que puede usar un <p> etiqueta sin cierre </p>etiqueta para crear un párrafo). Si bien esta flexibilidad puede facilitar la escritura de páginas, también dificulta la vida de los navegadores web, los teléfonos inteligentes y otras tecnologías que interactúan con los datos en la Web. introducción www.it-ebooks.info 5 hTML5: El VUELTAS DE RUEDA de nuevo Además, HTML no funciona con uno de los lenguajes de Internet más populares: xML o lenguaje de marcado extensible. Para mantener el ritmo de los tiempos, en el año 2000 se introdujo una versión mejorada de HTML, llamada xHTML, y encontrará que se usa con frecuencia en muchos sitios (de hecho, xHTML es solo una versión de HTML “xML-ified”). . xHTML fue visto como el futuro (en 2000), pero desde entonces ha sido reemplazado por HTML5. Si bien los navegadores web todavía entienden xHTML (y probablemente lo harán durante mucho tiempo), este libro no lo incluye. HTML5: la rueda vuelve a girar Cuando el W3C, el grupo responsable de muchas tecnologías de Internet, introdujo xHTML como un paso intermedio en la transición a xML como el lenguaje principal de la Web, la comunidad de desarrollo web lo anunció como el próximo gran avance. La historia ha demostrado que esa predicción es un poco grandiosa. Resulta que la complejidad de migrar a xML impidió que los fabricantes de navegadores siguieran el camino xML establecido por el World Wide Web Consortium. En cambio, el W3C cerró el grupo de trabajo xHTML a favor de HTML5, una nueva versión de HTML que se aleja de xML y vuelve a HTML, aunque es una versión mejorada. Con el apoyo de todos los fabricantes de navegadores, HTML5 es la próxima novedad. Algunos navegadores, incluidos Google Chrome y Firefox, ya reconocen partes de HTML5 e incluso los principales medios de comunicación como Time, Newsweek, HTML5 no es una tecnología radicalmente nueva. De hecho, a diferencia de xHTML, cuyo objetivo era fomentar una nueva forma de crear páginas web, HTML5 se trata de asegurarse de que la Web siga funcionando como siempre lo ha hecho. La mayoría de los conceptos básicos de HTML todavía están en su lugar. Además, HTML5 agrega algunos elementos nuevos, destinados a respaldar la forma en que los diseñadores web actualmente crean sitios web. Por ejemplo, en HTML5, el <encabezado>la etiqueta puede contener el contenido que normalmente encontraría en la parte superior de una página, como un logotipo y enlaces de navegación en todo el sitio; el nuevo <navegación> etiqueta encierra el conjunto de enlaces utilizados para navegar por un sitio; y el <pie de página>La etiqueta contiene las cosas que normalmente pones en la parte inferior de una página, como avisos legales, contactos de correo electrónico, etc. Además, HTML5 agrega nuevas etiquetas que le permiten insertar video y audio en una página, y nuevas etiquetas de formulario que agregan elementos sofisticados, como controles deslizantes y selectores de fechas emergentes, así como soporte de navegador incorporado para validación de formularios (lo que garantiza visitantes llenan correctamente sus formularios). Desafortunadamente, el soporte del navegador para estas nuevas características no es consistente y es difícil usar las nuevas etiquetas sin algunas soluciones bastante elaboradas. Aunque es posible que HTML5 no esté completamente listo para el horario estelar, no hay razón para no comenzar a usar el tipo de documento HTML5 e incluso algo de HTML5 básico ahora. (Sin embargo, deberá proporcionar un poco de ayuda a Internet Explorer 8 y versiones anteriores; consulte el recuadro en la página 24). Encontrará HTML5 a lo largo de este libro, especialmente en el próximo capítulo. 6 Css3: el manual perdido www.it-ebooks.info Software para CSS Software para CSS Para crear páginas web compuestas por HTML y CSS, no necesitas más que un editor de texto básico como Notepad (Windows) o TextEdit (Mac). Pero después de escribir unos cientos de líneas de HTML y CSS, es posible que desee probar un programa más adecuado para trabajar con páginas web. Esta sección enumera algunos programas comunes, algunos gratuitos y otros que debe comprar. NotaHay literalmente cientos de herramientas que pueden ayudarlo a crear páginas web, por lo que la siguiente no es una lista completa. Piense en ello como un recorrido por los grandes éxitos de los programas más populares que los fanáticos de CSS están usando hoy. Programas gratuitos Existen muchos programas gratuitos para editar páginas web y hojas de estilo. Si todavía usa el Bloc de notas o TextEdit, pruebe uno de estos. Aquí hay una breve lista para comenzar: • jEditar(Windows, Mac, Linux;http://jedit.org). Este editor de texto gratuito basado en Java funciona en casi cualquier computadora e incluye muchas funciones que encontraría en los editores de texto comerciales, como el resaltado de sintaxis para CSS. • Bloc de notas++(ventanas;http://notepad-plus.sourceforge.net). Mucha gente confía en este rápido editor de texto. Incluso tiene funciones integradas que lo hacen ideal para escribir HTML y CSS, como resaltado de sintaxis: etiquetas de codificación de colores y palabras clave especiales para facilitar la identificación de los elementos HTML y CSS de la página. • TextWrangler(Mac;www.barebones.com/products/textwrangler). Este software gratuito es en realidad una versión reducida de BBEdit, el sofisticado y conocido editor de texto de Mac. TextWrangler no tiene todas las herramientas HTML integradas de BBEdit, pero incluye resaltado de sintaxis, FTP (para que pueda cargar archivos en un servidor web) y más. software comercial Los programas comerciales de desarrollo de sitios web van desde editores de texto económicos hasta herramientas completas de construcción de sitios web con todas las comodidades: • EditPlus(ventanas;www.editplus.com) es un editor de texto económico ($ 35) que incluye resaltado de sintaxis, FTP, autocompletado y otras características de ahorro de muñeca. • skEditar(Mac;www.skedit.com) es un editor de páginas web económico ($30), completo con FTP/SFTP, sugerencias de código y otras características útiles. • Coda2(Mac;www.panic.com/coda) es un kit de herramientas de desarrollo web completo ($99). Incluye un editor de texto, vista previa de página, FTP/SFTP y herramientas gráficas de creación de CSS para crear CSS. • Texto sublime(Mac;www.sublimetext.com) es un editor de texto relativamente nuevo. Es amado entre los codificadores en Mac. introducción www.it-ebooks.info 7 sobre esto Libro • Tejesueños(Mac y Windows;www.adobe.com/products/dreamweaver) es un editor visual de páginas web ($399). Le permite ver cómo se ve su página en un navegador web. El programa también incluye un potente editor de texto y excelentes herramientas de creación y gestión de CSS. VerificarDreamweaver CS6: El manual perdidopara obtener información completa sobre cómo usar este poderoso programa. • Web de expresión 2(ventanas;www.microsoft.com/expresión) es la entrada de Microsoft en el campo del diseño web ($149). Incluye muchas herramientas profesionales de diseño web, incluidas excelentes herramientas CSS. NotaLos diversos tipos de software discutidos en esta sección son programas de propósito general que le permiten editar tanto HTML/XHTML como CSS. Con ellos, solo necesita aprender un programa para sus necesidades de desarrollo web. Pero si ya tiene un querido editor de HTML/XHTML que no utiliza CSS, quizás desee consultar uno de los programas de edición específicos de CSS que se describen en el Apéndice B. Sobre este libro La World Wide Web es realmente fácil de usar. Después de todo, las abuelas de Boise y los alumnos de primer grado de Tallahassee se conectan a Internet todos los días. Desafortunadamente, las reglas que gobiernan cómo funciona la Webobrasno son tan fáciles de entender. Los informáticos y otros tipos de técnicos que escriben la documentación oficial no están interesados en explicar sus conceptos al Joe (o Joanne) promedio. solo echa un vistazowww.w3.org/TR/css3-transformspara tener una idea del galimatías técnico que hablan estos geeks. Las personas que recién están aprendiendo CSS a menudo no saben por dónde empezar. Y los puntos más finos de CSS pueden hacer tropezar incluso a los profesionales web experimentados. El propósito de este libro, entonces, es servir como el manual que debería haber venido con CSS. En las páginas de este libro, encontrará instrucciones paso a paso para usar CSS para crear hermosas páginas web. CSS3: El manual perdidoestá diseñado para ayudar a los lectores en todos los niveles técnicos. Para aprovechar al máximo este libro, debe conocer una muestra de HTML y tal vez incluso CSS. Entonces, si nunca ha creado una página web antes, consulte el tutorial que comienza en la página 43. Las discusiones principales en estos capítulos están escritas para principiantes avanzados o intermedios. Pero si es nuevo en la creación de páginas web, los cuadros especiales llamados "Up to Speed" proporcionan la información introductoria que necesita para comprender el tema en cuestión. Si eres un jinete avanzado de páginas web, por otro lado, mantente atento a cuadros similares llamados "Clínica de usuarios avanzados". Ofrecen más consejos técnicos, trucos y atajos para el aficionado a la informática con experiencia. 8 Css3: el manual perdido www.it-ebooks.info sobre esto Libro Hasta la velocidad Los diferentes sabores de CSS Al igual que los sistemas operativos y los iPod, CSS genera nuevas en realidad un solo estándar. A medida que CSS ha crecido en versiones continuamente (bueno, no con tanta frecuencia como los complejidad, el W3C ha dividido CSS en módulos separados: el módulo modelos de iPod). CSS 1, introducido en 1996, sentó las bases para las de selectores, el módulo de valores y unidades, el módulo de alineación hojas de estilo en cascada. La estructura básica de un estilo, el concepto de cajas, etc. Dado que cada módulo puede desarrollarse de selector (Capítulo 3) y la mayoría de las propiedades CSS de este libro independientemente de los demás, no existe un único estándar llamado estaban en esa primera versión. "CSS3". De hecho, el nivel 3 del módulo Selectores está completo y se CSS 2 agregó nuevas funciones, incluida la capacidad de orientar su CSS está trabajando en el nivel 4. a diferentes impresoras, monitores y otros dispositivos. CSS 2 también En otras palabras, lo que se conoce como CSS3 es en realidad solo una agregó nuevos selectores y la capacidad de colocar elementos con colección suelta de diferentes módulos en varios estados de finalización. precisión en una página web. Los fabricantes de navegadores ya han incorporado partes de los Este libro cubre completamente CSS 2.1, que es el estándar módulos más nuevos, pero otros módulos no son compatibles con actualmente aceptado. Incorpora todo CSS 1, agrega varias ningún navegador. En el futuro, no habrá ningún CSS4; solo habrá propiedades nuevas y corrige algunos problemas con las pautas nuevas versiones de los diferentes módulos, cada uno en un nivel de CSS 2. diferente de trabajo. CSS 2.1 incluyó algunas adiciones y revisiones. No fue un cambio radical con respecto a la versión 2, y la mayoría de los navegadores web se han adaptado Por estas razones, este libro cubre el núcleo de CSS 2.1 (que simplemente se ha transferido a los diversos módulos de CSS3), así como las nuevas propiedades de CSS más emocionantes, populares y perfectamente a las nuevas reglas, gracias. Más recientemente, CSS3 ha recibido mucha atención (junto con su primo ampliamente admitidas. HTML5). A diferencia de las versiones anteriores de CSS, CSS3 no es NotaEste libro recomienda periódicamente otros libros de CSS, que cubren temas que son demasiado especializados o tangenciales para un manual. A veces, los títulos recomendados son del editor de la serie Missing Manual, O'Reilly, pero no siempre. Si hay un gran libro que no es parte de la familia O'Reilly, se lo haremos saber. Sobre el contorno CSS3: El manual perdidose divide en cinco partes; los primeros cuatro contienen cada uno varios capítulos, mientras que la última parte contiene apéndices: • Primera parte: conceptos básicos de CSS, le muestra cómo crear hojas de estilo y proporciona una descripción general de los conceptos clave de CSS, como la herencia, los selectores y la cascada. En el camino, aprenderá las mejores prácticas de escritura HTML cuando trabaje con CSS. Los tutoriales refuerzan los conceptos principales de la parte y le dan una buena idea del poder de CSS. introducción www.it-ebooks.info 9 EL MUY Lo esencial • Segunda parte: CSS aplicado, te lleva al mundo real del diseño web. Aprenderá las propiedades CSS más importantes y cómo usarlas para dar formato al texto, crear herramientas de navegación útiles y mejorar su página con gráficos. Aprenderá a crear animaciones simples con CSS. Esta sección también proporciona consejos sobre cómo hacer tablas y formularios atractivos. • Tercera parte: diseño de página CSS, lo ayuda con uno de los aspectos más confusos pero más gratificantes de CSS: controlar la ubicación de los elementos en una página. Aprenderá cómo crear diseños comunes (como diseños de 2 y 3 columnas), cómo agregar barras laterales, así como sobre flotadores y posicionamiento, dos técnicas comunes de CSS para controlar el diseño de la página. También aprenderá a crear sitios web que se adapten para verse bien en navegadores de escritorio, tabletas y dispositivos móviles. • Cuarta parte: CSS avanzado, le enseña cómo hacer que las páginas web se vean bien cuando se imprimen y cubre técnicas avanzadas para usar CSS de manera más efectiva y eficiente. • Quinta parte: Apéndices, proporciona dos conjuntos de recursos. La Referencia de propiedades de CSS resume cada propiedad de CSS en fragmentos pequeños y fáciles de digerir para que pueda aprender rápidamente sobre propiedades de CSS útiles que quizás no haya visto antes o repasar lo que ya sabe. El último apéndice cubre herramientas y recursos para crear y usar CSS. Los muy básicos Para usar este libro, y de hecho para usar una computadora, necesita saber algunos conceptos básicos. Debe estar familiarizado con estos términos y conceptos: • haciendo clic. Este libro le brinda tres tipos de instrucciones que requieren que use el mouse o el trackpad de su computadora. Ahacer clicsignifica apuntar el cursor de flecha a algo en la pantalla y luego, sin mover el cursor en absoluto, presionar y soltar el botón del mouse (o el panel táctil de la computadora portátil). Un clic derecho es lo mismo que usar el botón derecho del mouse. (En una Mac, presione Control mientras hace clic si no tiene el botón derecho del mouse). Ahaga doble clicsignifica hacer clic dos veces en sucesión rápida, nuevamente sin mover el cursor en absoluto. Y paraarrastrarsignifica mover el cursormientraspresionando el botón. cuando te dicen queC-hacer clicalgo en la Mac, oCtrl-clicalgo en una PC, haces clic mientras presionas elCo la tecla Ctrl (ambas están cerca de la barra espaciadora). • Menús. Elmenússon las palabras en la parte superior de la pantalla o ventana: Archivo, Editar, etc. Haga clic en uno para que aparezca una lista de comandos, como si estuvieran escritos en la persiana de una ventana que acaba de bajar. Este libro asume que usted sabe cómo abrir un programa, navegar por Internet y descargar archivos. Debe saber cómo usar el menú Inicio (Windows) o el Dock oa(Mac), así como el Panel de control (Windows) o Preferencias del sistema (Mac OS x). 10 Css3: el manual perdido www.it-ebooks.info • Atajos de teclado. Cada vez que quitas la mano del teclado para mover el mouse, pierdes tiempo y potencialmente interrumpes tu flujo creativo. Es por eso que muchos EL MUY Lo esencial fanáticos de las computadoras usan combinaciones de teclas en lugar de comandos de menú siempre que sea posible. Cuando vea un atajo como Ctrl+S (C-S) (que guarda los cambios en el documento actual), le indica que mantenga presionada la tecla Ctrl oCy, mientras está presionada, escriba la letra S y luego suelte ambas teclas. Acerca de-Estos-flechas A lo largo de este libro, y a lo largo de la serie Missing Manual, encontrará oraciones como esta: "Abrir el sistema→Biblioteca→Carpeta de fuentes. Esa es la abreviatura de una instrucción mucho más larga que lo dirige a abrir tres carpetas anidadas en secuencia, como esta: “En su disco duro, encontrará una carpeta llamada Sistema. Abre eso. Dentro de la ventana de la carpeta del sistema hay una carpeta llamada Biblioteca; haga doble clic en él para abrirlo. Adentroesola carpeta es otra llamada Fuentes. Haz doble clic para abrirlo también”. De manera similar, este tipo de taquigrafía de flechas ayuda a simplificar la tarea de elegir comandos en los menús, como se muestra en la Figura I-1. Figura i-1 En este libro, las anotaciones de flecha ayudan a simplificar las instrucciones del menú. Por ejemplo, Ver→Tamano del texto→Aumentar es una forma más compacta de decir: “En el menú Ver, elija Tamaño del texto; en el submenú que aparece, elija Aumentar”. (Por cierto, cuando vea una combinación de teclas después de un comando de menú, como Ctrl++ aquí, eso significa que puede presionar esas teclas como atajo). introducción www.it-ebooks.info 11 acerca de en línea recursos Acerca de los recursos en línea Como propietario de un Manual perdido, tienes más que un libro para leer. En línea, encontrará archivos de ejemplo para que pueda obtener experiencia práctica, así como consejos, artículos y tal vez incluso uno o dos videos. También puede comunicarse con el equipo de Missing Manual y decirnos qué ama (u odia) del libro. Dirigirse a www.missingmanuals.com, o vaya directamente a una de las siguientes secciones. Ejemplos vivos Este libro está diseñado para publicar su trabajo en la Web de forma más rápida y profesional. Entonces, es natural que la mitad del valor de este libro se encuentre en la Web. A medida que lea los capítulos del libro, encontrará una serie deejemplos vivos—tutoriales paso a paso que puede crear usted mismo, utilizando materias primas (como gráficos y páginas web a medio completar) que puede descargar dewww.sawmac.com/css3/. Es posible que no gane mucho simplemente leyendo estas lecciones paso a paso mientras se relaja en la hamaca de su porche. Pero si trabaja con ellos en la computadora, descubrirá que estos tutoriales le brindan información sobre la forma en que los diseñadores profesionales crean páginas web. También encontrarás, en las lecciones de este libro, las URL de las páginas terminadas, para que puedas comparar tu trabajo con el resultado final. En otras palabras, no solo verá imágenes de cómo las páginas webdeberíamirar; encontrará las páginas web reales y en funcionamiento en Internet. Acerca de MissingManuals.com Enwww.missingmanuals.com, encontrará artículos, sugerencias y actualizaciones paraCSS3: El manual perdido. De hecho, lo invitamos y lo alentamos a que envíe dichas correcciones y actualizaciones usted mismo. En un esfuerzo por mantener el libro lo más actualizado y preciso posible, cada vez que imprimamos más copias de este libro, haremos las correcciones confirmadas que haya sugerido. También anotaremos dichos cambios en el sitio web, para que pueda marcar las correcciones importantes en su propia copia del libro, si lo desea. (Ir a www.missingmanuals.com/feedback, elija el nombre del libro en el menú emergente y luego haga clic en Ir para ver los cambios). También en nuestra página de Comentarios, puede obtener respuestas de expertos a las preguntas que le surjan mientras lee este libro, escribir una reseña del libro y encontrar grupos para personas que comparten su interés en CSS. Nos encantaría escuchar sus sugerencias para nuevos libros en la línea Missing Manual. También hay un lugar para eso enmissingmanuals.com. Y mientras está en línea, también puede registrar este libro enwww.oreilly.com(puede ir directamente a la página de registro yendo aquí:www.oreilly.com/registrar). Registrarse significa que podemos enviarle actualizaciones sobre este libro y podrá recibir ofertas especiales como descuentos en ediciones futuras deCSS3: El manual perdido. 12 Css3: el manual perdido www.it-ebooks.info Fe de erratas En un esfuerzo por mantener este libro lo más actualizado y preciso posible, cada vez que SaFari® LIBROS EN LÍNEA imprimamos más copias, haremos las correcciones confirmadas que haya sugerido. También notamos dichos cambios en el sitio web del libro, por lo que puede marcar correcciones importantes en su propia copia del libro, si lo desea. Ir aoreil.ly/css3_mmpara informar un error y ver las correcciones existentes. Safari® Libros en línea Safari® Books Online es una biblioteca digital a pedido que le permite buscar fácilmente en más de 7500 libros y videos de referencia sobre tecnología y creatividad para encontrar las respuestas que necesita rápidamente. Con una suscripción, puede leer cualquier página y ver cualquier video de nuestra biblioteca en línea. Lea libros en su teléfono celular y dispositivos móviles. Acceda a nuevos títulos antes de que estén disponibles para su impresión y obtenga acceso exclusivo a manuscritos en desarrollo y publique comentarios para los autores. Copie y pegue muestras de código, organice sus favoritos, descargue capítulos, marque secciones clave, cree notas, imprima páginas y benefíciese de toneladas de otras funciones que ahorran tiempo. introducción www.it-ebooks.info 13 www.it-ebooks.info PARTE Conceptos básicos de CSS CAPÍTULO 1: HTML para CSS CAPITULO 2: Creación de estilos y hojas de estilo CAPÍTULO 3: Selectores: identificar qué estilo CAPÍTULO 4: Ahorro de tiempo con herencia de estilo CAPÍTULO 5: Gestión de varios estilos: la cascada www.it-ebooks.info 1 www.it-ebooks.info Capítulo 1 1 HTML para CSS T Para aprovechar al máximo CSS, su código HTML debe proporcionar una base sólida y bien construida. Este capítulo le muestra cómo escribir HTML mejor y más compatible con CSS. La buena noticia es que cuando usa CSS en todo su sitio, HTML en realidad se vuelvemás fácil escribir. Ya no necesita preocuparse por intentar convertir HTML en el experto en diseño que nunca tuvo la intención de ser. En su lugar, CSS ofrece la mayoría de los toques de diseño gráfico que probablemente deseará, y las páginas HTML escritas para trabajar con CSS son más fáciles de crear ya que requieren menos código y menos escritura. También se descargarán más rápido, un bono de bienvenida que los visitantes de su sitio apreciarán (vea la Figura 1-1). HTML: pasado y presente Como se discutió en la Introducción, HTML proporciona la base para cada página que encuentre en la World Wide Web. Cuando agrega CSS a la mezcla, la forma en que usa HTML cambia. Diga adiós a la reutilización de etiquetas HTML incómodas simplemente para lograr ciertos efectos visuales. Algunas etiquetas y atributos HTML, como el antiguo <fuente> etiqueta: puedes olvidarte por completo. 17 www.it-ebooks.info html: pasado Y PRESENTE Figura 1-1 Diseño web basado en CSS hace escribir HTML más fácil. Los dos diseños que se muestran aquí se ven similares, pero la página superior tiene un estilo completo con CSS, mientras que la página inferior usa solo HTML. El tamaño del archivo HTML para la página principal es de solo 4k, mientras que la página de solo HTML tiene casi 4 veces ese tamaño con 14k. El enfoque de solo HTML requiere mucho más código para lograr casi los mismos efectos visuales: 213 líneas de código HTML en comparación con las 71 líneas de la versión CSS. HTML pasado: todo lo que se veía bien Cuando un grupo de científicos creó la Web para ayudar a compartir y realizar un seguimiento de la documentación técnica, nadie llamó a los diseñadores gráficos. Todo lo que los científicos necesitaban de HTML era estructurar la información para facilitar su comprensión. Por ejemplo, el < h1> indica un titular importante, mientras que <h2>la etiqueta representa un encabezado menor, 18 Css3: el manual perdido www.it-ebooks.info generalmente un subtítulo del <h1>etiqueta. Otro favorito, el <viejo> (lista ordenada), crea una lista numerada para cosas como "Las 10 razones principales para no jugar con medusas". html: pasado Y PRESENTE Pero tan pronto como las personas, además de los científicos, comenzaron a usar HTML, querían que sus páginas web se vieran bien. Entonces, los diseñadores web comenzaron a usar etiquetas para controlar la apariencia en lugar de estructurar la información. Por ejemplo, puede utilizar el <cita en bloque>etiqueta (destinada a material que se cita de otra fuente) en cualquier texto que desee sangrar un poco. Puede usar etiquetas de encabezado para hacer que cualquier texto sea más grande y más audaz, independientemente de si funciona como encabezado. En una solución aún más elaborada, los diseñadores aprendieron a usar el <mesa> etiqueta para crear columnas de texto y colocar con precisión imágenes y texto en una página. Desafortunadamente, dado que esa etiqueta estaba destinada a mostrar resultados de investigación de datos similares a hojas de cálculo, horarios de trenes, etc., los diseñadores tuvieron que ser creativos usando el <mesa>etiquetar de formas inusuales, a veces anidando una tabla dentro de una tabla dentro de una tabla para que sus páginas se vean bien. Mientras tanto, los fabricantes de navegadores introdujeron nuevas etiquetas y atributos con el propósito específico de hacer que una página se vea mejor. El <fuente>La etiqueta, por ejemplo, le permite especificar un color de fuente, un tipo de letra y uno de siete tamaños diferentes. (Si llevas la cuenta en casa, son alrededor de 100 tamaños menos de los que puedes obtener, por ejemplo, con Microsoft Word). Finalmente, cuando los diseñadores no podían obtener exactamente lo que querían, a menudo recurrían al uso de gráficos. Por ejemplo, crearían un gráfico grande para capturar la fuente y el diseño exactos de los elementos de la página web y luego dividirían los archivos de Photoshop en archivos más pequeños y los unirían dentro de las tablas para recrear el diseño original. Si bien todas las técnicas anteriores (usar etiquetas de manera creativa, aprovechar los atributos de etiquetas específicos del diseño y hacer un uso extensivo de gráficos) brindan control de diseño sobre sus páginas, también agregan una gran cantidad de código HTML adicional (y más arrugas para tu frente). HTML Presente: Scaffolding para CSS Independientemente del contenido de su página web (el calendario de la temporada de pesca, las indicaciones para llegar al IKEA más cercano o las imágenes de la fiesta de cumpleaños de su hijo), es el diseño de la página lo que hace que parezca una empresa profesional o un pasatiempo a tiempo parcial. Un buen diseño realza el mensaje de su sitio, ayuda a los visitantes a encontrar lo que buscan y determina cómo el resto del mundo ve su sitio web. Es por eso que los diseñadores web pasaron por las contorsiones descritas en la sección anterior para obligar a HTML a verse bien. Al asumir esas tareas de diseño, CSS permite que HTML vuelva a hacer lo que mejor hace: estructurar el contenido. El uso de HTML para controlar el aspecto del texto y otros elementos de la página web está obsoleto. No se preocupe si HTML <h1>la etiqueta es demasiado grande para su gusto o las listas con viñetas no están espaciadas correctamente. Puedes encargarte de eso más tarde usando CSS. En su lugar, piense en HTML como un método para agregar estructura al contenido que desea publicar en la Web. Use HTML para organizar su contenido y CSS para que ese contenido se vea genial. Capítulo 1:HTML para CSS www.it-ebooks.info 19 escritura html para CSS Escribir HTML para CSS Si es nuevo en el diseño web, es posible que necesite algunos consejos útiles para guiar sus incursiones en HTML (y evitar las técnicas de HTML bien intencionadas pero desactualizadas). O si ha estado creando páginas web durante un tiempo, es posible que haya adquirido algunos malos hábitos de escritura HTML que es mejor que olvide. El resto de este capítulo le presenta algunos hábitos de escritura HTML que enorgullecerán a su madre y le ayudarán a sacar el máximo provecho de CSS. estructura de pensamiento HTML agrega significado al texto dividiéndolo lógicamente e identificando el papel que juega el texto en la página: por ejemplo, el <h1>La etiqueta es la introducción más importante al contenido de una página. Otros encabezados le permiten dividir el contenido en otras secciones menos importantes pero relacionadas. Al igual que el libro que tienes en la mano, por ejemplo, una página web debe tener una estructura lógica. Cada capítulo de este libro tiene un título (piense <h1>) y varias secciones (piensa <h2>),que a su vez contienen subsecciones más pequeñas. Imagínese cuánto más difícil sería leer estas páginas si cada palabra se juntara en un párrafo largo. NotaPara ver un tutorial sobre HTML, visitewww.w3schools.com/html/html_intro.asp. Para obtener una lista rápida de todas las etiquetas HTML disponibles, visite la referencia HTML de Sitepoint.com enhttp://referencia.sitepoint.com/html. HTML proporciona muchas otras etiquetas además de encabezados paramarcandocontenido para identificar su función en la página. (Después de todo, la M en HTML significamargen.) Entre los más populares están los <p>etiqueta para párrafos de texto y el <ul>etiqueta para crear listas con viñetas (no numeradas). Las etiquetas menos conocidas pueden indicar tipos de contenido muy específicos, como <abr>para abreviaturas y <código>para código de computadora. Cuando escriba HTML para CSS, use una etiqueta que se acerque al papel que juega el contenido en la página, no a la forma en que se ve (vea la Figura 1-2). Por ejemplo, un grupo de enlaces en una barra de navegación no es realmente un título y no es un párrafo normal de texto. Es más como una lista de opciones con viñetas, por lo que <ul>etiqueta es una buena opción. Si está diciendo, "Pero los elementos en una lista con viñetas están apilados verticalmente uno encima del otro, y quiero una barra de navegación horizontal donde cada enlace se encuentra junto al enlace anterior", no se preocupe. Con CSS magic, puede convertir una lista vertical de enlaces en una elegante barra de navegación horizontal, como se describe en el Capítulo 9. 20 Css3: el manual perdido www.it-ebooks.info escritura html para CSS Figura 1-2 Vieja escuela, nueva escuela. Antes de CSS, los diseñadores tenían que recurrir a la etiqueta <font> y otros HTML adicionales para lograr ciertos efectos visuales (arriba). Puede lograr el mismo aspecto (ya menudo uno mejor) con mucho menos código HTML (abajo). Además, el uso de CSS para formatear lo libera para escribir HTML que sigue la estructura lógica del contenido de la página. Dos etiquetas HTML a tener en cuenta La variada variedad de etiquetas de HTML no cubre la amplia gama de contenido que probablemente agregará a una página. Claro, <código>es excelente para marcar el código de un programa de computadora, pero la mayoría de la gente encontraría un <receta>etiqueta a mano. Menos mal que no hay uno. Afortunadamente, HTML proporciona dos etiquetas genéricas que le permiten identificar mejor el contenido y, en el proceso, proporciona "identificadores" que le permiten adjuntar estilos CSS a diferentes elementos de una página. Capítulo 1:HTML para CSS www.it-ebooks.info 21 escritura html para CSS Hasta la velocidad HTML simple es compatible con los motores de búsqueda Una vez que dé el salto mental de imaginar HTML como la forma de estructurar para el diseño, el motor de búsqueda puede perder contenido importante en la el contenido de un documento, y CSS como la herramienta para hacer que ese página o incluso no clasificarlo en absoluto. contenido se vea bien, descubrirá beneficios adicionales para escribir HTML simple y eficiente. Por un lado, puede aumentar su clasificación en los motores de búsqueda según lo determinado por sitios como Google, Yahoo y Bing. Eso es porque cuando los motores de búsqueda rastrean la Web, indexando el contenido de los sitios web, deben pasar por todoel HTML en una página para descubrir el contenido real. La antigua forma HTML de usar etiquetas especiales (como <fuente>)y muchas tablas para diseñar una página interfieren con el trabajo de un motor de búsqueda. De hecho, algunos motores de búsqueda dejan de leer el HTML de una página después de una cierta cantidad Por el contrario, HTML simple y estructurado es fácil de leer e indexar para un motor de búsqueda. Usando un <h1>etiqueta para indicar el tema más importante de la página (en lugar de solo hacer que el texto sea grande y en negrita) es una estrategia inteligente: los motores de búsqueda dan mayor peso al contenido dentro de esa etiqueta al indexar la página. Para ver las sugerencias de Google para crear sitios web aptos para búsquedas, visitehttp://support.google.com/webmasters/ bin/answer.py?hl=en&answer=35769. de caracteres. Cuando usas mucho HTML solo ENTENDIENDO LAS ETIQUETAS <DIv> Y <SPAN> El <div>etiqueta y el <lapso>Las etiquetas son como recipientes vacíos que llenas de contenido. Un div es un bloque, lo que significa que tiene un salto de línea antes y después, mientras que un lapso aparece en línea, como parte de un párrafo. De lo contrario, los divs y spans no tienen propiedades visuales inherentes, por lo que puede usar CSS para que se vean de la forma que desee. El <div> (paradivisión) indica cualquier bloque discreto de contenido, como un párrafo o un título. Pero más a menudo se usa para agrupar cualquier número deotroelementos, por lo que puede insertar un título, un montón de párrafos y una lista con viñetas dentro de un solo <div>bloquear. El <div>La etiqueta es una excelente manera de subdividir una página en áreas lógicas, como un banner, un pie de página, una barra lateral, etc. Usando CSS, puede posicionar más tarde cada área para crear diseños de página sofisticados (un tema que se cubre en la Parte III de este libro). El <lapso>la etiqueta se usa paraen líneaelementos; es decir, palabras o frases que aparecen dentro de un párrafo o encabezado más grande. Trátelo como otras etiquetas HTML en línea, como <un> etiqueta (para agregar un enlace a algún texto en un párrafo) o el <fuerte> etiqueta (para enfatizar una palabra en un párrafo). Por ejemplo, podría usar un <lapso> etiqueta para indicar el nombre de una empresa y, a continuación, utilice CSS para resaltar el nombre utilizando una fuente, color, etc. diferentes. Aquí hay un ejemplo de esas etiquetas en acción, completo con un adelanto de un par de atributos:identificaciónyclase-se utiliza con frecuencia para adjuntar estilos a partes de una página. <div id="pie de página"> <p>Derechos de autor 2006,<abarcan clase="nombre del negocio">cosmofarmer.com</span></p> <p>Llame al servicio de atención al cliente al 555-555-5501 para obtener más información</p> </div> 22 Css3: el manual perdido www.it-ebooks.info Esta breve introducción no es la última que verá de estas etiquetas. Se usan con frecuencia en páginas web con mucho CSS, y en este libro aprenderá a usarlos en combinación con CSS para escritura html para CSS obtener control creativo sobre sus páginas web. ETIQUETAS ADICIONALES EN HTML5 El <div>La etiqueta es bastante genérica: es simplemente un elemento a nivel de bloque que se usa para dividir una página en secciones. Uno de los objetivos de HTML5 es proporcionar otros, más semántico etiquetas para que los diseñadores web elijan. Hacer que su HTML sea más semántico simplemente significa usar etiquetas que describan con precisión el contenido que contienen. Como se mencionó anteriormente en esta sección, debe usar el <h1> (encabezado 1) etiqueta al colocar texto que describe el contenido principal de una página. Asimismo, el <código>La etiqueta le dice claramente qué tipo de información se coloca dentro: código de programación. HTML5 incluye muchas etiquetas diferentes cuyos nombres reflejan el tipo de contenido que contienen y se pueden usar en lugar de <div>etiqueta. El <artículo>La etiqueta, por ejemplo, se usa para marcar una sección de una página que contiene una composición completa e independiente... en otras palabras, un "artículo" como en una publicación de blog, un artículo de una revista en línea o simplemente el texto principal de la página. . Asimismo, el <encabezado>etiqueta indica un encabezado o banner, la parte superior de una página que generalmente contiene un logotipo, navegación en todo el sitio, título de página y eslogan, etc. NotaPara obtener más información sobre las nuevas etiquetas HTML, visite HTML5 Doctor (http://html5doctor.com) y www.w3schools.com/html5/html5_intro.asp. Muchas de las nuevas etiquetas HTML5 están destinadas a expandir el genérico <div>Aquí hay algunas otras etiquetas HTML5 que se usan con frecuencia para estructurar el contenido de una página: • El<sección>La etiqueta contiene una agrupación de contenido relacionado, como el capítulo de un libro. Por ejemplo, puede dividir el contenido de una página de inicio en tres secciones: una para la introducción al sitio, otra para la información de contacto y otra para las últimas noticias. • El<aparte>La etiqueta contiene contenido que está relacionado con el contenido que lo rodea. Una barra lateral en una revista impresa, por ejemplo. • El<pie de página>La etiqueta contiene información que normalmente colocaría en el pie de página de una página, como un aviso de derechos de autor, información legal, algunos enlaces de navegación del sitio, etc. Sin embargo, no está limitado a un solo <pie de página>por página; puedes poner un pie de página dentro de un <artículo>,por ejemplo, para contener información relacionada con ese artículo, como notas al pie, referencias o citas. • El<navegación>El elemento se utiliza para contener enlaces de navegación principales. • El<figura>la etiqueta se utiliza para una figura ilustrativa. Puede colocar un <imagen> dentro de ella, así como otra nueva etiqueta HTML5: la <figcaption>etiqueta, que se utiliza para mostrar una leyenda que explica la foto o la ilustración dentro del <figura>. Capítulo 1:HTML para CSS www.it-ebooks.info 23 escritura html para CSS CONSEJOComprender qué etiqueta HTML5 usar: si su texto debe ser un <artículo>o un <sección>?—puede ser complicado. Para obtener un diagrama de flujo útil que tenga sentido para los nuevos elementos de seccionamiento de HTML5, descargue el PDF de HTML5doctor.com enhttp://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf. Hay otros elementos de HTML5, y muchos de ellos simplemente proporcionan una alternativa más descriptiva a <div>etiqueta. Este libro utiliza tanto el <div>y las nuevas etiquetas HTML5 para ayudar a organizar el contenido de la página web. La desventaja de HTML5 es que Internet Explorer 8 y versiones anteriores no reconocen las nuevas etiquetas sin un poco de ayuda (consulte el cuadro a continuación). Además, además de sentirse como si estuviera al día con las últimas tendencias de diseño web, realmente no hay ningún beneficio tangible en el uso de algunas de estas etiquetas HTML5. Por ejemplo, simplemente usando el <artículo>etiqueta para contener la historia principal en una página web, no hace que Google le quiera más. Puede seguir utilizando cómodamente el <div>y evite los elementos de seccionamiento de HTML5 si lo desea. TALLER DE TRABAJO Conseguir que IE 8 entienda HTML5 HTML5 proporciona muchas etiquetas HTML nuevas para jugar. Desde <secuencia de comandos src="//html5shiv.googlecode.com/svn/ etiquetas que describen claramente el tipo de contenido que tienen, trunk/html5.js"></secuencia de comandos> como el <navegación>etiqueta, a las que proporcionan funcionalidad <![finalizar]--> adicional, como la <vídeo>etiqueta para incrustar videos y el <sonido> etiqueta para incrustar sonido y música. A medida que aprenda más sobre HTML5, probablemente comenzará a aplicar estas nuevas etiquetas a sus páginas web. Este complicado código usa lo que se llama un "comentario condicional de Internet Explorer" (IECC para abreviar) para incrustar un poco de código JavaScript que solo es visible para las versiones de Internet Explorer anteriores a IE 9. En otras palabras, solo IE 6, 7 y 8 responden a este código, y todos los demás Desafortunadamente, Internet Explorer 8 y versiones anteriores no navegadores (incluidas las versiones más nuevas de IE) simplemente lo reconocen estas nuevas etiquetas y no responderán a ningún CSS que ignoran. Este código hace que las versiones anteriores de IE carguen un les apliques. Así es, si usa HTML5 y ve páginas web en IE 8, este libro no pequeño programa de JavaScript que obliga al navegador a reconocer las le servirá de nada. Bueno no exactamente. Hay una manera de poner en etiquetas HTML5 y aplicar el CSS que se aplica a esas etiquetas. marcha esas versiones antiguas de IE, para que entiendan todo el CSS que se aplica a las etiquetas HTML5. Este código solo afecta la forma en que el navegador muestra e imprime etiquetas HTML5; no hace que el navegador “entienda” una Simplemente coloque el siguiente código antes de la etiqueta de cierre </head> en la etiqueta HTML5 que realmente hace algo. Por ejemplo, IE 8 y anteriores parte superior de su archivo HTML: no entienden el <vídeo>etiqueta y no puede reproducir video HTML5 (incluso con el código JavaScript agregado).  NotaPuede colocar el <estilo>etiqueta y sus estilos después de <título>etiqueta en el encabezado de la página, pero los diseñadores web generalmente los colocan justo antes del cierre </cabeza>etiqueta como se muestra aquí. Si también usa JavaScript en sus páginas, agregue el código JavaScriptdespuésla hoja de estilo. Muchos programas de JavaScript se basan en CSS, por lo que al agregar su CSS primero, puede asegurarse de que el programa de JavaScript tenga toda la información que necesita para realizar su trabajo. La etiqueta <style> es HTML, no CSS. Pero su trabajo es decirle al navegador web que la información contenida en las etiquetas es código CSS y no HTML. Crear una hoja de estilo interna es tan simple como escribir uno o más estilos entre los <estilo>etiquetas NotaHTML5 simplemente requiere <estilo> para la etiqueta de apertura de una hoja de estilo interna. Las versiones anteriores de HTML y XHTML requieren un atributo adicional en la etiqueta de apertura <style>: <tipo de estilo="texto/css"> Si deja ese atributo fuera de una página que no es HTML5, recibirá un error si intenta validar la página web. Otra razón más para usar HTML5. Las hojas de estilo internas son fáciles de agregar a una página web y brindan un impulso visual inmediato a su HTML. Pero no son el método más eficiente para diseñar un sitio web completo compuesto por muchas páginas web. Por un lado, debe copiar y pegar la hoja de estilo interna en cada página de su sitio, una tarea que requiere mucho tiempo y agrega código que acapara el ancho de banda en cada página. Pero las hojas de estilo internas son aún más complicadas cuando desea actualizar el aspecto de un sitio. Por ejemplo, supongamos que desea cambiar el <h1>etiqueta, que originalmente decidió que debería aparecer en letra grande, verde y en negrita. Pero ahora quieres pequeño, 40 Css3: el manual perdido www.it-ebooks.info tipo azul en el tipo de letra Courier. Usando hojas de estilo internas, necesitaría editar cada página. ¿Quién tiene esa clase de tiempo? Afortunadamente, hay una solución simple para Externo HOJAS DE ESTILO este dilema: hojas de estilo externas. NotaTambién es posible (aunque rara vez recomendable) agregar información de estilo a una etiqueta HTML individual sin usar una hoja de estilo. El tutorial en la página 44 le muestra cómo realizar esa maniobra utilizando unen línea estilo. Hojas de estilo externas Una hoja de estilo externa no es más que un archivo de texto que contiene todas sus reglas CSS. Nunca contiene ningún código HTML, así que no incluya el <estilo>etiqueta. Además, siempre termine el nombre del archivo con la extensión .css. Puede nombrar el archivo como desee, pero vale la pena ser descriptivo. Usarglobal.css,sitio.css, o simplemente,estilos.css, por ejemplo, para indicar una hoja de estilo utilizada por cada página del sitio, o utilizarformulario.css para nombrar un archivo que contiene estilos utilizados para hacer que un formulario web se vea bien. Hasta la velocidad Valida tu CSS Así como debe asegurarse de haber escrito correctamente el HTML en sus Es fácil cometer un error tipográfico al escribir CSS, y un pequeño error páginas web utilizando el validador W3C HTML (consulte el cuadro en la página puede arruinar todos sus diseños cuidadosamente planificados. Cuando 27), también debe verificar su código CSS para asegurarse de que sea kosher. El su página web infundida con CSS no se ve como esperaba, la causa W3C también proporciona una herramienta en línea para la verificación de CSS: puede ser un simple error de CSS. El validador W3C CSS es una buena http://rompecabezas.w3.org/css-validator. Funciona igual que el validador de primera parada para solucionar problemas en sus diseños. HTML: puede escribir la URL de una página web (o incluso solo la dirección de un archivo CSS externo), cargar un archivo CSS o copiar y pegar el código CSS en un formulario web y enviarlo para su validación. . CONSEJOSi tiene una página con una hoja de estilo interna pero quiere usar una hoja de estilo externa, simplemente corte todo el código entre <estilo>etiquetas (sin las propias etiquetas). Luego cree un nuevo archivo de texto y pegue el CSS en el archivo. Guarde el archivo con una extensión .css:estilos.css, por ejemplo, y vincúlelo a su página, utilizando una de las técnicas descritas a continuación. Una vez que crea una hoja de estilo externa, debe conectarla a la página web que desea formatear. Puede adjuntar una hoja de estilo a una página web usando HTML <enlace> etiqueta o la propia @ de CSSimportardirectiva: un comando que básicamente hace lo mismo que la etiqueta de enlace. Todos los navegadores web actuales tratan estas dos técnicas de la misma manera y ambos le permiten adjuntar hojas de estilo a una página web, por lo que elegir una es principalmente una cuestión de preferencia. Capitulo 2:CREACIÓN DE ESTILOS Y HOJAS DE ESTILO www.it-ebooks.info 41 Externo HOJAS DE ESTILO NotaEl @importardirectiva puede hacer una cosa el <enlace>la etiqueta no puede: adjuntar hojas de estilo externas a una hoja de estilo externa. Esta técnica avanzada se analiza al final de esta página. Vinculación de una hoja de estilo mediante HTML El método más común para agregar una hoja de estilo externa a una página web es usar el HTML <enlace>etiqueta. La etiqueta se escribe de forma ligeramente diferente dependiendo de si usa HTML5, HTML 4.01 o xHTML. Por ejemplo, aquí está HTML5: <enlace rel="hoja de estilo" href="css/estilos.css"> HTML 4.01 es similar, pero requiere un adicionaltipoatributo: <enlace rel="hoja de estilo" type="text/css" href="css/styles.css"> Finalmente, xHTML es como HTML 4.01, pero requiere una barra inclinada de cierre al final de la etiqueta: <enlace rel="hoja de estilo" type="texto/css" href="css/estilos.css" /> Debido a que HTML5 requiere menos código, le recomendamos que use HTML5. Todos los doctypes requieren dos atributos: • rel="hoja de estilo"indica el tipo de enlace, en este caso, un enlace a una hoja de estilo. • hrefapunta a la ubicación del archivo CSS externo en el sitio. El valor de esta propiedad es una URL y variará dependiendo de dónde guarde su archivo CSS. Funciona igual que elorigenatributo que utiliza al agregar una imagen a una página o elhrefatributo de un enlace que apunta a otra página. CONSEJOPuede adjuntar varias hojas de estilo a una página web agregando varios <enlace>etiquetas, cada una apuntando a un archivo de hoja de estilo diferente. Esta técnica es una excelente manera de organizar sus estilos CSS, como puede ver en el Capítulo 15. Vincular una hoja de estilo mediante CSS CSS incluye una forma integrada de agregar hojas de estilo externas: la @importardirectiva. Agrega la directiva dentro de un HTML <estilo>etiqueta, así: <estilo> @importar url(css/estilos.css); </ estilo> NotaSi está utilizando un tipo de documento HTML 4.01 o XHTML, debe agregartipo="texto/css"a la apertura <estilo> etiqueta. Consulte la nota en la página 40. A diferencia de HTML <enlace>etiqueta, @importares parte del lenguaje CSS y tiene algunas cualidades definidas que no son similares a HTML: 42 Css3: el manual perdido www.it-ebooks.info • Para realizar la conexión con el archivo CSS externo, utiliceURLen lugar dehref y encierre la ruta entre paréntesis. Así que en este ejemplo,css/estilos.csses la ruta al archivo CSS externo. Las comillas alrededor de la URL son opcionales, por lo que url(css/estilos.css)yurl("css/estilos.css")ambos trabajan. Tutorial: CREANDO tu primero ESTILOS • Al igual que con el <enlace>etiqueta, puede incluir varias hojas de estilo externas utilizando más de una @importar: <tipo de estilo="texto/css"> @importar url(css/estilos.css); @importar URL (css/formulario.css); </estilo> • Puede agregar estilos CSS normales después de @importardirectivas si desea crear una regla que se aplique solo a esa página, pero aún use las reglas de diseño global del sitio para formatear el resto de la página. NotaAprenderá cómo interactúan las reglas y cómo puede crear una regla que invalide otras reglas en la página 113. Incluso puede crear un archivo CSS externo que contenga solo @importardirectivas que vinculan aotrohojas de estilo externas, una técnica que se utiliza a menudo para ayudar a organizar sus estilos (consulte la página 547). Aquí hay un ejemplo: <estilo> @importar url(css/estilos.css); @importar URL (css/formulario.css); pag {color: rojo; } </estilo> Debes colocar todos los @importarlíneasantescualquier regla CSS, como se muestra aquí. Los navegadores web ignoran cualquier hoja de estilo que importe después de una regla CSS, por lo que si invirtió el orden del código anterior y tuvo elpagel estilo aparece primero, luego el navegador ignora cualquier estilo enestilo.css oformulario.csshojas de estilo ¿Cuál usar? Aunque ambos métodos funcionan, el <enlace>la etiqueta es más común. En algunos casos, usando el @importarpuede ralentizar la velocidad de descarga de sus hojas de estilo (visite www.stevesouders.com/blog/2009/04/09/dont-use-importpara averiguar cuándo puede suceder esto y por qué). Entonces, si no tiene una fuerte preferencia por ninguno, simplemente use el <enlace> método. Tutorial: Creación de sus primeros estilos El resto de este capítulo lo lleva a través de los pasos básicos para agregar estilos en línea, escribir reglas CSS y crear hojas de estilo internas y externas. A medida que avance en este libro, trabajará en varios diseños CSS, desde elementos de diseño simples hasta diseños completos de páginas web habilitados para CSS. Para comenzar, descargue los archivos del tutorial Capitulo 2:CREACIÓN DE ESTILOS Y HOJAS DE ESTILO www.it-ebooks.info 43 Tutorial: CREANDO tu primero ESTILOS ubicado en el sitio web complementario del libro enwww.sawmac.com/css3. Haga clic en el enlace del tutorial y descargue el archivo zip que contiene los archivos (las instrucciones detalladas para descomprimir los archivos también se encuentran en el sitio web). Los archivos de cada capítulo están en una carpeta separada, llamada02(para el Capítulo 2),03(para el Capítulo 3), y así sucesivamente. A continuación, inicie su software de edición de páginas web favorito, ya sea un editor de texto simple, como Notepad o TextEdit, o un programa de orientación visual, como Dreamweaver o Microsoft Expression Web (para obtener información sobre cómo seleccionar un editor, consulte la página 7). Crear un estilo en línea Cuando escribe una regla CSS directamente en el HTML de una página, está creando unaen líneaestilo. Los estilos en línea no ofrecen ninguno de los beneficios de ahorro de tiempo y ancho de banda de las hojas de estilo, por lo que los profesionales casi nunca los usan. Aún así, en un apuro, si es absolutamente necesario cambiar el estilo en un solo elemento en una sola página, entonces es posible que desee recurrir a un estilo en línea. (Por ejemplo, al crear mensajes de correo electrónico con formato HTML, es mejor usar estilos en línea. Esa es la única forma de hacer que CSS funcione en Gmail, por ejemplo). Y si lo hace, al menos desea que el estilo funcione correctamente. Lo importante es colocar cuidadosamente el estilo dentro de la etiqueta que desea formatear. Aquí hay un ejemplo que le muestra exactamente cómo hacerlo: 1.En su programa de edición de páginas web, abra el archivo02-básico.html. Este archivo HTML5 simple pero elegante contiene un par de encabezados diferentes, algunos párrafos y un aviso de derechos de autor dentro de un <dirección>etiqueta. Comenzará creando un estilo en línea para <h1>etiqueta. 2.Haga clic dentro de la apertura <h1>etiquetar y escribirestilo="color: #666666;". La etiqueta debería verse así: <h1 estilo="color: #666666;"> El atributo de estilo es HTML, no CSS, por lo que debe usar el signo igual después y encerrar todo el código CSS entre comillas. Solo lo que está dentro de las comillas es CSS. En este caso, agregó una propiedad llamada color, que afecta el color del texto, y configuró esa propiedad en #666666 (un código hexadecimal para definir un color que es gris). Aprenderá más sobre cómo colorear el texto en la página 154. Los dos puntos separan el nombre de la propiedad del valor de la propiedad que desea. A continuación, comprobará los resultados en un navegador web. 3.abre elbásico.htmlpágina en un navegador web. Por ejemplo, inicie su navegador web favorito y seleccione Archivo→Abrir archivo (o presione Ctrl+O [C-O] y seleccione elbásico.htmlarchivo en el02 tutorialcarpeta de su computadora; o simplemente arrastre el archivo desde el escritorio, o dondequiera que haya 44 Css3: el manual perdido www.it-ebooks.info guardó los archivos del tutorial en una ventana abierta del navegador). Muchos editores de HTML también incluyen una función de "Vista previa en el navegador", que, con un simple atajo de teclado o Tutorial: CREANDO tu primero ESTILOS una opción de menú, abre la página en un navegador web. Vale la pena consultar el manual de su programa para ver si incluye esta función de ahorro de tiempo. Cuando ve la página en un navegador, el título ahora es gris. Los estilos en línea pueden incluir más de una propiedad CSS. A continuación, agregará otra propiedad. 4.Regrese a su editor de HTML, haga clic después del punto y coma que sigue a #666666, y tipo tamaño de fuente: 3em;. El punto y coma separa dos configuraciones de propiedad diferentes. El <h1>la etiqueta debería verse así: <h1 style="color: #666666; tamaño de fuente: 3em;"> 5.Obtenga una vista previa de la página en un navegador web.Por ejemplo, haga clic en el botón Recargar de la ventana de su navegador (pero asegúrese de haber guardado el archivo HTML primero). El titular es ahora de tamaño masivo. Y ha probado lo laboriosos que son los estilos en línea. Haciendo todos los <h1>los encabezados en una página se ven como este podría tomar días de escribir y agregar acres de código HTML. 6.Regrese al editor de su página y elimine toda la propiedad de estilo, lo que devuelve la etiqueta de encabezado a su estado normal <h1>. A continuación, creará una hoja de estilo dentro de una página web. (Encontrará una versión terminada de esta parte del tutorial en el02_terminadocarpeta en un archivo llamadoen línea.html.) Creación de una hoja de estilo interna Un mejor enfoque que los estilos en línea es usar una hoja de estilo que contenga varias reglas CSS para controlar varios elementos de una página. En esta sección, creará un estilo que afectará a todos los encabezados de nivel superior de una sola vez. Esta regla única formatea automáticamente cada <h1>etiqueta en la página. 1.con el archivobásico.htmlabra en su editor de texto, haga clic directamente después del cierre </título>etiqueta.Luego presione Enter (Return) y escriba <estilo>. El HTML ahora debería tener el siguiente aspecto (lo que ha agregado está en negrita): <title>CSS: El Manual Perdido -- Capítulo 2</title> <estilo> </cabeza> La apertura <estilo>etiqueta marca el comienzo de la hoja de estilo. Siempre es una buena idea cerrar una etiqueta justo después de escribir la etiqueta de apertura, ya que es muy fácil olvidar este paso una vez que empiezas a escribir tu CSS. En este caso, cerrará el <estilo>etiqueta antes de agregar cualquier CSS. 2.Presiona Enter dos veces y escribe </estilo>. Ahora, agregará un selector de CSS que marca el comienzo de su primer estilo. Capitulo 2:CREACIÓN DE ESTILOS Y HOJAS DE ESTILO www.it-ebooks.info 45 Tutorial: CREANDO tu primero ESTILOS 3.Haga clic entre la apertura y el cierre <estilo>etiquetas y tipoh1 {. Elh1indica la etiqueta a la que el navegador web debe aplicar el próximo estilo. La extraña cosa del soporte después de lah1se denomina llave de apertura y marca el comienzo de las propiedades CSS para este estilo. En otras palabras, dice: "Las cosas divertidas vienen justo después de mí". Al igual que con las etiquetas de cierre, es una buena idea escribir la llave de cierre de un estilo antes de agregar cualquier propiedad de estilo. 4.Presione Entrar dos veces y escriba una sola llave de cierre:}. Como socio de la llave de apertura que escribió en el último paso, el trabajo de esta llave es decirle al navegador web: "Esta regla CSS en particular termina aquí". Ahora es el momento de las cosas divertidas. 5.Haga clic en la línea vacía entre las dos llaves.Presiona la tecla Tab y escribe color:#666666;. Ha escrito la misma propiedad de estilo que la versión en línea:color-y configúrelo en # 666666.El último punto y coma marca el final de la declaración de propiedad. NotaTécnicamente, no tienes que poner la propiedad de estilo en su propia línea, pero es una buena idea. Con una propiedad por línea, es mucho más fácil escanear rápidamente una hoja de estilo y ver todas las propiedades de cada estilo. Además, la pestaña es otra técnica útil de organización visual (también puede insertar algunos espacios en su lugar). La sangría facilita discernir todas las reglas de un vistazo, ya que los selectores (comoh1aquí) se alinean a lo largo del borde izquierdo, con las propiedades un poco separadas. 6.Presiona Enter nuevamente y agrega tres propiedades adicionales, así: tamaño de fuente: 3em; margen: 0; Asegúrese de no omitir el punto y coma al final de cada línea, de lo contrario, el CSS no se mostrará correctamente en un navegador. Cada una de estas propiedades añade un efecto visual diferente al título. Los dos primeros asignan un tamaño y fuente al texto, mientras que el tercero elimina el espacio alrededor del título. La Parte 2 de este libro cubre todas estas propiedades en detalle. Felicitaciones, acaba de crear una hoja de estilo interna. El código que ha agregado debe verse como el texto en negrita: <title>CSS: El Manual Perdido -- Capítulo 2</title> <estilo> h1 { color: #666666; tamaño de fuente: 3em; margen: 0; 46 Css3: el manual perdido www.it-ebooks.info Tutorial: CREANDO tu primero ESTILOS } </estilo> </cabeza> 7.Guarde la página y obtenga una vista previa en un navegador web. Puede obtener una vista previa de la página abriéndola en un navegador web como se describe en el Paso 3 en la página 44 o, si la página aún está abierta en una ventana del navegador, simplemente haga clic en el botón Recargar. A continuación, agregará otro estilo. NotaRecuerde siempre agregar el cierre </estilo>etiqueta al final de una hoja de estilo interna. Cuando no lo hace, un navegador web muestra el código de estilo CSS seguido de una página web completamente sin formato, o ninguna página web en absoluto. 8.De vuelta en su programa de edición de texto, haga clic después de la llave de cierre delh1 estilo que acaba de crear, presione Entrar y luego agregue la siguiente regla: pag { color: #616161; altura de línea: 150%; margen superior: 10px; margen izquierdo: 80px; } Esta regla da formato a cada párrafo de la página. No se preocupe demasiado en este momento acerca de lo que está haciendo cada una de estas propiedades CSS. Los capítulos posteriores cubren estas propiedades en profundidad. Por ahora, simplemente practique escribir el código correctamente y tenga una idea de cómo agregar CSS a una página. 9.Obtenga una vista previa de la página en un navegador. La página está empezando a tomar forma y debería parecerse a la Figura 2-3. Puede ver en qué dirección estilística se dirige la página. Puede ver una versión completa de este tutorial abriendo elinterno.htmlarchivo en el02_terminadocarpeta. El proceso con el que acaba de trabajar es CSS en pocas palabras: comience con una página HTML, agregue una hoja de estilo y cree reglas CSS para que la página se vea genial. En la siguiente parte de este tutorial, verá cómo trabajar de manera más eficiente con hojas de estilo externas. Capitulo 2:CREACIÓN DE ESTILOS Y HOJAS DE ESTILO www.it-ebooks.info 47 Tutorial: CREANDO tu primero ESTILOS Figura 2-3 CSS formatea fácilmente el texto de manera creativa, lo que le permite cambiar las fuentes, los colores del texto, los tamaños de fuente y mucho más, como verá en el Capítulo 6. Creación de una hoja de estilo externa Dado que agrupa todos sus estilos en la parte superior de la página, una hoja de estilo interna es mucho más fácil de crear y mantener que el estilo en línea que creó hace algunas páginas. Además, una hoja de estilo interna le permite formatear cualquier cantidad de instancias de una etiqueta en una página, como cada <p>etiqueta, escribiendo una regla simple. Pero una hoja de estilo externa es aún mejor: puede almacenar todos los estilos para unsitio web completo. La edición de un estilo en la hoja de estilo externa actualiza todo el sitio. En esta sección, tomará los estilos que creó en la sección anterior y los colocará en una hoja de estilo externa. 1.En su programa de edición de texto, cree un nuevo archivo y guárdelo comoestilos.cssen la misma carpeta que la página web en la que has estado trabajando. Los archivos de hojas de estilo externas terminan con la extensión .css. el nombre del archivo estilos.css indica que los estilos contenidos en el archivo se aplican en todo el sitio. (Pero puede usar cualquier nombre de archivo que desee, siempre que termine con la extensión .css). Comience agregando un nuevo estilo a la hoja de estilo. 48 Css3: el manual perdido www.it-ebooks.info 2.Escriba la siguiente regla en elestilos.cssarchivo: html { Tutorial: CREANDO tu primero ESTILOS acolchado superior: 25px; imagen de fondo: url(images/bg_page.png); } Esta regla se aplica a la etiqueta HTML, la etiqueta que rodea a todas las demás etiquetas HTML en una página. Elacolchado superiorLa propiedad agrega espacio entre la parte superior de la etiqueta y el contenido que se encuentra dentro de ella. En otras palabras, lo que acaba de escribir agregará 25 píxeles de espacio entre la parte superior de la ventana del navegador y el contenido dentro de la página. Elimagen de fondoagrega una imagen de fondo a la página, el CSSimagen de fondoLa propiedad puede mostrar el gráfico de muchas maneras diferentes; en este caso, el gráfico se dividirá sin problemas de izquierda a derecha y de arriba a abajo, cubriendo toda la ventana del navegador. Puede leer más sobre las propiedades de la imagen de fondo en la página 240. 3.Agregue una segunda regla después de la regla que acaba de escribir en elestilos.cssarchivo: cuerpo { ancho: 80%; relleno: 20px; margen: 0 automático; sombra de caja: 10px 10px 10px rgba(0,0,0,.5); color de fondo: #E1EDEB; } Esta regla se aplica a la etiqueta del cuerpo, la etiqueta que contiene todo el contenido visible en una ventana del navegador web. Están sucediendo muchas cosas diferentes en este estilo, y cada una de estas propiedades se trata en profundidad más adelante en el libro. Pero en pocas palabras, este estilo crea un cuadro para el contenido de la página que tiene un 80 por ciento del ancho de la ventana del navegador, tiene un poco de espacio dentro que mueve el texto desde el borde del cuadro (esa es larellenopropiedad) y centra el cuadro en la página (esa es la margenpropiedad, y el truco particular de centrar el contenido de una página se analiza en el tutorial que comienza en la página 89). Finalmente, el cuadro adquiere un color de fondo azul claro y una sombra negra transparente. En lugar de recrear el trabajo que hizo anteriormente, simplemente copie los estilos que creó en la sección anterior y péguelos en esta hoja de estilo. 4.abre elbásico.htmlpágina en la que has estado trabajando y copia todo el texto adentroel <estilo>etiquetas(No copiar el <estilo>se etiquetan ellos mismos). Copie la información de estilo de la misma manera que copiaría cualquier texto. Por ejemplo, elija Editar→Copie o presione Ctrl+C (C-C). 5.En elestilos.cssarchivo, pegue la información de estilo seleccionando Editar→Pegar o presionando Ctrl+v (C-v). Una hoja de estilo externa nunca contiene HTML, por eso no copió el < estilo>etiquetas Capitulo 2:CREACIÓN DE ESTILOS Y HOJAS DE ESTILO www.it-ebooks.info 49 Tutorial: CREANDO tu primero ESTILOS 6.Ahorrarestilos.css. Ahora solo necesita limpiar su archivo anterior y vincularle la nueva hoja de estilo. 7.Volver a labásico.htmlarchivo en su editor de texto y elimine el <estilo>etiquetas y todas las reglas CSS que escribiste anteriormente. Ya no necesita estos estilos, ya que están en la hoja de estilo externa que está a punto de adjuntar. En este tutorial, se sumergirá en el apasionante mundo de las fuentes web. Aprenderá todo sobre las fuentes web a partir de la página 132, pero la idea básica es que puede usar casi cualquier fuente que desee en una página web, incluso una fuente que los visitantes de su sitio no hayan instalado en sus propias computadoras, simplemente proporcionando un enlace a ese archivo de fuente. Hay muchas formas diferentes de usar las fuentes web, pero en este ejemplo, usará el servicio de fuentes web de Google. 8.En el espacio donde solían estar los estilos (entre el cierre </título>etiqueta y el cierre </cabeza>etiqueta), escriba lo siguiente: <enlace href="http://fonts.googleapis.com/css?family=Gravitas+One" rel="hoja de estilo"> Una vez más, no se preocupe por los detalles todavía. Todo lo que necesita saber por ahora es que cuando un navegador web encuentra este enlace, descarga una fuente llamada Gravitas One de un servidor de Google, que sus estilos CSS pueden usar libremente para crear texto de apariencia distintiva. A continuación, creará un vínculo a la hoja de estilo externa que creó anteriormente. 9.Después del <enlace>etiqueta que agregó en el paso anterior, escriba: <enlace href="estilos.css" rel="hoja de estilos"> La etiqueta <link> es una forma de adjuntar una hoja de estilo a una página; otra opción es la directiva CSS @import, como se explica en la página 42. La etiqueta de enlace especifica la ubicación de la hoja de estilo externa. ElrealEl atributo simplemente le permite al navegador saber que se está vinculando a una hoja de estilo. NotaEn este ejemplo, el archivo de la hoja de estilos está en la misma carpeta que la página web, por lo que usar el nombre del archivo para elhrefEl valor proporciona una ruta simple "relativa al documento". Si estuviera en una carpeta diferente a la de la página, la ruta sería un poco más complicada. En cualquier caso, usaría undocumento-orelativo a la raízruta para indicar dónde está el archivo. La rutina es la misma que cuando crea un enlace a una página web o establece una ruta a un archivo de imagen cuando usa HTML <imagen>etiqueta. (Para obtener una breve introducción a los vínculos relativos a documentos y raíces, visite www.communitymx.com/content/article.cfm?cid=230AD.) 10Guarde el archivo y obtenga una vista previa en un navegador web. Verá los mismos estilos de texto para las etiquetas <h1> y <p> que creó en la hoja de estilo interna en la página 45. Además, ahora hay un fondo bronceado moteado (la imagen de fondo que aplicó en el <html>etiqueta), así como un cuadro azul. Esa caja es el <cuerpo>y su ancho es el 80 por ciento del de la ventana del navegador. Intente cambiar el tamaño de la ventana del navegador y observe que el cuadro cambia de ancho 50 Css3: el manual perdido www.it-ebooks.info también. También hay una sombra paralela en la caja; puede ver a través de la sombra paralela el fondo moteado. Eso es gracias a un tipo de color CSS3:rgb color —que incluye una configuración de transparencia (lo leerá en la página 155). Tutorial: CREANDO tu primero ESTILOS NotaSi la página web no tiene ningún formato (por ejemplo, el título superior no es grande, en negrita y de color marrón polvoriento), probablemente haya escrito mal el código del paso 6 o haya guardado elestilos.cssarchivo en una carpeta diferente a aquella donde se encuentra elbásico.htmlel archivo es. En este caso, simplemente mueva elestilos.cssen la misma carpeta. Ahora, usará la fuente web a la que se vinculó en el Paso 8. 11En su editor de texto, regrese a laestilos.cssarchivo.Para elh1estilo, agregue las siguientes dos líneas: familia tipográfica: 'Gravitas One', 'Arial Black', serif; peso de fuente: normal; El estilo terminado debería verse así (adiciones en negrita): h1 { familia tipográfica: 'Gravitas One', 'Arial Black', serif; peso de fuente: normal; color: #666666; tamaño de fuente: 3em; margen: 0; } Si obtiene una vista previa de la página ahora, verá la nueva fuente "Gravitas One" para el título. NotaSi no ve la nueva fuente, tiene un aspecto grueso con líneas finas (serif) en los extremos de las letras, entonces una de las dos cosas podría estar mal. Si no está conectado a Internet, no podrá descargar la fuente de Google; en segundo lugar, es posible que haya escrito mal el <enlace>(consulte el paso 8 en la página anterior) o la declaración de familia de fuentes (línea 2 anterior). Para demostrar lo útil que puede ser mantener sus estilos en su propio archivo externo, adjuntará la hoja de estilo a otra página web. 12abre el archivo02-otra_pagina.html. Esta página contiene algunas de las mismas etiquetas HTML:h1, h2, p,y así sucesivamente, como la otra página web en la que ha estado trabajando. 13Haga clic después del cierre </título>etiqueta y presione Entrar (Retorno). Ahora vinculará tanto la fuente web como la hoja de estilo externa. Capitulo 2:CREACIÓN DE ESTILOS Y HOJAS DE ESTILO www.it-ebooks.info 51 Tutorial: CREANDO tu primero ESTILOS 14Escriba lo mismo <enlace>etiquetas que hizo en los pasos 8 y 9. El código de la página web debería verse así (el código que acaba de escribir aparece en negrita): <title>Otra página</title> <enlace href="http://fonts.googleapis.com/css?family=Gravitas+One" rel="hoja de estilo"> <enlace href="estilos.css" rel="hoja de estilos"> </ cabeza> 15.Guarde la página y obtenga una vista previa en un navegador web. Ta-da! Solo dos líneas de código agregadas a la página web son suficientes para transformar instantáneamente su apariencia. Para demostrar lo fácil que es actualizar una hoja de estilo externa, lo hará editando un estilo y agregando otro. dieciséis.abre elestilos.cssarchivo y agregue la declaración CSSfamilia tipográfica: "Palatino Linotype", Baskerville, serif;al principio del estilo p. El código debería verse así (el texto en negrita es lo que acaba de agregar): pag { familia tipográfica: "Palatino Linotype", Baskerville, serif; color: #616161; altura de línea: 150%; margen superior: 10px; margen izquierdo: 80px; } En este caso, no está utilizando una fuente web, sino que confía en que el visitante del sitio ya tiene una de las fuentes enumeradas en su máquina (aprenderá todo sobre el uso de fuentes en la página 127). A continuación, cree una nueva regla para elh2etiqueta. 17Haga clic al final de lapagestilo de cierre}, presione Entrar y agregue la siguiente regla: h2 { color: #B1967C; familia tipográfica: 'Gravitas One', 'Arial Black', serif; peso de fuente: normal; tamaño de fuente: 2,2 em; borde inferior: 2px blanco sólido; fondo: url(images/head-icon.png) sin repetición 10px 10px; relleno: 0 0 2px 60px; margen: 0; } Algunas de estas propiedades CSS que ya has encontrado. Algunos son nuevos, como elborde inferiorpropiedad para agregar una línea debajo del título. Y algunos, como elfondopropiedad: proporciona un atajo para combinar varios 52 Css3: el manual perdido www.it-ebooks.info diferentes propiedades, en este caso, laimagen de fondo,yrepetición de fondo—en una sola propiedad. No se preocupe por los detalles de estas propiedades, las aprenderá con Tutorial: CREANDO tu primero ESTILOS gran detalle en los próximos capítulos (el Capítulo 6 cubre las propiedades de la fuente; el Capítulo 8 cubre los fondos; el Capítulo 7 cubre el relleno y los márgenes). Los estilos que ha creado hasta ahora afectan principalmente a las etiquetas: elh1, h2,ypag-y afectan cada instancia de esas etiquetas. En otras palabras, el estilo p que creó da formato a cada párrafo de la página. Si desea apuntar solo a un párrafo, debe usar un tipo diferente de estilo. 18Haga clic al final de lah2estilo de cierre}, presione Entrar y agregue la siguiente regla: . introducción { color: #6A94CC; familia tipográfica: Arial, Helvetica, sans-serif; tamaño de fuente: 1,2 em; margen izquierdo: 0; margen inferior: 25px; } Si obtiene una vista previa de labásico.htmlpágina en un navegador web, verá que este nuevo estilo no tiene ningún efecto... todavía. Este tipo de estilo, llamadoseleccionador de clase, formatea solo las etiquetas específicas a las que aplica la clase. Para que este nuevo estilo funcione, debe editar algo de HTML. 19Guarda el archivoestilos.cssy cambiar a labásico.htmlarchivo en su editor de texto. Localiza la apertura <p>etiqueta que sigue al <h1>etiquetar y agregarclase = "introducción"por lo que la etiqueta de apertura se ve así: <p clase="introducción"> No tienes que agregar un punto antes de la palabraintroduccióncomo lo hizo cuando creó el estilo en el Paso 18 (aprenderá por qué en el próximo capítulo). Este pequeño HTML adicional aplica el estilo al primer párrafo (y solo a ese párrafo). Repita este paso para elotra_pagina.htmlarchivo, en otras palabras, agregarclase = "introducción"a la primera etiqueta <p> de esa página. 20Guarde todos los archivos y obtenga una vista previa de losbásico.htmlyotra_pagina.html archivos en un navegador web.La Figura 2-4 muestra elotra_pagina.htmlarchivo. Observe que la apariencia de ambas páginas cambia, según las ediciones simples que realizó en el archivo CSS. Cierra los ojos e imagina que tu sitio web tiene mil páginas. Aaaahhhhhhh, el poder. (Encontrará una versión completa de este tutorial en la02_terminadocarpeta.) Para mayor práctica, agregue un estilo para formatear el <dirección>etiqueta (esa etiqueta se usa en la parte inferior del archivo HTML para contener el aviso de derechos de autor). Por ejemplo, puede cambiar su color y aplicarle una sangría de 60 píxeles para que coincida con la sangría de las etiquetas <p>. Capitulo 2:CREACIÓN DE ESTILOS Y HOJAS DE ESTILO www.it-ebooks.info 53 Tutorial: CREANDO tu primero ESTILOS Figura 2-4 Con una hoja de estilo externa, puede actualizar las páginas web de un sitio completo editando un solo archivo CSS. Además, al mover todo el código CSS de un documento HTML a un archivo separado, reduce el tamaño de archivo de sus páginas web para que se carguen más rápido. 54 Css3: el manual perdido www.it-ebooks.info Capítulo 3 3 Selectores: Identificación Qué estilo mi Muy estilo CSS tiene dos partes básicas: un selector y un bloque de declaración. (Y si eso es nuevo para usted, regrese y lea el capítulo anterior). El bloque de declaración incluye las propiedades de formato (color del texto, tamaño de fuente, etc.), pero eso es solo lo bonito. La magia de CSS radica en esos primeros caracteres al comienzo de cada regla: el selector. Diciéndole a CSSquédesea que se formatee (vea la Figura 3-1), el selector le brinda control total sobre la apariencia de su página. Si le gustan las generalizaciones amplias, entonces puede usar un selector que se aplica a muchos elementos en una página a la vez. Pero si está un poco más orientado a los detalles (bueno, unlotemás), otros selectores le permiten destacar un artículo específico o una colección de artículos similares. Los selectores de CSS le dan mucho poder: este capítulo le muestra cómo usarlos. Figura 3-1 La primera parte de un estilo, el selector, indica el elemento o elementos de una página a formatear. En este caso,h1significa "cada encabezado 1, o <h1>, etiqueta en esta página". NotaSi prefiere obtener algo de experiencia práctica antes de estudiar los entresijos de los selectores de CSS, salte al tutorial en la siguiente sección en la página 81. 55 www.it-ebooks.info Etiqueta SELECCIONADORES: ANCHO DE LA PÁGINA ESTILO Selectores de etiquetas: estilo en toda la página Etiquetaselectores—a veces llamadostipooelementoselectores—son herramientas de estilo extremadamente eficientes, ya que se aplican a cada aparición de una etiqueta HTML en una página web. Con ellos, puede realizar cambios radicales en el diseño de una página con muy poco esfuerzo. Por ejemplo, cuando desea formatear cada párrafo de texto en una página, usando la misma fuente, color y tamaño, simplemente crea un estilo usandopag (como en el <p>etiqueta) como el selector. En esencia, un selector de etiquetas redefine cómo un navegador muestra una etiqueta en particular. Antes de CSS, para dar formato al texto, tenía que envolver ese texto en un <fuente>etiqueta. Para agregar el mismo aspecto a cada párrafo de una página, a menudo tenía que usar el <fuente> etiqueta varias veces. Este proceso fue mucho trabajo y requirió mucho HTML, lo que hizo que las páginas fueran más lentas para descargar y más lentas para actualizar. Con los selectores de etiquetas, en realidad no tiene que hacer nada con el HTML, solo cree la regla CSS y deje que el navegador haga el resto. Los selectores de etiquetas son fáciles de detectar en una regla de CSS, ya que tienen exactamente el mismo nombre que la etiqueta a la que diseñan:p, h1, tabla, img,etcétera. Por ejemplo, en la Figura 3-2, el h2 selector (arriba) aplica un estilo de fuente a todos los <h2>etiquetas en una página web (abajo). Figura 3-2 Un selector de etiquetas afecta a todas las instancias de la etiqueta en la página. Esta página tiene tres<h2> etiquetas (indicadas por las etiquetas negras en el borde izquierdo de la ventana del navegador). Un único estilo CSS con un selector deh2controla la presentación de cada<h2> etiqueta en la página. 56 Css3: el manual perdido www.it-ebooks.info Clase SELECCIONADORES: NotaComo muestra claramente la Figura 3-2, los selectores de etiquetas no obtienen los símbolos menor que (<) y mayor que (>) que rodean las etiquetas HTML. Así que cuando estás escribiendo una regla para el <p>etiqueta, por ejemplo, simplemente escriba el nombre de la etiqueta:pag. determinar con precisión Control Sin embargo, los selectores de etiquetas tienen sus desventajas. ¿Qué pasa si quieres?alguno párrafos para verse diferente de otros párrafos? Un simple selector de etiquetas no funcionará, ya que no proporciona suficiente información para que un navegador web identifique la diferencia entre <p>etiquetas que desea resaltar en púrpura, negrita y letra grande del <p>etiquetas que desea dejar con texto negro normal. Afortunadamente, CSS proporciona varias formas de resolver este problema: el método más sencillo se llamaseleccionador de clase. Selectores de clase: control preciso Cuando desee dar a uno o más elementos un aspecto diferente al de las etiquetas relacionadas en una página (por ejemplo, dar a una o dos imágenes de una página un borde rojo y dejar la mayoría de las demás imágenes sin estilo), puede usar unclaseselector. Si está familiarizado con los estilos en los programas de procesamiento de textos como Microsoft Word, entonces los selectores de clases le resultarán familiares. Usted crea un selector de clase dándole un nombre y luego aplicándolo solo a las etiquetas HTML que desea formatear. Por ejemplo, puede crear un estilo de clase llamado . derechos de autory luego aplicarlo solo a un párrafo que contenga información de derechos de autor, sin afectar a ningún otro párrafo. Los selectores de clase también le permiten identificar un elemento exacto en una página, independientemente de su etiqueta. Digamos que desea formatear una palabra o dos dentro de un párrafo, por ejemplo. En este caso, no desea el < completop>etiqueta afectada, solo una frase dentro de ella. Puede usar un selector de clase para indicar solo esas palabras. Incluso puede usar un selector de clase para aplicar el mismo formato a varios elementos que tienen diferentes etiquetas HTML. Por ejemplo, puede dar el mismo estilo a un párrafo ya un encabezado de segundo nivel, tal vez un color y una fuente que haya seleccionado para resaltar información especial, como se muestra en la Figura 3-3. A diferencia de los selectores de etiquetas, que lo limitan a las etiquetas HTML existentes en la página, puede crear tantos selectores de clases como desee y colocarlos donde desee. NotaCuando desea aplicar un selector de clase a solo unas pocas palabras contenidas dentro de otra etiqueta (como el párrafo central en la Figura 3-3), necesita un poco de ayuda de la etiqueta <span>. Consulte el cuadro de la página 60 para obtener más detalles. Probablemente haya notado el punto que comienza el nombre de cada selector de clase, como . derechos de autory .especial.Es una de las pocas reglas a tener en cuenta al nombrar una clase: • Todos los nombres de los selectores de clases deben comenzar con un punto. Así es como los navegadores web detectan un selector de clase en la hoja de estilo. • CSS solo permite letras, números, guiones y guiones bajos en los nombres de las clases. Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 57 Clase SELECCIONADORES: determinar con precisión Control Figura 3-3 Los selectores de clase le permiten realizar cambios de diseño altamente específicos. Por ejemplo, puede estilizar una instancia de un<h2>título ("Wet Sod is Heavy Sod"). El seleccionador de clases.especial le dice al navegador que aplique el estilo solo a ese único<h2> etiqueta. Una vez que haya creado un selector de clase, puede usarlo en otras etiquetas, como el párrafo superior de esta página. • Después del punto, el nombre siempre debe comenzar con uncarta. Por ejemplo,.9vive no es un nombre de clase válido, pero .loco8es. Puede tener clases nombradas .derechos de autor y . banner_imagen,pero no .-maloo ._tan malo. • Los nombres de las clases distinguen entre mayúsculas y minúsculas. Por ejemplo, CSS considera .BARRA LATERALy . barra lateraldos clases diferentes. 58 Css3: el manual perdido www.it-ebooks.info Clase SELECCIONADORES: Además del nombre, crea estilos de clase exactamente como estilos de etiqueta. Después del nombre de la clase, simplemente coloque un bloque de declaración que contenga todo el estilo que desee: determinar con precisión Control . especial { color:#FF0000; familia de fuentes: "Monotype Corsiva"; } Debido a que los estilos de etiquetas se aplican de manera generalizada a todas las etiquetas de una página web, simplemente tiene que definirlos en el encabezado de la página: las etiquetas HTML que los hacen funcionar ya están en su lugar. Sin embargo, la libertad extra que obtienes con los estilos de clase viene con un poco más de trabajo. El uso de selectores de clase es un proceso de dos pasos. Después de crear una regla de clase, debe indicardóndedesea aplicar ese formato. Para hacerlo, agrega un atributo de clase a la etiqueta HTML que desea diseñar. Digamos que creas una clase.especialque usará para resaltar elementos particulares de la página. Para agregar este estilo a un párrafo, agregue un atributo de clase al <p>etiqueta, así: <p class="especial"> NotaEn el HTML, como parte del atributo de clase, ustednoponer un punto antes del nombre de la clase. El punto solo se requiere para el nombre del selector de clase en unhoja de estilo. Cuando un navegador web encuentra esta etiqueta, sabe aplicar las reglas de formato contenidas en el.especialestilo al párrafo. También puede aplicar formato de clase solo a una parte de un párrafo o encabezado agregando un <lapso>etiqueta. Por ejemplo, para resaltar solo una palabra en un párrafo usando el .especialestilo, podrías escribir esto: <p>Bienvenido a <span class="companyName">Café Soylent Green</span>, el restaurante con algo un poco diferente.</p> Una vez que crea un estilo de clase, puede aplicarlo a casi cualquier etiqueta en la página. De hecho, puede aplicar la misma clase a diferentes etiquetas, por lo que puede crear un archivo .especial estilo con una fuente y un color específicos y aplíquelo a <h2>, <p>,y <ul>etiquetas Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 59 SELECTORES iD: PÁGINA ESPECÍFICA Elementos Hasta la velocidad divisiones y tramos El capítulo 1 te presentó a <div>y <lapso>,dos etiquetas HTML genéricas etiqueta (con una clase aplicada) alrededor de la foto y el título que puede adaptar a sus deseos CSS. Cuando no haya una etiqueta para agrupar ambos elementos: HTML que delinee exactamente dónde desea colocar una clase o un <div clase="foto"> estilo de identificación que haya creado, use un <div>o <lapso>para <img src="vacaciones.jpg" alt="Los pingüinos se llenar los huecos. ponen juguetones"/> <p>Mamá, papá y yo en La etiqueta div identifica una lógicadivisiónde la página, como un banner, una nuestro viaje anual a la Antártida.</p> barra de navegación, una barra lateral o un pie de página. También puede usarlo para rodear cualquier elemento que ocupe una parte de la página, incluidos encabezados, listas con viñetas o párrafos. (Los tipos de </div> Dependiendo de lo que ponga en el bloque de declaración, el programadores los llamannivel de bloqueelementos porque forman un "bloque" completo de contenido, con saltos de línea antes y después de ellos). . fotoLa clase puede agregar un borde decorativo, un color de fondo, etc., tanto a la foto como al título. La Parte 3 de este libro le muestra El <div>La etiqueta funciona como una etiqueta de párrafo: escriba la apertura formas aún más poderosas de usar <div>etiquetas, incluidas las <división>,agregue algún texto, una foto o algún otro contenido dentro de él, y divisiones anidadas. luego termínelo con el cierre </división>. un <lapso>etiqueta, por otro lado, le permite aplicar una clase o estilo La etiqueta div tiene la capacidad única de contenervarioselementos a nivel de de ID a solopartede una etiqueta Puedes colocar <lapso>etiquetas bloque, lo que lo convierte en una excelente manera de agrupar etiquetas que alrededor de palabras y frases individuales (a menudo llamadasen línea están relacionadas lógicamente, como el logotipo y la barra de navegación en elementos) dentro de los párrafos para darles formato de forma el banner de una página o una serie de noticias que componen una barra independiente. Aquí, una clase llamada .nombre de empresadiseña los lateral. Una vez agrupados de esta manera, puede aplicar un formato elementos en línea "CosmoFarmer.com", "Disney" y "ESPN": específico solo a las etiquetas dentro de un div en particular o mover todo el fragmento de contenido etiquetado con div a un área en particular, como el lado derecho de la ventana del navegador (CSS puede ayudarlo a controlar el diseño visual de sus páginas de esta manera, como se describe en la Parte 3 de este libro). <p>Bienvenido a <span class="companyName"> CosmoFarmer.com</span>, la empresa matriz de empresas tan conocidas como <span class="companyName"> Disney </span> y <span class=" companyName"> ESPN </span>...bueno, Por ejemplo, digamos que agregó una foto a una página web; la foto también en realidad no.</p> tiene un pie de foto que la acompaña. Podrías envolver un <div> Selectores de ID: elementos de página específicos CSS reserva el selector de ID paraidentificandouna parte única de una página, como un banner, una barra de navegación o el área de contenido principal. Al igual que un selector de clase, crea una ID dándole un nombre en CSS y luego la aplica agregando la ID al código HTML de su página. Entonces, ¿cuál es la diferencia? Como se explica en el cuadro de la página 62, los selectores de ID tienen algunos usos específicos en páginas web muy largas o basadas en JavaScript. De lo contrario, las razones convincentes para usar ID en lugar de clases son pocas. 60 Css3: el manual perdido www.it-ebooks.info SELECTORES iD: NotaExiste una tendencia creciente en la comunidad de diseño web de abandonar los selectores de ID en CSS. El razonamiento requiere un mayor conocimiento de CSS que el presentado hasta ahora en este libro. No encontrará muchas identificaciones en este libro, y aprenderá todos los detalles PÁGINA ESPECÍFICA Elementos sangrientos por los que los selectores de identificaciones a menudo no son una buena idea en la página 114. Aunque muchos diseñadores web ya no usan los selectores de ID tanto como antes, es bueno saber qué son y cómo funcionan. Si decide utilizar un selector de ID, crear uno es fácil. Así como un punto indica el nombre de un selector de clase, un símbolo de almohadilla identifica un estilo de identificación. De lo contrario, siga exactamente las mismas reglas de nomenclatura que se utilizan para las clases (página 57). Este ejemplo proporciona un color de fondo y un ancho y alto para el elemento: # banner { fondo: #CC0000; altura: 300px; ancho: 720px; } La aplicación de ID en HTML es similar a la aplicación de clases, pero usa un atributo diferente llamado, lógicamente,identificación. Por ejemplo, para aplicar el estilo anterior a una etiqueta <div>, escribiría este HTML: <div id="pancarta"> Del mismo modo, para indicar que el último párrafo de una página es el único aviso de derechos de autor de esa página, puede crear un estilo de ID llamado #derechos de autory agréguelo a la etiqueta de ese párrafo: <p id="derechos de autor"> NotaAl igual que con los estilos de clase, utilice el símbolo # solo cuando nombre el estilo en la hoja de estilos. Omite el # cuando usa el nombre de ID como parte de una etiqueta HTML: <div id="banner">. Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 61 ESTILO grupos de Etiquetas CLÍNICA DE USUARIOS ELÉCTRICOS identificaciones adecuadas Los selectores de ID tienen algunos poderes de los que carecen los selectores de clase. Estos Selector para crear enlaces a las letras del alfabeto. Cuando sus beneficios en realidad no tienen nada que ver con CSS, por lo que es posible que nunca necesite visitantes hacen clic en "R", saltan inmediatamente a todas las palabras una identificación. Pero si tienes curiosidad: "R" en la página. En realidad, no necesita crear ningún CSS para esto: • Una manera fácil para que los programadores de JavaScript ubiquen y manipulen partes de una página es aplicar una ID a un elemento de la página y luego usar JavaScript para hacer referencia a esa ID. Por ejemplo, los programadores a menudo aplican una ID a un elemento de formulario como un cuadro de texto para recopilar el nombre de un visitante. El ID permite que JavaScript acceda a ese elemento del formulario y haga su magia, como asegurarse de que el campo no esté funciona únicamente con HTML. Primero, agregue un atributo de ID al lugar de la página que desea vincular. Por ejemplo, en un glosario puede agregar un h2etiqueta con una letra del alfabeto seguida de las listas del glosario, tal vez en una lista de definiciones o en una serie de párrafos. Simplemente agregue una identificación apropiada para cada uno de esos h2etiquetas: <h2 id="R">R</h2>.Para crear el enlace en HTML, agregue el símbolo de libra y el nombre de identificación al final de la URL, seguido del nombre de identificación:index.html#R. Este enlace vacío cuando el visitante haga clic en Enviar. • Los ID también le permiten vincular a una parte específica de una página, lo que hace que las páginas web largas sean más rápidas de navegar. Si tiene un glosario alfabético de términos, puede usar una identificación apunta directamente a un elemento con el ID de #Ren la pagina índice.html. (Cuando se usa de esta manera, la ID se comporta como un ancla con nombre—<un nombre="R">R</a>—en HTML). Estilizar grupos de etiquetas A veces, necesita una forma rápida de aplicar el mismo formato a varios elementos diferentes. Por ejemplo, quizás desee que todos los encabezados de una página compartan el mismo color y fuente. Creando un estilo separado para cada encabezado—h1, h2, h3, h4,etcétera—es demasiado trabajo, y si luego desea cambiar el color de todos los encabezados, entonces tiene seis estilos diferentes para actualizar. Un mejor enfoque es utilizar ungrupo selector. Los selectores de grupo le permiten aplicar un estilo a varios selectores al mismo tiempo. Construcción de selectores de grupo Para trabajar con selectores como grupo, simplemente cree una lista de selectores separados por comas. Entonces, para diseñar todas las etiquetas de encabezado con el mismo color, puede crear la siguiente regla: h1, h2, h3, h4, h5, h6 { color: #F1CD33; } Este ejemplo consta solo de selectores de etiquetas, pero puede usar cualquier selector válido (o combinación de tipos de selector) en un selector de grupo. Por ejemplo, aquí hay un selector que aplica el mismo color de fuente a la etiqueta <h1>, la etiqueta <p>, cualquier etiqueta con el estilo . derechos de autorclase,yla etiqueta con el #banderaIDENTIFICACIÓN: h1, p, .copyright, #banner { color: #F1CD33; } 62 Css3: el manual perdido www.it-ebooks.info CONSEJOSi quieres un montón de elementos de página para compartiralgunopero no todas con las mismas propiedades de formato, entonces puede crear un selector de grupo con las opciones de formato compartidas y también crear reglas individuales con formato único ETIQUETAS DE ESTILO DENTRO DE LAS ETIQUETAS para cada elemento individual. En otras palabras, dos (o más) estilos diferentes pueden formatear la misma etiqueta. La capacidad de usar múltiples estilos para dar formato a un solo elemento es una característica poderosa de CSS. Vea el Capítulo 5 para más detalles. El Selector Universal (Asterisco) Piense en un selector de grupo como una abreviatura para aplicar las mismas propiedades de estilo a varios elementos de página diferentes. CSS también le brinda una especie de selector de grupo übertheuniversal selector. Un asterisco (*) es una forma abreviada de selector universal para seleccionar cada unoetiqueta. Por ejemplo, supongamos que desea que todas las etiquetas de su página aparezcan en negrita. Su selector de grupo podría parecerse a lo siguiente: a, p, img, h1, h2, h3, h4, h5 ...yadda yadda... { font-weight: bold; } El asterisco, sin embargo, es una forma mucho más corta de decirle a CSS que seleccionetodoEtiquetas HTML en la página: * { font-weight: negrita; } Incluso puede usar el selector universal como parte de un selector descendiente, para que pueda aplicar un estilo a todas las etiquetas que descienden de un elemento de página en particular. Por ejemplo, .pancarta *selecciona cada etiqueta dentro del elemento de página al que ha aplicado el banderaclase. (A continuación, leerá sobre los selectores de descendientes). Dado que el selector universal no especifica ningún tipo de etiqueta en particular, es difícil predecir su efecto en las páginas de un sitio web completo, todas compuestas por una variedad de etiquetas HTML diferentes. Para formatear muchos elementos de página diferentes, los gurús de páginas web confían enherencia—un rasgo de CSS discutido en profundidad en el próximo capítulo. Estilo de etiquetas dentro de etiquetas Elegir si diseñar su página con selectores de etiquetas o selectores de clase es una compensación. Los selectores de etiquetas son rápidos y fáciles, pero hacen que cada aparición de una etiqueta tenga el mismo aspecto, lo cual está bien, si desea que cada <h2>en su página para verse exactamente como el resto. Los selectores de clase e ID le brindan la flexibilidad de diseñar elementos de página individuales de forma independiente, pero la creación de estilos de clase o ID también requiere que agregue la clase o ID adecuada a las etiquetas HTML que desea diseñar. Esto no solo funciona para usted, sino también para codificar su archivo HTML. Lo que necesita es una forma de combinar la facilidad de los selectores de etiquetas con la precisión de las clases y los ID. CSS tiene justo lo que necesita:selectores descendientes. Los selectores descendientes se usan para formatear un montón de etiquetas de manera similar (al igual que los selectores de etiquetas), pero solo cuando se encuentran en una parte particular de una página web. Es como decir: "Oye, tú <un>etiquetas en la barra de navegación, escucha. Tengo algo de formato para ti. Todos ustedes otros <un>etiquetas, solo muévete; no hay nada que ver aquí. Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 63 ETIQUETAS DE ESTILO DENTRO DE LAS ETIQUETAS Los selectores de descendientes le permiten dar formato a una etiqueta en función de su relación con otras etiquetas. Para comprender cómo funciona, debe profundizar un poco más en HTML. En el lado positivo, los conceptos subyacentes a los selectores descendientes también lo ayudan a comprender otros tipos de selectores, como se analiza más adelante en este capítulo. NotaLos selectores de descendientes pueden ser confusos al principio, pero se encuentran entre las técnicas más importantes para aplicar CSS de manera eficiente y precisa. Tómese el tiempo para dominarlos. El árbol genealógico HTML El HTML que forma cualquier página web es similar a un árbol genealógico, donde las etiquetas HTML representan a varios miembros de la familia. La primera etiqueta HTML que usa en una página: el <html> etiqueta: es como el abuelo de todas las demás etiquetas. El <html>etiqueta rodea el <cabeza> etiqueta y el < cuerpo>etiqueta, lo que hace <html>elantepasadode ambos. De manera similar, una etiqueta dentro de otra etiqueta es unadescendiente. El <título>La etiqueta en el siguiente ejemplo es el descendiente de la etiqueta <head>: <html> <cabeza> <title>Un documento simple</title> </ head> <cuerpo> <h1>Encabezado</h1> <p>Un párrafo de texto <strong>importante</strong>.</p> </ body> </html> Puede convertir el código HTML anterior en un diagrama, como la Figura 3-4, que muestra las relaciones entre las etiquetas de la página. Primero está el <html>etiqueta; se divide en dos secciones representadas por el <cabeza>y <cuerpo>etiquetas Esas dos etiquetas contienen otras etiquetas que a su vez pueden contener otras etiquetas. Al ver qué etiquetas aparecen dentro de qué otras etiquetas, puede diagramar cualquier página web. Figura 3-4 HTML consta de etiquetas anidadas: etiquetas dentro de etiquetas dentro de incluso más etiquetas. La relación entre estas etiquetas, cómo están anidadas unas dentro de otras, forma una especie de árbol genealógico. 64 Css3: el manual perdido www.it-ebooks.info Los diagramas de árbol lo ayudan a descubrir cómo CSS ve la relación de un elemento en una página con otro. Muchos de los selectores de este capítulo, incluidos los selectores ETIQUETAS DE ESTILO DENTRO DE LAS ETIQUETAS descendientes, se basan en estas relaciones. Las relaciones más importantes son: • Antepasado.Como se explicó al comienzo de este capítulo, una etiqueta HTML que se envuelve alrededor de otra etiqueta es su ancestro. En la Figura 3-4, el <html>La etiqueta es un ancestro de todas las demás etiquetas, mientras que <cuerpo>la etiqueta es un ancestro de todas las etiquetas adentrode eso—el <h1>, <p>,y <fuerte>etiquetas • descendienteUna etiqueta dentro de una o más etiquetas es un descendiente. En la Figura 3-4, el <cuerpo>la etiqueta es descendiente de <html>etiqueta, mientras que <p>etiqueta es descendiente de ambosel <cuerpo>y <html>etiquetas • Padre.Una etiqueta principal es lamás cercanoantepasado de otra etiqueta. En la Figura 3-4, un padre es la primera etiqueta conectada directamente a otra etiqueta y encima de ella. Por lo tanto, la <html> la etiqueta es el padre del <cabeza>y <cuerpo>etiquetas, pero de ninguna otra etiqueta. Y, en este diagrama, el <p>la etiqueta es el padre del <fuerte>etiqueta. • Niño.Una etiqueta que está encerrada directamente por otra etiqueta es un elemento secundario. En la Figura 3-4, tanto el <h1>y <p>las etiquetas son hijas de <cuerpo>etiqueta, pero el <fuerte> la etiqueta no lo es. Desde el <fuerte>la etiqueta está directamente envuelta dentro de <p>etiqueta, es un elemento secundario de <p> etiqueta. • Hermano.Las etiquetas que son hijos de la misma etiqueta se llamanhermanos, como hermanos y hermanas. En un diagrama HTML, las etiquetas hermanas están una al lado de la otra y conectadas al mismo padre. En la Figura 3-4, el <cabeza>y <cuerpo>las etiquetas son hermanas, al igual que <h1>y <p>etiquetas Afortunadamente, ahí es donde CSS traza la línea con esta metáfora familiar, para que no tengas que preocuparte por tías, tíos o primos. (Aunque se rumorea que CSS10voluntad incluir a los suegros). Construyendo selectores de descendientes Los selectores de descendientes le permiten aprovechar el árbol genealógico HTML dando formato a las etiquetas de manera diferente cuando aparecen dentro de otras etiquetas o estilos determinados. Por ejemplo, supongamos que tiene un <h1>etiqueta en su página web, y desea enfatizar una palabra dentro de ese encabezado con el <fuerte>etiqueta. El problema es que la mayoría de los navegadores muestran etiquetas de encabezado y <fuerte>etiqueta en negrita, para que cualquier persona que vea la página no pueda ver ninguna diferencia entre la palabra enfatizada y las otras palabras en el título. Creación de un selector de etiquetas para cambiar el <fuerte>el color de la etiqueta y hacer que se destaque del título no es una gran solución: terminas cambiando el color de cada<fuerte>etiqueta en la página, te guste o no. Un selector descendente te permite hacer lo que realmente quieres: cambiar el color de <fuerte>etiquetasólo cuandoaparece dentro de un <h1> etiqueta. La solución al <h1>y <fuerte>dilema se ve así: h1 fuerte { color: rojo; } Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info sesenta y cinco ETIQUETAS DE ESTILO DENTRO DE LAS ETIQUETAS Aquícualquier<fuerte>La etiqueta dentro de un h1 es roja, pero otras instancias de <fuerte> etiqueta en la página no se ven afectados. Podría lograr el mismo resultado creando un estilo de clase—.encabezado fuerte,por ejemplo, pero luego tendría que editar el HTML agregando clase = "cabecera fuerte"a la <fuerte>etiqueta dentro del encabezado. ¡El enfoque del selector descendente no agrega HTML y no más trabajo más allá de crear el estilo! Los selectores de descendientes dan estilo a los elementos que están anidados dentro de otros elementos, siguiendo exactamente el mismo patrón de ancestros y descendientes que las etiquetas en el árbol genealógico HTML. Usted crea un selector de descendientes uniendo los selectores de acuerdo con la parte del árbol genealógico que desea formatear, con el antepasado más antiguo a la izquierda y la etiqueta real a la que se dirige en el extremo derecho. Por ejemplo, en la Figura 3-5, observe los tres enlaces (el <un>etiqueta) dentro de los elementos de la lista con viñetas y otro enlace dentro de un párrafo. Para formatear los enlaces con viñetas de manera diferente a los otros enlaces en la página, puede crear el siguiente selector descendente: li a { familia de fuentes: Arial; } Figura 3-5 Este diagrama de árbol simple (derecha) representa la estructura de la página web que se muestra a la izquierda. Cada etiqueta en una página web es un descendiente de la<html>etiqueta, ya que <html>los envuelve a todos. Una etiqueta puede descender de varias etiquetas. Por ejemplo, el primero<un>etiqueta enumerada en este diagrama es un descendiente de la<fuerte>,<p>, <cuerpo>, y<html>etiquetas Esta regla dice: "Formatear todos los enlaces (a)que aparecen dentro de un elemento de lista (li)utilizando la fuente Arial”. Un selector descendiente puede contener más de dos elementos. Los siguientes son todos los selectores válidos para las etiquetas <a> dentro de las listas con viñetas en la Figura 3-5: ul li a cuerpo li a html li a cuerpo html ul li a NotaAunque, en general, es mejor escribir un selector de descendientes lo más corto posible, una de las razones por las que agregaría selectores de descendientes adicionales es si ha escrito varias reglas diferentes que dan formato a una etiqueta simultáneamente. Las instrucciones de formato de un selector descendiente prolijo pueden anular los estilos simples de clase o etiqueta. Más sobre eso en el próximo capítulo. 66 Css3: el manual perdido www.it-ebooks.info Estos cuatro selectores, todos los cuales hacen lo mismo, demuestran que no es necesario que describa el linaje completo de la etiqueta que desea formatear. Por ejemplo, en el segundo ejemplo,cuerpo li a-ulno es ETIQUETAS DE ESTILO DENTRO DE LAS ETIQUETAS necesario Este selector funciona siempre que haya un <un>etiqueta que es descendiente (en algún lugar de la línea) de un <li>etiqueta (que también es descendiente de <cuerpo>etiqueta). Este selector puede aplicarse con la misma facilidad a un <un>eso está dentro de un <em>etiqueta, eso está dentro de un <fuerte> etiqueta, que está dentro de un <li>etiqueta, y así sucesivamente. Tampoco está limitado a solo selectores de etiquetas. Puede construir selectores descendientes complejos combinando diferentes tipos de selectores. Por ejemplo, suponga que desea que sus enlaces aparezcan en amarillo solo cuando estén dentro de un elemento introductorio (que ha designado con un estilo de clase llamadointroducción).El siguiente selector hace el truco: . introducción a {color: amarillo; } Traducción rápida: aplique este estilo a cada enlace (a)eso es un descendiente de otra etiqueta que tiene elintroducciónclase que se le aplica. Creación de módulos Los selectores de descendientes se utilizan a menudo para dar formato a unmódulode código, es decir, una colección de HTML que cumple una función particular en una página. Por ejemplo, digamos que tiene un <div> en la página, que se usa para enumerar las últimas noticias de la empresa. Es posible que tenga HTML como este: <div> <h2>¡Nuestra empresa es genial!</h2> <p>Más información sobre por qué nuestra empresa es tan grande</ p> <h2>Otra noticia</h2> <p>Información sobre la otra noticia…</p> <h2>…y así sucesivamente…</h2> <p>… y así sucesivamente… </ p> </div> Si simplemente le das una palmada a una clase en esa apertura <div>etiqueta—<div class="noticias">—luego puede crear selectores descendientes que formatean las etiquetas HTML dentro de la sección de noticias de manera diferente. Por ejemplo, . noticias h2 { color: rojo; } . noticias p { color: azul; } Ahora el <h2>las etiquetas dentro de la sección de noticias serán rojas y los párrafos, azules. Incluso es posible (y común) crear selectores descendientes con múltiples nombres de clase. Por ejemplo, supongamos que está creando una página que proporciona un directorio de direcciones para los miembros de una organización. Puede envolver cada contacto en su propiodivisión,y refinar aún más los elementos dentro de esedivisióncon una clase como esta: <div clase="contacto"> <p class="nombre">John Smith</p> <p class="teléfono">555-555-1234</p> <p class="dirección">1234 Elem St</p> </div> Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 67 seudoCLASES Y seudoElementos Luego, podría crear varios selectores descendientes para diseñar solo esos elementos de contacto como este: . contacto .name { font-weight: bold; } . contacto .phone { color: azul ;} . contacto .dirección { color: rojo; } NotaEn una hoja de estilo, a veces puede ver algo como esto: p.introducción Esto puede parecer un selector descendiente, ya que hay una etiqueta HTML y una clase, pero no lo es. No hay espacio entre el pagy el .introducción,lo que significa que elintroducciónla clase debe aplicarse específicamente a un <p>etiqueta (<p class="intro">)para que este estilo funcione. Si agrega un espacio, obtiene un efecto diferente: p .intro { color: amarillo; } Esta variación aparentemente leve selecciona cualquier etiqueta con el estilo .introducciónclass, que en sí misma es descendiente de una etiqueta <p>. En otras palabras, no selecciona un párrafo, selecciona otra etiqueta dentro de un párrafo. En general, para mantener los estilos de clase lo más flexibles posible, es mejor omitir la etiqueta HTML (en otras palabras, use solo .introducción en lugar dep.introducción). Pseudo-clases y pseudo-elementos A veces es necesario seleccionar partes de una página web que no tienen etiquetas per se, pero que, sin embargo, son fáciles de identificar, como la primera línea de un párrafo o un enlace al pasar el mouse sobre él. CSS te da un puñado de selectores para estos doohickeys— pseudo-clasesypseudo-elementos. Estilos para enlaces Cuatro pseudoclases le permiten formatear enlaces en cuatro estados diferentes en función de cómo un visitante ha interactuado con ese enlace. Identifican cuando un enlace está en uno de los siguientes cuatro estados: • un enlaceselecciona cualquier enlace que su invitado aún no haya visitado, mientras el mouse no se desplaza ni hace clic en él. Este estilo es su enlace web normal y no utilizado. • a: visitadoes un enlace en el que su visitante ha hecho clic antes, de acuerdo con el historial del navegador web. Puede diseñar este tipo de enlace de manera diferente a un enlace normal para decirle a su visitante: "¡Oye, ya has estado allí!" (Consulte el cuadro en la página 294 para ver las limitaciones que rodean a este selector). • a: flotarle permite cambiar la apariencia de un enlace a medida que su visitante pasa el mouse sobre él. Los efectos de rollover que puede crear no son solo para divertirse, sino que pueden proporcionar información visual útil para los botones de una barra de navegación. 68 Css3: el manual perdido www.it-ebooks.info También puede utilizar el:flotarpseudo-clase en elementos que no sean enlaces. Por ejemplo, puede usarlo para resaltar texto en un <p>o <div>cuando sus invitados pasen el mouse sobre seudoCLASES Y seudoElementos él. En ese caso, en lugar de usara: flotar (que es para enlaces) para agregar un efecto de desplazamiento, puede crear un estilo llamadop: flotarpara crear un efecto específico cuando alguien pasa el mouse sobre cualquier párrafo. Si solo desea diseñar etiquetas con una clase específica dedestacaraplicado a ellos, luego cree un estilo llamado . resaltar: flotar. • a:activole permite determinar cómo se ve un enlacecomosu visitante hace clic. En otras palabras, cubre el breve nanosegundo cuando alguien presiona el botón del mouse, antes de soltarlo. El Capítulo 9 le muestra cómo diseñar enlaces utilizando estos selectores para ayudar a sus visitantes a hacer clic en su sitio. NotaPuede vivir una vida larga y productiva sin leer sobre los selectores en las próximas secciones. Muchos diseñadores web nunca los usan. Los selectores que ha aprendido hasta ahora (etiqueta, clase, ID, descendiente, grupo, etc.) le permiten crear sitios web absolutamente hermosos, funcionales y fáciles de mantener. Si está listo para las cosas divertidas (diseñar páginas web), vaya al tutorial de la página 81. Siempre puede terminar de leer esta discusión en una noche fría y lluviosa junto al fuego. Estilizar partes de párrafo Las características tipográficas que hacen que los libros y las revistas se vean geniales, elegantes y pulidos no existían en la era web temprana. (Después de todo, ¿cuándo se preocuparon los científicos por verse bien?) CSS proporciona dos pseudoelementos:primera letray :primera linea-que dan a sus páginas web la delicadeza de diseño que la impresión ha disfrutado durante siglos. El :primera letrael pseudoelemento le permite crear una letra capitular, una letra inicial que sobresale del resto del párrafo con un formato de fuente más grande o más audaz, como al comienzo de un capítulo de libro. Estilizando el:primera lineade un párrafo en un color diferente mantiene la atención del lector en movimiento y hace que el texto parezca atractivo y fresco. (Si está intrigado, el Capítulo 6 trata sobre cómo formatear el texto, y la página 171 cubre estos dos pseudoelementos en profundidad). NotaCSS3 cambia la sintaxis de los pseudoelementos. En CSS 2.1, los pseudoelementos comienzan con dos puntos, así: :primera letra CSS3 agrega dos puntos adicionales para diferenciar pseudoclases como:flotarde pseudo-elementos. Entonces :primera letray : primera linea,son ahora ::primera letray ::primera linea.Afortunadamente, para mantener la compatibilidad con sitios más antiguos, el navegador seguirá siendo compatible con la versión de pseudoelementos de un solo punto. Eso es algo bueno ya que Internet Explorer 8 no entiende la sintaxis de dos puntos, así que por el momento, quédese con los dos puntos por ahora, ya que todos los demás navegadores todavía lo usan también. Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 69 seudoCLASES Y seudoElementos Más pseudoclases y pseudoelementos Las pautas de CSS definen varios selectores poderosos de pseudo-clases y pseudo-elementos además de los cubiertos hasta ahora. La compatibilidad con estos selectores en todos los navegadores, excepto en los más antiguos, es muy buena. :Enfocar El :enfocarpseudo-clase funciona de manera muy similar a:flotarpseudo-clase. Mientras :flotar se aplica cuando un visitante pasa el mouse sobre un enlace:enfocarse aplica cuando el visitante hace algo para indicar su atención a un elemento de la página web, generalmente haciendo clic o tabulando en él. En la jerga de programación, cuando un visitante hace clic en un cuadro de texto en un formulario web, coloca el enfocaren ese cuadro de texto. Ese clic es la única pista que tiene un diseñador web sobre dónde está enfocando su atención el visitante. El :enfocarEl selector es principalmente útil para dar retroalimentación a su visitante, como cambiar el color de fondo de un cuadro de texto para indicar dónde está a punto de escribir. (Campos de texto de una sola línea, campos de contraseña y <área de texto>Las cajas son objetivos comunes para:enfocarselector). Este estilo, por ejemplo, agrega un color amarillo claro a cualquier cuadro de texto en el que un visitante hace clic o tabula: entrada: enfoque { color de fondo: #FFFFCC; } El :enfocarEl selector se aplica solo mientras el elemento está enfocado. Cuando un visitante ingresa a otro campo de texto o hace clic en cualquier otro lugar de la página, quita el foco y las propiedades CSS del cuadro de texto. CONSEJOUn buen recurso para ver qué navegadores admiten qué selector de CSS eswww.quirksmode.org/css/ contents.html. :Antes El :antespseudo-elemento hace algo que ningún otro selector puede hacer: le permite agregar contenido que precede a un elemento determinado. Por ejemplo, supongamos que desea poner "¡CONSEJO IMPORTANTE!" antes de ciertos párrafos para que se destaquen, como los recuadros de este libro que dicen “A LA VELOCIDAD” y “CLINICA DE USUARIOS PODEROSOS”. En lugar de escribir ese texto en el HTML de su página, puede dejar que:antesselector hazlo por ti. Este enfoque no solo ahorra código, sino también si decide cambiar el mensaje de "¡CONSEJO IMPORTANTE!" a, digamos, "Cosas que debe saber", luego puede cambiar cada página de su sitio con un cambio rápido en su hoja de estilo. (La desventaja es que este mensaje especial es invisible para los navegadores que no entienden CSS o no entienden:antesselector.) Primero, crea una clase (.consejo,say) y aplíquelo a los párrafos que desea preceder con el mensaje, así: <p clase="consejo">.Luego, agregue el texto de su mensaje a la hoja de estilo: p.tip:before {contenido: "¡CONSEJO IMPORTANTE!" } Cada vez que un navegador encuentra el archivo .consejoclase en un <p>etiqueta, inserta obedientemente el texto "¡CONSEJO IMPORTANTE!" justo antes del párrafo. 70 Css3: el manual perdido www.it-ebooks.info El término técnico para el texto que agrega con este selector escontenido generado, ya que los navegadores web lo crean (generan) sobre la marcha. En el código fuente HTML de la página, este seudoCLASES Y seudoElementos material no existe. Ya sea que se dé cuenta o no, los navegadores generan su propio contenido todo el tiempo, como las viñetas en las listas con viñetas y los números en las listas ordenadas. Si lo desea, puede incluso utilizar el:antesselector para definir cómo un navegador muestra sus viñetas y números para las listas. Internet Explorer 8 y versiones posteriores, así como todos los demás navegadores principales, son compatibles con:antes selector (y el :despuésselector que viene a continuación). Encontrará más información sobre el uso de estos selectores en el cuadro de la página 259. :DESPUÉS Exactamente como el:antesseleccionador, el:despuésel pseudo-elemento agrega contenido generado, pero después del elemento, no antes. Puede usar este selector, por ejemplo, para agregar comillas de cierre (") después del material citado. NotaAmbos :antesy :despuésson pseudo-elementos como:primera lineay :primera letra. Como se menciona en la nota de la página 69, CSS3 agrega dos puntos dobles a los pseudoelementos, por lo que:antes,y :después se escriben como ::antesy ::despuésen CSS3. Afortunadamente, los navegadores admiten la notación anterior, por lo que puede continuar usando:antesy :después,que tienen el beneficio adicional de trabajar en Internet Explorer 8. ::Selección Este selector de CSS3 se refiere a elementos que un visitante ha seleccionado en una página. Por ejemplo, cuando un visitante hace clic y arrastra sobre el texto, el navegador resalta ese texto y el visitante puede copiarlo. Normalmente, los navegadores agregan un fondo azul detrás del texto. Internet Explorer cambia el color del texto a blanco. Sin embargo, puede controlar el color de fondo y el color del texto definiendo este selector. Por ejemplo, si quisiera que el texto seleccionado fuera blanco con un fondo violeta, podría agregar este estilo a la hoja de estilo de una página: ::selección { color: #FFFFFF; color de fondo: #993366; } Las únicas propiedades que puede establecer con este selector soncolorycolor de fondo, para que pueda volverse loco y cambiar el tamaño de la fuente, las fuentes, los márgenes u otros cambios visuales que seguramente volverán locos a los visitantes de su sitio. (¡Gracias por protegernos de nosotros mismos, CSS!) NotaNo hay una versión de dos puntos del pseudoelemento de selección, por lo que debe usar los dos puntos dobles. En otras palabras, ::selecciónfunciona, pero:selecciónno. Este selector funciona en Internet Explorer 9, Opera, Chrome y Safari, pero no en IE 8 o Firefox. Sin embargo, puede agregar soporte para Firefox agregando lo que se llama un prefijo-proveedoral selector, así: Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 71 atributo SELECTORES ::-moz-selección { color: #FFFFFF; color de fondo: #993366; } Para que esto funcione en Firefox y en los demás navegadores, debe tener ambos estilos en su hoja de estilos; simplemente colóquelos uno tras otro. (Obtendrá más detalles sobre los prefijos de proveedores y por qué los necesita en el cuadro de la página 209). Si realmente quiere volverse loco, puede especificar un color de fondo diferente solo para el texto seleccionado dentro de un elemento en particular. Por ejemplo, para hacer que solo el texto dentro de los párrafos sea rojo con un fondo rosa, simplemente agregue elpagselector de elementos antes ::selección,como esto: p::selección { color rojo; color de fondo: rosa; } CONSEJOAprender a escribir selectores a veces puede parecer como aprender jeroglíficos. Para traducir un selector a un lenguaje sencillo, visite Selectoracle enhttp://gallery.theopalgroup.com/selectoracle. Este gran recurso le permite escribir en un selector y luego escupe una descripción clara de qué elementos de página en una página afecta el estilo. Selectores de atributos CSS proporciona una forma de formatear una etiqueta en función de cualquier atributo HTML que tenga. Por ejemplo, supongamos que desea colocar bordes alrededor de las imágenes de su página, pero solo alrededor de las fotos importantes. No desea incluir su logotipo, botones y otros pequeños adornos que también tienen un <imagen>etiqueta. Afortunadamente, te das cuenta de que has dado todas las descripciones de las fotos usando eltítuloatributo, lo que significa que puede utilizar un selector de atributos para identificar sólo las imágenes importantes. CONSEJOel htmltítuloEl atributo es una excelente manera de agregar información sobre herramientas (mensajes emergentes) a enlaces e imágenes en una página. También es una forma de informar a los motores de búsqueda sobre la información útil en una página web. Obtenga más información al respecto en http://diseñoweb.about.com/od/htmltags/a/aa101005.htm. Con los selectores de atributos, puede seleccionar etiquetas que tengan una propiedad particular. Por ejemplo, aquí se explica cómo seleccionar todos los <imagen>etiquetas con untítuloatributo: img[título] La primera parte del selector es el nombre de la etiqueta (imagen)mientras que el nombre del atributo va entre paréntesis: [título]. 72 Css3: el manual perdido www.it-ebooks.info CSS no limita los selectores de atributos a los nombres de etiquetas: también puede combinarlos con clases. Por ejemplo, .foto [título]selecciona cada elemento con el .foto estilo atributo SELECTORES de clase y un atributo de título HTML. Para ser más específico, puede seleccionar elementos que no solo compartan un atributo en particular, sino que también tengan un valor exacto establecido para ese atributo. Por ejemplo, cuando desee resaltar enlaces que apuntan a una URL en particular, cree un selector de atributos llamativo, así: a[href="http://www.cafesoylentgreen.com"]{ color rojo; fuente-peso:negrita; } Agregar un valor a un selector de atributos es muy útil cuando se trabaja con formularios. Muchos elementos de formulario tienen la misma etiqueta, incluso si se ven y actúan de manera diferente. La casilla de verificación, el cuadro de texto, el botón Enviar y otros campos del formulario comparten el <entrada>etiqueta. El valor del atributo de tipo es lo que le da al campo su forma y función. Por ejemplo, <tipo de entrada="texto">crea un cuadro de texto y < tipo de entrada = "casilla de verificación">crea una casilla de verificación. Para seleccionar solo cuadros de texto en un formulario, por ejemplo, use este selector: entrada[tipo="texto"] El selector de atributos es muy versátil. Le permite no solo encontrar etiquetas que tengan un valor específico para un atributo (por ejemplo, buscar todos los campos de formulario con un tipo de casilla de verificación), sino incluso seleccionar elementos con un valor de atributo quecomienza con, termina con, o contiene un valor específico. Si bien esto puede parecer excesivo, en realidad es bastante útil. Por ejemplo, suponga que desea crear un estilo específico para resaltar enlaces externos (enlaces que apuntan fuera de su propio sitio web) para indicar: "Oye, abandonarás este sitio si haces clic aquí". Suponiendo que no utilice enlaces absolutos para vincular a ninguna página de su propio sitio, puede suponer que cualquier enlace externo comienza conhttp://—la primera parte de cualquier vínculo absoluto. Si ese es el caso, el selector se vería así: a[href^="http://"] El ^= se traduce como "comienza con", por lo que puede usar este selector para dar formato a cualquier enlace que comience conhttp://. Puede usarlo para diseñar un enlace que apunte ahttp:// www. google.comasí como un enlace ahttp://www.sawmac.com. En otras palabras, selecciona cualquier enlace externo. NotaEste selector no funcionará para ninguna conexión segura a través de SSL; en otras palabras, cualquier enlace que comience conhttps://. Para crear un estilo que también los afecte, puede crear un selector de grupo (página 84) como este: a[href^="http://"], a[href^=" https://"] De manera similar, hay momentos en los que desea seleccionar un elemento con un atributo que terminaen un valor específico. Nuevamente, los enlaces son útiles para esta tarea. Di que quieres agregar Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 73 Niño SELECTORES un pequeño icono de documento junto a cualquier enlace que apunte a un archivo PDF. Dado que los documentos PDF terminan en .pdf, sabe que un enlace que apunta a uno de esos archivos terminará en .pdf, por ejemplo, <a href="descargar_instrucciones.pdf">.Entonces, para seleccionar solo esos tipos de enlaces, crearía un selector como este: a[href$=".pdf"] El estilo completo podría verse así: a[href$=".pdf"] { fondo: url(doc_icon.png) sin repetición; relleno-izquierda: 15px; }; No se preocupe demasiado por las propiedades particulares de este estilo; aprenderá sobre el relleno en la página 195 y sobre las imágenes de fondo en la página 240. Solo preste atención a ese genial selector: $= se traduce como "termina con". Puede usar este selector para formatear enlaces que apuntan a documentos de Word ([a href$=".doc"]),películas (un [href$=".mp4"]),etcétera. Finalmente, puede incluso seleccionar elementos con atributos que contengan otro valor. Por ejemplo, supongamos que le gusta resaltar fotos de sus empleados en todo el sitio. Es posible que desee que todas esas fotos tengan un estilo común, como un borde verde grueso y un fondo gris. Una forma de hacer esto es crear un estilo de clase—.disparo a la cabeza,por ejemplo, y agregue manualmente un atributo de clase al <imagen>etiquetas Sin embargo, si nombra las fotos de manera consistente, entonces hay un método más rápido. Por ejemplo, supongamos que nombra cada una de esas imágenes con la palabradisparo a la cabezaen ellos, por ejemplo,mcfarland_headshot.png,mccord_headshot.jpg,headshot_albert . jpg, etcétera. Cada uno de estos archivos tiene la palabradisparo a la cabezaen algún lugar del archivo, por lo que elorigenatributo del < imagen>etiqueta utilizada para insertar cada imagen también contiene la palabra disparo a la cabeza. Puede crear un selector solo para esas imágenes como esta: img[src*="foto de cabeza"] Esto se traduce como "seleccionar todas las imágenes cuyasorigenatributo tiene la palabradisparo a la cabeza en algún lugar de él. Es una manera simple y elegante de formatear solo esas imágenes. Selectores de niños Similar a los selectores de descendientes descritos anteriormente en este capítulo, CSS le permite formatear los elementos secundarios de otra etiqueta con unniñoselector. El selector secundario utiliza un símbolo adicional: un corchete angular (>) para indicar la relación entre los dos elementos. Por ejemplo, el seleccionadorcuerpo > h1selecciona cualquier <h1>etiqueta que es hija de <cuerpo> etiqueta. A diferencia de un selector descendiente, que se aplica atododescendientes de una etiqueta (hijos, nietos, etc.), el selector de hijos le permite especificar a qué hijo de qué padre se refiere. Por ejemplo, en la Figura 3-6, hay dos <h2>etiquetas Usando un simple selector de descendientes antiguo—cuerpo h2—selecciona ambos <h2>etiquetas Aunque ambos <h2> 74 Css3: el manual perdido www.it-ebooks.info las etiquetas están dentro de <cuerpo>etiqueta, solo la segunda es un elemento secundario de <cuerpo> etiqueta. el primero <h2>está directamente dentro de un <div>etiqueta, por lo que su padre es el <división>. Niño SELECTORES Ya que los dos <h2> las etiquetas tienen diferentes padres, puede usar un selector de niños para llegar a ellos individualmente. Para seleccionar solo el segundo <h2>etiqueta, su selector de niños se ve así:cuerpo > h2.Si quieres el primero <h2>etiqueta, entonces debe usar este selector de niños en su lugar:división > h2. Figura 3-6 El diagrama (derecha) muestra la relación entre las etiquetas HTML (izquierda). CSS3 también incluye algunas pseudoclases muy específicas para seleccionar elementos secundarios. Le permiten ajustar sus selectores para muchos arreglos diferentes de HTML. :PRIMER HIJO Volviendo a la analogía del árbol genealógico HTML por un momento, recuerde qué es una etiqueta secundaria: cualquier etiqueta encerrada directamente por otra etiqueta. (Por ejemplo, en la Figura 3-6, <h1>, <div>, <h2>,y <ul>son todos hijos de <cuerpo>etiqueta.) El :primer hijopseudo-elemento le permite seleccionar y formatear solo elprimerode cuantos hijos pueda tener un elemento. En la Figura 3-6, si desea seleccionar el primer <h1>etiqueta en la página, cree un selector como este: h1: primer hijo Este selector se aplica a cualquier <h1>etiqueta que es un primer hijo. En la Figura 3-6, los resultados son obvios: solo hay en <h1>etiqueta y es la primera etiqueta en la página. Por lo tanto es un hijo del <cuerpo>elemento. Sin embargo, :primer hijopuede ser confuso. Por ejemplo, si cambia el <h2> etiqueta dentro del <div>representado en la Figura 3-6 a un <h1>etiqueta, Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 75 Niño SELECTORES entoncesh1: primer hijoseleccionaría tanto el <h1>directamente dentro del <cuerpo>etiqueta y el <h1>dentro dedivisión (ya que <h1> es elprimer hijodeldivisión). :ÚLTIMO NIÑO Esto es como :primer hijodiscutido anteriormente, pero solo con el último hijo de un elemento. Por ejemplo, para aplicar estilo al último elemento de una lista, utilice elul :último hijoselector (vea la Figura 3-7). Figura 3-7 La amplia gama de selectores secundarios de CSS le brinda una variedad de formas de seleccionar elementos secundarios. Estos selectores son excelentes cuando desea resaltar el primero, el último o un número alternativo de elementos en una lista. ENÉSIMO NIÑO Este selector complejo es muy útil. Con él, puede diseñar fácilmente una fila alterna en una tabla, cada tercer elemento de la lista o diseñar cualquier combinación de elementos secundarios alternos (vea la Figura 3-7). Este selector requiere un valor para determinar qué elementos secundarios seleccionar. La opción más fácil es una palabra clave, ya seaextrañooincluso-que le permite seleccionar elementos secundarios pares o impares alternos. Por ejemplo, si desea proporcionar un color de fondo para cada fila par en una tabla y otro color en el fondo de cada fila impar, puede escribir dos estilos como este: tr:nésimo hijo(impar) { color de fondo: #D9F0FF; } tr:nthchild(par) { color de fondo: #FFFFFF; } Esa es una forma muy sencilla de colorear filas alternas de una tabla (vea la Figura 3-8). Pero :nthchild()tiene aún más poder bajo la manga. También puede seleccionar, digamos, cada tercer elemento secundario en una serie, comenzando con el segundo elemento secundario. Por ejemplo, suponga que desea resaltar cada tercera celda de la tabla (<td>etiqueta) dentro de una fila, comenzando con la segunda celda de la tabla (vea la Figura 3-8). Aquí hay un estilo para lograr eso: tr td:nth-child(3n+2) { color de fondo:#900; } Básicamente, el número antes deln (3 en este caso) representa qué elemento secundario está buscando. Entonces,3nsignifica cada tercer elemento, mientras que4nsignifica cada cuarto elemento. El signo más seguido de un número (+2en este ejemplo) indica qué elemento 76 Css3: el manual perdido www.it-ebooks.info empezar en, entonces +2significa comenzar en el segundo elemento secundario, mientras que +5significa comenzar en el quinto elemento secundario. Entonces :enésimo hijo(5n + 4)selecciona cada quinto elemento secundario a partir Niño SELECTORES del cuarto elemento secundario. Figura 3-8 Despiece de mesas de forma sencilla: con selectores para niños. Incluso puedes rayar columnas alternas por apuntando a todos los demás <td>etiqueta dentro de una fila o, como en este caso, cada tercera columna que comienza con el segundo. ¡Eso sí que es precisión! Selectores de tipo de niño CSS3 incluye un selector que funciona de manera muy similar a los selectores secundarios de la sección anterior, pero se aplica a los elementos secundarios con un tipo específico de HTML.etiqueta. Por ejemplo, digamos que desea formatear el primer párrafo dentro de una barra lateral de una manera particular, pero en algunas páginas, esa barra lateral comienza con un <h2>etiqueta, y en otras páginas, comienza con un < p>etiqueta. No puedes usar:primer hijopara seleccionar ese párrafo, ya que en algunos casos es elsegundo niño (siguiendo el <h2>).Sin embargo, siempre es el primero.párrafo (<p>etiqueta) en esa barra lateral, incluso si hay otras etiquetas antes, por lo que puede seleccionarlo con un selector de tipo llamado:primero de tipo. Nota:último hijo, :primero de tipo,y :nth-child()son compatibles con todos los navegadores modernos, incluido Internet Explorer 9 y superior. Por desgracia, estos no funcionan en IE 8. :PRIMERO-DE-TIPO Funciona como:primer hijopero se aplica a un niño que tiene una etiqueta particular. Por ejemplo, supongamos que tiene un elemento de barra lateral con la clasebarra lateralPara diseñar el primer párrafo en esa barra lateral, use este selector: . barra lateral p: primero de tipo Observe lapagenp: primero de tipo.Indica la etiqueta que vas a formatear. :ÚLTIMO-DE-TIPO Funciona como:último niñopero se aplica a la última instancia de un tipo particular de etiqueta. Por ejemplo, si desea formatear el último párrafo en el div de la barra lateral de una manera particular, pero no está seguro de si hay otras etiquetas después del párrafo (como una lista con viñetas, un título o una imagen). Aquí está el estilo: . barra lateral p: último tipo Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 77 Niño SELECTORES NotaRecuerde, estos selectores de tipo también tienen que ser elementos secundarios de una etiqueta en particular. Entoncesp: primero de tipo significa "el primer hijo que es una etiqueta de párrafo". :NTH-DE-TIPO Funciona como:nth-child()pero se aplica a los hijos alternos que tienen una etiqueta específica. Puede encontrar útil este selector si tiene algo así como un gran párrafo de texto que está salpicado de fotos. El < imagen>etiqueta es una etiqueta en línea, por lo que puede tener un <p> etiqueta con un montón de < imagen>etiquetas en su interior. Y supongamos que desea hacer flotar las imágenes alternativamente hacia la izquierda y hacia la derecha, como se muestra en la Figura 3-9. Puedes hacerlo con estos dos estilos: img:nth-of-type(odd) { float: left; } img:nthof-type(even) { float: right; } Como puede ver, utiliza las mismas palabras clave (extrañooincluso)y fórmula (aquí,2n+1) para :enésimo de tipo()como lo haces por:nth-child(). De hecho, puedes usar:enésimo de tipo()para seleccionar filas alternas de la tabla también: tr: enésimo de tipo (impar) { color de fondo: #D9F0FF; } tr: enésimo de tipo (par) { color de fondo: #FFFFFF; } En el caso de los selectores de CSS, siempre hay más de una forma de personalizar una etiqueta HTML: ¡generalmente hay cinco o más! (Solo tenga en cuenta que ninguno de estos selectores de tipos secundarios es compatible con Internet Explorer 8 o anterior). Figura 3-9 Con el:enésimo de tipo() selector, puede seleccionar fácilmente cualquier otra imagen dentro de una etiqueta, alternando entre la alineación izquierda y derecha. 78 Css3: el manual perdido www.it-ebooks.info Hermanos Preguntas frecuentes Hacer que las listas se vean geniales ¿Cuándo usaría un selector de niños? Solo por leer este capítulo, ya Aplica el .listaprincipalestilo de clase a la primera <ul>etiqueta: <ul conozco suficientes selectores para llegar a casi cualquier elemento de class="listaprincipal">.Luego use un selector de niños (ul. lista principal la página, entonces, ¿por qué aprender otro?? > li )para seleccionar solo el primer conjunto de elementos de la lista y Hay un desafío de diseño en el que los selectores de niños son insuperables, y aparece en más sitios web de los que cree. Cada vez que tenga una lista desordenada con una o más listas desordenadas anidadas dentro (como en la Figura 3-6), puede usar selectores secundarios para organizar visualmente estas categorías y subcategorías de información. Puede dar formato al primer nivel de los elementos de la lista de una forma y al segundo nivel de los elementos agregar el estilo de texto deseado para la primera subcategoría. Este estilo se aplica al <li>etiquetas que son hijos de <ul> etiqueta con el . listaprincipalestilo que se le aplica. Entonces, para peinar al niño <li> etiquetas de cualquier < anidado posteriorul>las etiquetas usan este selectorul.mainList > li > ul > li. (Un selector descendiente comoulli,por el contrario, selecciona los elementos de la lista de todas las listas desordenadas en la página, anidadas y todas). de la lista de otra forma. El contenido presentado de esta manera se ve Necesitará tener en mente un concepto que aprenderá en el próximo capítulo: herencia. ordenado, profesional y legible (y sus visitantes lo amarán por ello). Básicamente, ciertas propiedades CSS aplicadas a una etiqueta son heredadas por Primero, cree un estilo de clase para el nivel anidado más externo en su lista y llámelo, digamos, .listaprincipal.Para este nivel superior, puede usar una fuente sans-serif, un poco más grande que el resto del texto, quizás en negrita o en un color diferente. Las categorías subsiguientes pueden ser más pequeñas, en una etiquetas dentro de ellas. Por lo tanto, incluso si usa un selector de elementos secundarios para dirigirse a los elementos secundarios de una etiqueta, las propiedades pueden pasar a otras etiquetas dentro de ese elemento secundario. El :no()selector, discutido en la página 80, es una forma de evitar esto. fuente serif como Times para facilitar la lectura. Cuando tiene mucho texto, diseñar cada nivel de subcategoría de manera un poco diferente ayuda a orientar visualmente a sus visitantes en el material. Hermanos Las relaciones padre-hijo no son las únicas en el árbol genealógico HTML. A veces es necesario seleccionar una etiqueta en función no de su etiqueta principal, sino de las etiquetas que la rodean, las etiquetas que comparten un elemento principal común. Una etiqueta que aparece inmediatamente después de otra etiqueta en HTML se denominahermano adyacente. En la Figura 3-6, el <div>la etiqueta es el hermano adyacente del <h1>etiqueta, el <p>la etiqueta es el hermano adyacente del <h2>etiqueta, y así sucesivamente. Usando un selector de hermanos adyacente, puede, por ejemplo, darle al primer párrafo después de cada encabezado un formato diferente al de los párrafos que siguen. Suponga que desea eliminar el margen que aparece encima de <p>etiqueta para que quede justo debajo del encabezado sin ningún espacio. O tal vez quiera darle al párrafo un color y un tamaño de fuente distintos, como una pequeña declaración introductoria. El selector de hermanos adyacente utiliza un signo más (+) para unir un elemento con el siguiente. Entonces, para seleccionar cada párrafo que sigue a cada <h2>etiqueta, utilice este selector:h2 + p (Los espacios son opcionales, por lo queh2+pfunciona también). El último elemento del selector (pag,en este caso) es lo que obtiene el formato, pero solo cuando está directamente después de su hermano <h2>. Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 79 El no( ) Selector Hay otro selector de hermanos llamadoselector combinatorio general de hermanos(Dilo tres veces rápido). Es simplemente una ~ (tilde) y significa "seleccionar todos los hermanos de este tipo". Por ejemplo, mientrash2 + pselecciona una sola etiqueta <p> que sigue inmediatamente a un <h2> etiqueta,h2 ~ pagseleccionatodo<p>etiquetas que son hermanos (es decir, en el mismo nivel) delh2. Para ser honesto, es posible que nunca encuentre un buen uso para este selector, pero CSS no es más que completo. El selector :no() El :no()selector, también llamado pseudoclase de negación, le permite seleccionar algo que no es otra cosa. Por ejemplo, puede aplicar una clase a un párrafo: <p class="con clase">—y cree un selector de clase CSS para formatearlo, así: . elegante { color: rojo; } Pero, ¿qué sucede si desea seleccionar todos los párrafos, excepto elde buen tonopárrafos? Ahí es donde el:no()entra el selector. Pones un selector de CSS dentro de los paréntesis para indicar lo que quieresnodesea seleccionar. Por ejemplo: p: no (.con clase) { color: azul; } Este estilo hace que el texto sea de color azul para todos los párrafos que no tienen elde buen tono clase aplicada a ellos. El :no()El selector puede ser útil cuando usa los selectores de atributos que se analizan en la página 72. Por ejemplo, vio en la página 73 que puede usar un selector de atributos para seleccionar todos los enlaces que apuntan fuera de su sitio web, como este: a[href^="http://"] Como probablemente haya notado, ese selector no selecciona específicamente todos los enlaces que apuntan fuera de su sitio, simplemente selecciona todos los enlaces que usan URL absolutas, es decir, URL que comienzan conhttp://. Para muchos sitios, eso es lo mismo; muchos sitios utilizan vínculos relativos a documentos oa la raíz para apuntar a otras páginas dentro del sitio y direcciones URL absolutas para vincular a otros sitios. Sin embargo, en algunos casos, puede usar URL absolutas para apuntar a páginas dentro de su sitio. Por ejemplo, algunos sistemas de administración de contenido (WordPress, por ejemplo) usan URL absolutas para apuntar a publicaciones de blog dentro del sitio. En este caso, si desea diseñar enlaces que apuntan fuera de su sitio, debe refinar el selector de atributos básico empleando también el:no()selector. Por ejemplo, digamos que el nombre de dominio de su sitio es mysite.com. Para seleccionar enlaces que apunten fuera de su sitio, querrá seleccionar todos los enlaces absolutos quenoapuntar al dominiomisitio.com. Así es como lo harías: a[href^="http://"]:not([href^="http://misitio.com"]) 80 Css3: el manual perdido www.it-ebooks.info Traducido al inglés, este selector dice “Seleccionar todos los enlaces, cuyohrefatributo comienza conhttp://, peronolos que comienzan con http://mysite.com”. Como recordará de la Tutorial: Selector Dechado página 72, en un selector de atributos, ^= significa “empieza por”. Una forma más corta de escribir lo mismo sería esta: a[href^="http://"]:not([href*="misitio.com"]) En un selector de atributos, *= significa "contiene", por lo que excluiría cualquier URL absoluta que contenga mysite.com. Esto incluiríahttp://www.misitio.comasí comohttp:// misitio.com. Existen algunas limitaciones para:no()selector: • Solo puede usarselectores simplescon el :no()selector. En otras palabras, puede usar selectores de elementos (comohtml,opag),el selector universal (* [ver página 63]), clases (.pie de página,por ejemplo), identificaciones (#bandera,por ejemplo), o pseudoclases (: flotar, :marcado, :primer hijo,etcétera). Así que los siguientes son todos válidos: . nota al pie: no (div) img:no(.retrato) div:no(#banner) li: no (: primer hijo) • No puede usar selectores descendientes (comodiv pa,pseudo-elementos (como ::primera linea), selectores de grupo o combinadores (como el selector de hermanos adyacenteh2 + p). • No puede encadenar múltiples:no()selectores juntos. Por ejemplo, lo siguiente no es válido: a[href^="http://"]:no([href*="google.com"]):no([href="yahoo.com]) En otras palabras, solo puedes usar:no( )una vez con un selector. Tutorial: Selector de muestras En el resto de este capítulo, creará una variedad de tipos de selector y verá cómo cada uno afecta una página web. Este tutorial comienza con los tipos de selectores básicos y luego pasa a estilos más avanzados. Para comenzar, debe descargar los archivos del tutorial que se encuentran en el sitio web complementario de este libro enwww.sawmac.com/css3. Haga clic en el enlace del tutorial y descargue los archivos. Todos los archivos están incluidos en un archivo zip, por lo que primero deberá descomprimirlos. (Las instrucciones detalladas para descomprimir los archivos se encuentran en el sitio web). Los archivos de este tutorial se encuentran dentro de la carpeta denominada03. Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 81 Tutorial: Selector Dechado PREGUNTA CON INDIGNACIÓN Manteniéndolo interno Oye, ¿qué pasa con la hoja de estilo interna en este tutorial? El Además, puede obtener una vista previa de sus resultados sin actualizar Capítulo 2 recomienda el uso de hojas de estilo externas por constantemente el caché de su navegador; Vuelva al recuadro de la página 39 para varias razones. obtener más información sobre esa peculiaridad. ¿Crees que eres bastante inteligente, eh? Sí, las hojas de estilo externas A muchos diseñadores web les gusta comenzar sus diseños con una hoja de generalmente hacen que los sitios web sean más rápidos y eficientes, estilo interna, ya que es más rápido y evita cualquier problema con todas esas por todas las razones mencionadas en el Capítulo 2. Sin embargo, las tonterías del caché. Aquí está su secreto: una vez que han perfeccionado su hojas de estilo internas facilitan su vida cuando diseña una sola página a diseño, simplemente cortan el código de la hoja de estilo interna, lo pegan en la vez, como en este tutorial. Puede trabajar en un solo archivo de una hoja de estilo externa y luego vinculan la hoja de estilo a las páginas de su página web en lugar de alternar entre el archivo de hoja de estilo sitio como se describe en la página 42. externo y la página web. 1.abiertoselector_basics.htmlen tu editor de texto favorito. Esta página está hecha de etiquetas HTML muy básicas. Lo más emocionante de esto es el banner gráfico (vea la Figura 3-10). Pero animarás las cosas en este tutorial. Comenzará agregando una hoja de estilo interna a este archivo. 2.Haga clic directamente después del cierre </título>etiqueta, presione Entrar (Retorno) y escriba <estilo>.Presione Entrar dos veces y luego escriba </estilo>. Estas son las etiquetas de estilo de apertura y cierre: es una buena idea escribir ambas etiquetas al mismo tiempo, para que no se olvide accidentalmente de agregar el cierre </estilo> etiqueta. Juntas, estas dos etiquetas le dicen a un navegador web que la información entre ellas son instrucciones de hojas de estilo en cascada. El HTML ahora debería verse así (lo que agregó está en negrita): <title>Conceptos básicos del selector</title> <estilo> </estilo> </cabeza> Los selectores de tipo, como el selector de etiquetas que está a punto de crear, son el tipo de selector más básico. (Si completó el tutorial en el último capítulo, ya ha creado algunos). 82 Css3: el manual perdido www.it-ebooks.info Tutorial: Selector Dechado Figura 3-10 El HTML simple se ve frío y monótono en un navegador web. Pero con un poco de CSS, puede convertir lo monótono (que se muestra aquí) en fabuloso (Figura 3-11) en 31 sencillos pasos. NotaSi está utilizando tipos de documentos HTML 4.01 o XHTML (en lugar de HTML5), deberá agregar eltipo="texto/css" atribuya a la etiqueta de estilo de apertura de esta manera: <tipo de estilo="texto/css"> 3.Haga clic entre las etiquetas de estilo de apertura y cierre que acaba de agregar y escriba pag {, presione regresar dos veces y escriba el cierre }. Es una buena idea agregar siempre la llave de cierre inmediatamente después de escribir la llave de apertura, solo para que no se te olvide. Para crear un selector de etiquetas, simplemente use el nombre de la etiqueta HTML que desea formatear. Este estilo se aplica a todos los párrafos de texto dentro de <p>etiquetas Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 83 Tutorial: Selector Dechado 4.Haga clic entre las llaves de apertura y cierre del estilo ( { } ) y agregue las siguientes cuatro propiedades CSS para proporcionar el formato del estilo: color, tamaño, fuente y sangría izquierda: pag { color: #505050; tamaño de fuente: 1em; familia tipográfica: “Helvetica Neue”, Arial, Helvetica, sans-serif; margen izquierdo: 100px; } Presione Entrar para colocar cada propiedad CSS en su propia línea. También es una buena idea organizar visualmente su código CSS sangrando cada propiedad con la tecla Tabulador (algunos diseñadores usan dos espacios en lugar de una tabulación, depende de usted). NotaEstos nombres de propiedad y sus valores pueden parecer desconocidos. Por ahora, simplemente escríbalos tal como están. Aprenderá lo que significan 1em y 100px, junto con todos los entresijos de las propiedades de formato de texto, en el Capítulo 6. Su hoja de estilo está completa. Hora de echar un vistazo. 5.abra la página en un navegador web para obtener una vista previa de su trabajo. A menos que juegue con la configuración de preferencias, la mayoría de los navegadores muestran texto negro en una fuente serif estándar como Times. Si su estilo CSS funciona correctamente, debería ver siete párrafos sangrados en una fuente sans-serif en un color gris oscuro. Creación de un selector de grupo A veces querrá que varios elementos diferentes en una página compartan el mismo aspecto. Por ejemplo, es posible que desee que todos sus encabezados tengan la misma fuente y color para lograr un estilo uniforme. En lugar de crear estilos separados y duplicar la misma configuración de propiedades para cada etiqueta—<h1>, <h2>,y así sucesivamente: puede agrupar las etiquetas en un solo selector. 1.Regrese a su editor de texto y elselector_basics.htmlarchivo. Agregará un nuevo estilo debajo de <p>estilo de etiqueta que acaba de crear. 2.Haga clic al final de la llave de cierre del selector de etiquetas, presione Entrar para comenzar una nueva línea y el siguiente código: h1, h2, h3 { } Como se explicó anteriormente en este capítulo, un selector de grupo es simplemente una lista de selectores separados por comas. Esta regla aplica el mismo formato, que agregará a continuación, a todos los <h1>, <h2>,y <h3>etiquetas en la página. 84 Css3: el manual perdido www.it-ebooks.info 3.Haga clic en la línea vacía entre la apertura {y el cierre} y agregue cinco propiedades CSS: Tutorial: Selector Dechado color: #BD8100; familia tipográfica: Baskerville, "Palatino Linotype", Times, serif; borde superior: 2px sólido #86A100; acolchado superior: 7px; relleno-izquierda: 100px; Están sucediendo muchas cosas aquí, pero básicamente está configurando el color y el tipo de fuente para los titulares, agregando una línea de borde sobre los titulares para interés visual y controlando el espacio superior e izquierdo mediante el uso de la propiedad de relleno. En pocas palabras, esta propiedad agrega espacio desde los bordes de un elemento sin afectar el fondo o el borde; está deslizando el texto del título desde la izquierda y hacia abajo desde la parte superior sin mover la línea del borde que se extiende por toda la página. 4.Guarde el archivo y obtenga una vista previa en un navegador web. El <h1>encabezado cerca de la parte superior de la página y el <h2>y <h3>todos los encabezados inferiores en la página tienen la misma fuente y color de fuente, además de un borde verde en la parte superior (consulte la Figura 3-11). Creación y aplicación de un selector de clase Los selectores de etiquetas son rápidos y eficientes, pero son un poco indiscriminados en la forma en que diseñan una página. ¿Qué pasa si quieres diseñar un solo <p>etiqueta diferente a todos los demás <p> etiquetas en una página? Un selector de clase es la respuesta. 1.Regrese a su editor de texto y elselector_basics.htmlarchivo. Agregue un nuevo estilo debajo del estilo del selector de grupo que acaba de crear. 2.Haga clic al final de la llave de cierre delh1, h2, h3selector, presione Entrar (Retorno) y luego escriba . nota { } El nombre de este estilo,nota,indica su propósito: resaltar los párrafos que contienen fragmentos adicionales de información para los visitantes de su sitio. Una vez que crea un estilo de clase, puede aplicarlo dondequiera que aparezcan estas notas, como el segundo párrafo, en este caso. Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 85 Tutorial: Selector Dechado Figura 3-11 Un simple selector de etiquetas puede transformar por completo la apariencia de cada instancia de una etiqueta, haciendo que el estilo de todos los párrafos de texto en una página sea rápido. ¡Y en este caso, un selector de grupo hace aún más al formatear cada instancia de tres etiquetas de título diferentes! 3.Haga clic en la línea vacía entre la apertura {y el cierre} y agregue la siguiente lista de propiedades al estilo: color: #333; borde: 2px punteado #BD8110; color de fondo: #FBF8A9; margen superior: 25px; margen inferior: 35px; relleno: 20px; 86 Css3: el manual perdido www.it-ebooks.info La mayoría de estas propiedades deberían parecerle familiares ahora, pero la propiedad background-color puede ser nueva para usted. Lógicamente, añade un color al fondo del Tutorial: Selector Dechado elemento. El estilo completo debería verse así: . nota { color: #333; borde: 2px punteado #BD8110; color de fondo: #FBF8A9; margen superior: 25px; margen inferior: 35px; relleno: 20px; } Si obtiene una vista previa de la página ahora, no verá cambios. A diferencia de los selectores de etiquetas, los selectores de clase no tienen ningún efecto en una página web hasta que aplique el estilo en el código HTML. 4.En el HTML de la página, hay dos <p>etiquetas que comienzan con la palabra “Nota” dentro de <fuerte>etiquetas Para aplicar un estilo de clase a una etiqueta, simplemente agregue un atributo de clase, seguido del nombre del selector de clase; en este caso, elnotaestilo que acaba de crear. 5.Haga clic justo después de lapagen el primero <p>etiqueta y, a continuación, escriba un espacio seguido de clase="nota".El HTML ahora debería verse así (lo que acaba de escribir está en negrita): <pclase = "nota"><strong>NOTA:</strong> Ut enim ad Estar seguronodigitarclase=".nota".En CSS, el punto es necesario para indicar un nombre de estilo de clase; en HTML, está prohibido. Repita este paso para el segundo párrafo (está justo encima del <h3>etiqueta con el texto "¡Yo no!"). NotaNo hay ninguna razón por la que no pueda agregar esta clase a otras etiquetas también, no solo a <p> etiqueta. Si desea aplicar este formato a un <h2>etiqueta, por ejemplo, entonces su HTML se vería así: <h2 clase="nota">. 6.Guarde y obtenga una vista previa de la página web en un navegador. El párrafo de la nota está muy bien resaltado en la página (consulte la Figura 3-12). Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 87 Tutorial: Selector Dechado Figura 3-12 Puede realizar cambios de formato detallados con los selectores de clase. Un estilo de clase otorga a los párrafos seleccionados un formato diferente al de todos los demás párrafos de la página. El cuadro de notas distintivo que se muestra aquí utiliza un estilo de clase para destacar entre la multitud. NotaSi su página no se parece a la Figura 3-12, es posible que haya escrito mal el nombre de una propiedad o su valor. Vuelva a verificar su código con los pasos anteriores. Además, asegúrese de finalizar cada declaración—El valor de la propiedad combinación—con un punto y coma y concluye el estilo con una llave de cierre al final. Cuando su estilo no funciona correctamente, los puntos y comas faltantes y las llaves de cierre son culpables frecuentes. Creación de un selector de descendientes Sobre elselectors_basics.htmlpágina, usted aplicó elnotaclase a dos párrafos. Cada uno de esos párrafos comienza con la palabra "Nota:" en negrita; en realidad, la palabra está envuelta dentro del HTML <fuerte>etiqueta, que todos los navegadores muestran como texto en negrita. Pero, ¿qué sucede si desea formatear esas palabras en negrita en naranja brillante? Podrías crear un estilo de etiqueta para el <fuerte>etiqueta, pero eso afectaría a todos < fuerte>etiquetas en la página, y solo desea cambiar la etiqueta fuerte dentro de esos cuadros de notas. Una solución sería crear un estilo de clase—.notaTexto,por ejemplo, y aplíquelo a cada una de las etiquetas <strong> dentro de los cuadros de notas. Pero eso es mucho trabajo, y es posible que olvide aplicar la clase si tiene muchas páginas con esas notas. 88 Css3: el manual perdido www.it-ebooks.info Traducido del inglés al español - www.onlinedoctranslator.com Un método mejor es crear un selector descendiente (página 88), que apunte solo al <fuerte>etiqueta cuando está dentro de uno de estos cuadros de notas. Afortunadamente, eso es fácil de hacer. Tutorial: Selector Dechado 1.Regrese a su editor de texto y elselector_basics.htmlarchivo.Cree una nueva línea vacía para el estilo del selector descendiente. Si acaba de completar los pasos anteriores, haga clic después de la llave de cierre del . notaestilo, y luego presione Enter (Return). 2.Tipo .nota fuerte {. La última etiqueta en el selector—fuerte-es el elemento que finalmente desea formatear. En este caso, el estilo formatea el <fuerte>etiqueta solo cuando esadentro otra etiqueta con la clasenotaaplicado a ella. No tiene efecto en <fuerte>etiquetas dentro de otros párrafos, listas o etiquetas de encabezado, por ejemplo. 3.Presiona Enter, escribecolor: #FC6512;,y luego presione Enter (Return) nuevamente para crear otra línea en blanco.Finalice el estilo escribiendo el carácter de llave de cierre. El estilo terminado debería verse así: . nota fuerte { color: #FC6512; } 4.Guarde la página y obtenga una vista previa en un navegador web. La palabra "Nota:" debe aparecer en naranja en cada uno de los cuadros de notas de la página. Los selectores de descendientes se encuentran entre las herramientas CSS más poderosas. Los diseñadores web profesionales los utilizan ampliamente para apuntar a etiquetas particulares sin ensuciar el HTML con clases CSS. Aprenderá mucho más sobre los selectores de descendientes a medida que se usan a lo largo de este libro. Creación y aplicación de un selector de ID Puede aplicar selectores de clase a varios elementos de una página. Por ejemplo, anteriormente creó un archivo .notaestilo de clase y lo aplicó a dos párrafos, pero podría aplicarlo a más párrafos (o incluso a otras etiquetas) si quisiera. Los selectores de ID se ven y actúan como clases, pero solo puede aplicar una IDuna vezpor página. Como se mencionó en la página 61, muchos diseñadores web ahora evitan los selectores de ID (aprenderá exactamente por qué en la página 114). Sin embargo, eso no significa que no debas aprender a usarlos. En este ejercicio, creará un estilo que establece un ancho específico para el contenido de una página web, lo centra en el medio de la ventana del navegador y agrega una imagen de fondo decorativa a la página. Aplicarás el ID a la página <cuerpo>etiqueta para indicar un diseño de página único. 1.Regrese a su editor de texto y elselector_basics.htmlarchivo. Agregará un nuevo estilo debajo del archivo .nota fuerteestilo de clase que creó antes. Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 89 Tutorial: Selector Dechado 2.Haga clic después del corchete de cierre del estilo anterior (}), presione Entrar (Retorno) para crear una nueva línea y luego escriba #artículo {. Los selectores de ID siempre comienzan con el símbolo de almohadilla (#). El nombre del estilo indica qué tipo de página es: es común que los sitios web tengan diferentes diseños para diferentes tipos de páginas web. Por ejemplo, la página de inicio se verá diferente de una página que anuncia un producto, que puede verse diferente de una página con el texto de una publicación de blog. En este caso, identificará esta página como un "artículo" (como en un periódico) creando y aplicando una ID a <cuerpo>etiqueta. 3.Presiona Enter nuevamente y luego escribe: color de fondo: #FDF8AB; imagen de fondo: url(images/bg_page.png); fondo-repetir: repetir-y; posición de fondo: parte superior central; relleno: 0; margen: 0 automático; ancho: 760px; Aquí hay muchas propiedades, pero básicamente está agregando un color a la página, insertando una imagen en el fondo (y controlando cómo se coloca), eliminando espacio alrededor de los bordes de la ventana del navegador, configurando un ancho fijo para el contenido de la página , y centrando todo en el medio de la página. 4.Termina el estilo escribiendo la llave de cierre.Todo debería verse así: # artículo { color de fondo: #FDF8AB; imagen de fondo: url(images/bg_page.png); fondo-repetir: repetir-y; posición de fondo: parte superior central; relleno: 0; margen: 0 automático; ancho: 760px; } Al igual que con una clase, este estilo nohacernada hasta que lo apliques a la página. Por lo tanto, agregará un atributo de ID al HTML de la página, indicando dónde desea que se aplique el estilo de ID. 5.Encuentra la apertura de la página <cuerpo>etiquetar y agregarid="artículo"para que la etiqueta se vea así (sus cambios están en negrita): <cuerpoid="artículo"> Ahora el <cuerpo>la etiqueta refleja el formato definido en el #artículoestilo. Al igual que con todo lo relacionado con CSS, hay muchas formas de llegar al mismo destino: en su lugar, puede usar un estilo de clase y aplicarlo a <cuerpo>etiqueta (siempre que no la aplique más de una vez en la página; de lo contrario, cualquier otro elemento con la 90 Css3: el manual perdido www.it-ebooks.info artículola clase obtendrá el mismo formato). Incluso puedes crear un planocuerpo estilo de elemento con las mismas propiedades de formato, siempre que todas las demás páginas de su Tutorial: Selector Dechado sitio compartan estas mismas opciones de formato. Pero en este caso, está usando un selector de ID ya que el objetivo de este estilo (identificar el tipo de página) está en consonancia con la noción general de los selectores de ID. 6.Guarde la página y obtenga una vista previa en un navegador. Todo en la página (el logotipo y todo el texto) ahora tiene un ancho establecido y flota en el centro de la ventana del navegador. Incluso si cambia el tamaño de la ventana del navegador, ¡pruébelo!, el contenido permanece centrado. Además, aparece una sombra a ambos lados del contenido, gracias a la prácticaimagen de fondopropiedad (aprenderá más sobre esa genial propiedad en la página 240). Últimos retoques Para divertirse, agregará un estilo más avanzado, un selector de hermanos adyacentes que se analiza en la página 79, para dar formato al párrafo que sigue inmediatamente al primer título de la página. (Puede lograr el mismo efecto creando un estilo de clase y aplicándolo a ese párrafo, pero el selector de hermanos adyacente no requiere cambios en su HTML). 1.Regrese a su editor de texto y elselector_basics.htmlarchivo.Cree una nueva línea vacía para un nuevo estilo. Si acaba de completar los pasos anteriores, haga clic después de la llave de cierre del # artículoestilo, y luego presione Enter (Return). 2.Tipoh1+p {. Este estilo se aplicará a cualquier párrafo queinmediatamentesigue un <h1>etiqueta, en otras palabras, el primer párrafo después del título superior de la página. No se aplicará al segundo párrafo ni a los subsiguientes. Este selector proporciona una manera fácil de crear un aspecto único para un párrafo introductorio para resaltarlo visualmente y resaltar el comienzo de un artículo. 3.Presiona Enter y luego agrega la siguiente lista de propiedades al estilo: color: #FF6600; tamaño de fuente: 1,2 em; altura de línea: 140%; margen superior: 20px; Aquí está cambiando el color y el tamaño de la fuente, además de agregar un poco de espacio encima del párrafo. Elaltura de la líneapropiedad (sobre la que leerá en la página 167) controla el espacio entre líneas en un párrafo (también conocido comoprincipal). 4.Finalmente, complete el estilo presionando Enter y escribiendo la llave de cierre. El estilo de clase completado debería verse así: h1+p { color: #FF6600; tamaño de fuente: 1,2 em; Capítulo 3:SELECTORES: IDENTIFICAR QUÉ ESTILIZAR www.it-ebooks.info 91 Tutorial: Selector Dechado altura de línea: 140%; margen superior: 20px; } Si obtiene una vista previa de la página ahora, verá que el párrafo superior es de color naranja y el texto es más grande y hay más espacio entre cada línea de texto (vea la Figura 3-13). Si realmente eliminara este párrafo en el HTML, vería que el párrafo restante repentinamente sería de color naranja con texto más grande, ya que sería el nuevo hermano adyacente de <h1>etiqueta. NotaInternet Explorer 6 no comprende los selectores de hermanos adyacentes, por lo que en ese navegador, el primer párrafo se verá igual que todos los demás en la página. Y ahí lo tiene: un recorrido rápido por varios tipos de selectores. Se familiarizará con todos estos selectores (y más) a medida que avance en los tutoriales más adelante en el libro, pero a estas alturas, ya debería familiarizarse con los diferentes tipos y por qué usaría uno sobre el otro. NotaPuede ver una versión completa de la página que acaba de crear en la03_terminadocarpeta. Figura 3-13 La página realmente se ha unido. El ancho establecido, el efecto de sombra paralela y los detalles tipográficos realmente han mejorado el aspecto de la aburrida página HTML con la que comenzaste. 92 Css3: el manual perdido www.it-ebooks.info Capítulo 4 4 Ahorro de tiempo con Herencia de estilo C Los niños heredan rasgos de sus padres: color de ojos, altura, calvicie de patrón masculino, etc. A veces, heredamos rasgos de antepasados más lejanos, como abuelos o bisabuelos. Como viste en el capítulo anterior, la metáfora de las relaciones familiares también forma parte de la estructura de HTML. Y al igual que los humanos, las etiquetas HTML pueden heredar las propiedades CSS de sus antepasados. ¿Qué es la herencia? En pocas palabras, la herencia es el proceso mediante el cual algunas propiedades CSS aplicadas a una etiqueta se transmiten a etiquetas anidadas. Por ejemplo, un <p>la etiqueta siempre está anidada dentro de <cuerpo>etiqueta, por lo que las propiedades aplicadas a <cuerpo>la etiqueta es heredada por el <p> etiqueta. Supongamos que creó un estilo de etiqueta CSS (página 62) para el <cuerpo>etiqueta que establece el colorpropiedad a un rojo oscuro. Etiquetas que son descendientes de <cuerpo>etiqueta, es decir, las que están dentro de <cuerpo>etiqueta: heredará esa propiedad de color. Eso significa que cualquier texto en esas etiquetas—<h1>, <h2>, <p>,lo que sea, aparecerá en ese mismo color rojo oscuro. La herencia también funciona a través de múltiples generaciones. Si una etiqueta como <em>o <fuerte>la etiqueta aparece dentro de un <p>etiqueta, entonces el <em>y el <fuerte>las etiquetas también heredan propiedades de cualquier estilo aplicado al <cuerpo>etiqueta. NotaComo se discutió en el Capítulo 3, cualquier etiqueta dentro de otra etiqueta es unadescendientede esa etiqueta. Así que un <p> etiqueta dentro del <cuerpo>la etiqueta es descendiente de <cuerpo>,mientras que el <cuerpo>la etiqueta es unantepasadodel <p>etiqueta. Descendientes(piense en hijos y nietos) hereda propiedades de los antepasados (piense en padres y abuelos). 93 www.it-ebooks.info qué es ¿herencia? Aunque esto suene un poco confuso, la herencia es unen realidadgran ahorro de tiempo. Imagínese si no se pasaran propiedades a las etiquetas anidadas y tuviera un párrafo que contuviera otras etiquetas como <em>etiqueta para enfatizar el texto o el <un>etiqueta para añadir un enlace. Si creó un estilo que hizo que el párrafo fuera morado, de 24 px de alto, usando la fuente Arial, sería extraño si todo el texto dentro de <em>la etiqueta volvió a su estilo habitual de "navegador aburrido" (consulte la Figura 4-1). Entonces tendría que crear otro estilo para formatear el <em> etiqueta para que coincida con la apariencia de <p>etiqueta. Qué lata. Figura 4-1 La herencia permite que las etiquetas copien propiedades de las etiquetas que las rodean. Arriba: la etiqueta de párrafo se configura con una familia de fuentes, un tamaño y un color específicos. Las etiquetas dentro de cada párrafo heredan esas propiedades para que se vean como el resto del párrafo. Abajo: si la herencia no existiera, la misma página se vería como esta figura. Fíjate cómo elfuerte,ellos, yalas etiquetas dentro del párrafo conservan la familia de fuentes, el tamaño y el color definidos por el navegador. Para que se vean como el resto del párrafo, tendría que crear estilos adicionales, una gran pérdida de tiempo. 94 Css3: el manual perdido www.it-ebooks.info La herencia no solo se aplica a los estilos de etiquetas. Funciona con cualquier tipo de estilo; por lo tanto, cuando aplica un estilo de clase (consulte la página 57) a una etiqueta, las etiquetas dentro de esa etiqueta heredan las LOS LÍMITES DE herencia propiedades de la etiqueta con estilo. Lo mismo ocurre con los estilos de ID, los selectores de descendientes y los otros tipos de estilos discutidos en el Capítulo 3. Cómo la herencia agiliza las hojas de estilo Puede utilizar la herencia a su favor para optimizar sus hojas de estilo. Digamos que desea que todo el texto de una página use la misma fuente. En lugar de crear estilos para cada etiqueta, simplemente cree un estilo de etiqueta para el <cuerpo>etiqueta. (O cree un estilo de clase y aplíquelo al <cuerpo>etiqueta.) En el estilo, especifique la fuente que desea usar, y todas las etiquetas en la página heredan la fuente:cuerpo { familia de fuentes: Arial, Helvetica, sans-serif; }.Rapido y facil. También puede utilizar la herencia para aplicar propiedades de estilo a unsecciónde una pagina Por ejemplo, como muchos diseñadores web, puede usar el <div>etiqueta (página 21) para definir un área de una página como un banner, barra lateral o pie de página; o, si usa elementos HTML5, puede usar uno de los nuevos elementos de sección como <encabezado>, <aparte>, <pie de página>, o < artículo>.Al aplicar un estilo a esa etiqueta externa, puede especificar propiedades CSS particulares para todas las etiquetas dentro de esa sección de la página. Si desea que todo el texto en una barra lateral sea del mismo color, debe crear un estilo configurando elcolorpropiedad, y luego aplicarlo a la <div>, <encabezado>, <artículo>,u otro elemento de seccionamiento. Cualquier <p>, <h1>,u otras etiquetas dentro heredan el mismo color de fuente. Los límites de la herencia La herencia no es todopoderosa. Muchas propiedades CSS no se transmiten a las etiquetas descendientes en absoluto. por ejemplo, elbordeLa propiedad (que le permite dibujar un cuadro alrededor de un elemento) no se hereda, y por una buena razón. Si lo fuera, entonces cada etiqueta dentro de un elemento con elbordela propiedad también tendría un borde a su alrededor. Por ejemplo, si agregó un borde al <cuerpo>etiqueta, entonces cada lista con viñetas también tendría un cuadro alrededor, y cada elemento con viñetas en la lista también tendría un borde (Figura 4-2). NotaHay una lista de propiedades CSS en el Apéndice A, incluidos los detalles sobre cuáles se heredan. Estos son ejemplos de ocasiones en las que la herencia no se aplica estrictamente: • Como regla general, las propiedades que afectan la ubicación de los elementos en la página o los márgenes, los colores de fondo y los bordes de los elementos no se heredan. Capítulo 4:AHORRO DE TIEMPO CON LA HERENCIA DE ESTILO www.it-ebooks.info 95 LOS LÍMITES DE herencia Figura 4-2 Afortunadamente, no todas las propiedades se heredan. El borde aplicado a los párrafos en la parte superior no lo heredan las etiquetas dentro de esos párrafos. Si lo fueran, terminaría con un lío poco atractivo de cajas dentro de cajas dentro de cajas (abajo). • Los navegadores web usan sus propios estilos inherentes para formatear varias etiquetas: los encabezados son grandes y en negrita, los enlaces son azules, etc. Cuando defines untamaño de fuentepara el texto en una página y aplicarlo al <cuerpo>etiqueta, los encabezados aún aparecen más grandes que los párrafos, y <h1>las etiquetas siguen siendo más grandes que <h2>etiquetas Es lo mismo cuando aplica un color de fuente al <cuerpo>;los enlaces en la página todavía aparecen en un buen azul antiguo de navegador web. 96 Css3: el manual perdido www.it-ebooks.info NotaPor lo general, es una buena idea eliminar estos estilos de navegador incorporados, ya que facilitará el diseño de sitios que funcionen de manera consistente entre diferentes navegadores. En el Capítulo 5, en la página 115, aprenderá cómo hacerlo. Tutorial: herencia • Cuando los estilos entran en conflicto, gana el estilo más específico. En otras palabras, cuando ha aplicado específicamente propiedades CSS a un elemento, como especificar el tamaño de fuente para una lista desordenada, y esas propiedades entran en conflicto con las propiedades heredadas, como untamaño de fuenteestablecido para el <cuerpo>etiqueta: el navegador utiliza el tamaño de fuente aplicado a la etiqueta <ul>etiqueta. NotaEstos tipos de conflictos entre estilos son muy comunes, y las reglas sobre cómo un navegador los trata se denominancascada. Aprenderá sobre eso en el Capítulo 5. Tutorial: Herencia En este tutorial de tres partes, verá cómo funciona la herencia. En primer lugar, creará un selector de etiquetas simple y observará cómo pasa sus características a las etiquetas anidadas. Luego, creará un estilo de clase que use la herencia para modificar el formato de una página completa. Finalmente, verá dónde CSS hace algunas excepciones bienvenidas a la regla de herencia. Para comenzar, debe descargar los archivos del tutorial que se encuentran en el sitio web complementario de este libro enwww.sawmac.com/css3. Haga clic en el enlace del tutorial y descargue los archivos. Todos los archivos están incluidos en un archivo zip, por lo que primero deberá descomprimirlos. (Las instrucciones detalladas para descomprimir los archivos se encuentran en el sitio web). Los archivos de este tutorial se encuentran en la carpeta denominada04. Un ejemplo básico: un nivel de herencia Para ver cómo funciona la herencia, comience agregando un solo estilo de etiqueta y observe cómo afecta a las etiquetas anidadas en su interior. Las próximas dos partes de este tutorial se basarán en su trabajo aquí, así que guarde el archivo cuando haya terminado. 1.abre el archivoherencia.htmlen tu editor de texto favorito. Ahora agregue una hoja de estilo interna a este archivo. NotaEn general, es mejor usar hojas de estilo externas para un sitio web, por las razones que se analizan en el Capítulo 2 (página 48). Pero a veces es más fácil comenzar su diseño basado en CSS en una hoja de estilo interna, como en este ejemplo, y convertirlo en una hoja de estilo externa más tarde. 2.Haga clic directamente después del cierre </título>etiqueta.Presiona Enter (Return) y luego escribe <estilo>.Pulse Intro dos veces y escriba la etiqueta de cierre:</estilo>—para indicar el final de la hoja de estilo. Estas etiquetas marcan el área donde van las instrucciones CSS. Ahora, creará un estilo que se aplique a todos <p>etiquetas Capítulo 4:AHORRO DE TIEMPO CON LA HERENCIA DE ESTILO www.it-ebooks.info 97 Tutorial: herencia Nota Si está utilizando tipos de documentos HTML 4.01 o XHTML (en lugar de HTML5 como en este tutorial), deberá agregar eltipo="texto/css"atribuya a la etiqueta de estilo de apertura de esta manera: <tipo de estilo="texto/css"> 3.Haga clic en la línea vacía entre la apertura y el cierre <estilo>etiquetas y tipo pag {.Pulse Intro dos veces y escriba la llave de cierre: }. Ha creado un selector de etiquetas que se aplica a todos los <p>etiquetas en la página. 4.Haga clic entre las dos llaves y escribacolor: #FF6600;.El estilo completo debería verse así: pag { color: #FF6600; } Como has visto en los tutoriales anteriores, elcolorLa propiedad establece el color del texto. Su hoja de estilo está completa. 5.abra la página en un navegador web para obtener una vista previa de su trabajo. El color de los cuatro párrafos de la página ha cambiado de negro a naranja (consulte la Figura 4-3). Pero observe cómo esto <p>el estilo de la etiqueta afectaotroetiquetas: Etiquetasadentrodel <p>la etiqueta también cambia de color. Por ejemplo, el texto dentro de <em>y <fuerte>las etiquetas dentro de cada párrafo también cambian a naranja mientras mantienen su formato de cursiva y negrita. Este tipo de comportamiento tiene mucho sentido. Después de todo, cuando establece el color del texto en un párrafo, esperatodoel texto del párrafo, independientemente de cualquier otra etiqueta dentro de ese párrafo, sea del mismo color. Sin herencia, la creación de hojas de estilo requeriría mucho trabajo. Si el <em>, <a>,y <fuerte> las etiquetas no heredaron la propiedad de color del <p>selector de etiquetas, entonces tendría que crear estilos adicionales, tal vez selectores descendientes comopor favor yp fuerte —para formatear correctamente el texto. Sin embargo, notará que el enlace al final del primer párrafo no cambia de color, conserva su color azul de enlace. Como se mencionó en la página 97, los navegadores tienen sus propios estilos para ciertos elementos, por lo que no se aplica la herencia. Aprenderá más sobre este comportamiento en el Capítulo 5. Uso de la herencia para cambiar el estilo de una página completa La herencia también funciona con estilos de clase: cualquier etiqueta con cualquier tipo de estilo aplicado pasa propiedades CSS a sus descendientes. Con eso en mente, puede usar la herencia para realizar cambios rápidos y radicales en una página completa. 1.Regrese a su editor de texto y elherencia.htmlarchivo. Agregará un nuevo estilo debajo de <p>estilo de etiqueta que ha creado. 98 Css3: el manual perdido www.it-ebooks.info 2.Haga clic al final de la llave de cierre del selector p.Presione Entrar (Retorno) para crear una nueva línea y luego escriba .estilo de página {.Pulse Intro dos veces y escriba la llave Tutorial: herencia de cierre: }. Está a punto de crear un nuevo estilo de clase que aplicará alcuerpoetiqueta. 3.Haga clic entre las dos llaves y luego agregue la siguiente lista de propiedades al estilo: familia tipográfica: "Helvetica Neue", Arial, Helvetica, sans-serif; tamaño de fuente: 18px; color: #BD8100; ancho: 900px; margen: 0 automático; Figura 4-3 ¡Herencia en acción! Las etiquetas dentro de una etiqueta con estilo (el texto en negrita y cursiva) muestran lo mismo color aplicado a la<p> etiqueta que los rodea. Pero que es eso? El enlace al final del primer párrafo sigue siendo azul (en un círculo). Aprenderá por qué en el próximo capítulo. Todo debería verse así: . estilo de página { familia tipográfica: "Helvetica Neue", Arial, Helvetica, sans-serif; tamaño de fuente: 18px; color: #BD8100; ancho: 900px; margen: 0 automático; } Capítulo 4:AHORRO DE TIEMPO CON LA HERENCIA DE ESTILO www.it-ebooks.info 99 Tutorial: herencia Este estilo de clase completo establece una fuente, un tamaño de fuente y un color. También establece un ancho y centra el estilo en la página (viste este truco en el tutorial anterior en la página 89 para crear un área fija y centrada para el contenido de una página). 4.Encuentra la apertura <cuerpo>etiqueta (solo un par de líneas debajo del estilo que acaba de crear), y luego escribaclase = "estilo de página". La etiqueta ahora debería verse así: <clase de cuerpo = "estilo de página">.Aplica la clase a la etiqueta del cuerpo. Gracias a la herencia, todas las etiquetas dentro de la etiqueta del cuerpo (que también son todas las etiquetas visibles dentro de una ventana del navegador) heredan las propiedades de este estilo y, por lo tanto, usan la misma fuente. 5.Guarde y obtenga una vista previa de la página web en un navegador. Como puede ver en la Figura 4-4, su estilo de clase ha creado una apariencia uniforme y uniforme en todo el texto del cuerpo de la página. Tanto los encabezados como los párrafos dentro del <cuerpo>han adoptado el nuevo estilo de fuente. La página en su conjunto se ve muy bien, pero ahora mire más de cerca: el cambio de color afectó solo a los encabezados y la lista con viñetas en la página, y aunque el estilo especificaba un tamaño de fuente exacto, el texto del título tiene un tamaño diferente al del párrafos ¿Cómo supo CSS que no quería que sus encabezados tuvieran el mismo tamaño de 18 píxeles que el cuerpo del texto? ¿Y por qué no anidaron <p>Las etiquetas heredan su nuevo estilo de color del <cuerpo>¿etiqueta? Nota¿Por qué usar una clase?estilo de página—en lugar de un estilo de etiqueta—cuerpo-para redefinir el aspecto de la página? Bueno, en este caso, un estilo de etiqueta funcionaría bien. Pero, aplicando una clase al <cuerpo>La etiqueta es una excelente manera de personalizar el aspecto de las diferentes páginas de su sitio. Por ejemplo, si todas las páginas de su sitio comparten la misma hoja de estilo externa, se aplicaría un estilo de etiqueta de cuerpo a <cuerpo>etiqueta de cada página de su sitio. Pero al crear diferentes clases (o ID) puede crear un estilo diferente para el <cuerpo>etiqueta para diferentes secciones del sitio o diferentes tipos de páginas. Está viendo el aspecto "en cascada" de las hojas de estilo en cascada en acción. En este ejemplo, su <p>las etiquetas tienen dos estilos de color en conflicto: el <p>estilo de etiqueta que creó en la página 98 y el estilo de clase que creó aquí. Cuando los estilos chocan, el navegador tiene que elegir uno. Como se explicó en la página 104, el navegador usa un estilo más específico: el color que asignó explícitamente para <p>etiqueta. Aprenderá mucho más sobre las reglas de la cascada en el Capítulo 5. 100 Css3: el manual perdido www.it-ebooks.info Tutorial: herencia Figura 4-4 Un estilo aplicado a la etiqueta del cuerpo pasa sus propiedades a todas las etiquetas que ve en el navegador web, lo que facilita la aplicación de efectos de formato global a una página. Inacción de herencia La herencia no siempre se aplica, y eso no es necesariamente algo malo. Para algunas propiedades, la herencia tendría un efecto negativo en la apariencia de una página. Verás otro ejemplo de herencia.en acciónen la sección final de este tutorial. Los márgenes, el relleno y los bordes (entre otras propiedades) no los heredan las etiquetas descendientes, y no querrá que lo hagan, como verá en este ejemplo. 1.Regrese a su editor de texto y elherencia.htmlarchivo. Ampliarás lapagestilo de etiqueta que acaba de crear. 2.Localiza elpagestilo, haga clic al final de la propiedad de color (color: #FF6600;), y luego presione Enter (Return) para crear una nueva línea. Sangrará los párrafos de la página agregando un margen izquierdo. 3.Agregue tres propiedades al estilo para que se vea así: pag { color: #FF6600; margen izquierdo: 50px; relleno-izquierda: 20px; borde izquierdo: sólido 25px #BD8100; } Capítulo 4:AHORRO DE TIEMPO CON LA HERENCIA DE ESTILO www.it-ebooks.info 101 Tutorial: herencia Elmargen izquierdola propiedad sangra el párrafo 50 píxeles desde la izquierda; el rellenoLa propiedad sangra el texto del párrafo a 20 píxeles del borde. 4.Guarde el archivo y obtenga una vista previa en un navegador web. Observe que todos los <p>las etiquetas tienen una sangría de 50 px desde el borde izquierdo de la ventana del navegador y cada una tiene un borde marrón grueso a la izquierda. Sin embargo, las etiquetasadentroel <p>etiqueta (por ejemplo, el <em> etiqueta) no tienen ninguna sangría o borde adicional (vea la Figura 4-5). Este comportamiento tiene sentido: se vería raro si hubiera 50px adicionales de espacio a la izquierda de cada <em>y cada <fuerte>etiqueta dentro de un párrafo! Para ver qué pasaría si esas propiedades fueran heredadas, edite elpagselector para que quede así:p, p *,lo que lo convierte en un selector de grupo (página 84). La primera parte es solo lapagselector que ya creaste. La segunda parte- pag *-significa "seleccionar todas las etiquetas dentro de la etiqueta ap y aplicarles este estilo". (El * , o selector universal, se describe en la página 63.) Figura 4-5 Mientras que la mayoría de las propiedades se heredan (como el color), hay muchos, como márgenes, relleno y bordes, que no pasan a las etiquetas anidadas. La Referencia de propiedades de CSS en el Apéndice A indica qué propiedades se heredan y cuáles no. NotaPuede encontrar una versión completa de la página que creó en este tutorial en el04_terminadocarpeta. 102 Css3: el manual perdido www.it-ebooks.info Capítulo 5 5 Gestión de múltiples Estilos: La Cascada A A medida que crea hojas de estilo cada vez más complejas, a veces se preguntará por qué un elemento en particular en una página tiene el aspecto que tiene. La característica de herencia de CSS, como se discutió en el Capítulo 4, crea la posibilidad de que cualquier etiqueta en una página se vea potencialmente afectada por cualquiera de las etiquetas que la envuelven. por ejemplo, el <cuerpo>la etiqueta puede pasar propiedades a un párrafo, y un párrafo puede pasar sus propias instrucciones de formato a un enlace dentro del párrafo. En otras palabras, ese enlace puede heredar propiedades CSS deambosel <cuerpo>y el <p>tag—esencialmente creando una especie de Frankenstyle que combina partes de dos estilos CSS diferentes. Luego, hay ocasiones en las que los estilos chocan: la misma propiedad CSS se define en varios estilos, y todos se aplican a un elemento particular de la página (por ejemplo, un <p>estilo de etiqueta en una hoja de estilo externa y otro <p>estilo de etiqueta en una hoja de estilo interna). Cuando eso sucede, puede ver algunas cosas bastante extrañas, como texto que aparece en azul brillante, aunque haya aplicado específicamente un estilo de clase con el color de texto establecido en rojo. Afortunadamente, en realidad hay un sistema en funcionamiento: un mecanismo básico de CSS conocido como elcascada, que rige cómo interactúan los estilos y qué estilos tienen prioridad cuando hay un conflicto. NotaEste capítulo se ocupa de los problemas que surgen cuando crea hojas de estilo complejas que se basan en la herencia y en tipos de selectores más sofisticados, como los selectores descendientes (página 88). Todas las reglas son bastante lógicas, pero son tan divertidas de dominar como el código fiscal. Si eso te deprime, considera saltarte los detalles y hacer el tutorial en la página 117 para hacerte una idea de qué es la cascada y por qué es importante. O pase directamente al siguiente capítulo, que explora formas divertidas y visualmente emocionantes de dar formato al texto. Siempre puede volver a este capítulo más adelante, una vez que haya dominado los conceptos básicos de CSS. 103 www.it-ebooks.info CÓMO ESTILOS Cascada Cómo se aplican los estilos en cascada Elcascadaes un conjunto de reglas para determinar qué propiedades de estilo se aplican a un elemento. Especifica cómo un navegador web debe manejar múltiples estilos que se aplican a la misma etiqueta y qué hacer cuando las propiedades CSS entran en conflicto. Los conflictos de estilo ocurren en dos casos: a través de la herencia, cuando la misma propiedad se hereda de varios ancestros, y cuando uno o más estilos se aplican al mismo elemento (quizás aplicó un estilo de clase a un párrafo y también creó un <p>estilo de etiqueta, por lo que ambos estilos se aplican a ese párrafo). Acumulación de estilos heredados Como leyó en el último capítulo, la herencia CSS garantiza que los elementos relacionados, como todas las palabras dentro de un párrafo, incluso aquellas dentro de un enlace u otra etiqueta, compartan un formato similar. Le ahorra la creación de estilos específicos para cada etiqueta en una página. Pero dado que una etiqueta puede heredar propiedades decualquieretiqueta de antepasado: un enlace, por ejemplo, que hereda la misma fuente que su padre <p>etiqueta: determinar por qué una etiqueta en particular tiene el formato de una manera puede ser un poco complicado. Imagine una familia de fuentes aplicada a <cuerpo> etiqueta, un tamaño de fuente aplicado a un <p>etiqueta y un color de fuente aplicado a un <un>etiqueta. Cualquier <un> La etiqueta dentro de un párrafo heredaría la fuente del cuerpo y el tamaño del párrafo. En otras palabras, los estilos heredados se combinan para formar un estilo híbrido. La página que se muestra en la Figura 5-1 tiene tres estilos: uno para <cuerpo>,uno para el < p> etiqueta, y uno para el <fuerte>etiqueta. El CSS se ve así: cuerpo { familia de fuentes: Verdana, Arial, Helvetica, sans-serif; } p {color: #F30; } fuerte { tamaño de fuente: 24px; } Figura 5-1 Gracias a la herencia, es posible que múltiples estilos afecten la apariencia de una etiqueta. Aquí el< fuerte>La etiqueta tiene un color, una familia de fuentes y un tamaño de fuente específicos, aunque solo se aplica una única propiedad directamente a esa etiqueta. Las otras dos opciones de formato se heredaron de los ancestros de la etiqueta: el< cuerpo>y el <p>etiquetas 104 Css3: el manual perdido www.it-ebooks.info El <fuerte>la etiqueta está anidada dentro de un párrafo, que está dentro de <cuerpo>etiqueta. eso < fuerte>La etiqueta hereda de sus dos ancestros, por lo que hereda la propiedad de familia de fuentes CÓMO ESTILOS Cascada del cuerpo y la propiedad de color de su párrafo principal. Además, el <fuerte>La etiqueta tiene un poco de CSS aplicado directamente: un tamaño de fuente de 24 px. La apariencia final de la etiqueta es una combinación de los tres estilos. En otras palabras, el <fuerte>la etiqueta aparece exactamente como si hubiera creado un estilo como este: fuerte { familia tipográfica: Verdana, Arial, Helvetica, sans-serif; color: #F30; tamaño de fuente: 24px; } El antepasado más cercano gana En el ejemplo anterior, varias etiquetas heredadas y aplicadas se combinaron sin problemas para crear un paquete de formato general. Pero, ¿qué sucede cuando las propiedades CSS heredadas entran en conflicto? Piense en una página en la que haya establecido el color de fuente para la etiqueta del cuerpo en rojo y la etiqueta del párrafo en verde. Ahora imagine que dentro de un párrafo, hay un <fuerte>etiqueta. El <fuerte>la etiqueta hereda tanto de lacuerpoypagestilos de etiqueta, también lo es el texto dentro de <fuerte>etiqueta roja o verde? Damas y caballeros, tenemos un ganador: el verde del estilo de párrafo. Eso es porque el navegador web obedece al estilo más cercano a la etiqueta en cuestión. En este ejemplo, cualquier propiedad heredada de <cuerpo>Las etiquetas son bastante genéricas. Se aplican a todas las etiquetas. Un estilo aplicado a un <p>La etiqueta, por otro lado, se define de forma más estricta. Sus propiedades se aplican solo a <p>etiquetas y las etiquetas dentro de ellas. En pocas palabras, si una etiqueta no tiene un estilo específico aplicado, entonces, en el caso de cualquier conflicto de propiedades heredadas, gana el ancestro más cercano (vea la Figura 5-2, número 1). Aquí hay un ejemplo más, solo para asegurarse de que el concepto se asiente. Si un estilo CSS que define el color del texto se aplicara a un <mesa>etiqueta, y otro estilo que define un diferenteel color del texto se aplicó a un <td>etiqueta dentro de esa tabla, luego etiquetas dentro de esa celda de la tabla (<td>)como un párrafo, un título o una lista desordenada usaría el color de <td>estilo, ya que es el ancestro más cercano. El estilo aplicado directamente gana Llevando la regla del "ancestro más cercano" a su conclusión lógica, hay un estilo que siempre se convierte en el rey del árbol genealógico de CSS: cualquier estilo aplicado directamente a una etiqueta determinada. Supongamos que se establece un color de fuente para el cuerpo, párrafo,yetiquetas fuertes. El estilo de párrafo es más específico que el estilo de cuerpo, pero el estilo aplicado al <fuerte>la etiqueta es más específica que cualquiera de las dos. Da formato al <fuerte>etiquetas y solo el <fuerte> etiquetas, anulando cualquier propiedad conflictiva heredada de las otras etiquetas (vea la Figura 5-2, número 2). En otras palabras, las propiedades de un estilo aplicado específicamente a una etiqueta superan a cualquier propiedad heredada. Capítulo 5:GESTIÓN DE MÚLTIPLES ESTILOS: LA CASCADA www.it-ebooks.info 105 CÓMO ESTILOS Cascada Esta regla explica por qué algunas propiedades heredadas no parecen heredar. Un enlace dentro de un párrafo cuyo texto es rojo todavía aparece azul como enlace del navegador. Eso es porque los navegadores tienen su propio estilo predefinido para <un>etiqueta, por lo que no se aplicará un color de texto heredado. Figura 5-2 Así es como los navegadores web determinan qué propiedades mostrar cuando las propiedades heredadas entran en conflicto: <em>etiqueta en el primer párrafo (1) hereda la familia de fuentes y el color tanto de la<cuerpo> etiqueta y el párrafo. Pero como el cuerpo y el párrafo tienen diferentes fuentes y colores aplicados, el<em>etiqueta utiliza la fuente y el color especificados para su ancestro más cercano: el<p>etiqueta. Cuando un estilo se aplica directamente a una etiqueta, la familia de fuentes y el color se especifican para el<fuerte> etiqueta (2): los navegadores ignoran las propiedades heredadas en conflicto. NotaPuede aprender cómo superar los estilos preestablecidos para el <un>etiquete y cambie los colores de los enlaces al contenido de su corazón. Consulte la página 115. una etiqueta, muchos estilos La herencia es una forma en que una etiqueta puede verse afectada por varios estilos. Pero también es posible aplicar múltiples estilosdirectamentea una etiqueta dada. Por ejemplo, supongamos que tiene una hoja de estilo externa con un <p>estilo de etiqueta y adjúntelo a una página que tenga una hoja de estilo interna quetambiénincluye un <p>estilo de etiqueta Y solo para hacer las cosas realmente interesantes, uno de los <p>etiquetas en la página tiene un estilo de clase aplicado. Entonces, para esa etiqueta, tres estilos diferentes la formatean directamente. ¿Qué estilo, oestilos—¿Debe obedecer el navegador? La respuesta: Depende. Según los tipos de estilos y el orden en que se crean, un navegador puede aplicar uno o más de ellos a la vez. Aquí hay algunas situaciones en las que se pueden aplicar varios estilos a la misma etiqueta: • La etiqueta tiene un selector de etiquetas y un estilo de clase aplicados.Por ejemplo, un estilo de etiqueta para <h2>etiqueta, un estilo de clase llamado .titular principaly este HTML: <h2 class="leadHeadline">¡Tu futuro revelado!</h2>.Ambos estilos se aplican a este <h2> etiqueta. 106 Css3: el manual perdido www.it-ebooks.info Nota Aférrate a tu sombrero si te preocupa lo que sucede cuando estos múltiples estilos entran en conflicto; detalles seguir. • CÓMO ESTILOS Cascada El mismo nombre de estilo aparece más de una vez en la hoja de estilo.Podría haber un selector de grupo (página 84), como .titular principal,.título secundario,.titular de noticias,y el estilo de clase.titular principalen la misma hoja de estilo. Ambas reglas definen cómo cualquier elemento con una clase detitular principalaspecto. • Una etiqueta tiene aplicados tanto una clase como un estilo de ID.Tal vez sea una identificación llamada #bandera,una clase llamada .noticias,y este HTML: <div id="banner" class="noticias">. Propiedades de ambosbanderaynoticiaslos estilos se aplican a esto <div>etiqueta. • Hay más de una hoja de estilo que contiene elmismonombre de estilo adjunto a una página.Los estilos del mismo nombre pueden llegar en una hoja de estilo externa y en una hoja de estilo interna. O bien, el mismo estilo puede aparecer en varias hojas de estilo externas que están vinculadas a la misma página. • Hay selectores complejos que apuntan a la misma etiqueta.Esta situación es común cuando utiliza selectores descendientes (página 88). Por ejemplo, supongamos que tiene una etiqueta div en una página (como esta: <div id="Contenidoprincipal">),y dentro del div hay un párrafo con una clase aplicada: <p class="línea de autor">.Los siguientes selectores se aplican a este párrafo: # contenido principal p # contenidoprincipal .byline p.byline . línea de autor Si se aplica más de un estilo a un elemento en particular, entonces un navegador web combina las propiedades de todos esos estilos,siempre y cuando no entren en conflicto. Un ejemplo aclarará este concepto. Imagina que tienes un párrafo que enumera el nombre del autor de la página web, incluido un enlace a su dirección de correo electrónico. El HTML podría verse así: <p class="byline">Escrito por <a href="correo a: jean@cosmofarmer.com">Jean Graine de Pomme</a></p> Mientras tanto, la hoja de estilo de la página tiene tres estilos que dan formato al enlace: un {color: #6378df; } pa { font-weight: negrita; } . byline a { texto-decoración: ninguno; } El primer estilo convierte todo <un>etiquetas azul claro; el segundo estilo hace todo <un>etiquetas que aparecen dentro de un <p>etiqueta en negrita; y el tercer estilo elimina el subrayado de cualquier enlace que aparezca dentro de un elemento con ellínea de autorclase que se le aplica. Los tres estilos se aplican a ese muy popular <un>etiqueta, pero dado que ninguna de las propiedades es igual, no hay conflictos entre las reglas. La situación es similar al ejemplo de herencia (página 104): los estilos se combinan para crear un überstyle que contiene las tres propiedades, por lo que este enlace en particular aparece en azul claro, negrita, ysin subrayar. Capítulo 5:GESTIÓN DE MÚLTIPLES ESTILOS: LA CASCADA www.it-ebooks.info 107 ESPECIFICIDAD: ¿QUÉ ESTILO gana NotaRealmente comenzará a dolerle la cabeza cuando se dé cuenta de que el formato de este enlace en particular también puede verse afectado por las propiedades heredadas. Por ejemplo, heredaría cualquier familia de fuentes que se aplique al párrafo. Algunas herramientas pueden ayudar a resolver lo que sucede en la cascada. (Vea el recuadro en la página 110.) Especificidad: qué estilo gana El ejemplo anterior es bastante sencillo. Pero, ¿y si los tres estilos de enlace de arriba tuvieran undiferentefuente especificada para elFamilia tipográfica¿propiedad? ¿A cuál de las tres fuentes prestaría atención un navegador web? Como sabrá si ha estado leyendo detenidamente hasta ahora, la cascada proporciona un conjunto de reglas que ayudan a un navegador web a resolver cualquier conflicto de propiedad; a saber,las propiedades del estilo más específico ganan. Pero al igual que con los estilos enumerados anteriormente, a veces no está claro qué estilo es más específico. Afortunadamente, CSS proporciona una fórmula para determinar el estilo deespecificidadeso se basa en un valor asignado al selector de estilo: un selector de etiqueta, un selector de clase, un selector de ID, etc. Así es como funciona el sistema: • Vale la pena un selector de etiquetas1 punto. • Vale la pena un selector de clase10 puntos. • Vale la pena un selector de ID100 puntos. • Un estilo en línea (página 44) vale la pena1,000 puntos. NotaLas matemáticas involucradas en el cálculo de la especificidad son en realidad un poco más complicadas que las descritas aquí. Pero esta fórmula funciona en todos los casos excepto en los más extraños. Para leer cómo los navegadores web calculan realmente la especificidad, visite www.w3.org/TR/css3-selectors/#specificity. Cuanto mayor sea el número, mayor será la especificidad. Digamos que creas los siguientes tres estilos: • Un estilo de etiqueta para el <imagen>etiqueta (especificidad = 1) • Un estilo de clase llamado .destacar (especificidad = 10) • Un estilo de ID llamado #logotipo (especificidad = 100) Luego, digamos que su página web tiene este HTML: <img id="logo" class="highlight" src="logo.gif" />.Si define la misma propiedad, como la propiedad de borde, en los tres estilos, el valor del estilo de ID (#logo)siempre gana. NotaUn pseudo-elemento (como ::primera lineapor ejemplo) se trata como un selector de etiquetas y vale 1 punto. Una pseudoclase (:enlace,por ejemplo) se trata como una clase y vale 10 puntos. (Consulte la página 70 para conocer el trato sobre estas pseudo-cosas). 108 Css3: el manual perdido www.it-ebooks.info ESPECIFICIDAD: Dado que los selectores descendientes se componen de varios selectores—#contenido p,oh2 fuerte, ¿QUÉ ESTILO por ejemplo, las matemáticas se vuelven un poco más complicadas. La especificidad de un selector gana descendiente es el valor total de todos los selectores enumerados (consulte la Figura 5-3). Figura 5-3 Cuando se aplica más de un estilo a una etiqueta, un navegador web debe determinar qué estilo debe "ganar" en caso de que las propiedades del estilo entren en conflicto. En CSS, la importancia de un estilo se conoce como especificidad y está determinada por el tipo de selectores utilizados al crear el estilo. Cada tipo de selector tiene un valor diferente y, cuando aparecen varios tipos de selector en un estilo, por ejemplo, el selector descendente # pancarta p—se suman los valores de todos los selectores utilizados. NotaLas propiedades heredadas no tienen ninguna especificidad. Entonces, incluso si una etiqueta hereda propiedades de un estilo con una gran especificidad, como #bandera-esas propiedades siempre serán anuladas por un estilo que se aplique directamente a la etiqueta. El desempate: el último estilo gana Es posible que dos estilos con propiedades en conflicto tengan la misma especificidad. ("Oh, hermano, ¿cuándo terminará?" Pronto, camarada, pronto. El tutorial se acerca.) Puede ocurrir un empate de especificidad cuando tiene el mismo selector definido en dos ubicaciones. Puede que tengas un <p>selector de etiquetas definido en una hoja de estilo interna y una hoja de estilo externa. O dos estilos diferentes pueden simplemente tener valores de especificidad iguales. En caso de empate, gana el estilo que aparece en último lugar en la hoja de estilo. Aquí hay un ejemplo engañoso usando el siguiente HTML: <p class="byline">Escrito por <a class="email" href="correo a: jean@cosmofarmer. com">Jean Graine de Pomme</a></p> En la hoja de estilo de la página que contiene el párrafo y el enlace anteriores, tiene dos estilos: p .email { color: azul; } . línea de autor a { color: rojo; } Ambos estilos tienen una especificidad de 11 (10 para un nombre de clase y 1 para un selector de etiquetas) y ambos se aplican a <un>etiqueta. Los dos estilos están empatados. ¿Qué color usa el navegador para colorear el enlace en el párrafo anterior? Respuesta: Rojo, ya que es el segundo (y último) estilo de la hoja. Capítulo 5:GESTIÓN DE MÚLTIPLES ESTILOS: LA CASCADA www.it-ebooks.info 109 ESPECIFICIDAD: ¿QUÉ ESTILO gana Preguntas frecuentes Obtenga un poco de ayuda Me duele la cabeza por todo esto. ¿No hay alguna herramienta que pueda usar En el lado derecho del panel, verá los estilos aplicados al elemento. Por para ayudarme a descubrir cómo la cascada está afectando mi página web? lo general, hay un estilo "computado": la suma total de todas las Tratar de averiguar todos los entresijos de las propiedades heredadas y los estilos en conflicto confunde a muchas personas. Además, hacer los cálculos para descubrir la especificidad de un estilo no es la idea de diversión del diseñador web promedio, especialmente cuando hay hojas de estilo grandes propiedades CSS aplicadas al elemento a través de la herencia y la cascada o el "Frankenstyle" del elemento. Debajo encontrará las reglas de estilo que se aplican al elemento, enumeradas en orden de más específico (en la parte superior) a menos específico (en la parte inferior). con muchos selectores descendientes. Todos los navegadores web actuales tienen ayuda integrada en forma de inspector. La forma más rápida de inspeccionar un elemento en una página y todo el CSS que lo afecta es hacer clic con el botón derecho (Control-clic en una Mac) en el elemento (el título, el enlace, el párrafo o la imagen) y elegir Inspeccionar elemento en el menú contextual. Se abrirá un panel (generalmente debajo de la página web) que muestra el HTML de la página, con el HTML del elemento seleccionado resaltado. (Para que esto funcione en Safari, primero debe activar la opción Mostrar menú de desarrollo en la ventana Preferencias→Avanzado.) En la lista de estilos, probablemente verá algunas propiedades tachadas; esto indica que la propiedad no se aplica al elemento o que ha sido anulada por un estilo más específico. Para ver un par de breves tutoriales sobre el uso de las herramientas para desarrolladores de Chrome para analizar CSS, visitehttps:// desarrolladores. google.com/chrome-developer-tools/docs/ elements-styles yht tp: //webdesign.tut splus .com/tutor ials/work flowtutorials/faster-htmlcss-workflow-with-chromedevelopertools/. Ahora supongamos que la hoja de estilo se viera así: . línea de autor a { color: rojo; } p .email { color: azul; } En este caso, el enlace seríarojo.Desde .firma unaparece despuésp.emailen la hoja de estilo, sus propiedades ganan. ¿Qué sucede si tiene reglas en conflicto en una hoja de estilo externa e interna? En ese caso, la ubicación de sus hojas de estilo (dentro de su archivo HTML) se vuelve muy importante. Si primero agrega una hoja de estilo interna usando el <estilo>etiqueta (página 45) yentonces adjunte una hoja de estilo externa más abajo en el HTML usando el <enlace>(página 48), entonces gana el estilo de la hoja de estilo externa. (En efecto, es el mismo principio en el trabajo sobre el que acaba de terminar de leer:El estilo que aparece en último lugar gana. ) El resultado final: Sea coherente en la forma en que coloca las hojas de estilo externas. Lo mejor es enumerar primero las hojas de estilo externas y usar solo una hoja de estilo interna cuando sea absolutamente necesario aplicar uno o más estilos a una sola página. NotaCualquier hoja de estilo externa adjunta con @importarla regla debe aparecer antes de los estilos internos dentro de un < estilo>y antes de cualquier estilo en una hoja de estilo externa. Consulte la página 48 para obtener más información sobre las hojas de estilo externas e internas. 110 Css3: el manual perdido www.it-ebooks.info Controlador LA CASCADA MOMENTO DE RESOLUCIÓN DE PROBLEMAS Anulando la especificidad CSS proporciona una forma de anular la especificidad por completo. Puede Sin embargo, incluyendo!importantedespués de un valor de propiedad significa usar este truco cuando quiera asegurarse de manera absoluta y positiva de que que esa propiedad específica siempre gana. Entonces, en el ejemplo anterior, una propiedad en particular no pueda ser anulada por un estilo más específico. todos los enlaces en la página, incluidos los que están dentro de un elemento ¡Simplemente inserte!importantedespués de cualquier propiedad para con elnavegaciónclase—son verde azulado. protegerla de anulaciones basadas en especificidad. Tenga en cuenta que !importantefunciona en una propiedad individual, Por ejemplo, considere los dos estilos siguientes: no en un estilo completo, por lo que debe agregar !importantehasta el . nav a { color: rojo; } final de cada propiedad que desees hacer invencible. ¡Finalmente, a { color: verde azulado !importante; } cuando dos estilos ambos tienen!importanteaplicado a la misma Normalmente, un enlace dentro de un elemento con la clase de propiedad, el estilo más específico!importantela regla gana. navegaciónsería de color rojo desde el .nav unEl estilo es más específico que elaestilo de etiqueta Controlando la cascada Como puede ver, cuantos más estilos CSS cree, mayor será el potencial para formatear errores. Por ejemplo, puede crear un estilo de clase especificando una fuente y un tamaño de fuente en particular, pero cuando aplica el estilo a un párrafo, ¡no sucede nada! Este tipo de problema suele estar relacionado con la cascada. Aunque puede pensar que aplicar directamente una clase a una etiqueta debería aplicar las propiedades de formato de la clase, puede que no sea así si hay un estilo con mayor especificidad. Tienes un par de opciones para lidiar con este tipo de problema. Primero, puedes usar !importante ( como se describe en el cuadro anterior) para asegurarse de que una propiedadsiemprese aplica. El ! importanteSin embargo, el enfoque es un poco torpe, ya que es difícil predecir que nunca, nunca, querrá anular una regla !importantepropiedad algún día. Siga leyendo para conocer otras dos soluciones de ajuste en cascada. Cambiar la especificidad La imagen superior de la Figura 5-4 es un ejemplo de un estilo de etiqueta específico que pierde en el juego en cascada. Afortunadamente, la mayoría de las veces, puede cambiar fácilmente la especificidad de uno de los estilos en conflicto y ¡ahorrar!importantepara emergencias reales. En la Figura 5-4 (arriba), dos estilos dan formato al primer párrafo. El estilo de clase—.introducción—no es tan específico como el #barra lateral pestilo, entonces.introducciónLas propiedades de s no se aplican al párrafo. Para aumentar la especificidad de la clase, agregue el nombre de ID al estilo: # barra lateral .intro. Capítulo 5:GESTIÓN DE MÚLTIPLES ESTILOS: LA CASCADA www.it-ebooks.info 111 Controlador LA CASCADA Figura 5-4 Aunque una clase se aplica a una etiqueta específica, como el primer párrafo de la imagen superior, es posible que sus propiedades no siempre tengan efecto. En este caso, el párrafo está dentro de un<div>etiqueta con una identificación de#barra lateral, por lo que el selector descendiente#barra lateral pes más específico que el. introducciónclase. La solución: Hacer el.introducción clase más específica agregando la ID antes de ella—#sidebar p.intro—como en el ejemplo de abajo. Sin embargo, simplemente agregar selectores adicionales para hacer que las propiedades de un estilo "ganen" puede conducir a lo que se ha llamadoguerras de especificidaddonde terminas con hojas de estilo que contienen nombres de estilo muy largos y enrevesados como: #casa #principal #piso h1.De hecho, como leerá en la página 114, debe intentar evitar este tipo de estilos y tratar de mantener sus selectores lo más cortos posible. 112 Css3: el manual perdido www.it-ebooks.info NotaSi te gustan las matemáticas, el #barra lateral pstyle tiene una especificidad de 101 (100 para el ID y 1 para el selector de etiquetas), mientras que .introducciónestilo tiene una especificidad de 10 (10 puntos para un selector de clase). Como 101 es Controlador LA CASCADA mayor que 10, #barra lateral ptoma precedencia. Cambiando .introduccióna #barra lateral .introcambia su especificidad a 110. Anulación selectiva También puede afinar su diseñoselectivamenteanulando estilos en ciertas páginas. Supongamos que ha creado una hoja de estilo externa llamadaestilos.cssque ha adjuntado a cada página de su sitio. Este archivo contiene la apariencia general de su sitio: la fuente y el color de <h1>etiquetas, cómo deben verse los elementos del formulario, etc. Pero tal vez en su página de inicio, quiera el <h1>etiqueta para que se vea ligeramente diferente al resto del sitio, quizás más audaz y más grande. O el texto del párrafo debe ser más pequeño en la página de inicio, para que pueda introducir más información. En otras palabras, aún desea utilizarmayoríade los estilos de laestilos.cssarchivo, pero simplemente desea anular algunas propiedades para algunas de las etiquetas (<h1>, <p>,etcétera). Un enfoque es simplemente crear una hoja de estilo interna que enumere los estilos que desea anular. Quizas elestilos.cssarchivo tiene la siguiente regla: h1 { familia tipográfica: Arial, Helvetica, sans-serif; tamaño de fuente: 24px; color: #000; } Quieres el <h1>etiqueta en la página de inicio para que sea más grande y roja. Así que simplemente agregue el siguiente estilo en una hoja de estilo interna en la página de inicio: h1 { tamaño de fuente: 36px; color rojo; } En este caso, el <h1>La etiqueta en la página de inicio usaría la fuente Arial (de la hoja de estilo externa) pero sería roja y de 36 píxeles de alto (del estilo interno). CONSEJOAsegúrese de adjuntar la hoja de estilo externaantesla hoja de estilo interna en el <cabeza>sección del HTML. Esto garantiza que los estilos de la hoja de estilo interna prevalezcan en los casos en que la especificidad de dos estilos sea la misma, como se explica en la página 114. Otro enfoque sería crear una hoja de estilo externa más:casa.csspor ejemplo, que adjunte a la página de inicio además de laestilos.csshoja de estilo. Elcasa.cssEl archivo contendría los nombres de estilo y las propiedades que desea anular desde elestilos.css archivo. Para que esto funcione, debe asegurarse de que elhogar . CSSaparece el archivo despuéselestilos.cssarchivo en el HTML, así: <enlace rel="hoja de estilo" href="css/estilos.css"/> <enlace rel="hoja de estilo" href="css/inicio.css"/> Capítulo 5:GESTIÓN DE MÚLTIPLES ESTILOS: LA CASCADA www.it-ebooks.info 113 Controlador LA CASCADA CONSEJOOtra forma de afinar los diseños página por página es usar diferentes nombres de clase para el <cuerpo> etiqueta de diferentes tipos de páginas, por ejemplo .reseña, .story, .home—y luego cree selectores descendientes para cambiar la forma en que se ven las etiquetas en este tipo de páginas. Esta técnica se analiza en la página 67. Evitar las guerras de especificidad Como se mencionó en la página 112, muchos diseñadores web en estos días evitan los selectores de ID en favor de las clases. Una razón: los selectores de ID son muy poderosos y, por lo tanto, requieren más poder para anularlos. Esto a menudo conduce a guerras de especificidad en las que las hojas de estilo se cargan con selectores complicados e innecesariamente extensos. Este problema se explica mejor con un ejemplo. Digamos, por ejemplo, que su página tiene este fragmento de código HTML: <div id="artículo"> <p>Un párrafo</p> <p>Otro párrafo</p> <p class="special">Un párrafo especial</p> </ div> Tú decides que quieres colorear los párrafos dentro del artículo.divisiónrojo, por lo que crea un selector descendiente como este: # artículo p { color: rojo; } Pero desea que ese párrafo con la clase de especial sea azul. Si simplemente crea un selector de clase, no obtendrá lo que desea. . especial { color: azul; } Como leyó en la página 108, al determinar qué propiedades aplicar a una etiqueta, un navegador web usa una fórmula matemática simple para lidiar con los conflictos de estilo: los navegadores le dan a un selector de ID un valor de 100, a un selector de clase un valor de 10 y un selector de etiqueta un valor de 1. Porque el selector #artículo pse compone de una ID y un elemento (un total de 101 puntos de especificidad), anula el estilo de clase simple, lo que le obliga a cambiar el selector: # artículo .especial {color: azul; } Desafortunadamente, este cambio causa dos problemas más. Primero, hace que el selector sea más largo y segundo, ahora que el color azul se aplica solo cuando la clase especial aparece dentro de algo con una identificación de artículo. En otras palabras, si copia el HTML <p class="special">Un párrafo especial</p>y péguelo en otra parte de la página, ya no será azul. En otras palabras, el uso de la ID hace que sus selectores sean más largos y menos útiles. Ahora mire lo que sucede si simplemente reemplaza todas las ID con clases. El HTML anterior cambiaría a: <div id="artículo"> <p>Un párrafo</p> <p>Otro párrafo</p> <p class="special">Un párrafo especial</p> </ div> 114 Css3: el manual perdido www.it-ebooks.info Controlador LA CASCADA Y podrías cambiar el CSS a esto: . artículo p { color: rojo; } p.especial { color: azul; } El primer estilo—.artículo p—es un selector descendiente que vale 11 puntos. el segundo estilo p.especialtambién vale 11 puntos (una etiqueta y una clase) y significa "aplicar las siguientes propiedades a cualquier párrafo con la clase especial". Ahora, si corta ese HTML y lo pega en cualquier otro lugar de la página, obtendrá el estilo azul que está buscando. Este es solo un ejemplo, pero no es difícil encontrar hojas de estilo con selectores ridículamente largos como #inicio #artículo #sidebar #legal py #inicio #artículo #barra lateral # legal p.especial. Básicamente, no hay razón para usar identificaciones. No proporcionan nada que no puedas tener con un simple selector de clases o un selector de etiquetas, y su poderosa especificidad solo puede llevarte a hojas de estilo innecesariamente complejas. NotaPara una discusión más detallada de por qué debe evitar los selectores de ID, visitehttp://csswizardry . com/2011/09/when-using-ids-can-be-a-doin-in-the-class. Comenzando con una pizarra limpia Como se explicó en la página 96, los navegadores aplican sus propios estilos a las etiquetas: por ejemplo, <h1> las etiquetas son más grandes que <h2>etiquetas, y ambos están en negrita, mientras que el texto del párrafo es más pequeño y no está en negrita; los enlaces son azules y están subrayados; y las listas con viñetas están sangradas. No hay nada en el estándar HTML que defina ninguno de estos formatos: los navegadores web simplemente agregan este formato para hacer que el HTML básico sea más legible. Sin embargo, aunque los navegadores tratan todas las etiquetas aproximadamente de la misma manera, no las tratan de manera idéntica. Por ejemplo, Safari y Firefox utilizan elrellenopropiedad para sangrar las listas con viñetas, pero Internet Explorer utiliza la propiedadmargenpropiedad. Del mismo modo, encontrará diferencias sutiles en el tamaño de las etiquetas entre los navegadores y un uso totalmente confuso de los márgenes entre los navegadores web más comunes. Debido a estas inconsistencias, puede encontrarse con problemas en los que, por ejemplo, Firefox agrega un margen superior, mientras que Internet Explorer no lo hace. Estos tipos de problemas no son culpa suya, se derivan de las diferencias en los estilos de navegador integrados. Para evitar inconsistencias entre navegadores, es una buena idea comenzar una hoja de estilo desde cero. En otras palabras, borre el formato del navegador incorporado y proporcione el suyo propio. El concepto de borrar el estilo del navegador se llamaRestablecimiento de CSS. Esta sección le ofrece una introducción práctica. En particular, hay un conjunto básico de estilos que debe incluir en la parte superior de sus hojas de estilo. Estos estilos establecen una línea de base para las propiedades que comúnmente se tratan de manera diferente en los navegadores. Aquí hay un reinicio de CSS básico: Capítulo 5:GESTIÓN DE MÚLTIPLES ESTILOS: LA CASCADA www.it-ebooks.info 115 Controlador LA CASCADA html, cuerpo, div, lapso, objeto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acrónimo, dirección, grande, citar, código, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td, artículo, aparte, lienzo, detalles, incrustar, figura, figcaption, pie de página, encabezado, hgroup, menú, navegación, salida, ruby, sección, resumen, tiempo, marca, audio, video { margen: 0; relleno: 0; borde: 0; tamaño de fuente: 100%; alineación vertical: línea de base; } artículo, aparte, detalles, figcaption, figura, pie de página, encabezado, hgroup, menú, navegación, sección { bloqueo de pantalla; } cuerpo { altura de línea: 1.2; } viejo { relleno izquierdo: 1,4 em; estilo de lista: decimal; } ul { relleno-izquierda: 1.4em estilo de lista: cuadrado; } mesa { borde-colapso: colapso; espaciado de borde: 0; } NotaEl restablecimiento de CSS anterior está adaptado del conocido e influyente restablecimiento de CSS de Eric Meyer, que puede encontrar enhttp://meyerweb.com/eric/tools/css/reset. El primer estilo es un selector de grupo muy largo (página 84) que toma las etiquetas más comunes y los pone a cero—eliminar todo el relleno y los márgenes, configurar el tamaño del texto base al 100 % y eliminar el formato de texto en negrita. Este paso hace que sus etiquetas se vean bastante idénticas (vea la Figura 5-5), pero ese es el punto: desea comenzar desde cero y luego agregar su propio formato para que todos los navegadores apliquen una apariencia uniforme a su HTML. El segundo seleccionador (artículo, aparte, detalles…) es otro selector de grupo que ayuda a los navegadores más antiguos a mostrar correctamente las nuevas etiquetas HTML5. El tercer selector (cuerpo) 116 Css3: el manual perdido www.it-ebooks.info estilo establece una coherenciaaltura de la línea (espacio entre líneas en un párrafo). Aprenderás sobre elaltura de la líneapropiedad en el próximo capítulo. TUTORIAL: EL CASCADA EN acción NotaNo es necesario que escriba todo este código usted mismo. Encontrarás un archivo llamadorestablecer.cssen el05carpeta de tutoriales enwww.sawmac.com/css3que contiene un archivo básico de restablecimiento de CSS. Simplemente copie los estilos de este archivo y péguelos en sus propias hojas de estilo. Otro enfoque para los reinicios (discutido en la página 551) está disponible en los archivos del tutorial del Capítulo 17 dentro del17carpeta. Los estilos cuarto y quinto (elviejoyulestilos de etiqueta) establezca un margen izquierdo y un estilo consistentes (la página 173 presenta el estilo de la lista), y el último estilo facilita la adición de bordes a las celdas de la tabla (aprenderá por qué este estilo es útil en la página 380). Tutorial: La cascada en acción En este tutorial, verá cómo interactúan los estilos y cómo a veces pueden entrar en conflicto para crear resultados inesperados. Primero, verá una página básica que tiene los estilos de restablecimiento de CSS mencionados anteriormente, además de un par de otros estilos que proporcionan un diseño simple. Luego, creará dos estilos y verá cómo se heredan algunas propiedades y cómo la cascada invalida otras. Luego, verá cómo la herencia afecta las etiquetas en una página y cómo un navegador resuelve cualquier conflicto de CSS. Finalmente, aprenderá a solucionar problemas creados por la cascada. Para comenzar, debe descargar los archivos del tutorial que se encuentran en el sitio web complementario de este libro enwww.sawmac.com/css3. Haga clic en el enlace del tutorial y descargue los archivos. Todos los archivos están incluidos en un archivo zip, por lo que primero deberá descomprimirlos. (Visite el sitio web para obtener instrucciones detalladas sobre cómo descomprimir los archivos). Los archivos de este tutorial se encuentran dentro de la carpeta denominada05. Restablecimiento de CSS y estilo desde cero Primero, eche un vistazo a la página en la que estará trabajando. 1.En un navegador web, abra el archivo llamadocascada.htmlubicado en el05 carpeta del tutorial (consulte la Figura 5-5). La página no parece gran cosa: dos columnas, una con fondo azul y mucho texto con el mismo aspecto. Ya se han aplicado algunos estilos a este archivo, así que abra el CSS en un editor de texto y eche un vistazo. 2.Con su editor de texto o página web favorito, abra el archivoestilos.cssubicado en el05carpeta. Este archivo es la hoja de estilo externa que elcascada.htmlusos del archivo. Ya tiene varios estilos: el primer grupo son los estilos de restablecimiento de CSS discutidos en la página anterior. Eliminan los estilos básicos del navegador, por lo que actualmente todo el texto tiene el mismo aspecto. (Pronto creará sus propios estilos para que esta página se vea genial). Capítulo 5:GESTIÓN DE MÚLTIPLES ESTILOS: LA CASCADA www.it-ebooks.info 117 TUTORIAL: EL CASCADA EN acción Figura 5-5 Los estilos básicos de "restablecimiento de CSS" en esta página eliminan las sutiles diferencias en cómo los diferentes navegadores muestran las etiquetas HTML básicas. También eliminan cualquier diferencia entre cómo se ven las etiquetas. Su trabajo es tomar este lienzo vacío y diseñar las etiquetas para que se vean como usted quiere. Los dos últimos estilos: los estilos de clase.principaly .barra lateral—cree las dos columnas que ve en la Figura 5-5. El HTML se divide en dos etiquetas <div>, cada una con su propia clase. Los estilos de clase aquí esencialmente colocan los dos divs para que aparezcan uno al lado del otro como columnas (aprenderá cómo controlar el diseño de la página y crear columnas en la Parte 3). Primero agregará un par de estilos para mejorar la apariencia básica de la página y su título superior. 3.En elestilos.cssarchivo, agregue estos dos estilos en la parte inferior de la hoja de estilo después del último } del .barra lateralestilo: cuerpo { color: #B1967C; familia tipográfica: "Palatino Linotype", Baskerville, serif; acolchado superior: 115px; fondo: #CDE6FF url(images/bg_body.png) repetir-x; ancho: 800px; margen: 0 automático; } h1 { tamaño de fuente: 3em; familia de fuentes: "Arial Black", Arial, sans-serif; margen inferior: 15px; } 118 Css3: el manual perdido www.it-ebooks.info El primer estilo agrega una imagen de fondo y un color a la página, y también establece un ancho fijo para la página. Si guarda este archivo y obtiene una vista previa delcascada.html en TUTORIAL: EL CASCADA EN acción un navegador web (vea la Figura 5-6), notará que estos atributos no son heredados por las otras etiquetas; la misma imagen, por ejemplo, no se repite detrás de las etiquetas de encabezado o párrafo. ElFamilia tipográficaycolorLas propiedades, por otro lado, se heredan, por lo que otras etiquetas en la página ahora usan esa fuente y tienen un color marrón. Sin embargo, verá que, aunque el título superior tiene el mismo color que el resto del texto de la página, utiliza una fuente diferente: aquí está la cascada en acción. Elh1estilo de etiqueta no tiene un color asignado, por lo que el encabezado hereda el color marrón aplicado al cuerpoetiqueta. Pero, desde elh1estilo de etiqueta especifica una familia de fuentes, anula la fuente heredada delcuerpoestilo de etiqueta Figura 5-6 La herencia y la cascada en acción: la<h1>La etiqueta en la parte superior de esta página hereda su color de fuente del estilo de la etiqueta del cuerpo, pero obtiene su tamaño y familia de fuentes del estilo específico.h1estilo de etiqueta Crear un estilo híbrido En este ejemplo, creará dos estilos. Un estilo da formato a todos los títulos de segundo nivel de la página; y otro estilo más específico reformatea solo esos encabezados en la columna principal más grande de la página. 1.En elestilos.cssarchivo, agregue el siguiente estilo al final de la hoja de estilo: h2 { tamaño de fuente: 2,2 em; color: #AFC3D6; margen inferior: 5px; } Capítulo 5:GESTIÓN DE MÚLTIPLES ESTILOS: LA CASCADA www.it-ebooks.info 119 TUTORIAL: EL CASCADA EN acción Este estilo simplemente cambia el color del texto y aumenta el tamaño delh2etiqueta y agrega un poco de espacio debajo de ella. Si ve el archivo en un navegador web, verá que elh2etiquetas en la columna principal y lah2etiqueta en la barra lateral derecha ahora se parecen. A continuación, creará un estilo para dar formato únicamente a los títulos de segundo nivel en la columna principal. 2.Regrese al editor de su página web y alestilos.cssarchivo, haga clic directamente después del final del nuevo <h2>estilo de etiqueta y presione Entrar (Retorno) para crear una línea vacía.Agregue el siguiente estilo: . principal h2 { color: #E8A064; borde inferior: 2px blanco sólido; fondo: url(images/bullet_flower.png) sin repetición; relleno: 0 0 2px 80px; } Acabas de crear un selector descendiente que da formato a todos los <h2>etiquetas que aparecen adentrode una etiqueta con una clase deprincipalaplicado a ella. Las dos columnas de texto de esta página están encerradas entre <div>etiquetas con diferentes nombres de clase aplicados a ellos. La columna más grande de la izquierda tiene la claseprincipal,por lo que este estilo en particular solo se aplicará a <h2>etiquetas en ese div. Este estilo es similar al que creó en el tutorial del Capítulo 2 en el Paso 17 en la página 52: agrega un subrayado y un ícono de flor simple al título. Este estilo también especifica un color naranja para el texto. 3.Guarde la hoja de estilo y obtenga una vista previa de la página una vez más en un navegador web (vea la Figura 5-7). Notará que todas las etiquetas del encabezado 2 (las dos en la columna principal y una en la barra lateral) tienen el mismo tamaño, pero las dos en la columna principal también tienen el ícono de subrayado y flor. Porque el .principal h2el estilo es más específico que el simpleh2estilo, si hay algún conflicto entre los dos estilos, elcolorpropiedad, en este caso—el . principal h2las propiedades ganan. Entonces, aunque los títulos de segundo nivel en la columna principal obtienen un color de texto azul delh2estilo, el color naranja de los más específicos.principal h2el estilo gana. Sin embargo, desde el .principal h2estilo no especifica un tamaño de fuente o un margen inferior, los títulos en la columna principal obtienen esas propiedades delh2estilo. superación de conflictos Debido a que las propiedades de CSS a veces entran en conflicto cuando se aplican varios estilos a la misma etiqueta, a veces encontrará que sus páginas no se ven exactamente como las planeó. 120 Css3: el manual perdido www.it-ebooks.info TUTORIAL: EL CASCADA EN acción Figura 5-7 Una historia de dos estilos: tanto elh2y .principalh2 estilos se aplican a los títulos de segundo nivel en el columna izquierda de esta página. sin embargo, el.principal h2El estilo se aplica solo a los titulares dentro de la columna principal (izquierda). Además, dado que ese estilo es más poderoso que el básico h2estilo de etiqueta, anula cualquier conflicto entre los dos estilos, en este caso, usando un color de texto naranja en lugar del color azul delh2estilo de etiqueta Cuando eso suceda, deberá trabajar un poco para averiguar por qué y reajustar sus selectores de CSS para asegurarse de que la cascada funcione para producir los resultados que desea. 1.Regrese al editor de su página web y alestilos.cssarchivo. Ahora creará un nuevo estilo para formatear solo los párrafos en la columna principal de la página. 2.Agregue el siguiente estilo al final de la hoja de estilo: . p principal { color: #616161; familia tipográfica: "Palatino Linotype", Baskerville, serif; tamaño de fuente: 1,1 em; altura de línea: 150%; margen inferior: 10px; margen izquierdo: 80px; } Este estilo cambia el color, el tamaño y la fuente del texto, extiende las líneas del texto (elaltura de la líneapropiedad) y ajusta los márgenes inferior e izquierdo de los párrafos. Capítulo 5:GESTIÓN DE MÚLTIPLES ESTILOS: LA CASCADA www.it-ebooks.info 121 TUTORIAL: EL CASCADA EN acción La página se vería mejor si resaltara el párrafo inmediatamente después del título; hacerlo más grande y más audaz puede ayudar a crear un mensaje más poderoso. La forma más fácil de diseñar solo ese párrafo es crear un estilo de clase y aplicarlo a ese párrafo. 3.Agregue un último estilo al final de la hoja de estilo: . introducción { color: #6A94CC; familia tipográfica: Arial, Helvetica, sans-serif; tamaño de fuente: 1,2 em; margen izquierdo: 0; margen inferior: 15px; } Este estilo cambia el color, la fuente y el tamaño, y ajusta un poco los márgenes. Todo lo que tienes que hacer es aplicar la clase al HTML. 4.abre elcascada.htmlarchivo en el editor de su página web.Localice el <p>etiqueta que aparece después de <h1>CSS: El Manual Perdido</h1>y directamente debajo <clase div="principal">,y luego agregue el siguiente atributo de clase: <p clase="introducción"> 5.Obtenga una vista previa de la página en un navegador web. Y... el párrafo no ha cambiado por completo. ¿Lo que da? Siguiendo las reglas de la cascada, . introducciónes un selector de clase básico, mientras que .p principales un selector descendiente compuesto por una clase y un nombre de etiqueta. Estos se suman para crear un estilo más específico, por lo que sus propiedades de estilo anulan cualquier conflicto entre él y el . introducciónestilo. Para hacer el .introduccióntrabajo de estilo, necesitas darle un poco de jugo haciendo que su selector sea más poderoso. 6.Volver a laestilos.cssarchivo en el editor de su página web y cambie el nombre del estilo de .introducciónap.introducción Asegúrese de que no haya espacio entre lospagy .introducciónBásicamente has creado un lazo—.p principales una clase y un selector de etiqueta, yp.introducciónes una etiqueta y una clase. Ambos tienen un valor de especificidad de 11, pero debido a que p.introducciónaparece después.p principalen la hoja de estilo, gana la batalla y sus propiedades se aplican al párrafo. (Podrías haber creado un estilo aún más específico). principal . introducción—para superar el conflicto.) 7.Obtenga una vista previa de la página en un navegador web (consulte la Figura 5-8). ¡Voila! El párrafo cambia a azul, con texto más grande, una fuente diferente y sin margen izquierdo. Si no tuviera una comprensión clara de la cascada, estaría rascándose la cabeza preguntándose por qué ese estilo de clase no funcionó la primera vez. 122 Css3: el manual perdido www.it-ebooks.info En este y los cuatro capítulos anteriores, ha cubierto los conceptos básicos de CSS. Ahora, en la segunda parte, es hora de tomar ese conocimiento y aplicarlo a desafíos de diseño reales: hacer que las páginas web TUTORIAL: EL CASCADA EN acción se vean geniales. Figura 5-8 Incluso en una página simple como esta, con solo un puñado de estilos, el aspecto de cualquier etiqueta suele ser una combinación de propiedades de varios estilos. Capítulo 5:GESTIÓN DE MÚLTIPLES ESTILOS: LA CASCADA www.it-ebooks.info 123 www.it-ebooks.info PARTE CSS aplicado CAPÍTULO 6: Dar formato al texto CAPÍTULO 7: Márgenes, relleno y bordes CAPÍTULO 8: Adición de gráficos a páginas web CAPÍTULO 9: Mejorar la navegación de su sitio CAPÍTULO 10: Transformaciones, transiciones y animaciones CSS CAPÍTULO 11: Formateo de tablas y formularios www.it-ebooks.info 2 www.it-ebooks.info Capítulo 6 6 Dar formato al texto La mayoría de los sitios web todavía dependen de las palabras para transmitir sus mensajes. Claro, METRO a la gente le gusta mirar fotos, clips de películas y animaciones, pero es el material de lectura lo que hace que regresen. La gente está ávida de actualizaciones de Facebook, noticias, chismes, artículos instructivos, recetas, preguntas frecuentes, chistes, listas de información e incluso tweets de 140 caracteres. Con CSS, puede, ydebería—haga que sus titulares y cuerpo de texto capten la atención de los visitantes de manera tan convincente como cualquier foto. CSS ofrece una poderosa variedad de opciones de formato de texto, que le permiten asignar fuentes, colores, tamaños, espacios entre líneas y muchas otras propiedades que pueden agregar impacto visual a los títulos, listas con viñetas y párrafos de texto antiguos regulares (vea la Figura 6- 1). Este capítulo revela todo y luego termina con un tutorial en el que puede practicar cómo ensamblar estilos de texto CSS y ponerlos a trabajar en una página web real. Uso de fuentes Lo primero que puede hacer para que el texto de su sitio web se vea más emocionante es aplicar diferentes fuentes a los títulos, párrafos y otros elementos escritos en sus páginas. Para aplicar una fuente a un estilo CSS, utiliza elFamilia tipográficapropiedad y especifique la fuente que desea utilizar. Por ejemplo, supongamos que desea utilizar la fuente Arial para los párrafos de una página. Puedes crear unpagestilo de etiqueta y use elFamilia tipográficapropiedad como esta: pag { familia tipográfica: Arial; } 127 www.it-ebooks.info USO DE FUENTES Figura 6-1 Una buena tipografía web hace que los sitios sean fáciles de leer y agradables de ver. El uso de demasiadas fuentes o demasiadas florituras tipográficas a menudo conduce a páginas web confusas y difíciles de entender (arriba). El uso de diferentes tamaños de letra, opciones de estilo sutiles y solo un par de variaciones de fuente hace que una página sea fácil de escanear y divertida de leer (abajo). Originalmente, elFamilia tipográficaLa propiedad solo funcionaba si los visitantes de su sitio tenían la misma fuente instalada en sus computadoras. En otras palabras, usando el ejemplo anterior, si alguien que visita su sitio no tiene la fuente Arial en su computadora, los párrafos de la página se mostrarán con la fuente predeterminada del navegador web (generalmente alguna variante de Times 128 Css3: el manual perdido www.it-ebooks.info Nuevo Romano). Debido a esto, los diseñadores web se limitaron a un puñado de fuentes que vienen preinstaladas en la mayoría de las computadoras. USO DE FUENTES Más recientemente, los navegadores web comenzaron a admitirfuentes web: fuentes que el navegador descarga y usa mientras ve su sitio. Las fuentes web utilizan elFamilia tipográfica propiedad también, pero requiere un comando CSS adicional llamado @Perfil delanterodirectiva, que indica a un navegador web que descargue la fuente especificada. Las fuentes web abren muchas posibilidades de diseño emocionantes, lo que le permite elegir entre una gran variedad de tipos de letra. Pero, como aprenderá en la página 132, también vienen con su propio conjunto de desafíos. En otras palabras, como diseñador web, puede optar por seguir con el método de fuente probado y verdadero (seleccionar fuentes del conjunto básico instalado en la mayoría de las computadoras) o usar fuentes web para una mayor elección de diseño (a costa de más trabajo). ). Tampoco estás limitado a un enfoque u otro. Muchos diseñadores web combinan las dos, utilizando fuentes estándar en algunos casos (como el texto del cuerpo principal de una página) y fuentes web en otros casos (para crear títulos llamativos, por ejemplo). Elegir una fuente común Cuando usas elFamilia tipográficapropiedad para especificar una fuente, los visitantes de su sitio no necesariamente verán la fuente que elija; deben tenerla instalada en sus computadoras o, en el caso de las fuentes web, descargar temporalmente la fuente para ver el sitio. Debido a que no siempre puede saber si su fuente preferida está disponible para un visitante en particular, es una práctica común especificar no solo su fuente principal, sino también un par de opciones de respaldo. Si la computadora de su espectador tiene su fuente de primera elección, entonces eso es lo que verá. Pero cuando la primera fuente no está instalada, el navegador busca en la lista hasta que encuentra una fuente que sí lo está. La idea es especificar una lista de fuentes de aspecto similar que son comunes a una variedad de sistemas operativos, así: familia tipográfica: Arial, Helvetica, sans-serif; En este ejemplo, un navegador web primero busca si la fuente Arial está instalada; si es así, entonces se usa esa fuente; si no, el navegador luego busca Helvetica, y si no está instalada, finalmente se conforma con una fuente genérica: sans-serif. Cuando enumera un tipo de fuente genérico (como sans-serif o serif), el navegador del espectador puede elegir la fuente real. Pero al menos puedes definir su carácter básico. NotaEn la vida real, cuando pone en acción una propiedad CSS, debe, por supuesto, incluir todas las demás necesidades de un bloque de declaración de estilo completo y una hoja de estilo, como se describe en el Capítulo 2:p { familia de fuentes: Arial, Helvetica, sans-serif; },Por ejemplo. Cuando ves ejemplos comofamilia tipográfica: Arial, Helvetica, sans-serif;recuerde que esa es solo la propiedad aislada, destilada para su beneficio de lectura de libros. Además, si el nombre de la fuente se compone de más de una palabra, debe encerrarlo entre comillas: familia de fuentes: "Times New Roman", Times, serif; Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 129 USO DE FUENTES Aquí hay algunas combinaciones de uso frecuente de fuentes comúnmente instaladas organizadas por tipo de fuente, incluido un tipo de fuente genérico al final de cada lista. FUENTES SERIF Las fuentes serif son mejores para pasajes largos de texto, ya que se cree ampliamente que las serif, esos pequeños "pies" al final de los trazos principales de una letra, guían suavemente la vista de una letra a otra, lo que hace que el texto sea más fácil de leer. Ejemplos de fuentes serif son Times, Times New Roman y Georgia. • “Times New Roman”, Times, serif • Georgia, “Times New Roman”, Times, serif • Baskerville, “Palatino Linotype”, Times, serif • “Texto Hoefler”, Garamond, Times, serif Ejemplos de estas fuentes se encuentran en la Figura 6-2. Figura 6-2 Las fuentes no siempre se muestran igual en Mac (izquierda) y Windows (derecha). Los dos sistemas vienen con diferentes fuentes incorporadas. Además, el suavizado, que hace que el texto en pantalla se vea más suave, es mejor en Mac que en Windows. Windows incluye un tecnología llamada Clear Type, que puede mejorar la apariencia del texto en una pantalla. La calidad del texto en Windows depende de la configuración de Clear Type de su computadora con Windows. tiene. Puede obtener más información sobre Clear Type en www.microsoft.com/ tipografía/tipo claro. FUENTES SANS-SERIF Las fuentes sans-serif se utilizan a menudo para los titulares, gracias a su apariencia limpia y sencilla. Los ejemplos de fuentes sans-serif incluyen Arial, Helvetica y Verdana. El texto de este libro está escrito en fuente sans-serif. • Arial, Helvética, sans-serif • Verdana, Arial, Helvética, sans-serif 130 Css3: el manual perdido www.it-ebooks.info • Ginebra, Arial, Helvetica, sans-serif USO DE FUENTES • Tahoma, “Lúcida Grande”, Arial, sans-serif • “Trebuchet MS”, Arial, Helvética, sans-serif • “Century Gothic”, “Gill Sans”, Arial, sans-serif En la Figura 6-3 se muestran ejemplos de fuentes sans-serif. Figura 6-3 Fuentes sans-serif en Mac (izquierda) y Windows (derecha). Algunas personas creen que solo debe usar fuentes sansserif en las páginas web porque piensan que los delicados trazos decorativos de las fuentes serif no se muestran bien en la resolución gruesa de una pantalla de computadora. Al final, tu juicio estético es tu mejor guía. Elige las fuentes que creas que se ven mejor. FUENTES MONOESPACIADAS Y DIVERTIDAS Las fuentes monoespaciadas a menudo se usan para mostrar código de computadora como los fragmentos de CSS que ve a lo largo de este libro. Cada letra en una fuente monoespaciada tiene el mismo ancho (como las que se usan en las máquinas de escribir manuales). • “Courier New”, Courier, monoespaciado • “Consola Lucida”, Mónaco, monoespacio • “Luz de placa de cobre”, “Luz gótica de placa de cobre”, serif • “Marker Felt”, “Comic Sans MS”, fantasía En la Figura 6-4 se muestran ejemplos de estas listas de fuentes. FUENTES ADICIONALES A CONSIDERAR Hay literalmente miles de fuentes, y cada sistema operativo viene con muchas más fuentes de las que se enumeran aquí. Sin embargo, aquí hay algunas fuentes que son muy comunes tanto en Mac como en PC, por lo que es posible que desee probarlas: • Arial Negro • Arial Narrow • Impacto Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 131 UTILIZANDO LA WEB FUENTES Figura 6-4 Fuentes monoespaciadas en Mac (izquierda) y Windows (derecha). Courier es la fuente monoespaciada más común, pero está lejos de limitarse a ella. Lucida Console es muy común en Windows y Mac, y Monaco está instalado en cada Mac. Ojo con Arial Black e Impact: Solo tienen un único peso y no incluyen una versión en cursiva. En consecuencia, si utiliza estas fuentes, asegúrese de configurar el peso de fuentey elEstilo de fuente (en la página 141) a la normalidad. De lo contrario, si el texto está en negrita o cursiva, el navegador hará su mejor intento (léase: feo) de cómo debería verse el texto. Uso de fuentes web La forma tradicional de usar fuentes en CSS es sencilla: solo especifica la fuente que deseas usando elFamilia tipográficapropiedad. Sin embargo, está limitado a las fuentes que sus visitantes probablemente hayan instalado en sus computadoras. Afortunadamente, como se mencionó anteriormente, todos los principales navegadores ahora admiten fuentes web. Con las fuentes web, los navegadores en realidad descargan la fuente de un servidor web y la usan para mostrar texto en la página web. La parte CSS de las fuentes web es bastante básica y requiere solo dos comandos CSS: • El @Perfil delanteroLa directiva es responsable de decirle a un navegador web tanto el nombre de la fuente como de dónde descargar la fuente. Aprenderá cómo funciona este comando CSS en la página 137, pero por ahora tenga en cuenta que así es como le dice a un navegador que descargue la fuente. • ElFamilia tipográficase usa con fuentes web de la misma manera que las fuentes ya instaladas descritas en la página 127. En otras palabras, una vez que @Perfil delantero directiva le indica al navegador que descargue la fuente, luego puede asignar esa fuente a cualquier estilo CSS usando elFamilia tipográficapropiedad. En teoría, las fuentes web no son tan difíciles de usar. Sin embargo, cuando profundice en los detalles, deberá comprender algunos requisitos únicos para usarlos correctamente. 132 Css3: el manual perdido www.it-ebooks.info NotaGoogle ofrece un método realmente fácil de usar fuentes web. La página 146 entra en todos los detalles. UTILIZANDO LA WEB FUENTES Tipos de archivos de fuentes Lo crea o no, Internet Explorer ha tenido soporte para fuentes web desde la versión 5 (¡lanzada hace más de 12 años!). Desafortunadamente, requirió un método único y difícil para crear formato de fuente. Es decir, no podría simplemente tomar una fuente normal de su computadora, colocarla en un servidor web y listo. En su lugar, necesitaba tomar una fuente normal y convertirla al formato EOT (tipo abierto incrustado). Eso sigue siendo cierto para las versiones hasta IE 8. Todavía hay otros formatos de fuentes que se utilizan para las fuentes web, algunas de las cuales funcionan en algunos navegadores pero no en otros. Para asegurarse de que la mayor cantidad de visitantes de su sitio puedan disfrutar de las fuentes que especifique, deberá proporcionar esas fuentes en una variedad de formatos (encontrará los detalles en la página 135). Aquí hay una lista de los diferentes tipos de fuentes y en qué navegadores funcionan. • EoT.Las fuentes Open Type incrustadas solo funcionan en Internet Explorer. Necesita una herramienta especial para convertir una fuente normal a formato EOT, pero sitios como FontSquirrel (página 135) pueden hacerlo por usted. • Tipo verdadero y tipo abierto.Si busca en la carpeta Fuentes de su computadora, probablemente encontrará fuentes .ttf (True Type) o .otf (Open Type). Este es el formato de fuente más comúnmente utilizado para fuentes de computadora. Puede utilizarlos para procesamiento de textos y autoedición, así como para páginas web. Este tipo de fuente es ampliamente compatible con la mayoría de los navegadores web: IE 9 y posteriores, Firefox, Chrome, Safari, Opera, iOS Safari (versión 4.2 y posteriores), Android y Blackberry Browser. • WoFF.Los archivos Web Open Font Format son un formato de fuente más reciente diseñado específicamente para la Web. Las fuentes WOFF son básicamente versiones comprimidas de las fuentes TrueType o Open Type. Eso significa que las fuentes WOFF son generalmente más pequeñas en tamaño de archivo y se descargan más rápidamente que otras fuentes. El formato WOFF también tiene una amplia compatibilidad con navegadores, incluidos IE 9 y posteriores, Firefox, Chrome, Safari, Opera, navegador Blackberry e iOS Safari versión 5 y posteriores. La excepción más notable es Android. En otras palabras, si solo usa fuentes WOFF, los visitantes en dispositivos móviles Android o que usen IE 8 no podrán descargar ni mostrar sus fuentes. • SVG.El formato gráfico vectorial escalable no es un formato de fuente per se. En realidad, es una forma de crear gráficos vectoriales (gráficos que se pueden escalar sin perder calidad). El soporte para fuentes SVG es mucho más limitado. Ni Internet Explorer ni Firefox son compatibles con SVG. Otro problema con SVG es que produce archivos que a menudo tienen el doble del tamaño de TrueType y tres veces el tamaño de las fuentes WOFF. El único beneficio real de SVG es que es el único formato de fuente que entienden las versiones anteriores de iOS que ejecutan Safari versión 4.1 o anterior. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 133 UTILIZANDO LA WEB FUENTES Afortunadamente, no tiene que seleccionar solo un tipo de fuente e ignorar todos los demás navegadores. Como leerá en la página siguiente, puede (y generalmente lo hará) especificar múltiples formatos y dejar que el navegador descargue el que funcione para él. Además, puede descargar una fuente que ya se haya convertido a estos cuatro formatos, o incluso convertir una fuente True Type normal a estos múltiples formatos. NotaUn solo archivo de fuente contiene solo un peso y estilo para esa fuente. En otras palabras, si desea que el texto esté en negrita, cursiva o negrita y cursiva, debe descargar archivos de fuentes independientes para cada variación de la fuente. Algunas fuentes, especialmente las fuentes de visualización divertidas, solo incluyen una variante y se usan mejor para títulos o texto donde no necesitará versiones en cursiva o negrita. Consulte la página 129 para obtener más información sobre los diferentes pesos y estilos de fuente. Problemas legales con las fuentes web El segundo obstáculo para el uso de fuentes web es un problema legal. Las personas y las empresas crean y venden estas fuentes, al igual que otro software, para ganarse la vida. Cuando carga una fuente TrueType en su servidor web para que los visitantes la usen mientras miran su sitio, cualquiera puede simplemente descargar la fuente y comenzar a usarla en su propio sitio web o en el programa de diseño de página o de procesamiento de texto de su computadora. A la mayoría de las empresas de fuentes no les gusta la idea de que la gente piratee sus creaciones, por lo que muchas fuentes tienen licencias que prohíben específicamente su uso en la Web. En otras palabras, incluso si compra una fuente de Adobe, no puede simplemente comenzar a usarla en su sitio web. Muchas empresas de fuentes ahora ofrecen diferentes tipos de licencias (a diferentes precios) para permitir su uso en la Web. Esto incluso se aplica a las fuentes que vienen con su computadora. Puede usarlos con los programas que instala en su computadora, pero es posible que no pueda colocar esos mismos archivos de fuente en su servidor web para usarlos como fuente web. Si no sabe si una fuente permite su uso en la Web, es mejor que no la use y busque una fuente que pueda usarse en la Web. NotaPara eludir cualquier problema legal, puede utilizar un servicio de fuentes como Google Fonts (página 146) o TypeKit, un servicio comercial de fuentes web de Adobe (consulte el cuadro en la página 153). Encontrar fuentes web Al buscar fuentes web, se enfrenta a dos problemas: encontrar fuentes que sean legales para usar en la Web y encontrar fuentes en todos los formatos de fuente (EOT, WOFF, TrueType, etc.). Si bien algunas empresas de fuentes han comenzado a ofrecer licencias web para las fuentes que compra, existe una amplia variedad de fuentes gratuitas disponibles para uso en la Web. Estas son algunas de las muchas fuentes de fuentes web gratuitas: • La liga de tipos móviles (www.theleagueofmoveabletype.com).Compuesto por un grupo de diseñadores, este sitio fue uno de los primeros en ofrecer fuentes gratuitas hechas a mano para uso web. Su fuente, League Gothic, es ampliamente utilizada en la Web. • Fundición de fuentes Exljbris (www.exljbris.com).Proporciona fuentes clásicas y gratuitas de Jos Buivenga: Museo, Museo Sans y Museo Slab. 134 Css3: el manual perdido www.it-ebooks.info • fontex.org (www.fontex.org).Proporciona una gran selección de fuentes gratuitas, aunque no todas tienen licencia para uso comercial. Si planea usar una de las fuentes en un sitio comercial (es decir, no solo en su sitio web personal), asegúrese de leer el acuerdo de licencia que acompaña a la fuente descargada. • UTILIZANDO LA WEB FUENTES La biblioteca de fuentes abierta (http://openfontlibrary.org).Más de 152 fuentes gratuitas (al momento de escribir este artículo) están disponibles y todas pueden usarse en sus sitios web (pero no use las 152 a la vez). • Fuente Ardilla (www.fontsquirrel.com).Un sitio de referencia en el mundo de las fuentes web que ofrece más de 800 fuentes. Además de ofrecer solo fuentes, Font Squirrel proporciona lo que llama "Kits @font-face", que son una colección de archivos que incluyen fuentes en todos los formatos de fuentes principales y un archivo CSS que incluye todos los @ necesarios.Perfil delanterosintaxis para cargarlos (aprenderás a usar @Perfil delanterousted mismo en la página 137). Además, Font Squirrel ofrece una herramienta en línea para convertir una fuente TrueType o Open Type a otros formatos de fuente, incluidos EOT, SVG y WOFF. Aprenderá a utilizar esta herramienta en la siguiente sección. • Fuentes de Google (www.google.com/webfonts).Google ofrece una forma sencilla y gratuita de incluir fuentes web en sus sitios. Aprenderá a usar este servicio en profundidad en la página 146. Generación de múltiples formatos de fuente La mayoría de los sitios que ofrecen fuentes gratuitas proporcionan la fuente en un solo formato (generalmente TrueType (.ttf) o Open Type (.otf). Si bien muchos navegadores admiten TrueType y Open Type, no todos lo hacen. Además, el formato WOFF más nuevo es compatible con la mayoría de los navegadores y tiene la ventaja de ser más pequeño en tamaño de archivo que TrueType. Para asegurarse de proporcionar fuentes a tantos navegadores como sea posible, debe usar al menos fuentes EOT, WOFF y TrueType. para iPhones con Safari versión 4.1 o anterior, necesitará fuentes SVG. NotaSegún el sitio de estadísticas web NetMarketShare, Safari 4.1 y versiones anteriores representan menos del 2 por ciento de todos los navegadores web móviles. Puedes leer el artículo enwww.netmarketshare.com/browser-market-share. aspx? qprid=2&qpcustomd=1. Afortunadamente, Font Squirrel proporciona una herramienta en línea muy útil para ayudar a generar los formatos de fuente requeridos. El generador @font-face ubicado en www.fontsquirrel.com/fontface/generatorproporciona un método simple para crear no solo las fuentes adecuadas, sino también un archivo HTML de muestra y una hoja de estilo CSS básica. Para usar el generador @font-face de Font Squirrel: 1.Busque una fuente TrueType (.ttf) o tipo abierto (.otf). Utilice uno de los sitios enumerados en la sección anterior o busque una fuente de otro sitio. Solo asegúrese de que la fuente tenga licencia para su uso como fuente web. Si no lo es, o no está seguro, sáltelo y busque otra fuente. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 135 UTILIZANDO LA WEB FUENTES 2.Vaya al generador @font-face enwww.fontsquirrel.com/fontface/ generador. Es una página simple con solo unas pocas opciones (vea la Figura 6-5). 3.Haga clic en el botón Agregar fuentes (#1 en la Figura 6-5). Su navegador abre un cuadro de diálogo "Seleccionar archivos". 4.Seleccione una o más fuentes de su computadora y haga clic en el botón Abrir. Su navegador carga el archivo o los archivos en el servidor de Font Squirrel. 5.Seleccione una opción de conversión (#2 en la Figura 6-5). • Básicosimplemente convierte la fuente a formatos EOT, WOFF y SVG. • óptimoes una mejor opción ya que no solo convierte la fuente, sino que también realiza otras mejoras para mejorar el rendimiento y la velocidad de las fuentes. • Expertole permite ajustar hasta la última configuración para la conversión. Por ejemplo, le permite crear unsubconjuntode la fuente, es decir, solo un conjunto de caracteres cuidadosamente seleccionados. En otras palabras, puede excluir del archivo de fuente ciertos caracteres que no está usando, como el punto y coma, el signo de exclamación o la letra Q. Con toda probabilidad, querrá acceder a todos los personajes, por lo que es mejor quedarse con el Óptimo. 6.Active la casilla de verificación "Sí, las fuentes que estoy cargando son legalmente elegibles para la incrustación web" (n.º 3 en la Figura 6-5). Como se mencionó en la página 134, las fuentes son propiedad intelectual, y simplemente colocar una en un servidor web promueve la piratería de software. Asegúrese de que sus fuentes se puedan usar en la Web; la mayoría de los enumerados en esta sección lo son. 7.Haga clic en el botón Descargar su kit (#4 en la Figura 6-5). Según la cantidad de fuentes que estés convirtiendo y su complejidad, el proceso de descarga puede demorar un poco. El servidor de Font Squirrel necesita tomar la fuente y realizar su magia para generar cada formato de fuente. Cuando haya terminado, descargará una carpeta que contiene varios archivos de formato de fuente, un archivo de demostración, un archivo CSS y algunos otros archivos misceláneos. Los más importantes son, por supuesto, los . Archivos de fuentes eot, .ttf, .woff y .svg. Ahora que tiene las fuentes que desea usar, es hora de aprender a usarlas con @ de CSSPerfil delanterodirectiva. 136 Css3: el manual perdido www.it-ebooks.info UTILIZANDO LA WEB FUENTES Figura 6-5 A menos que sepa lo que está haciendo, quédese con la configuración de conversión Óptima de Font Squirrel. Él genera todos los formatos de fuente que necesitará y realiza algunos otros ajustes para que las fuentes se carguen más rápido y se vean mejor en pantalla. Pero para obtener el máximo control, elija la opción Experto y verá una lista de casi una docena de configuraciones que puede usar para modificar la forma en que se generan las fuentes. Uso de la directiva @font-face Una vez que haya descargado los archivos de fuentes adecuados, es hora de usarlos. Primero, copie los archivos en la ubicación de su computadora donde guarda los archivos para su sitio web. Muchos diseñadores web crean una carpeta dedicada en la carpeta raíz del sitio llamadafuentes, _fuentes,o fuentes web.Alternativamente, si tiene una carpeta para sus archivos CSS, puede colocar los archivos de fuentes allí. Realmente no importa dónde coloque estos archivos en su sitio, pero es útil estar organizado. El secreto de las fuentes web es un comando CSS llamado @Perfil delanterodirectiva. Este comando, en su forma más básica, nombra la fuente y le dice al navegador dónde encontrar el archivo de fuente para descargarlo. Tu colocas la @Perfil delanterodirectiva en su hoja de estilo, al igual que un estilo normal. Por ejemplo, supongamos que está utilizando la fuente League Gothic. Tiene un archivo True Type llamadoLeague_Gothic-webfont.ttfdentro de una carpeta de fuentes en su sitio. Le indicaría a un navegador que descargue esta fuente agregando la @Perfil delanterodirectiva a su hoja de estilo como esta: Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 137 UTILIZANDO LA WEB @Perfil delantero { FUENTES familia de fuentes: "League Gothic"; src: url('fuentes/League_Gothic-webfont.ttf'); } La primera propiedad,Familia tipográfica,has visto antes (página 127), pero aquí tiene un propósito diferente. Cuando se usa dentro de una @Perfil delanterodirectiva,Familia tipográficaasigna un nombre a la fuente. Luego usa ese nombre de fuente cuando desea aplicar esa fuente a un estilo. Por ejemplo, supongamos que desea utilizar la fuente League Gothic para todos los párrafos de una página. A continuación, podría utilizar este estilo: pag { familia de fuentes: "League Gothic"; } NotaUsas una @Perfil delanterodirectiva para cada fuente que desee utilizar. Si tiene tres fuentes, necesita tres @Perfil delanterodirectivas. Es una buena idea mantenerlos agrupados y colocarlos en la parte superior de su hoja de estilo, para que un navegador pueda comenzar a descargarlos inmediatamente. El segundo atributo, elorigenpropiedad: le dice al navegador dónde buscar el archivo de fuente en el servidor. Coloque la ruta desde la hoja de estilo hasta el archivo de fuente en el sistema entre comillas y dentrodirección URL ().La ruta funciona igual que otras rutas de archivos HTML, por ejemplo, rutas a imágenes, enlaces y archivos JavaScript. Por ejemplo, supongamos que tiene una hoja de estilo dentro de una carpeta llamada _estilosy un archivo de fuente llamadomi_fuente. ttf dentro de una carpeta llamada _fuentesAmbas carpetas están en la raíz de su sitio. Entonces, la ruta desde la hoja de estilo hasta el archivo de fuente es ../_fuentes/mi_fuente.ttf.escribirías un @Perfil delanterodirectiva para esa fuente como esta: @Perfil delantero { familia de fuentes: "Mi fuente"; src: url('../_fuentes/mi_fuente.ttf'); } Probablemente haya notado que en los ejemplos anteriores, solo hay un único archivo de fuente: una fuente TrueType. Eso hace que sea fácil ver cómo @Perfil delanterofunciona en general, antes de pasar a más detalles. Como se discutió anteriormente, @Perfil delanterole permite especificar varios archivos con diferentes tipos de fuentes. Desafortunadamente, debido a errores del navegador, la sintaxis de todo eso es un poco complicada. Por ejemplo, supongamos que desea utilizar todos los diferentes formatos de fuente para League Gothic en su sitio. He aquí cómo reescribir el código anterior: @Perfil delantero { familia de fuentes: 'League Gothic'; src: url('fuentes/League_Gothic-webfont.eot'); src: url('fuentes/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'), url('fuentes/League_Gothic-webfont.woof') format('woff'), url('fonts/League_Gothic-webfont.ttf') format('truetype'), url('fonts/League_Gothic-webfont.svg') formato('svg'); } 138 Css3: el manual perdido www.it-ebooks.info Esto parece desordenado y, desafortunadamente, debido a un error en IE, es innecesariamente complicado. Así es como se descompone: UTILIZANDO LA WEB FUENTES • La línea 2 es la misma que antes. ElFamilia tipográficala propiedad proporciona el nombre de la fuente; el mismo nombre que usará al aplicar la fuente a sus estilos CSS. • Line 3 es para Internet Explorer 9, pero solo cuando está en modo de compatibilidad, un modo en el que IE 9 actúa como si fuera IE 8. Esta característica extraña se agregó a IE 9 para que los sitios web diseñados para acomodar correctamente los errores en IE 8 y versiones anteriores se vería bien en IE 9. Un usuario tiene que cambiar deliberadamente al modo de compatibilidad en IE 9, por lo que probablemente esté seguro omitiendo esto. • La línea 4 comienza un segundoorigenpropiedad, que de acuerdo con las reglas de la @Perfil delanterodirectiva, puede tener varios tipos de fuente especificados. La primera fuente es la . eot fuente de nuevo, pero esta vez verá que al final del archivo .eot, debe agregar ?#iefix.Esto es para acomodar aún más errores de IE, esta vez para IE 6–8. Si no agrega ese poco a la URL que sigue al .eot, es posible que la fuente no se muestre correctamente en IE 8 o versiones anteriores. También notará que después de la URL hay un código nuevo: formato ('tipo abierto incrustado') Esto indica el formato de fuente y lo agrega después de cada URL para un formato de fuente diferente. • Las líneas 5 a 7 simplemente identifican formatos de fuentes adicionales. En realidad, esta es solo una propiedad: laorigenpropiedad: dividida en varias líneas para una mayor legibilidad. Para cada tipo de fuente que especifique para elorigenpropiedad, agrega una URL, un formato y una coma (para todas las fuentes menos la última): url('fuentes/League_Gothic-webfont.woof') format('woff'), NotaAl final de la lista de archivos para elorigenpropiedad, agrega un punto y coma para indicar que ha llegado al final de laorigenpropiedad (línea 7 arriba). No olvide este punto y coma final, o el @Perfil delanterodirectiva no funcionará. Aunque un navegador puede comprender diferentes tipos de fuentes (por ejemplo, Chrome puede usar fuentes WOFF, TrueType y SVG), no descargará todos los archivos de fuentes. En cambio, a medida que lee la lista de tipos de fuentes, el navegador descarga solo la primera que entiende. En otras palabras, si Chrome encuentra el código anterior, omitirá el archivo .eot ya que no entiende ese formato de fuente, pero descargará el archivo .woof. Luego omitiría los archivos TrueType y SVG por completo. Eso significa que el orden en que enumera las fuentes es importante. Generalmente se prefiere WOOF ya que es un archivo más pequeño que se descarga más rápido, mientras que SVG es generalmente un archivo mucho más grande, por lo que debe asegurarse de enumerar las fuentes en el orden de .eot, .woof, .ttf y .svg. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 139 UTILIZANDO LA WEB FUENTES NotaLo anterior @Perfil delanteroLa sintaxis es el resultado de muchas pruebas y solución de problemas por parte de muchos profesionales web talentosos. Puedes leer sobre su evolución en las siguientes entradas del blog:http:// www. fontspring.com/blog/forther-hardening-of-the-bulletproof-syntax,http://www.fontspring.com/blog/thenewbulletproof-font-face-syntax, yhttp://paulirish.com/2009/bulletproof-font-face-implementation-syntax/. Creación de estilos usando fuentes web La parte más difícil de las fuentes web es obtener los archivos de fuentes en el formato adecuado y configurar @Perfil delanterodirectivas. Una vez hecho esto, usa las fuentes web tal como lo haría con las fuentes preinstaladas que se describen en la página 127. En otras palabras, cuando crea un nuevo estilo, simplemente usa elFamilia tipográficapropiedad y proporcione el nombre de la fuente que utilizó en el @Perfil delanterodirectiva. Por ejemplo, en el código anterior, el @Perfil delantero directiva nombra la nueva fuente League Gothic (línea 2 en la página 138). Este es el nombre que usa cuando aplica esta fuente a un estilo. para hacer todoh1etiquetas usan la fuente League Gothic, podrías escribir este estilo: h1 { familia de fuentes: 'League Gothic'; peso de fuente: normal; } Observe que hay una nueva propiedad:peso de fuente—listado aquí. Los navegadores normalmente muestran <h1>etiquetas en negrita. La mayoría de los navegadores pondrán en negrita artificialmente una fuente web cuando se requiera una versión subnegrita. Esto da como resultado una negrita fea. Configuración de lapeso de fuenteanormalle dice al navegador que use la fuente League Gothic "tal cual", y evita intentar ponerla en negrita. En la siguiente sección, obtendrá más información sobre cómo manejar variantes de fuentes como negrita y cursiva con fuentes web. También es una buena idea incluir una lista de fuentes preinstaladas de respaldo, en caso de que el navegador no pueda cargar la fuente web. Esta es la misma técnica descrita en la página 129. Por ejemplo: h1 { familia tipográfica: 'League Gothic', Arial, sans-serif; peso de fuente: normal; } CONSEJOTambién puede utilizar fuentes que contengan símbolos e iconos en una página web. Entonces, en lugar de crear un gráfico de una señal de advertencia (por ejemplo) y colocarlo dentro de un párrafo de texto, puede usar @Perfil delantero directiva para cargar una fuente que contenga el ícono de señal de advertencia y simplemente use una letra simple (asignada al ícono en la fuente). Aquí hay algunos recursos sobre el uso de fuentes de iconos:http://css-tricks.com/flat-icons-icon-fuentes/, http://css-tricks.com/ html-for-icon-font-usage/yhttp://css-tricks.com/examples/IconFont/. Manejo de variantes en negrita y cursiva Las fuentes comunes instaladas en las computadoras incluyen variaciones en estilo y peso, por lo que cuando aplica un <fuerte>etiqueta en HTML, un navegador web usa la versión en negrita de esa fuente; del mismo modo, cuando aplica un <em>etiqueta al texto, el navegador usa una cursiva 140 Css3: el manual perdido www.it-ebooks.info versión de esa fuente; y si combina ambas etiquetas, verá una versión en negrita y cursiva de la fuente. Estas son en realidad diferentes fuentes contenidas en diferentes archivos de fuentes. Con el UTILIZANDO LA WEB FUENTES método original de uso de fuentes en páginas web (descrito en la página 129), nunca tendrá que preocuparse por estas diferentes fuentes, ya que el navegador usa la versión correcta automáticamente. Sin embargo, con las fuentes web, necesita archivos de fuentes independientes para cada variante de fuente. Por lo tanto, para el cuerpo del texto necesitará al menos una versión normal de una fuente, una versión en negrita, una versión en cursiva y una versión en negrita/cursiva. Tenga esto en cuenta cuando busque una fuente web para su sitio; algunas fuentes solo tienen un peso único y no tienen versión en cursiva. Esto podría estar bien para un título, pero no sirve de mucho para párrafos largos de texto, que probablemente tendrán algo de texto en cursiva y negrita. Además, debe crear una @ separadaPerfil delantero directivas para cada variante de fuente. Tiene dos opciones cuando trabaja con versiones en cursiva/negrita de fuentes web. Un método es más fácil de implementar pero no funciona en Internet Explorer 8 o anterior (o IE 9 en modo de compatibilidad); el otro requiere más mano de obra pero funciona en versiones anteriores de Internet Explorer. LA MANERA FÁCIL DE AÑADIR NEGRITA Y CURSIVA La forma más fácil de agregar variantes en negrita y cursiva de sus fuentes es agregarpeso de fuente yEstilo de fuentepropiedades a la @Perfil delanterodirectiva. Normalmente, el CSSpeso de fuente (página 140) le dice a un navegador que muestre una fuente en negrita, normal o uno de varios otros pesos, mientras que laEstilo de fuenteproperty (página 141) le dice a un navegador que muestre una fuente en cursiva o normal. Sin embargo, cuando se usa dentro del @Perfil delantero directiva,Estilo de fuentele dice a un navegador que aplique la fuente cuando el estilo solicite una variante particular de la fuente. Digamos que tiene una fuente llamada PTSans. Empiece con la versión normal, sin negrita y sin cursiva de la fuente. Los diversos formatos de fuente comienzan con PTSansRegular (PTSansRegular.eot, PTSansRegular.ttf, etc.). En su hoja de estilo, agregaría este @ Perfil delanterodirectiva: @Perfil delantero { familia de fuentes: 'PTSans'; src: url('PTSansRegular.eot'); src: url('PTSansRegular.eot?#iefix') format('embedded-opentype'), url('PTSansRegular.woof') format('woff'), url('PTSansRegular.ttf') format('truetype'), url('PTSansRegular.svg') format('svg'); peso de fuente: normal; estilo de fuente: normal; } Note lo siguiente: • Utiliza un nombre genérico para la familia de fuentes, PTSans en la línea 2 anterior, en lugar del nombre específico para ese archivo de fuente, PTSansRegular. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 141 UTILIZANDO LA WEB FUENTES • Elpeso de fuentese establece en normal, ya que esta no es una versión en negrita de la fuente (línea 8). • ElEstilo de fuentese establece en normal, ya que esta no es una versión en cursiva de la fuente (línea 9). NotaLos ejemplos de código aquí asumen que los archivos de fuente PTSansRegular.eot, PTSansBold.eot, etc. están en la misma carpeta que la hoja de estilo. Si estuvieran en carpetas diferentes, tendría que ajustar la URL para señalar con precisión la ubicación de los archivos de fuentes en relación con la hoja de estilo. Ahora, supongamos que tiene una versión en cursiva de la fuente: el nombre del archivo comienza con PTSansItalic. Luego agregaría esto a su hoja de estilo: @Perfil delantero { familia de fuentes: 'PTSans'; src: url('PTSansItalic.eot'); src: url('PTSansItalic.eot?#iefix') format('embedded-opentype'), url('PTSansItalic.woof') format('woff'), url('PTSansItalic.ttf') format('truetype'), url('PTSansItalic.svg') format('svg'); peso de fuente: normal; estilo de fuente: cursiva; } usas lo mismoFamilia tipográficanombre en la línea 2—PTSans. Sin embargo, cambias el Estilo de fuenteen cursiva (línea 9). Esto le dice al navegador que la fuente que está especificando es la versión en cursiva de la fuente PTSans. Agregarías @ similarPerfil delanterodirectivas para las versiones en negrita y negrita/cursiva como esta: @Perfil delantero { familia de fuentes: 'PTSans'; src: url('PTSansBold.eot'); src: url('PTSansBold.eot?#iefix') format('embedded-opentype'), url('PTSansBold.woof') format('woff'), url('PTSansBold.ttf') format('truetype'), url('PTSansBold.svg') format('svg'); fuentepeso: negrita; estilo de fuente: normal; } @Perfil delantero { familia de fuentes: 'PTSans'; src: url('PTSansBoldItalic.eot'); src: url('PTSansBoldItalic.eot?#iefix') format('embedded-opentype'), url('PTSansBoldItalic.woof') format('woff'), url('PTSansBoldItalic.ttf') format('truetype'), url('PTSansBoldItalic.svg') format('svg'); fuente-peso: negrita; estilo de fuente: cursiva; } 142 Css3: el manual perdido www.it-ebooks.info En otras palabras, necesitas cuatro @Perfil delanterodirectivas para cubrir todas las variantes de negrita, cursiva y texto regular: observe que elFamilia tipográficael nombre es el mismo en cada UTILIZANDO LA WEB FUENTES caso; Solo elorigencambian las propiedades (para apuntar a los diferentes archivos) y elpeso de fuente yEstilo de fuentecambian las propiedades. La ventaja de este método es que puede aplicar la fuente normal al texto, aplicar <em>y <fuerte>etiquetas a su HTML, y deje que el navegador se preocupe por qué archivo de fuente cargar y usar. En este ejemplo, si desea utilizar la fuente PTSans en todos sus párrafos, simplemente agregue este estilo a su hoja de estilo: pag { familia de fuentes: PTSans; } Luego puede marcar sus etiquetas de párrafo con HTML. Por ejemplo, podría tener un párrafo como este: <p>Cuando era más joven, podía recordar <em>cualquier cosa<em>, si había sucedido o <strong>no<strong> -- <strong><em>Mark Twain</em></strong>< /p> Cuando el navegador web lee la hoja de estilo (con las cuatro @Perfil delanterodirectivas y la pagestilo de etiqueta), mostraría la mayor parte del párrafo usando la fuente PTSansRegular. Sin embargo, la palabra “cualquier cosa” contenida dentro del <em>las etiquetas usarían la fuente PTSansItalic; la palabra no dentro del <fuerte>las etiquetas usarían la fuente PTSansBold; y "Mark Twain" dentro de ambos <fuerte>y las etiquetas <em> usarían la fuente PTSans-BoldItalic. Estas directivas incluso funcionan para los titulares. Si creó un estilo para dar formato a todosh1 etiquetas con PTSans, puede crear este estilo: h1 { familia de fuentes: PTSans; } Con este estilo en su lugar, un navegador web en realidad usaría la versión en negrita de PTSans, ya que los titulares normalmente se muestran en negrita. (Cuando usa esta técnica que involucra múltiples variaciones de una fuente, no debe agregarpeso de fuente: normal;, como se describe en la página 140.) Desafortunadamente, Internet Explorer 8 y versiones anteriores no entienden este método y usarán la fuente PTSansRegular para todo el texto. IE creará cursiva falsa y negrita falsa para el <em>y < fuerte>etiquetas; es decir, inclinará la fuente PTSansRegular en pantalla para cursiva y hará que la fuente PTSansRegular sea más gruesa para negrita. Las negritas y cursivas resultantes generadas por computadora generalmente se ven bastante mal. NotaLos archivos del tutorial de este capítulo incluyen ejemplos de ambas técnicas para incluir versiones de fuentes en negrita y cursiva. Mira dentro de lawebfonts-democarpeta. El archivowebfonts.htmlutiliza la técnica descrita en la página 140, mientras que elwebfonts-ie-safe.htmlfile utiliza la técnica que se describe a continuación. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 143 UTILIZANDO LA WEB FUENTES AGREGAR NEGRITA Y CURSIVA Y SOPORTAR INTERNET EXPLORER 8 Si todavía es compatible con Internet Explorer 8 (o anterior), la solución anterior para negrita y cursiva no funcionará tan bien. Puede hacer que las variantes de fuentes funcionen en IE 8, pero requiere un poco más de trabajo. Para empezar, sigues creando cuatro @Perfil delanterodirectivas, una para cada variante de la fuente. Sin embargo, en lugar de darles la mismaFamilia tipográfica nombre (PTSans, por ejemplo), le da a cada uno su nombre único (PTSansRegular, PTSansItalic, etc.). En otras palabras, reescribirías los cuatro @Perfil delanterodirectivas como esta: @Perfil delantero { familia de fuentes: 'PTSansRegular'; src: url('PTSansRegular.eot'); src: url('PTSansRegular.eot?#iefix') format('embedded-opentype'), url('PTSansRegular.woof') format('woff'), url('PTSansRegular.ttf') format('truetype'), url('PTSansRegular.svg') format('svg'); } @Perfil delantero { familia de fuentes: 'PTSansItalic'; src: url('PTSansItalic.eot'); src: url('PTSansItalic.eot?#iefix') format('embedded-opentype'), url('PTSansItalic.woof') format('woff'), url('PTSansItalic.ttf') format('truetype'), url('PTSansItalic.svg') format('svg'); } @Perfil delantero { familia de fuentes: 'PTSansBold'; src: url('PTSansBold.eot'); src: url('PTSansBold.eot?#iefix') format('embedded-opentype'), url('PTSansBold.woof') format('woff'), url('PTSansBold.ttf') format('truetype'), url('PTSansBold.svg') format('svg'); } @Perfil delantero { familia de fuentes: 'PTSansBoldItalic'; src: url('PTSansBoldItalic.eot'); src: url('PTSansBoldItalic.eot?#iefix') format('embedded-opentype'), url('PTSansBoldItalic.woof') format('woff'), url('PTSansBoldItalic.ttf') format('truetype'), url('PTSansBoldItalic.svg') format('svg'); } Observe que cada @Perfil delanteroLa directiva tiene su único nombre de familia, uno que coincide con la variante de fuente: PTSansRegular, PTSansItalic, PTSansBold y PTSansBoldItalic. 144 Css3: el manual perdido www.it-ebooks.info Además, observe que elpeso de fuenteyEstilo de fuentelas propiedades utilizadas en los ejemplos de las páginas 140–143 han desaparecido. No los necesitas aquí. UTILIZANDO LA WEB FUENTES La parte difícil viene cuando llega el momento de aplicar la fuente. En el ejemplo de la página 143, simplemente aplicó elFamilia tipográficaal estilo así: pag { familia de fuentes: PTSans; } Ahora, desafortunadamente, debe aplicar los diferentes nombres de fuente a las distintas etiquetas: pag para regular,ellospara cursiva,fuertepara negrita y un selector descendente para manejar el caso de negrita y cursiva. Entonces, para que las diferentes variantes de la fuente PTSans funcionen, debe crear cuatro estilos, que involucran muchas líneas de código, como este: pag { familia de fuentes: PTSansRegular; tamaño de fuente: 48px; estilo de fuente: normal; peso de fuente: normal; } pag { familia de fuentes: PTSansItalic; estilo de fuente: normal; peso de fuente: normal; } p fuerte { familia de fuentes: PTSansBold; estilo de fuente: normal; peso de fuente: normal; } p em fuerte, p em fuerte { familia de fuentes: PTSansBoldItalic; peso de fuente: normal; estilo de fuente: normal; } Primero, observe que hay cuatro estilos: elpagel estilo aplica la fuente PTSansRegular;por favores un selector descendiente que se aplica a un <em>etiqueta que está dentro de un <p>etiqueta: ese estilo aplica PTSansItalicfuente; p fuertees otro selector descendiente, que aplica la fuente PTSansBold al < fuerte>etiquetar cuando aparece dentro de un párrafo; finalmente, hay un selector de grupo compuesto por dos selectores descendientes. El selector de primer descendiente se aplica a un <em> etiqueta que está dentro de un <fuerte>etiqueta que está dentro de un <p>etiqueta; mientras que el segundo se aplica a un <fuerte>etiqueta dentro y <em>eso está dentro de un <p>.Necesitas ambos porque puedes anidar <em>etiquetas dentro de <fuerte>etiquetas y viceversa. Podrías terminar con HTML como este: Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 145 DESCUBRIENDO WEB DE GOOGLE FUENTES <p> <em><strong>¡Oye!</strong></em> , estoy hablando con <strong><em>tú</em></strong> </ p> El solterop fuerte emel selector no funcionará para el mensaje "¡Oye!" arriba, ya que es un <fuerte> etiqueta dentro de un <em>etiqueta. NotaEn HTML5, el <b> (para negrita) y <yo> (para cursiva) las etiquetas están de vuelta. Debe usarlos simplemente con fines de presentación, cuando desee que el texto esté en cursiva, pero sin agregar ningún énfasis real al significado del texto. Por ejemplo, los títulos de los libros a menudo están en cursiva, por lo que usar el <yo>Se recomienda la etiqueta: <i>CSS3: El manual perdido</i> Usando <em>enfatizaría el texto y haría que los lectores de pantalla leyeran el texto en voz alta de una manera diferente al resto del texto. En cualquier caso, si tenía la intención de utilizar <segundo>y <yo>,asegúrese de crear estilos que usen las variantes en cursiva y negrita de la fuente (nuevamente, solo necesita preocuparse por eso si está usando IE 8, una forma segura de especificar cursiva, no si está usando el método discutido en la página 141). Otra cosa a tener en cuenta es que tienes que configurar elpeso de fuenteyEstilo de fuentea normal para todos estos estilos. Si no lo hace, muchos navegadores (no solo Internet Explorer) intentarán poner en negrita la fuente ya en negrita y poner en cursiva la versión ya en cursiva de la fuente (Firefox crea texto en negrita falso particularmente malo). Esta segunda técnica para admitir variantes en negrita y cursiva obviamente requiere mucho trabajo. Se vuelve aún más trabajo si usa más de una fuente con versiones en negrita y cursiva en el mismo sitio. La técnica que utilice realmente depende de la importancia que tenga para usted la compatibilidad con Internet Explorer 8. En el momento de escribir este artículo, IE 8 sigue siendo bastante popular, con un rango del 13% (http://gs.statcounter.com/#browser_versionww- monthly-201108-201208) al 25% (http://www.netmarketshare.com/browsermarket-share.aspx? qprid=2&qpcustomd=0&qptimeframe=M) de los navegadores web en uso. NotaAquí hay otro enfoque para el problema de admitir negrita y cursiva para IE 8. Pruebe el primer método (página 141) y vea cómo se ve en IE 8. Algunas fuentes, generalmente fuentes sans-serif, no siempre se ven tan mal cuando IE hace su cursiva falsa y negrita para ellos. Puede encontrar que la diferencia no es tan notable, y puede usar el primer método sin mucho problema. Además, recuerde que la participación de mercado de IE 8 seguirá disminuyendo a medida que las personas compren computadoras nuevas, cambien a Chrome u otro navegador, o actualicen sus sistemas operativos. Descubriendo las fuentes web de Google Si las instrucciones para usar las fuentes web discutidas en la sección anterior le parecen demasiado abrumadoras, hay una manera más fácil, aunque con menos opciones de fuente. Además de búsqueda, mapas, correo electrónico y todos los muchos servicios que ofrece, Google proporciona un servicio de fuentes web fácil de usar. En lugar de descargar fuentes, convertirlas a 146 Css3: el manual perdido www.it-ebooks.info DESCUBRIENDO formatos apropiados, y luego colocándolos en su servidor web, simplemente incluya un único enlace WEB DE GOOGLE de hoja de estilo externo a Google que indique qué fuentes le gustaría usar. El servidor de Google FUENTES envía las fuentes adecuadas al navegador web del visitante. Sin despeinarse sin problemas. Sus únicas responsabilidades son encontrar las fuentes que desea usar en el sitio de Google Web Fonts, copiar el código necesario (que proporciona Google) y agregarlo a su página web, y crear estilos CSS usando esas fuentes. Comience visitando el sitio de Google Web Fonts enwww.google.com/webfonts(ver Figura 6-6). Figura 6-6 El sitio de Google Web Fonts enumera las fuentes que ofrece Google. Algunas fuentes tienen varios estilos, como negrita, cursiva, fina, ultrafina, etc. Para ver todas las variantes de una fuente en particular, haga clic en el enlace Mostrar todos los estilos en la barra lateral izquierda (encerrado en un círculo). Cada fuente también tiene tres enlaces: el primero, "Uso rápido" (#1) carga el panel Usar descrito en la página 150 y le permite agregar rápidamente el código necesario para usar esa fuente; el enlace "Emergente" (#2) abre una nueva ventana con más información sobre la fuente, así como una hoja de muestra que muestra cada letra de la fuente (es una buena manera de ver cómo se ve el alfabeto completo y también para hacer Asegúrese de que tenga todos los caracteres que necesita, como símbolos inusuales o signos de puntuación. marcas); por último, el enlace "Agregar a la colección" (#3) agrega la fuente a su colección. (Si desea usar más de una fuente, agréguelas todas a la colección). Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 147 DESCUBRIENDO WEB DE GOOGLE FUENTES Búsqueda y selección de fuentes Usted selecciona las fuentes que desea usar creando unrecopilación. Es tan fácil como encontrar una fuente que le guste y hacer clic en el botón "Agregar a la colección" (vea la Figura 6-6). Para encontrar una fuente, puede desplazarse hacia abajo en la página principal de fuentes web y ver ejemplos de las fuentes disponibles, pero con más de 500 fuentes para elegir, puede llevarle un tiempo encontrar una que le guste. Si ya tiene en mente una apariencia específica, como una fuente sans-serif en negrita para los titulares, use una de las opciones de filtrado en el lado izquierdo de la página (consulte la Figura 6-7). • Buscar por nombre.Si sabe el nombre de la fuente que le interesa, simplemente escriba el nombre (o parte del nombre) en el campo de búsqueda (#1 en la Figura 6-7). Luego, la página filtra la lista de fuentes para mostrarle las que coinciden. • Filtrar por categoría.El menú de categorías (#2 en la Figura 6-7) le permite mostrar fuentes que coinciden con una, dos, tres o cuatro categorías: Serif, Sans Serif, Display y Handwriting. Simplemente desmarque una casilla para ocultar ese tipo de fuente, o active la casilla para mostrarla. Las fuentes de visualización son generalmente audaces y con estilo; no son realmente buenos para pasajes largos de texto, pero pueden hacer que los titulares cortos realmente salten de la página. Las fuentes de escritura a mano, o fuentes de script, se ven como si alguien hubiera escrito el texto con un bolígrafo. Varían desde guiones elegantes, similares a invitaciones de boda, hasta una nota de rescate garabateada a mano que dice "Dame el dinero si quieres recuperar a tu gato". • Estilo físico.Tres controles deslizantes le permiten identificar las características físicas de las fuentes (#3 en la Figura 6-7). El control deslizante de grosor le permite encontrar fuentes hechas de líneas muy delgadas (líneas delicadas que a menudo son difíciles de leer a menos que se muestren en un tamaño de fuente grande) a líneas muy gruesas (negritas y gruesas). El control deslizante Slant identifica las fuentes con una "inclinación": generalmente esto significa versiones en cursiva de las fuentes, pero también es relevante para las fuentes escritas a mano, que generalmente tienen una pronunciada inclinación hacia la derecha. Finalmente, use el control deslizante Ancho para encontrar fuentes que sean más estrechas o más dispersas. Con fuentes más anchas, caben menos letras en una sola línea, pero a menudo hace una declaración en negrita en un título. • Alfabeto.Por último, el menú Script (#4 en la Figura 6-7) le permite especificar fuentes para usar con otros idiomas. El inglés y muchos idiomas europeos usan el alfabeto latino, pero si necesita una fuente para el texto en ruso, por ejemplo, elegiría el cirílico. Elija el que coincida con el idioma en el que aparecerá su texto. 148 Css3: el manual perdido www.it-ebooks.info DESCUBRIENDO WEB DE GOOGLE FUENTES Figura 6-7 Para ayudar a encontrar las fuentes que coincidan con su diseño, puede buscar en el directorio de fuentes de Google o filtrar la lista de fuentes especificando varios criterios. Si intenta usar todos estos filtros, lo más probable es que termine sin resultados. Si es así, haga clic en el enlace "Restablecer todos los filtros/búsqueda" (marcado con un círculo) para volver a la lista completa de fuentes web de Google. CONSEJOPara ver una muestra de algunas de las mejores fuentes disponibles de Google, consultehttp://hellohappy.org/ hermosa-web-type/. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 149 DESCUBRIENDO WEB DE GOOGLE FUENTES A medida que encuentre las fuentes que le gustaría usar, puede hacer clic en el botón "Agregar a la colección" (#1 en la Figura 6-8). La colección es como un carrito de compras, por lo que puede agregarle fuentes y eliminarlas. Figura 6-8 Para ver las fuentes que ha agregado a su colección, haga clic en las flechas desplegables (#2). Puede eliminar una fuente de la colección haciendo clic en el botón X (eliminar) a la derecha del nombre de la fuente (#3). El botón Revisar (encerrado en un círculo) le permite comparar las fuentes en su colección y recuperar más en profundidad información. Por ejemplo, puede ver el juego de caracteres completo para cada fuente (es decir, cada letra y símbolo), probar una fuente agregando su propio texto y cambiando el tamaño de la fuente, e incluso crear una comparación superpuesta de todas las fuentes en su colección (si realmente estás obsesionado con el tipo). Uso de fuentes de Google Una vez que haya creado una colección de fuentes, estará listo para recuperar el código necesario para usarlas. 1.En la parte inferior derecha de la pantalla de Google Web Fonts (#1 en la Figura 6-9), haga clic en el botón Usar. Se abre una página con varias opciones, así como el código que necesita copiar. 2.Elija el estilo que desea usar (#2 en la Figura 6-9). Algunas fuentes incluyen cursiva, negrita y otras variantes de la fuente normal. Para el cuerpo del texto, normalmente querrá al menos regular, cursiva y negrita. En el caso de un título, generalmente puede salirse con la suya con una sola fuente. También notará que hay un "marcado rápido" a la derecha de esta página. A medida que agrega más estilos y fuentes, la marcación rápida gira en el sentido de las agujas del reloj, lo que indica que llevará más tiempo descargar las fuentes. 150 Css3: el manual perdido www.it-ebooks.info DESCUBRIENDO Ese es un inconveniente de las fuentes web. Dado que los visitantes de su sitio necesitan descargarlos (así como la página web, las hojas de estilo externas, los gráficos y otros WEB DE GOOGLE FUENTES elementos que componen su página), tenga cuidado de no volverse loco y usar demasiadas fuentes. De lo contrario, las personas tendrán que esperar mucho tiempo para que aparezcan las fuentes. El número en el dial indica la cantidad de milisegundos (en promedio) que tomará descargar los archivos de fuentes. 3.opcionalmente, elija los conjuntos de caracteres que desee. Este paso no es obligatorio y es posible que no esté disponible para todas las fuentes. Además, si seleccionó un juego de caracteres que no sea latino (vea el último punto en la página 148), es posible que vea otras opciones además de Latin y Latin Extended. Latin Extended es una buena opción si su texto contiene palabras en un idioma que utiliza caracteres de acento particulares como turco, galés y húngaro. Para la mayoría de los idiomas basados en el latín, como el francés y el español, todo lo que necesita es el alfabeto latino normal. Es mejor que no uses el latín extendido si no lo necesitas, ya que usarlo agrega tamaño de archivo y tiempo de descarga a la fuente. NotaPara ver una lista de los caracteres adicionales disponibles en Latin Extended visitehttp://en.wikipedia.org/wiki/ Latin_Extended-A. 4.Copie el código en el cuadro "Agregue este código a su sitio web" (#3 en la Figura 6-9). Tienes tres opciones aquí. • Estándarproporciona un <enlace>etiqueta que apunta a una hoja de estilo externa (esto es lo mismo que vincular a cualquier hoja de estilo externa, como se describe en la página 48). Sin embargo, este es en realidad un enlace especial que apunta al servidor web de Google y proporciona la información que Google necesita para entregar las fuentes adecuadas. Por ejemplo: <link href='http://fonts.googleapis.com/css?family=Codystar:300,400|Gent ium+Book+Basic:400,400italic' rel='stylesheet' type='text/css'> Note que al final de lahrefatributo, se enumeran las fuentes y sus estilos. En este ejemplo, las fuentes son Codystar y Gentium. Y Google cargará varios estilos: 300 y 400 para Codystar y 400 y 400italic para Gentium. Esos números son una forma de indicar el peso (o grosor) de la fuente y se analizan en el Paso 6 en la página 152. NotaSi está utilizando HTML5, puede omitir el "tipo = 'texto/css'"parte de la etiqueta <link>. No es necesario en HTML5. • Otra opción es@importar. Haga clic en la pestaña @importar en el paso 3 de la página web (consulte la Figura 6-9) para ver el código necesario para usar @importardiscutida en la página 42. El beneficio de este enfoque es que puede agregar @importaral comienzo de otra hoja de estilo. Por ejemplo, digamos que tienes Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 151 DESCUBRIENDO WEB DE GOOGLE una sola hoja de estilo externa para su sitio, y ha vinculado todas las páginas de su sitio a ella. El estándar <enlace>El método requiere que agregue ese código a cada página de su sitio. Sin embargo, con el @importarmétodo, puede agregar el código a su única hoja de estilo externa y listo. FUENTES • Finalmente, puede elegir unJavaScriptacercarse. Este libro no cubre este método, ya que requiere mucho código y, a menos que conozca muy bien JavaScript, es fácil cometer un error. Además, no ofrece mucho beneficio sobre las otras opciones. 5.Pegue el código en las páginas web de su sitio. En el caso de <enlace>método descrito en el paso anterior, debe pegar el código en cada página en la que desee utilizar las fuentes. Si recién está comenzando el proceso de creación de su sitio, esto no es un gran problema, pero si ya tiene muchas páginas, esto puede terminar siendo un poco de trabajo. En ese caso, considere el @importarmétodo: puedes colocar la @importarcódigo en la parte superior de la hoja de estilo externa de su sitio, y luego todas las páginas que se vinculan a esa hoja de estilo también descargarán las fuentes adecuadas. NotaEl @importarEl método puede tener un ligero efecto en el rendimiento de su sitio web (es decir, la velocidad). 6.Crea estilos usando las fuentes. Ahora que las fuentes se están cargando, puede usarlas como cualquier otra fuente. Solo crea un estilo, agrega elFamilia tipográficapropiedad, y enumere la fuente. La página Fuentes web de Google muestra el nombre de la fuente en la parte inferior de la página Usar (#4 en la Figura 6-9). Si está utilizando varios estilos de una fuente, también debe agregar elpeso de fuentey Estilo de fuentepropiedades al estilo. Google no usa el regular normaloatrevidopalabras clave para indicar el peso de una fuente. En su lugar, utiliza una escala numérica de 100 a 900. Un valor de 700 está en negrita, 400 es normal y los otros números indican variaciones en el grosor. Por ejemplo, supongamos que desea aplicar la versión en cursiva regular de la fuente Gentium Book Basic al <em>etiqueta. Puedes escribir este estilo: ellos { familia de fuentes: "Gentium Book Basic", serif; peso de fuente: 400; estilo de fuente: cursiva;} 152 Css3: el manual perdido www.it-ebooks.info DESCUBRIENDO WEB DE GOOGLE FUENTES Figura 6-9 Cuando esté listo para usar las fuentes de Google que ha agregado a su colección, haga clic en el botón Usar en la parte inferior derecha (#1), los estilos que desee (#2) y el método que le gustaría usar. para adjuntar esas fuentes a una página. La forma más común es simplemente vincular a una hoja de estilo que carga las fuentes de los servidores de Google. Hasta la velocidad TypeKit, una alternativa a Google Debido a los requisitos técnicos y legales para el uso de fuentes web, Adobe (que fabrica fuentes además de todo el otro software que han surgido varias empresas que se encargan de todo el trabajo pesado crean), tiene acceso a una amplia gama de fuentes creadas por usted. Google Web Fonts es un ejemplo, pero hay otros. Estos profesionalmente. Con TypeKit, puede crearequipos, o colecciones servicios de fuentesle permite seleccionar entre una gran colección de de fuentes, y asignarlas a un sitio web. Luego agrega un fuentes alojadas en sus propios servidores web. En otras palabras, no fragmento de código JavaScript a cada página de su sitio. Este coloca las fuentes en su servidor, simplemente hace referencia a sus código se conecta con los servidores de TypeKit y entrega las servidores utilizando un fragmento de código CSS o JavaScript. Estos fuentes que solicitó a los visitantes de su sitio. TypeKit es un servicios se encargan de enviar el formato de fuente adecuado (EOT a IE servicio comercial, aunque ofrece una versión de prueba limitada 8 y versiones anteriores, por ejemplo) a los navegadores de sus y gratuita. Según la cantidad de fuentes a las que desee acceder y visitantes. la cantidad de personas que visitan su sitio web cada mes, puede Un servicio comercial de Adobe, llamado TypeKit, también ofrece una terminar gastando entre $ 24 y $ 99 al año. amplia selección de fuentes, pero por una tarifa. porque es parte de Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 153 AGREGAR COLOR Textear Agregar color al texto El blanco y negro es ideal paracasablancay las películas de Woody Allen, pero cuando se trata de texto, un bonito horizonte azul se ve mucho más nítido y elegante que el negro monótono. Colorear tu texto con CSS es fácil. De hecho, has usado elcolorpropiedad en algunos tutoriales ya. Tiene varias formas diferentes de definir el color exacto que desea, pero todas siguen la misma estructura básica. tu escribescolor:seguido de un valor de color: color: #3E8988; En este ejemplo, el valor del color es un número hexadecimal que indica un tono apagado de verde azulado (más información en un momento sobre lo que es hexadecimal). Cada programa de gráficos, desde Fireworks hasta Photoshop y GIMP, le permite seleccionar un color utilizando valores hexadecimales o RGB. Además, los selectores de color integrados en Windows y Mac le permiten usar una rueda o paleta de colores para seleccionar el color perfecto y traducirlo a un valor hexadecimal o RGB. NotaSi su sentido del diseño de color necesita ayuda, puede encontrar muchas colecciones de colores atractivas y coordinadas, así como excelentes recursos relacionados con el color enwww.colorlovers.com. Notación de color hexadecimal El sistema de color más antiguo utilizado por los diseñadores web es la notación hexadecimal. Un valor de color, como #6600FF, en realidad contiene tres números hexadecimales (en este ejemplo, 66, 00, FF), cada uno de los cuales especifica una cantidad de rojo, verde y azul, respectivamente. Como en el sistema de color RGB que se describe a continuación, el valor de color final es una combinación de las cantidades de rojo, verde y azul especificadas por estos números. CONSEJOPuede acortar los números hexadecimales a solo tres caracteres si cada conjunto contiene los mismos dos números. Por ejemplo, acorte #6600FF a #60F o #FFFFFF a #FFF. RGB También puede usar el método RGB (rojo, verde, azul) familiar en los programas de gráficos por computadora. El valor del color consta de tres números que representan porcentajes (0 a 100 por ciento) o números entre 0 y 255 para cada tono (rojo, verde y azul). Entonces, cuando desee establecer el color del texto en blanco (tal vez para diferenciarlo de un fondo de página oscuro y siniestro), puede usar esto: color: rgb (100%, 100%, 100%); o color: rgb (255,255,255); 154 Css3: el manual perdido www.it-ebooks.info NotaSi todos estos números y dígitos le dan vueltas en la cabeza, entonces siempre puede recurrir a las palabras clave de color HTML clásicas. (Simplemente no espere que su sitio gane ningún premio por su originalidad). Hay 17 colores: aguamarina, AGREGAR COLOR Textear negro, azul, fucsia, gris, verde, lima, granate, azul marino, verde oliva, naranja, morado, rojo, plateado, verde azulado. , blanco y amarillo. En CSS, los agregas a tu estilo así:color: fucsia;.Además, la mayoría de los navegadores admiten 147 colores SVG (también llamados colores X11), por lo que si realmente quiere presumir, comience a usar colores como lino, chocolate, caqui y humo blanco. Puede encontrar estos colores listados enhttps://developer.mozilla.org/en-US/docs/CSS/color_value. RGBA Para agregar profundidad a una página, considere uno de los métodos de color más nuevos. RGBA significa rojo, verde, azul, alfa y funciona igual que los colores RGB con la adición de un alfacanal. Es decir, puede especificar un nivel de opacidad para que el color no sea sólido, sino transparente (vea la Figura 6-10). A los colores RGB se les suma un último número, un valor entre0y1.un valor de0hace que el color sea invisible, mientras que1hace que el color sea totalmente opaco (es decir, no se puede ver a través de él): color: rgba(255, 100, 50, .5); Puede crear efectos visuales interesantes colocando texto en color RGBA sobre imágenes de fondo. Por ejemplo, puede hacer que las imágenes se filtren un poco a través del color del texto (usando un valor alto como .9)o mucho (usando un valor bajo como .1). CONSEJORGBA funciona particularmente bien con elsombra de textopropiedad discutida en la página 166 y la sombra de la cajapropiedad discutida en la página 210. Con RGBA, puede crear efectos de sombra aún más sutiles al dejar que se vea más parte del fondo a través de la sombra. ¿La baja? Internet Explorer 8 y versiones anteriores no entienden el color RGBA. Una solución es declarar un color sólido primero usando notación hexadecimal y luego una segunda propiedad de color con color RGBA, como esta: color: rgb (255,100,50); /* para IE8 */ color: rgba(255,100,50,.5); /* para navegadores más nuevos */ Todos los navegadores interpretan la primera línea; la segunda línea anula la primera línea, pero solo para navegadores que entienden el color RGBA. En otras palabras, IE 8 aplica la primera declaración de color e ignora la segunda, mientras que IE 9 y otros navegadores aplican el color RGBA. Simplemente no obtendrá el efecto de transparencia en IE 8. Además, esta técnica no funciona en IE 7, que simplemente ignora ambas líneas y aplica un color negro. Afortunadamente, el uso de IE 7 tiende a cero, por lo que probablemente no deba preocuparse por eso. (Para hacer que la transparencia alfa funcione en IE 7 y 8, consulte la nota en la página 156). Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 155 AGREGAR COLOR Textear Figura 6-10 Los colores RGBA no son solo para texto. Puede usar el color RGBA con cualquier propiedad CSS que acepte un valor de color, como el color de fondo del cuadro de búsqueda en la parte superior derecha de esta imagen, o el color de los botones de navegación: Inicio, Archivos, Autores, etc. NotaSi desea conservar el efecto de transparencia para IE 7 y 8, puede hacerlo. Solo requiere un poco de magia solo de IE. Teniendo en cuenta que IE 7 está a punto de desaparecer, es posible que no quiera molestarse, pero puede aprender cómo hacerlo enhttp://css-trucos. com/rgba-navegador-soporte. HSL Y HSLA HSL significa tono, saturación y luminosidad (a veces también etiquetados comoluminancia). Es otra forma de especificar el color. No es compatible con Internet Explorer 8 o anterior, pero funciona en todos los demás navegadores. Si está acostumbrado a los colores RGB o hexadecimales, puede encontrar la sintaxis HSL un poco inusual. Aquí hay un ejemplo de un color rojo brillante: color: hsl(0, 100%, 50%); Usted proporciona tres valores dentrohsl( ).El primero es un valor de grado de0a360,que se asigna a un círculo de matices. Si recuerdas el orden de los colores en un arco iris—rojo, naranja, amarillo, verde, azul, índigo,yVioleta (ROYGBIV), entonces tiene una idea básica de los valores que necesitará para especificar un color. rojo es0 (es también360,ya que es una rotación completa alrededor de un círculo), el amarillo es alrededor50,naranja alrededor100,verde alrededor 150,etcétera. Cada color está separado por alrededor de 51 grados. El segundo es la saturación, o qué tan puro es el color. Usted especifica la saturación en un porcentaje de0%a100%.un valor de0%no hay saturación en absoluto, o es un gris opaco. De hecho, no importa el tono que especifique,0%producirá el mismo tono gris. Un valor 156 Css3: el manual perdido www.it-ebooks.info de100%es el color puro, brillante y vibrante. El tercer valor es el valor de luminosidad, especificado en un porcentaje de0% (completamente negro) a100% (completamente blanco). Si desea tener un color puro, utilice un valor de50%. Cambiando Tamaño de fuente Se supone que HSL es más intuitivo que los valores de color RGB o hexadecimales, pero si no lo encuentra fácil de entender, no tiene que usarlo. En su lugar, utilice un programa como Fireworks o Photoshop o un selector de color en línea, cada uno de los cuales facilita la elección de un valor RGB o hexadecimal. NotaSi está interesado en usar HSL, encontrará un selector de color HSL fácil de usar enwww.trabajarconcolor . com/hsl-color-schemer-01.htm. Así como RGB tiene su formato complementario, RGBA, HSL admite la opacidad con el formato HSLA. Funciona de manera similar a RGB descrito en la página 155. Especifique un valor de opacidad de0 ( invisible) a1 (totalmente opaco) para establecer el valor de opacidad. Esto creará un color rojo brillante con50%opacidad: color: hsla(0, 100%, 50%, .5); La mayoría de los ejemplos en este libro se apegan a RGBA, pero si encuentra que HSL es más fácil de entender, ¡utilícelo! Cambiar el tamaño de fuente Variar el tamaño del texto en una página web es una excelente manera de crear interés visual y dirigir la atención de los visitantes a áreas importantes de una página. Los titulares en letra grande captan la atención, mientras que los avisos de derechos de autor que se muestran en letra pequeña pierden sutilmente protagonismo. Eltamaño de fuentepropiedad establece el tamaño del texto. Siempre va seguido de una unidad de medida, así: tamaño de fuente: 1em; El valor y la unidad que especifique para el tamaño de fuente (en este ejemplo, 1em) determinan el tamaño del texto. CSS ofrece una selección vertiginosa de unidades de tamaño: palabras clave, ems, exs, píxeles, porcentajes, picas, puntos e incluso pulgadas, centímetros y milímetros. Las unidades de medida comúnmente utilizadas con materiales impresos (picas, puntos, pulgadas, etc.) no funcionan bien en las páginas web porque no se puede predecir cómo se verán de un monitor a otro. Pero es posible que tenga la oportunidad de usar puntos al crear hojas de estilo para páginas fáciles de imprimir, como se describe en la página 523. Solo algunas de las unidades de medida (píxeles, palabras clave, ems y porcentajes) tienen sentido cuando está ajustando el tamaño del texto para un monitor de computadora El resto de esta sección explica cómo funcionan. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 157 Cambiando Tamaño de fuente Uso de píxeles Los valores de píxel son los más fáciles de entender, ya que son completamente independientes de la configuración del navegador. Cuando especifica, por ejemplo, un tamaño de fuente de 36 píxeles para un < h1>etiqueta, el navegador web muestra un texto de 36 píxeles de alto, punto. Los diseñadores web aprecian los valores de píxeles porque proporcionan tamaños de texto consistentes en diferentes tipos de computadoras y navegadores. Para establecer un valor de píxel para eltamaño de fuentepropiedad, escriba un número seguido de la abreviaturapíxeles: tamaño de fuente: 36px; NotaNo incluya un espacio entre el número y el tipo de unidad. Por ejemplo,36pxes correcto, pero 36 píxelesno lo es Hasta la velocidad Píxeles y pantallas retina Cuando Apple presentó el iPhone con Retina Display, los propietarios de iPhone Cuando se trata de los píxeles mencionados anteriormente, los navegadores en se regocijaron por la claridad y nitidez de las imágenes. La pantalla Retina de dispositivos con pantallas Retina en realidad multiplican un valor de píxel por 2. Apple brinda su imagen clara al incluir más píxeles en una pulgada cuadrada. Es decir, si especifica que el texto sea de 16 píxeles, un navegador web Mientras que las pantallas de computadora normales varían de 72 a 100 píxeles habilitado para pantalla Retina en realidad usará 32 píxeles en el pantalla para por pulgada, las nuevas pantallas Retina cuentan con más de 224 píxeles por dibujar el texto. Ésto es una cosa buena. Si el navegador solo usara 16 de sus pulgada. diminutos píxeles para mostrar el texto, entonces nadie podría leer lo que Desde entonces, Apple ha agregado pantallas Retina a iPads y computadoras tienes que decir. portátiles. Otros fabricantes de tabletas como Amazon también se están En otras palabras, aunque las pantallas más densas están entrando en subiendo al carro, ofreciendo considerablemente más píxeles por pulgada que el mundo de la informática móvil y de escritorio, de repente no harán las pantallas más antiguas. ¿Qué significa esto para los diseñadores web? que el tipo basado en píxeles en sus páginas web parezca Bastante. Como leerá en el cuadro de la página 473, estas pantallas tienen un microscópicamente pequeño. efecto considerable en las imágenes, y tendrá que trabajar un poco para crear imágenes de gran apariencia para pantallas de píxeles densos. Uso de palabras clave, porcentajes y ems Las tres formas de cambiar el tamaño del texto con CSS (palabras clave, porcentajes y ems) funcionan sumando o restando del tamaño del texto que ya aparece en la pantalla del navegador del usuario. En otras palabras, si no especifica un tamaño de texto usando CSS, un navegador web recurre a su configuración preprogramada. En la mayoría de los navegadores, el texto dentro de una etiqueta que no es de encabezado se muestra con una altura de 16 píxeles, lo que se denominatamaño de texto base. Los internautas pueden ajustar sus navegadores aumentando o disminuyendo ese tamaño base; sin embargo, cambiar el tamaño de fuente base requiere jugar con la configuración de preferencias del navegador, un paso con el que la mayoría de la gente no se molestará. 158 Css3: el manual perdido www.it-ebooks.info NotaLa mayoría de los navegadores tienen unzoomfunción que hace que el texto, los gráficos y toda la página sean más pequeños o más grandes. Esta configuración realmente no cambia el tamaño del texto base tanto como amplía la página completa. Ctrl++ (c+)en la mayoría de Cambiando Tamaño de fuente los navegadores acerca una página, mientras que Ctrl+- (C--)se aleja. Presionar la tecla Ctrl (Control) y usar la rueda de desplazamiento de un mouse también le permite acercar y alejar una página. Cuando cambia el tamaño del texto con CSS, el navegador toma el tamaño del texto base (ya sean los 16 píxeles originales o algún otro tamaño que haya pedido el espectador) y lo ajusta hacia arriba o hacia abajo según su palabra clave, em o valor porcentual. PALABRAS CLAVE CSS proporciona siete palabras clave que le permiten asignar un tamaño relativo al tamaño del texto base:xx-pequeño, x-pequeño, pequeño, mediano, grande, extragrande,yxx-grande.El CSS se ve así: tamaño de fuente: grande; La opción mediana es la misma que el tamaño de fuente base del navegador. Cada una de las otras opciones disminuye o aumenta el tamaño por un factor diferente. En otras palabras, si bien se supone que cada cambio de tamaño es un aumento o disminución constante del tamaño anterior, no lo es. Básicamente,xx-pequeñoes el equivalente a 9 píxeles (suponiendo que no haya ajustado el tamaño de fuente base en su navegador);extra pequeñoes de 10 píxeles,pequeñoes de 13 píxeles, grandees de 18 píxeles;extragrandees de 24 píxeles, yxx-grandees de 32 píxeles. Las palabras clave son bastante limitadas: solo tiene siete opciones. Cuando desee tener más control sobre el tamaño de su texto, recurra a una de las otras opciones de tamaño de fuente que se analizan a continuación. PORCENTAJES Al igual que las palabras clave, los valores porcentuales ajustan el texto en relación con el tamaño de fuente definido por el navegador, pero le brindan un control mucho más preciso que sologrande,extragrande,etcétera. Cada navegador tiene un tamaño de texto base preprogramado, que en la mayoría de los navegadores es de 16 píxeles. Puede ajustar este tamaño base en las preferencias de su navegador. Cualquiera que sea la configuración que se haya elegido, el tamaño de texto base para un navegador en particular es equivalente a 100%.En otras palabras, para la mayoría de los navegadores, establecer el porcentaje de CSS en100%es lo mismo que establecerlo en 16 píxeles. Supongamos que desea que un título en particular aparezca dos veces el tamaño del texto promedio en una página. Simplemente establezca el tamaño de fuente en200%,al igual que: tamaño de fuente: 200%; O, cuando desee que el texto sea un poco más pequeño que el tamaño predeterminado, use un valor como 90%para reducir un poco el tamaño de la fuente. Los ejemplos anteriores son bastante sencillos, pero aquí es donde se complica un poco: el tamaño de fuente es una propiedad heredada (consulte el Capítulo 4), lo que significa que cualquier etiqueta dentro de una etiqueta que tenga un tamaño de fuente especificado hereda ese tamaño de fuente. Así que el tamaño exacto de100%puede cambiar si una etiqueta hereda untamaño de fuentevalor. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 159 Cambiando Tamaño de fuente Por ejemplo, en la parte inferior izquierda de la Figura 6-11, hay un <div>etiqueta que tiene su tamaño de fuente establecido en200%.Eso es dos veces el tamaño del texto base del navegador, o 32 píxeles. Todas las etiquetas dentro de eso <div>heredar ese tamaño de texto y usarlo como base para calcular sus tamaños de texto. En otras palabras, para las etiquetas dentro de ese <división>, 100%es de 32 píxeles. Así que el <h1> etiqueta dentro del <div>que tiene un tamaño de fuente de100%muestra el doble del tamaño del texto base de la página, o 32 píxeles. Figura 6-11 Las tres unidades más comunes para el tamaño del texto: píxeles, ems y porcentajes. cuidado con tamaños de texto heredados al usar ems o porcentajes, como se explica en la página 159. Si nota que parte del texto en una página parece inusualmente grande o pequeño, luego verifique si el texto ofensivo no está dentro de una etiqueta que hereda un tamaño de fuente de otra etiqueta. ccsme Una vez que entiendes los porcentajes, sabes todo lo que necesitas para entender ems. Los dos funcionan exactamente de la misma manera, pero muchos diseñadores web usan ems debido a sus raíces en la tipografía. La palabraellosproviene del mundo de la tipografía impresa (como en papel), donde se refiere al tamaño de una letra M mayúscula para una fuente en particular. A medida que se abrió camino en el mundo web, un em en CSS ya no significa lo mismo que en tipografía. Piense en ello como una referencia al tamaño del texto base. Es decir, un valor de 1em significa lo mismo que un valor de 100 por ciento, como se describe en la sección anterior. Tu puedes incluso 160 Css3: el manual perdido www.it-ebooks.info dígalo de la manera opuesta: un valor porcentual es solo un em multiplicado por 100: .5em es 50 por ciento, .75em es 75 por ciento, 3em es 300 por ciento, y así sucesivamente. Cambiando Tamaño de fuente Por ejemplo, este CSS hace exactamente lo mismo quetamaño de fuente: 200%;: tamaño de fuente: 2em; NotaAl igual que con los valores de píxeles, no hay espacio entre el número y la palabraem.Además, incluso si especifica más de un em, nunca agrega unshasta el final:2,5 em,nunca2,5 ems. Cuando se trata de herencia, los ems también funcionan como valores porcentuales. Consulte la parte superior derecha de la Figura 6-11 para ver un ejemplo. El párrafo inferior se establece en . 75em, que, desde el <p>hereda la configuración de 2em (32 píxeles) de <div>etiqueta, funciona a 0,75 x 32 o 24 píxeles. Dentro del <p>tag son otras dos etiquetas que también tienen un tamaño de fuenteajuste de .75em.La etiqueta más interna, un <fuerte>etiqueta, se establece en .75emo, en esencia, el 75 por ciento de suheredadotamaño. Hay muchas matemáticas en este: 32 píxeles (heredados de <div>etiqueta) x .75 (heredada de <p>etiqueta) x .75 (heredada de <em>etiqueta) x .75 (el <fuerte>propio tamaño de fuente de la etiqueta). El resultado de este acertijo es un tamaño de texto de aproximadamente 14 píxeles. TALLER DE TRABAJO Desenredando el nido Los valores de tamaño de fuente heredados pueden causar problemas para las Este estilo hace que el tamaño de fuente sea .75 del tamaño de texto base, no el tamaño listas anidadas. (Vea el cuadrado inferior derecho de la Figura 6-11.) Si crea un de fuente actual (como es el caso con ems). El elemento raíz en HTML es en realidad el estilo comoul {tamaño de fuente: 75%},luego una lista anidada, que es un <ul> htmlelemento que se encuentra al principio de una página web. Cuando usas etiqueta dentro de otra <ul>etiqueta, se establece en el 75 por ciento del 75 por movimiento rápido del ojovalores, puede establecer el tamaño del texto base delhtml ciento, lo que hace que el texto de la lista anidada sea más pequeño que el elemento y luego usarmovimiento rápido del ojounidades para configurar el texto a un resto de la lista. tamaño relativo a eso. Por ejemplo, puede establecer el tamaño del texto base en 20 Para sortear este dilema, cree un estilo de selector descendiente píxeles de esta manera: adicional como este:ul ul {tamaño de fuente: 100%}.Este estilo establece html { cualquieruletiqueta dentro de unulal 100 por ciento: en otras palabras, tamaño de fuente: 20px; } el 100 por ciento de los alrededoresultamaño de fuente de la etiqueta. En este ejemplo, mantiene las listas anidadas en un 75 por ciento del Entonces usamovimiento rápido del ojounidades para crear fuentes en relación con ese tamaño de tamaño del texto base. texto base de 20 píxeles. Por ejemplo, para que todos los párrafos tengan un tamaño de 15 píxeles, Hay otra manera de evitar este efecto de texto de reducción de espejos. CSS3 agregue este estilo. incluye una nueva unidad de medida llamadamovimiento rápido del ojo. No, no pag { lleva el nombre de patrones de sueño o de una banda. Significa Root EM, lo que significa que su valor se basa en el tamaño del texto del elemento raíz. En la tamaño de fuente: .75rem; } mayoría de los casos, esto solo significa el tamaño del texto base, por lo que puede cambiar el .75em que se muestra en la Figura 6-11 a esto: Sin embargo, debe tener en cuenta que, si bien la mayoría de los navegadores ahora entienden el movimiento rápido del ojounidad, Internet Explorer 8 y versiones anteriores no. tamaño de fuente: .75rem; Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 161 FORMATO PALABRAS Y Letras CONSEJOPuede hacer que el texto se destaque en una página de muchas maneras diferentes. Hacer que ciertas palabras sean más grandes que otras o hacer que un texto sea más oscuro, más claro o más brillante las distingue visualmente del texto que las rodea. El contraste es uno de los principios más importantes del buen diseño gráfico; puede ayudar a resaltar mensajes importantes, guiar la vista del lector por una página y, en general, facilitar la comprensión de una página. Para obtener una descripción general rápida del contraste tipográfico, consulte esta página:www.creativepro.com/story/feature/19877.html. Dar formato a palabras y letras Aunque pasará mucho tiempo ajustando el color, el tamaño y las fuentes del texto en sus páginas web, CSS también le permite aplicar otras propiedades comunes de formato de texto (como negrita y cursiva), así como algunas menos comunes. (como versalitas y espaciado entre letras). NotaCSS le permite combinar múltiples propiedades de texto, pero no se deje llevar. Demasiado formato ocupado hace que su página sea más difícil de leer. Lo peor de todo es que su arduo trabajo pierde su impacto. Cursiva y negrita Los navegadores web muestran el tipo dentro de <em>y <yo>etiquetas enen cursivatipo y texto dentro del < fuerte>, <b>, <th> (encabezado de tabla) y etiquetas de encabezado (<h1>,y así sucesivamente) en atrevido tipo. Pero puede controlar estas configuraciones usted mismo, ya sea desactivar la negrita para un título o poner en cursiva el texto que normalmente no lo está, usando elEstilo de fuenteypeso de fuente propiedades. Para poner texto en cursiva, agregue esto a un estilo: estilo de fuente: cursiva; Alternativamente, puede asegurarse de que el textono esen cursiva, así: estilo de fuente: normal; NotaElEstilo de fuentela propiedad en realidad tiene una tercera opción:oblicuo-que funciona de forma idéntica a itálico. Elpeso de fuenteLa propiedad le permite poner el texto en negrita o no. De hecho, de acuerdo con las reglas de CSS, puede especificar nueve valores numéricos (100–900) para elegir gradaciones sutiles de negrita (desde súper extra pesado [900] hasta casi invisible ligero [100]). Por supuesto, las fuentes que utilice deben tener nueve pesos diferentes para que estos valores tengan un efecto visible para los visitantes de su sitio web. La única manera de usar los valores numéricos es con las fuentes web que se analizan en la página 132. De hecho, Google Web Fonts (página 146) usa los valores numéricos exclusivamente para especificar los pesos de las fuentes. NotaAl usar fuentes web, descubrirá que poner el texto en negrita y cursiva requiere algunos pasos más. Consulte la página 140 para conocer los detalles. 162 Css3: el manual perdido www.it-ebooks.info FORMATO PALABRAS Y Letras Para poner el texto en negrita: fuente-peso: negrita; Y para hacer que el texto no esté en negrita: peso de fuente: normal; NotaDado que los titulares ya se muestran en negrita, es posible que desee encontrar otra forma de resaltar una palabra o palabras que estén fuertemente enfatizadas o en negrita dentro de un título. Aquí hay una manera: h1 fuerte {color: #3399FF; } Este selector descendente cambia el color de cualquier <fuerte>etiquetas (generalmente mostradas en negrita) que aparecen dentro de un < h1>etiqueta. capitalizando Poner en mayúsculas el texto es bastante fácil: solo presione la tecla de bloqueo de mayúsculas y comience a escribir, ¿verdad? Pero, ¿qué sucede si desea poner en mayúsculas todos los encabezados de una página y el texto que ha copiado y pegado de un documento de Word está en minúsculas? En lugar de volver a escribir el título, recurra al CSStransformación de textopropiedad. Con él, puede escribir todo el texto en mayúsculas, minúsculas o incluso escribir en mayúsculas la primera letra de cada palabra (para títulos y titulares). Aquí hay un ejemplo: transformación de texto: mayúsculas; Para las otras dos opciones, simplemente useminúsculasocapitalizar. Debido a que esta propiedad se hereda, una etiqueta anidada dentro de una etiqueta con transformación de textoaplicado obtiene el mismo valor en mayúsculas, minúsculas o mayúsculas. Para decirle a CSSnopara cambiar el caso del texto, use elningunovalor: transformación de texto: ninguno; LETRAS MINÚSCULAS Para una mayor sofisticación tipográfica, también puede recurrir a lavariante de fuentepropiedad, que le permite establecer el tipo comoletras minúsculas.En el estilo de versalita, las letras minúsculas aparecen como letras mayúsculas ligeramente reducidas, así:PAGyCirCustancia. Si bien es difícil leer largas extensiones de texto, las versalitas le dan a su página una seriedad de libro del viejo mundo cuando se usan en títulos y subtítulos. Para crear texto en mayúsculas pequeñas: variante de fuente: versalitas; decoración CSS también proporciona ladecoración de textopropiedad para agregar varias mejoras al texto. Con él, puede agregar líneas sobre, debajo o a través del texto (vea la Figura 6-12), o para reírse de verdad, puede hacer que el texto parpadee como un letrero de No Vacancy. Utilizar eldecoración de textopropiedad agregando una o más de las siguientes palabras clave:subrayar, superposición,línea a través,oparpadear.Por ejemplo, para subrayar texto: Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 163 FORMATO PALABRAS Y Letras decoración de texto: subrayado; Figura 6-12 Eldecoración de textopropiedad en acción. Si esto es lo que la gente de la sede central de CSS llama "decoraciones", es mejor que no les pida ayuda con el diseño de la próxima remodelación de su casa. También puede combinar varias palabras clave para obtener múltiples efectos. Aquí se explica cómo agregar una línea encima y debajo de un texto: decoración de texto: subrayado sobrerayado; Pero solo porque tupoderagregar estas decoraciones no tan decorativas al texto no significa que debas hacerlo. Por un lado, cualquier persona que haya usado la Web durante un período de tiempo instintivo asocia cualquier texto subrayado con un enlace e intenta hacer clic en él. Por lo tanto, no es una buena idea subrayar las palabras que no forman parte de un enlace. Yparpadeares como un letrero de neón que destella “¡Amateur! ¡Aficionado! ¡Aficionado!" (Probablemente por eso la mayoría de los navegadores no hacen que el texto parpadee, incluso si lo solicita). NotaPuede obtener un efecto similar al subrayado y el sobrerayado agregando un borde en la parte inferior o superior de un elemento (consulte la página 298). La gran ventaja de los bordes es que puede controlar su ubicación, tamaño y color para crear un diseño más atractivo que no parezca un enlace. Elsuperposiciónsimplemente dibuja una línea sobre el texto, mientras quelínea directadibuja una línea a través del centro del texto. Algunos diseñadores usan este efecto de tachado para indicar una edición en una página donde se eliminó texto del manuscrito original. Finalmente, puede apagar todas las decoraciones usando elningunopalabra clave como esta: texto-decoración: ninguno; 164 Css3: el manual perdido www.it-ebooks.info ¿Por qué necesita una propiedad de decoración de texto que elimine las decoraciones? El ejemplo más común es eliminar la línea que aparece debajo de un enlace. (Consulte la página 297.) FORMATO PALABRAS Y Letras Espaciado entre letras y palabras Otra forma de hacer que el texto se destaque entre la multitud es ajustar el espacio que aparece entre letras o palabras (consulte la Figura 6-13). Reduciendo el espacio entre letras usando el CSS espaciado de letrasLa propiedad puede ajustar los titulares, haciéndolos parecer aún más audaces y pesados al mismo tiempo que se ajustan más letras en una sola línea. Por el contrario, aumentar el espacio puede dar a los titulares una calidad más tranquila y majestuosa. Para reducir el espacio entre letras, usa un valor negativo como este: espaciado entre letras: -1px; Un valor positivo agrega espacio entre letras: espaciado entre letras: 0,7 em; Del mismo modo, puede abrir espacio (o eliminar espacio) entre palabras usando elespacio entre palabraspropiedad. Esta propiedad hace que el espacio entre las palabras sea más ancho (o más estrecho) sin afectar realmente el espacio entre las letras dentro de una palabra: espacio entre palabras: 2px; Con cualquiera de estas propiedades, puede usar cualquier tipo de medida que usaría para el tamaño del texto (píxeles, ems, porcentajes) con valores positivos o negativos. Figura 6-13 Use juiciosamente el espacio entre palabras y letras. Demasiado o muy poco de cualquiera puede hacer que el texto sea difícil, si no imposible, de leer. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 165 AÑADIR TEXTO Sombra A menos que busque un efecto de diseño realmente extremo, en otras palabras, texto totalmente ilegible, mantenga sus valores pequeños. Un valor negativo demasiado alto y las letras y las palabras se superponen. Para mantener el mensaje de su sitio claro y legible, utilice con cuidado el espacio entre letras y palabras. Agregar sombra de texto CSS3 incluye una propiedad que le permite agregar sombras paralelas al texto para agregar profundidad e interés a los títulos, listas y párrafos (vea la Figura 6-14). Figura 6-14 Las sombras de texto son una excelente manera de agregar profundidad sutil (o, si insiste, no tan sutil) a los títulos y otros textos. sin embargo, elsombra de textoLa propiedad no funciona en Internet Explorer 9 o anterior. Elsombra de textoLa propiedad requiere cuatro piezas de información: el desplazamiento horizontal (a qué distancia a la izquierda o a la derecha del texto debe aparecer la sombra), el desplazamiento vertical (a qué distancia por encima o por debajo del texto debe aparecer la sombra), la borrosidad de la sombra, y el color de la sombra. Por ejemplo, aquí está elsombra de texto propiedad que crea el efecto en la parte superior de la Figura 6-14: sombra de texto: -4px 4px 3px #999999; El primer valor—-4 píxeles—significa "colocar la sombra 4 píxeles a la izquierda del texto". (Un valor positivo aquí colocaría la sombra a la derecha del texto). El segundo valor:4 píxeles— coloca la sombra 4 píxeles por debajo del texto. (Un valor negativo colocaría la sombra sobre el texto).3 píxelesEl valor define qué tan borrosa debe ser la sombra. A0 píxelesvalor (sin desenfoque) da como resultado una sombra nítida; cuanto mayor sea el valor, más borrosa e indistinta será la sombra. Finalmente, el último valor es el color de la sombra paralela. Incluso puede agregar múltiples sombras paralelas para obtener efectos más complejos (vea la imagen inferior en la Figura 6-14): simplemente agregue una coma seguida de valores adicionales de sombra paralela, como este: sombra de texto: -4px 4px 3px #666, 1px -1px 2px #000; No hay límite (excepto el buen gusto) para la cantidad de sombras que puede agregar de esta manera. Lamentablemente, este efecto no funciona en Internet Explorer 9 o anterior. No obstante, funciona 166 Css3: el manual perdido www.it-ebooks.info FORMATO en todos los demás navegadores actuales (incluso IE 10). En otras palabras,noconfíe en este efecto para hacer que el texto sea legible. La imagen inferior de la Figura 6-14 le muestra lo Completo Párrafos que no debe hacer: el color del texto es blanco y solo se puede leer porque las sombras paralelas definen el contorno del texto. En Internet Explorer, el texto sería invisible: texto blanco sobre un fondo blanco. NotaPara ver algunos ejemplos de formas hermosas de usar sombras de texto, visitehttp://webexpedition18.com/articles/ css3-text-shadow-property/. Dar formato a párrafos enteros Algunas propiedades de CSS se aplican a fragmentos de texto en lugar de palabras individuales. Puede utilizar las propiedades de esta sección en párrafos completos, títulos, etc. Ajuste del espacio entre líneas Además de cambiar el espacio entre palabras y letras, CSS le permite ajustar el espacio entre líneas de texto usando elaltura de la líneapropiedad. Cuanto mayor sea la altura de la línea, más espacio aparecerá entre cada línea de texto (consulte la Figura 6-15). Figura 6-15 Elaltura de la líneale permite separar las líneas de un párrafo o acercarlas. La configuración normal es equivalente al 120 por ciento, por lo que un porcentaje menor aprieta las líneas (arriba), mientras que un porcentaje mayor las separa (abajo). Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 167 FORMATO Completo Párrafos ESPACIADO DE LÍNEA POR PÍXEL, EM O PORCENTAJE Al igual que con eltamaño de fuentepropiedad, puede usar píxeles, ems o porcentajes para establecer el tamaño de la altura de la línea: altura de línea: 150%; En general, los porcentajes o ems son mejores que los píxeles, porque cambian según y junto con el texto.tamaño de fuentepropiedad. Si establece la altura de la línea en 10 píxeles y luego ajusta el tamaño de la fuente a algo mucho más grande (como 36 píxeles), debido a que la altura de la línea permanece en 10 píxeles, sus líneas se superpondrán. Sin embargo, usando un porcentaje (150%por ciento, digamos) significa elaltura de la líneael espaciado se ajusta proporcionalmente cada vez que cambia eltamaño de fuentevalor. Lo normalaltura de la líneaconfiguración para un navegador es120%.Por lo tanto, cuando desee ajustar el espacio entre líneas, utilice un valor inferior a120%;y para separar las líneas, use un valor mayor que ese. NotaPara determinar la cantidad de espacio que aparece entre las líneas de texto, un navegador web resta el tamaño de fuente de la altura de la línea. El resultado, llamadoprincipal— es la cantidad de espacio entre líneas en un párrafo. Digamos que el tamaño de la fuente es de 12 píxeles y la altura de la línea (establecida en 150%) es de 18 píxeles. 18 - 12 = 6 píxeles, por lo que el navegador agrega 6 píxeles de espacio entre cada línea. ESPACIO DE LÍNEA POR NÚMERO CSS ofrece otro método de medición específico para la altura de la línea, que es simplemente un número. Lo escribes así: altura de línea: 1,5; No hay unidad (como em o px) después de este valor. El navegador multiplica este número por el tamaño de fuente para determinar la altura de la línea. Así que si el texto es 1em y elaltura de la línea el valor es 1.5, entonces la altura de la línea calculada es 1.5em. En la mayoría de los casos, el efecto no es diferente de especificar un valor de 1,5em o 150%. Pero a veces este factor de multiplicación resulta útil, especialmente porque las etiquetas anidadas heredan elaltura de la líneavalor de sus padres. Por ejemplo, supongamos que establece elaltura de la líneapropiedad del <cuerpo>etiquetar a150%.Todas las etiquetas dentro de la página heredarían ese valor. Sin embargo, no es el porcentaje lo que se hereda; es elcalculadoaltura de la línea. Entonces, supongamos que el tamaño de fuente de la página está configurado en 10 píxeles; El 150 por ciento de 10 son 15 píxeles. Cada etiqueta heredaría una altura de línea de 15 píxeles, no del 150 por ciento. Entonces, si tiene un párrafo con texto grande de 36 píxeles, entonces la altura de la línea (15 píxeles) sería mucho más pequeña que el texto, lo que haría que las líneas se juntaran en un lío difícil de leer. En este ejemplo, en lugar de usar unaltura de la líneade150%aplicado al <cuerpo>etiqueta, podría hacer que todas las etiquetas compartan la misma altura de línea proporcional básica configurando el altura de la línea a1.5.Cada etiqueta, en lugar de heredar un valor de píxel preciso para la altura de línea de lacuerpoestilo, simplemente multiplica su tamaño de letra por 1,5. Entonces, en el ejemplo anterior de un párrafo con texto de 36 píxeles, la altura de la línea sería de 1,5 x 36 o 54 píxeles. 168 Css3: el manual perdido www.it-ebooks.info FORMATO Completo Alinear texto Una de las formas más rápidas de cambiar el aspecto de una página web es con la alineación de párrafos. Párrafos Utilizando eltexto alineadopropiedad, puede centrar un párrafo en una página, alinear el texto a lo largo de su borde izquierdo o derecho, o justificar los bordes izquierdo y derecho (como los párrafos de este libro). Normalmente, el texto de una página se alinea a la izquierda, pero es posible que desee centrar los títulos para darles un aspecto formal. Los idiomas que se leen de derecha a izquierda, como el hebreo y el árabe, requieren alineación a la derecha. Para cambiar la alineación del texto, utilice cualquiera de las siguientes palabras clave:izquierda, derecha, justificar, centro: alineación de texto: centro; El texto justificado se ve muy bien en una página impresa, principalmente porque la resolución fina posible con la impresión permite pequeños ajustes en el espaciado y porque la mayoría de los programas que se usan para diseñar material impreso pueden separar palabras largas (intentando así distribuir equitativamente el número de caracteres por línea). ). Esto evita que grandes y antiestéticos huecos o ríos de espacios en blanco fluyan a través de los párrafos. Las páginas web están limitadas a espacios mucho más gruesos debido a la resolución generalmente baja de los monitores y porque los navegadores web no saben cómo separar palabras largas. Así que cuando usas eljustificaropción, el espacio entre las palabras puede variar significativamente de una línea a otra, lo que hace que el texto sea más difícil de leer. Cuando quieras usar eljustificaropción en sus páginas web, pruébela minuciosamente para asegurarse de que el texto sea atractivo y legible. Sangría de la primera línea y eliminación de márgenes En muchos libros, la primera línea de cada párrafo está sangrada. Esta sangría de primera línea marca el comienzo de un párrafo cuando no hay espacios que separen los párrafos. En la Web, sin embargo, los párrafos no tienen sangrías sino que están separados por un poco de espacio, como los párrafos de este libro. Si desea que sus páginas web se parezcan menos a otras páginas web y más a un libro bellamente impreso, aproveche el CSSguion de textoy margenpropiedades. Con ellos, puede agregar una sangría de primera línea y eliminar (o aumentar) los márgenes que aparecen al principio y al final de los párrafos. GUIÓN DE PRIMERA LÍNEA Puede usar valores de píxel y em para establecer la sangría de la primera línea de esta manera: sangría de texto: 25px; o sangría de texto: 5em; Un valor de píxel es una medida absoluta, un número preciso de píxeles, mientras que un valor em especifica el número de letras (basado en el tamaño de fuente actual) que desea sangrar. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 169 FORMATO Completo CONSEJOPuedes Párrafos usar negativoguion de textovalores para crear lo que se llama unsangría francesa, donde la primera línea comienza más a la izquierda que las demás líneas del párrafo. (Piense en ello como "colgando" del borde izquierdo). Por lo general, usará una sangría de texto negativa junto con un valor de margen de posición, de modo que la sangría de texto negativa no sobresalga del lado izquierdo de una página, columna, o cuadro de diseño. También puede utilizar un valor porcentual, pero con elguion de textopropiedad, los porcentajes adquieren un significado diferente al que ha visto antes. En este caso, los porcentajes no están relacionados con el tamaño de fuente; están relacionados con el ancho del elemento que contiene el párrafo. Por ejemplo, si elguion de textose establece en50%,y un párrafo ocupa todo el ancho de la ventana del navegador web, luego la primera línea del párrafo comienza en la mitad de la pantalla. Si cambia el tamaño de la ventana, tanto el ancho del párrafo como su sangría cambian. (Aprenderá más sobre los porcentajes y cómo funcionan con el ancho de los elementos en la siguiente sección). CLÍNICA DE USUARIOS ELÉCTRICOS Un método abreviado para formatear texto Escribir una propiedad de texto tras otra es agotador, especialmente cuando desea usar varias propiedades de texto diferentes a la vez. Afortunadamente, CSS ofrece una propiedad abreviada llamadafuente, que le permite combinar las siguientes propiedades en una sola línea: Estilo de fuente (página 162),variante de fuente (página 163), peso de fuente (página 162),tamaño de fuente (página 37),altura de la línea ( página 167), yFamilia tipográfica (página 127). Por ejemplo, considere la siguiente declaración: 1,5 em/150 % o 24 px/37 px. Las dos últimas propiedades deben sertamaño de fuente (otamaño de fuente/altura de línea)seguido porFamilia tipográfica,en ese orden. Todas las demás propiedades se pueden escribir en cualquier orden. Por ejemplo, estas dos declaraciones son iguales: fuente: cursiva negrita minúsculas 1.5em Arial; fuente: negrita, minúsculas, cursiva, 1,5 em, Arial; Finalmente, omitir un valor de la lista es lo mismo que establecer ese valor en fuente: cursiva negrita minúsculas 18px/ normal. Digamos que creas un <p>estilo de etiqueta que da formato a todos 150% Arial, Helvetica, sans-serif; los párrafos en negrita, cursiva y versalitas con una altura de línea del 2000 por Crea tipografía negrita y cursiva en versalitas, utilizando Arial de 18 píxeles (o Helvetica o sans-serif) con una altura de línea del 150 por ciento. Tenga en cuenta estas reglas: ciento (no es que en realidadhacereso). A continuación, puede crear un estilo de clase denominado, por ejemplo, .párrafo especialcon la siguiente declaración de fuente: • No tiene que incluir cada una de estas propiedades, perodebe incluya el tamaño de fuente y la familia de fuentes: fuente: 1.5em Arial; Cuando aplica este estilo a un párrafo de la página, ese fuente: 1.5em Georgia, Times, serif;. párrafonohereda la cursiva, la negrita, las versalitas o la • Use un solo espacio entre cada valor de propiedad. Solo usa una altura de la línea. Omitiendo esos cuatro valores en el . coma para separar las fuentes en una lista como esta: Arial, párrafo especialEl estilo es lo mismo que escribir esto: Helvetica, sans-serif. fuente: normal normal normal 1.5em/normal • Al especificar la altura de la línea, agregue una barra después del Arial/; tamaño de fuente seguido del valor de la altura de la línea, así: 170 Css3: el manual perdido www.it-ebooks.info FORMATO Completo CONTROL DE MÁRGENES ENTRE PÁRRAFOS Muchos diseñadores odian el espacio que cada navegador arroja entre párrafos. Antes de CSS, Párrafos no había nada que pudieras hacer al respecto. Afortunadamente, ahora puede acceder al margen superiorymargen inferiorproperties para eliminar (o, si lo desea, expandir) esa brecha. Para eliminar totalmente un margen superior e inferior, escriba esto: margen superior: 0; margen inferior: 0; Para eliminar las brechas entretodopárrafos en una página, cree un estilo como este: pag { margen superior: 0; margen inferior: 0; } Al igual que conguion de texto,puede usar valores de píxeles o em para establecer el valor de los márgenes. También puede usar porcentajes, pero al igual que conguion de texto,el porcentaje está relacionado con elanchodel elemento contenedor del párrafo. Debido a que es confuso calcular el espacio por encima y por debajo de un párrafo en función de su ancho, es más fácil apegarse a los valores em o pixel. NotaDebido a que no todos los navegadores tratan el margen superior e inferior de los títulos y párrafos de manera consistente, a menudo es una buena idea simplementecero fuera(es decir, eliminar) todos los márgenes al principio de una hoja de estilo. Para ver cómo funciona esto, pase a la página 548. Para un efecto especial, puede asignar unnegativovalor a un margen superior o inferior. Por ejemplo un -10 píxelesel margen superior mueve el párrafo 10 píxeles hacia arriba, tal vez incluso superponiendo visualmente el elemento de la página que se encuentra arriba. (Consulte el paso 4 en la página 190 para ver un ejemplo). Dar formato a la primera letra o primera línea de un párrafo CSS también proporciona una forma de formatear solo una parte de un párrafo usando: primera letray :primera lineapseudo-elementos (ver Figura 6-16). Técnicamente, estas no son propiedades CSS, sino tipos de selectores que determinan a qué parte de un párrafo se deben aplicar las propiedades CSS. Con el :primera letrapseudoelemento, puede crear una letra mayúscula inicial para simular el aspecto de un manuscrito escrito a mano. Para poner la primera letra de cada párrafo en negrita y roja, podrías escribir este estilo: p:primera letra { fuente-peso: negrita; color rojo; } Para ser más selectivo y formatear solo la primera letra de un párrafo en particular, puede aplicar un estilo de clase al párrafo—.introducción,Por ejemplo: <p class="intro">El texto del párrafo introductorio va aquí...</p> Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 171 FORMATO Completo Párrafos Entonces podrías crear un estilo con un nombre como este: .intro:primera letra. El :primera lineapseudo-elemento da formato a la línea inicial de un párrafo. Puede aplicar esto a cualquier bloque de texto como un encabezado (h2: primera línea)o párrafo (p: primera línea).Al igual que con :primera letra,puede aplicar una clase a solo un párrafo y formatear solo la primera línea de ese párrafo. Digamos que desea poner en mayúscula cada letra en la primera línea del primer párrafo de una página. Aplicar una clase al HTML del primer párrafo —<p clase="introducción">—y luego crea un estilo como este: . intro:primera línea { transformación de texto: mayúsculas; } Figura 6-16 El:primera letrapseudoelement formatea la primera letra del elemento con estilo, como las mayúsculas iniciales a la izquierda. El:primera linea selector, por otro lado, da estilo a la primera línea de un párrafo. Incluso si su invitado cambia el tamaño de la ventana (abajo), el navegador aún aplica estilo a cada palabra que aparece en la primera línea de un párrafo. 172 Css3: el manual perdido www.it-ebooks.info NotaPor alguna extraña razón, ni Chrome ni el navegador web Safari entienden eltransformación de textoproperty (página 163) cuando se usa con :primera lineapseudo-elemento. En otras palabras, no puede usar CSS para poner en LISTAS DE ESTILO mayúscula las letras de la primera línea de un párrafo en Chrome o Safari. Listas de estilo El <ul>y <viejo>las etiquetas crean listas numeradas y con viñetas, como listas de elementos relacionados o pasos numerados. Pero no siempre desea conformarse con la forma en que los navegadores web dan formato automáticamente a esas listas. Es posible que desee intercambiar una viñeta más atractiva, usar letras en lugar de números o incluso eliminar por completo las viñetas o los números. Tipos de listas La mayoría de los navegadores web muestran listas desordenadas (<ul>tags) usando viñetas redondas y listas numeradas (<viejo>tags) usando…bueno…números. Con CSS, puede elegir entre tres tipos de viñetas:desct (una bala redonda sólida),círculo (una bala redonda hueca), o cuadrado (un cuadrado sólido). También hay seis esquemas de numeración diferentes:decimal , cero decimal,alfa superior,bajo-alfa,romano superior,obajo-romano (consulte la Figura 6-17). Seleccionas todas estas opciones usando eltipo-estilo-listapropiedad, así: tipo de estilo de lista: cuadrado; o tipo-estilo-lista: alfa-superior; Figura 6-17 CSS proporciona muchas formas diferentes de marcar listas numeradas y con viñetas, desde un puñado de formas geométricas hasta muchos sistemas de numeración diferentes. Si tiene ganas de apresurar una fraternidad o hermandad, también puede reemplazar los números con letras griegas (α, β, γ) usando elbajo griegoopción. De hecho, hay una serie de otros esquemas de numeración que incluyen armenio, georgiano, katakana y otras variaciones regionales. Puedes informarte sobre ellos en https:// developer.mozilla.org/en-US/ docs/CSS/ list-style-type. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 173 LISTAS DE ESTILO La mayoría de las veces, usa esta propiedad en un estilo que está formateando un <viejo>o <ul> etiqueta. Los ejemplos típicos incluyen unviejooulestilo de etiqueta—ul { tipo de estilo de lista: cuadrado; }—o una clase que está aplicando a una de esas etiquetas. Sin embargo, también puede aplicar la propiedad a un elemento de lista individual (<li>etiqueta) también. Incluso puede aplicar diferentes tipos de estilos de viñetas a elementos dentro de la misma lista. Por ejemplo, puede crear un estilo para un <li>etiqueta que establece las viñetas encuadrado,pero luego crea una clase llamada .círculoque cambia el tipo de viñeta acírculo,como esto: li {tipo de estilo de lista: cuadrado; } . círculo { tipo de estilo de lista: círculo; } Luego puede aplicar la clase a todos los demás elementos de la lista para crear un patrón alternativo de viñetas cuadradas y circulares: <ul> <li>Artículo 1</li> <li class="circle">Artículo 2</li> <li>Artículo 3</li> <li class="circle">Punto 4</li> </ ul> O bien, utilizando el selector de enésimo tipo (página 78), podría omitir el nombre de la clase por completo: li {tipo de estilo de lista: cuadrado; } li:nth-of-type(odd) { list-style-type: circle; } A veces querrá ocultar completamente las viñetas, como cuando prefiera usar sus propias viñetas gráficas (consulte la página 176). Además, cuando la barra de navegación de un sitio es una lista de enlaces, puede usar un <ul>lista, pero oculta sus viñetas (ver el ejemplo en la página 286). Para apagar las viñetas, use la palabra claveninguno: tipo-estilo-lista: ninguno; Posicionamiento de viñetas y números Los navegadores web generalmente muestran viñetas o números que cuelgan a la izquierda del texto del elemento de la lista (Figura 6-18, izquierda). Con CSS, puedes controlar la posición de la viñeta (algo) usando elposición de estilo de listapropiedad. Puede hacer que aparezca la viñetaafuera del texto (la forma en que los navegadores normalmente muestran viñetas) oadentro el propio bloque de texto (Figura 6-18, derecha): posición-estilo-lista: fuera; o posición-estilo-lista: dentro; 174 Css3: el manual perdido www.it-ebooks.info CONSEJOPuede ajustar el espacio entre la viñeta y su texto (aumentar o disminuir ese espacio) usando el LISTAS DE ESTILO relleno-izquierdapropiedad. Para usarlo, crea un estilo que se aplica al <li>etiquetas Esta técnica funciona sólo si configura elposición de estilo de listapropiedad a laafueraopción (o no usarposición de estilo de lista en absoluto). Figura 6-18 Utilizando ellista- posición de estilo propiedad, puede controlar la posición de viñetas y números en una lista. La opción exterior (izquierda) enfatiza el "listness" de su lista. Utilizar el adentroopción (derecha) si necesita maximizar el ancho de su lista. Además, si no le gusta cómo los navegadores web sangran una lista desde el borde izquierdo, puede eliminar ese espacio configurando tanto elmargen izquierdoyrelleno-izquierda propiedades a0para la lista. Para eliminar la sangría de todas las listas, puede crear este selector de grupo: ul, viejo { relleno-izquierda: 0; margen izquierdo: 0; } Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 175 LISTAS DE ESTILO O bien, puede crear un estilo de clase con esas propiedades y aplicarlo a un < particularul> o < viejo>etiqueta. La razón por la que necesita configurar las propiedades de relleno y margen es que algunos navegadores usan relleno (Firefox, Mozilla, Safari) y algunos usan margen (Internet Explorer) para controlar la sangría. (Aprenderá más sobre las propiedades de margen y relleno en el próximo capítulo). Los navegadores normalmente muestran un elemento con viñetas directamente encima de otro, pero puede agregar espacio entre los elementos de la lista usando elmargen superioromargen inferiorpropiedades en los elementos de la lista en particular. Estas propiedades funcionan para los elementos de la lista de espaciado exactamente de la misma manera que funcionan para los párrafos de espaciado, como se explica en la página 171. Solo debe asegurarse de que el estilo se aplique a <li>etiquetas creando un estilo de clase y aplicándolo individualmente a cada <li>etiqueta. O, mejor aún, crea un <li>estilo de etiqueta o selector de descendientes. El estilo debenoaplicar a la <ul>o <viejo>etiqueta. Agregar márgenes en la parte superior o inferior de esas etiquetas simplemente aumenta el espacio entre la lista completa y los párrafos arriba o debajo de ella, no el espacio entre cada elemento de la lista. Viñetas gráficas Si no está satisfecho con los cuadrados y círculos para sus viñetas, cree las suyas propias. Usando un programa de edición de imágenes como Photoshop o Fireworks, puede crear rápidamente viñetas coloridas e interesantes. Las colecciones de imágenes prediseñadas y la mayoría de las fuentes de símbolos (como Webdings) brindan una gran inspiración. CONSEJOPara obtener una lista de un montón de sitios con íconos y viñetas gratuitos, consulte esta página:www.cssjuice.com/38-freeicon- puntos de control/. el cssimagen de estilo de listale permite especificar una ruta a un gráfico en su sitio, de la misma manera que especifica un archivo cuando agrega una imagen a una página usando el origen atributo del HTML <imagen>etiqueta. Usas la propiedad así: imagen-estilo-lista: url(images/bullet.gif); El términoURLy los paréntesis son obligatorios. La parte dentro de los paréntesis— imágenes/bullet.gifen este ejemplo, es la ruta al gráfico. Tenga en cuenta que, a diferencia de HTML, no usa comillas alrededor de la ruta. 176 Css3: el manual perdido www.it-ebooks.info LISTAS DE ESTILO Preguntas frecuentes Personalización de números y viñetas de lista Me gustaría que los números en mis listas numeradas fueran en negrita ellos mismos. No escribes viñetas cuando creas una lista; el navegador y rojos en lugar del viejo y aburrido negro. ¿Cómo personalizo viñetas y los agrega por usted. Con CSS, puede hacer que un navegador agregue números? contenido e incluso diseñe ese contenido antes de cada <li>etiqueta. Aprenderá sobre el contenido generado en la página 595, pero solo CSS le brinda algunas formas de personalizar los marcadores que aparecen para tener el código a mano si desea hacer que las viñetas regulares antes de los elementos de la lista. Para las viñetas, puede usar sus propios junto a los elementos de la lista sean rojas, agregue este CSS a su hoja gráficos, como se describió anteriormente. Tiene otras dos técnicas de estilo: disponibles: una que requiere mucha mano de obra, pero funciona en la tu li { mayoría de los navegadores, y otra que es súper geek, vanguardista y no tipo-estilo-lista: ninguno; funciona en Internet Explorer 7 o anterior. En primer lugar, la forma intensiva en mano de obra. Supongamos que desea que los números en una lista ordenada sean rojos y en negrita, } ul li: antes { contenido: contador (elemento, disco) " pero el texto sea negro, sin negritas. Cree un estilo que se aplique a la lista, como un estilo de clase que se aplica al <viejo>o <li>etiquetas: con un color de texto rojo y el peso de la fuente en negrita. En este punto, todo en la lista, incluido el texto, está en rojo y en negrita. "; color rojo; } Y, si desea que los elementos de una lista numerada sean rojos, puede agregar este CSS: A continuación, cree un estilo de clase—.lista regular,por ejemplo, que viejo li { establece el color de la fuente en negro y el grosor de la fuente en normal (es tipo-estilo-lista: ninguno; decir, no en negrita). Luego (y esta es la parte tediosa), envuelva un <lapso> contra-incremento: artículo; marque el texto en cada elemento de la lista y aplíquele el estilo de clase. Por } ejemplo: ol li: antes { <li><span class="regularList">Elemento 1</ contenido: contador(elemento) ". span></li> "; color rojo; Ahora las viñetas están en negrita y rojas y el texto es negro y normal. Desafortunadamente, tienes que agregar que <lapso>a cadaartículo de } Para obtener una explicación más detallada sobre el estilo de las listas la lista! La forma genial, "soy tan experto en CSS" es usar lo que se llama contenido generado. Básicamente, el contenido generado es simplemente material que numeradas, visite www.456bereastreet.com/archive/201105/styling_ordered_ list_numbers/. en realidad no se escribe en la página, pero que el navegador web agrega cuando muestra la página. Un buen ejemplo son las balas. NotaAl especificar un gráfico en unexternohoja de estilo, la ruta a la imagen es relativa al archivo de la hoja de estilo, no a la página web. Aprenderá más sobre cómo funciona esto en el cuadro de la página 244, a medida que comience a usar imágenes con CSS. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 177 Tutorial: TEXTO FORMATO en acción Mientras que laimagen de estilo de listale permite usar un gráfico para una viñeta, no proporciona ningún control sobre su ubicación. La viñeta puede aparecer demasiado por encima o por debajo de la línea, lo que requiere que modifique el gráfico de la viñeta hasta que quede bien. Un mejor enfoque, uno que aprenderá en el Capítulo 8, es usar elimagen de fondopropiedad. Esa propiedad le permite colocar con mucha precisión un gráfico para sus listas con viñetas. NotaAl igual que con elfuentepropiedad (consulte el cuadro en la página 170), hay un método abreviado para especificar las propiedades de la lista. Elestilo de listaLa propiedad puede incluir un valor para cada una de las otras propiedades de la lista:imagen de estilo de lista,posición de estilo de lista,ytipo-estilo-lista.Por ejemplo,ul { estilo de lista: círculo dentro; }da formato a listas desordenadas con la viñeta circular hueca en la posición interior. Cuando incluye un tipo de estilo y una imagen de estilo:estilo de lista: círculo url (images/bullet.gif) dentro;—los navegadores web usan el tipo de estilocírculoen este ejemplo, si no se puede encontrar el gráfico. Tutorial: formato de texto en acción En este tutorial, mejorará los títulos, las listas y los párrafos de texto utilizando las potentes opciones de formato de CSS. Para comenzar, debe ubicar los archivos del tutorial en el sitio web complementario de este libro en www.sawmac.com/css3/. Haga clic en el enlace del tutorial y descargue los archivos. Todos los archivos están incluidos en un archivo zip, por lo que primero deberá descomprimirlos. (Visite el sitio web para obtener instrucciones detalladas sobre cómo descomprimir los archivos). Los archivos de este tutorial se encuentran dentro de la carpeta denominada06. Configuración de la página Primero, comenzará su hoja de estilo, agregue la @Perfil delanterodirectiva para cargar algunas fuentes web y agregar estilos para formatear el texto del cuerpo. 1.Inicie su navegador web y abra el archivo06→texto.html(ver Figura 6-19). No es mucho para mirar, solo una colección de titulares, párrafos y una lista con viñetas solitaria, pero lo convertirá en algo mucho mejor. 2.abre el archivotexto.htmlen tu editor de texto favorito. Comience agregando una hoja de estilo interna a este archivo. (Sí, las hojas de estilo externas son mejores, pero está perfectamente bien comenzar su diseño con una hoja interna. Consulte la página 39). 178 Css3: el manual perdido www.it-ebooks.info Tutorial: TEXTO FORMATO en acción Figura 6-19 La página comienza con nada más que HTML básico y monótono. 3.en el <cabeza>de la página web, haga clic directamente después del cierre </título>etiqueta. Presiona Enter (Return) y luego escribe: <estilo> </estilo> Ahora que las etiquetas de estilo básicas están en su lugar, agregará el restablecimiento de CSS que se describe en la página 115. En lugar de escribirlo todo, simplemente copiará y pegará el CSS de una hoja de estilo externa. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 179 Tutorial: TEXTO FORMATO en acción 4.abre el archivorestablecer.css.Copie todo el código de ese archivo y péguelo entre la apertura y el cierre <estilo>etiquetas que agregó en el Paso 3. Si obtiene una vista previa de latexto.htmlahora en un navegador web, verá que todo el texto de la página (títulos, párrafos, etc.) se ve casi igual; en otras palabras, se eliminó todo el formato HTML básico que aplicó el navegador, por lo que puede comenzar con una pizarra limpia. A continuación, agregará la @ necesariaPerfil delanterodirectivas para cargar cuatro fuentes web. En realidad, todos tienen la misma fuente, PTSans, pero incluyen las variantes en negrita, cursiva y negrita-cursiva. 5.Agregue el siguiente código a la página: @Perfil delantero { familia de fuentes: 'PTSans'; src: url('fuentes/PTSansRegular.eot'); src: url('fuentes/PTSansRegular.eot?#iefix') format('embedded-opentype'), url('fuentes/PTSansRegular.woof') format('woff'), url('fonts/PTSansRegular.ttf') format('truetype'), url('fonts/PTSansRegular.svg') format('svg') ; peso de fuente: normal; estilo de fuente: normal; } @Perfil delantero { familia de fuentes: 'PTSans'; src: url('fuentes/PTSansItalic.eot'); src: url('fuentes/PTSansItalic.eot?#iefix') format('embedded-opentype'), url('fuentes/PTSansItalic.woof') format('woff'), url('fonts/ PTSansItalic.ttf') format('truetype'), url('fonts/ PTSansItalic.svg') format('svg') ; peso de fuente: normal; estilo de fuente: cursiva; } @Perfil delantero { familia de fuentes: 'PTSans'; src: url('fuentes/PTSansBold.eot'); src: url('fuentes/PTSansBold.eot?#iefix') format('embedded-opentype'), url('fuentes/PTSansBold.woof') formato('woff'), url('fuentes/PTSansBold.ttf') formato('truetype'), url('fuentes/PTSansBold.svg') formato('svg') ; fuentepeso: negrita; estilo de fuente: normal; } @Perfil delantero { familia de fuentes: 'PTSans'; 180 Css3: el manual perdido www.it-ebooks.info Tutorial: TEXTO src: url('fuentes/PTSansBoldItalic.eot'); src: url('fuentes/PTSansBoldItalic.eot?#iefix') format('embedded-opentype'), FORMATO en acción url('fuentes/PTSansBoldItalic.woof') format('woff'), url('fonts/ PTSansBoldItalic.ttf') format('truetype'), url('fonts/ PTSansBoldItalic.svg') format('svg') ; fuente-peso: negrita; estilo de fuente: cursiva; } NotaSí, eso es mucho código. Si prefiere no escribir todo eso, los ejemplos de este capítulo incluyen un archivo llamadoat-font-face.css. Puede abrirlo, copiar el código desde allí y pegarlo en su hoja de estilo. Ir a www.sawmac.com/css3. En pocas palabras, ha creado una nueva familia de fuentes llamada PTSans. Podrás usarlo en cualquier nuevo estilo que crees. Está utilizando el método descrito en la página 141 para agregar las variantes en negrita y cursiva de la fuente. Este método significa que siempre que aplique una etiqueta en negrita normal al texto (como un título o el <fuerte>etiqueta), el navegador cambiará automáticamente la versión en negrita de la fuente. (Este método no funciona en IE 8, que pone el texto en negrita y cursiva artificialmente en lugar de cambiar las versiones en negrita o cursiva de la fuente). A continuación, creará un estilo que defina algunas propiedades generales para todo el texto de la página. 6.Después de los cuatro @Perfil delanterodirectivas, presione Entrar y escribahtml {. Este es un selector de etiquetas básico que se aplica a <html>etiqueta. Como se discutió en el Capítulo 4, otras etiquetas heredan las propiedades de esta etiqueta. Puede configurar algunas características básicas del texto, como la fuente, el color y el tamaño de la fuente, para que las etiquetas posteriores las utilicen como punto de partida. 7.Vuelva a pulsar Intro y, a continuación, agregue las dos propiedades siguientes: familia de fuentes: PTSans, Arial, sans-serif; tamaño de fuente: 62,5%; Estas dos instrucciones establecen la fuente en PTSans (o Arial si el navegador no puede descargar PTSans) y el tamaño de fuente en 62,5 por ciento. Nota¿Por qué establecer la fuente base de la página en 62,5 por ciento? Da la casualidad de que el 62,5 por ciento multiplicado por 16 píxeles (el tamaño normal del texto en la mayoría de los navegadores web) es igual a 10 píxeles. Con 10 píxeles como punto de partida, es fácil calcular cómo se verán otros tamaños de texto en la pantalla. Por ejemplo, 1,5 em sería 1,5 x 10 o 15 píxeles. 2em son 20 píxeles, y así sucesivamente, múltiplos fáciles de diez. Para obtener más información sobre este interesante descubrimiento y más estrategias de tamaño de fuente, visitehttp://clagnut.com/blog/348/. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 181 Tutorial: TEXTO FORMATO en acción 8.Complete este estilo presionando Intro y escribiendo un corchete de cierre para marcar el final del estilo. En este punto, su estilo completo debería verse así: html { familia de fuentes: PTSans, Arial, sans-serif; tamaño de fuente: 62,5%; } Su hoja de estilo está completa. 9.Guarde la página y ábrala en un navegador web para obtener una vista previa de su trabajo. El texto de la página cambia de fuente... también se vuelve muy pequeño. No se preocupe, ese es el tamaño de fuente del 62,5 por ciento que configuró en el Paso 7. Ese es solo el punto de partida para todo el texto, y aumentará fácilmente el tamaño del texto definiendo tamaños em para las otras etiquetas. Dar formato a los encabezados y párrafos Ahora que se ha realizado el formato básico del texto, es hora de refinar la presentación de los títulos y párrafos. 1.Regrese a su editor de texto y eltexto.htmlarchivo.Haga clic al final de la llave de cierre del selector de etiquetas del cuerpo en la hoja de estilo interna, presione Entrar (Retorno) para crear una nueva línea y luego escriba .principal h1 {. Esto es unselector de descendientes(página 88). Proporciona una dirección más específica que un selector de etiquetas HTML básico. En este caso, el selector le dice al navegador web “aplica el siguiente formato a cualquier <h1>etiqueta dentro de otra etiqueta con el nombre de la clase principal."Si observa el HTML de la página, verá que hay un <div>etiqueta con una clase de principal (<clase div="principal">).Como aprenderá más adelante, es muy común en los diseños basados en CSS agrupar etiquetas HTML dentro de etiquetas <div>. A continuación, puede posicionar < individualesdiv>etiquetas para crear columnas y otros diseños de página complejos. También es común usar selectores descendientes como este para identificar sus opciones de formato al afectar solo las etiquetas en ciertas áreas de la página. 2.Presiona Enter y luego escribe estas tres propiedades CSS: color: rgb(252,102,0); familia de fuentes: "Arial Black", Arial, Helvetica, sans-serif; tamaño de fuente: 4em; Acabas de cambiar el color de la etiqueta <h1> así como la fuente. Esta vez, en lugar de usar una fuente web, está especificando una fuente que el visitante debe tener instalada en su computadora. Muchas computadoras tienen Arial Black, pero si la que visita esta página no la tiene, recurrirá a Arial o Helvetica o simplemente a un sans serif genérico. También ha establecido el tamaño de fuente en4em,que para la mayoría de los navegadores (a menos que el visitante haya modificado la configuración de fuente de su navegador) tiene una altura de 40 píxeles. Eso es todo gracias a la62,5%que configuró para el cuerpo en el Paso 7. Ese movimiento suave hizo que el tamaño de fuente base tuviera 10 píxeles de alto, por lo que 4 x 10 resulta en 40 píxeles. A continuación, agregará una sombra de texto al título. 182 Css3: el manual perdido www.it-ebooks.info Tutorial: TEXTO 3.Complete este estilo presionando Enter, agregando el codificado en negrita a continuación (no olvide la llave de cierre): FORMATO en acción . principal h1 { color: rgb(252,102,0); familia de fuentes: "Arial Black", Arial, Helvetica, sans-serif; tamaño de fuente: 4em; sombra de texto: 4px 3px 6px rgba(0,0,0,.5); } Aquí, ha agregado una sombra de texto (página 166), que está desplazada 4 píxeles hacia la derecha, 3 píxeles hacia abajo y está difuminada 6 píxeles. Además, está utilizando el color RGBA (página 155) para establecer la sombra en negro con un 50 por ciento de transparencia. 4.Guarde el archivo y obtenga una vista previa en un navegador web. A continuación, arregla la apariencia de los demás títulos y párrafos. 5.Regrese a su editor de texto y eltexto.htmlarchivo.Haga clic después de la llave de cierre del . principal h1etiqueta, presiona Enter y agrega los siguientes dos estilos: . principal h2 { fuente: negrita 3,5em "Hoefler Text", Garamond, Times, serif; borde inferior: 1px rgb sólido (200,200,200); margen superior: 25px; } Aquí tienes otro selector de descendientes que solo se aplica a <h2>etiquetas dentro de otra etiqueta con la clase principal (probablemente ya te estés acostumbrando). La propiedad de la fuente que se usa aquí es una abreviatura que combina el estilo más extenso peso de fuente, tamaño de fuente,yFamilia tipográfica (véase el recuadro de la página 170). En otras palabras, esta única línea pone el título en negrita, mide 3,5 ems de alto y especifica una fuente. Además, este estilo agrega un borde decorativo debajo del título y un poco de espacio entre el título y la etiqueta encima (en otras palabras, agrega un poco de espacio entre los títulos "CSS The Missing Manual" y "Exploring Typographic Possibilities" ). Leerá más sobre bordes y márgenes en el próximo capítulo. Es hora de abordar más titulares. 6.Agregue otro estilo debajo del que agregó en el último paso: . principal h3 { color: rgb(255,102,0); tamaño de fuente: 1,9 em; fuente-peso: negrita; transformación de texto: mayúsculas; margen superior: 25px; margen inferior: 10px; } Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 183 Tutorial: TEXTO FORMATO en acción Este estilo ofrece algunos de los formatos habituales (color, tamaño, negrita) y también utiliza eltransformación de textopropiedad (página 163) para hacer que todo el texto en el <h3>titulares en mayúsculas. Finalmente, agrega un poco de espacio arriba y debajo de los titulares usando elmargenpropiedades. A continuación, mejorará el aspecto de los párrafos. 7.Agregue un estilo más a la página: . p principal { tamaño de fuente: 1,5 em; altura de línea: 150%; margen izquierdo: 150px; margen derecho: 50px; margen inferior: 10px; } Este estilo introduce laaltura de la líneapropiedad, que establece el espaciado entre líneas. Un porcentaje de 150 agrega un poco más de espacio entre líneas en un párrafo de lo que normalmente vería en un navegador web. Este respiro adicional le da al texto una calidad más ligera y aireada y hace que las oraciones sean un poco más fáciles de leer (pero solo si hablas latín). El estilo también aumenta el tamaño de la fuente para1,5 em (15 píxeles para la mayoría de los navegadores) y sangra el párrafo desde los bordes izquierdo y derecho de la página. Notará que hay mucho que escribir para las propiedades de margen; afortunadamente, como leerá en la página 184 en el próximo capítulo, hay una propiedad de atajo de margen que requiere mucho menos tipeo para controlar los cuatro márgenes de un elemento. . Es hora de probar un tipo de selector más avanzado. 8.Agregue el siguiente estilo a su hoja de estilo: . principal p:primera línea { font-weight: bold; color: rgb (153,153,153); } El :primera lineapseudo-elemento (página 172) afecta sólo a la primera línea de un párrafo. En este caso, solo la primera línea de texto de cada uno de los párrafos dentro del div principal estará en negrita y gris. 9.Guarde la página y ábrala en un navegador web para obtener una vista previa de su trabajo. En este punto, la página debería parecerse a la Figura 6-20. 184 Css3: el manual perdido www.it-ebooks.info Tutorial: TEXTO FORMATO en acción Figura 6-20 La página está empezando a juntarse. Los títulos, párrafos y configuraciones básicas de texto están en su lugar. Dependiendo de las fuentes que tenga en su computadora, puede notar ligeras diferencias entre su diseño y el que se muestra aquí. Específicamente, si está en Windows, la opción "Exploring Typographic El titular de Posibilidades utilizará Garamond o Arial. Esta imagen, tomada en una Mac, usa la familia de fuentes Hoefler Text especificada en el Paso 5 en la página 183. Formateo de listas Esta página tiene una sola lista con viñetas. El plan es mover la lista al borde derecho de la página y hacer que el texto que la sigue la envuelva. CSS hace que este pequeño truco sea fácil. 1.Regrese a su editor de texto y eltexto.htmlarchivo.Agregue el siguiente estilo al final de la hoja de estilo interna de la página: . principal ul { margen: 50px 0 25px 50px; ancho: 170px; flotar derecho; } Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 185 Tutorial: TEXTO FORMATO en acción Al dar formato a las listas, normalmente creará estilos para dos elementos diferentes: la lista en sí (ya sea el <ul>etiqueta para listas con viñetas o <viejo>etiqueta para listas numeradas) y los elementos de lista individuales (el <li>etiqueta). Este estilo controla toda la lista. Hay algunas cosas que suceden en este estilo. Primero elmargenpropiedad utiliza el método abreviado. Esta línea establece los cuatro márgenes alrededor de la lista, reemplazando las cuatro propiedades de margen individuales (margen superior,margen derecho,etcétera). Los cuatro valores están ordenados así: arriba, derecha, abajo, izquierda. Entonces, para este estilo, se agregan 50 píxeles de espacio arriba de la lista, 0 espacio a la derecha, 25 píxeles en la parte inferior y 50 píxeles a la izquierda. Elancho(discutida en detalle en la página 212) hace que la lista completa tenga 150 píxeles de ancho. Si algún elemento de la lista en particular tiene más texto del que cabe en ese espacio, se ajusta a otra línea. Elflotarla propiedad es la verdadera magia—en este caso,flotar derecho significa mover la lista al borde derecho de la página. Esta propiedad también hace que el texto que sigue a la lista se ajuste al lado izquierdo de la lista. Es un truco genial y aprenderás mucho más sobre los flotadores en la página 220. A continuación, controlará el aspecto de los elementos individuales de la lista. 2.Agregue un estilo más a la hoja de estilo interna en eltexto.htmlarchivo: . li principal { color: rgb (32,126,191); tamaño de fuente: 1,5 em; margen inferior: 7px; } Nada nuevo aquí: simplemente cambiando el color y el tamaño y agregando espacio debajo de cada elemento de la lista. Es hora de comprobar tu progreso. NotaSi desea agregar espacio entre los elementos de la lista, debe agregar márgenes superior o inferior al <li> etiqueta. Agregando márgenes al <ul>o <viejo>las etiquetas simplemente agregan espacio alrededor de toda la lista. 3.Guarde la página y obtenga una vista previa en un navegador web. La página ahora debería verse como la Figura 6-21. 186 Css3: el manual perdido www.it-ebooks.info Tutorial: TEXTO FORMATO en acción Figura 6-21 Elflotarla propiedad te da algo interesante opciones de diseño En este caso, la lista con viñetas flota en el borde derecho de la página. De hecho, el flotarLa propiedad es tan útil que verá que es el ingrediente principal de los diseños basados en CSS, como los que aprenderá en el Capítulo 12. Ajuste fino con clases A veces desea tener aún más control sobre cómo se aplica un estilo. Por ejemplo, si bien es posible que desee que la mayoría de los párrafos en una sección de la página tengan el mismo aspecto, también puede desear que uno o dos párrafos tengan su propia apariencia única. En este tutorial, el párrafo de texto cerca de la parte superior de la página, "30 de noviembre, Rod Dibble", contiene información única: la fecha de publicación y el autor. Desea que se destaque de los demás párrafos, por lo que agregará una clase al HTML y creará un estilo de clase. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 187 Tutorial: TEXTO FORMATO en acción 1.Busque el código HTML de ese párrafo—<p>30 de noviembre <strong>Rod Dibble</ strong></p>—y añadirclase = "línea de autor"a la apertura <p>etiqueta.El HTML debería verse así: <p class="byline">30 de noviembre <strong>Rod Dibble</strong></p> Ahora se trata simplemente de crear un estilo de clase que invalide el formato genérico de los demás párrafos de la página. 2.En la hoja de estilo interna cerca de la parte superior de la página, agregue un estilo para ese párrafo: . principal .byline { tamaño de fuente: 1.6em; margen: 5px 0 25px 50px; } Este estilo ajusta el tamaño y la ubicación de solo ese párrafo. Tenga en cuenta que si acaba de nombrar ese estilo.línea de autor—un selector de clase básico: no funcionaría. Gracias a las reglas de la cascada descritas en el último capítulo, .línea de autores menos específico (menos poderoso) que el .p principalestilo que creó en el Paso 7 en la página 184, por lo que no podría anular el tamaño y los márgenes especificados por .página principal Sin embargo, . principal .bylinees más específico. Ese párrafo todavía necesita algo de trabajo. Sería genial que el nombre destacara más. El HTML en este caso proporciona justo el gancho que necesita. 3.Agregue otro estilo a la hoja de estilo: . . principal .byline strong { color: rgb(32,126,191); transformación de texto: mayúsculas; margen izquierdo: 11px; } Si observa el HTML en el Paso 1 anterior, verá que el nombre, Rod Dibble, está dentro de un <fuerte> etiqueta. El <fuerte>La etiqueta se utiliza para enfatizar el texto y marcarlo como importante. Pero eso no significa que deba dejar que esté en negrita, de la forma en que los navegadores web normalmente muestran esa etiqueta. En su lugar, este selector descendente tiene como objetivo el <fuerte>etiqueta pero solo cuando aparece dentro de otra etiqueta con la clase . línea de autor,y solo si todo eso está dentro de otra etiqueta con la claseprincipal- Vaya, eso es bastante específico. Este estilo convierte el texto en azul, lo pone en mayúsculas y agrega un poco de espacio en el lado izquierdo (empujando el nombre un poco sobre el texto "30 de noviembre"). Agregar los toques finales Para la última parte del diseño, incorporará algunos toques de diseño que dan formato a la página y ese div principal para que ambos se vean mejor. Luego terminará con un poco de formateo de texto. 188 Css3: el manual perdido www.it-ebooks.info Traducido del inglés al español - www.onlinedoctranslator.com Tutorial: TEXTO FORMATO en acción 1.Busque el código HTML de ese párrafo—<p>30 de noviembre <strong>Rod Dibble</ strong></p>—y añadirclase = "línea de autor"a la apertura <p>etiqueta.El HTML debería verse así: <p class="byline">30 de noviembre <strong>Rod Dibble</strong></p> Ahora se trata simplemente de crear un estilo de clase que invalide el formato genérico de los demás párrafos de la página. 2.En la hoja de estilo interna cerca de la parte superior de la página, agregue un estilo para ese párrafo: . principal .byline { tamaño de fuente: 1.6em; margen: 5px 0 25px 50px; } Este estilo ajusta el tamaño y la ubicación de solo ese párrafo. Tenga en cuenta que si acaba de nombrar ese estilo.línea de autor—un selector de clase básico: no funcionaría. Gracias a las reglas de la cascada descritas en el último capítulo, .línea de autores menos específico (menos poderoso) que el .p principalestilo que creó en el Paso 7 en la página 184, por lo que no podría anular el tamaño y los márgenes especificados por .página principal Sin embargo, . principal .bylinees más específico. Ese párrafo todavía necesita algo de trabajo. Sería genial que el nombre destacara más. El HTML en este caso proporciona justo el gancho que necesita. 3.Agregue otro estilo a la hoja de estilo: . . principal .byline strong { color: rgb(32,126,191); transformación de texto: mayúsculas; margen izquierdo: 11px; } Si observa el HTML en el Paso 1 anterior, verá que el nombre, Rod Dibble, está dentro de un <fuerte> etiqueta. El <fuerte>La etiqueta se utiliza para enfatizar el texto y marcarlo como importante. Pero eso no significa que deba dejar que esté en negrita, de la forma en que los navegadores web normalmente muestran esa etiqueta. En su lugar, este selector descendente tiene como objetivo el <fuerte>etiqueta pero solo cuando aparece dentro de otra etiqueta con la clase . línea de autor,y solo si todo eso está dentro de otra etiqueta con la claseprincipal- Vaya, eso es bastante específico. Este estilo convierte el texto en azul, lo pone en mayúsculas y agrega un poco de espacio en el lado izquierdo (empujando el nombre un poco sobre el texto "30 de noviembre"). Agregar los toques finales Para la última parte del diseño, incorporará algunos toques de diseño que dan formato a la página y ese div principal para que ambos se vean mejor. Luego terminará con un poco de formateo de texto. 188 Css3: el manual perdido www.it-ebooks.info Tutorial: TEXTO 1.Regrese a su editor de texto y eltexto.htmlarchivo. Primero, agregará un color de fondo y una imagen a la página. FORMATO en acción 2.Localiza elhtmlestilo cerca de la parte superior de la hoja de estilo interna y agregue una nueva propiedad para que se vea así (los cambios están en negrita): html { tamaño de fuente: 62,5%; familia tipográfica: Arial, Helvetica, sans-serif; fondo: rgb(225,238,253) url(images/bg_body.png) repetir-x; } Elfondoproperty es una herramienta poderosa para cualquier diseñador web. Ya lo ha usado un par de veces en tutoriales anteriores; le permite agregar color e insertar y controlar la ubicación de una imagen en el fondo de cualquier etiqueta. Aprenderá los entresijos de esta propiedad en la página 255, pero por ahora esta línea cambia el color de fondo de la página a azul claro y agrega una franja azul oscuro en la parte superior de la página. A continuación, arreglará el div principal. 3.Agregue otro estilo entre loshtmlestilo y el.principal h1estilo: . principal { ancho: 740px; margen: 0 automático; relleno: 0 10px; borde: 4px blanco sólido; fondo: url transparente (images/bg_banner.jpg) sin repetición; } En otras palabras, haga clic después del cierre } para elhtmlestilo, presione Entrar y escriba el código de arriba. No necesariamente tiene que poner el estilo en ese lugar para que funcione, pero por motivos de organización, tiene sentido poner el estilo que controla el div antes que los otros estilos que dan formato a las etiquetas dentro de ese div. ElanchoLa propiedad establece un ancho general para este div (y el contenido dentro de él), esencialmente convirtiendo esta página en un documento de 740 píxeles de ancho. Elmargen valores de propiedad-0 automático—coloque 0 píxeles de espacio encima y debajo del div y establezca los márgenes izquierdo y derecho enauto,que centra el div en el medio de la ventana del navegador. ElrellenoLa propiedad agrega espacio dentro del cuadro, empujando el contenido dentro del div lejos de la línea del borde. Finalmente, ha colocado una imagen en el fondo del div. Esos dos últimos estilos no tienen nada que ver con el formato del texto, pero si obtienes una vista previa de la página, verás que hacen que se vea mucho mejor... excepto por esos dos titulares principales. El primer título no es lo suficientemente audaz y el segundo debe estar debajo del gráfico recién agregado. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 189 Tutorial: TEXTO FORMATO en acción 4.Agrega un último estilo justo después del .principal h1estilo: . principal h1 fuerte { tamaño de fuente: 150px; color blanco; altura de línea: 1em; margen derecho: -1,25em; } El HTML para el título se ve así: <h1><strong>CSS</strong> El Manual Perdido</h1> El "CSS" está encerrado dentro de <fuerte>etiquetas, por lo que este selector descendiente formatea solo ese texto (en ese sentido, es como el estilo que agregó en el Paso 3 en la página 188 que aprovechó un <fuerte>etiqueta incrustada dentro de un párrafo). El tamaño del texto aumenta, su color cambia y la altura de la línea se ajusta para que quepa dentro de la parte superior de la página. Notará que la altura de la línea se establece en 1 em (como leyó en la página 160, un em se basa en el tamaño de fuente actual del elemento), por lo que en este caso, la altura de la línea se traducirá en 150 píxeles, esa es la tamaño de fuente de este estilo. El único truco genial es elmargen derechopropiedad, que se establece en un valor negativo: – 1,25 em.Dado que un margen positivo aleja los elementos, un margen negativo en realidad los coloca uno encima del otro. En este caso, el resto del texto del título, "El manual perdido", se desplaza sobre 1,25 em, que es 1,25 veces el tamaño de la fuente (150 píxeles), encima del texto "CSS". NotaLos márgenes negativos son CSS perfectamente legales (aunque engañosos). Incluso se usan para algunos diseños CSS bastante avanzados, como se describe en la página 199. 5.Guarde el archivo y obtenga una vista previa en un navegador web. Debería parecerse a la Figura 6-22. Puedes comparar tu trabajo con el acabado. texto.htmlpágina ubicada en el06_terminadocarpeta. ¡Felicidades! Ha explorado muchas de las propiedades de formato de texto que ofrece CSS y ha convertido HTML aburrido en un diseño atractivo que llama la atención. En el próximo capítulo, explorará gráficos, bordes, márgenes y otras potentes opciones de diseño CSS que ofrece CSS. 190 Css3: el manual perdido www.it-ebooks.info Tutorial: TEXTO FORMATO en acción Figura 6-22 Con un poco de CSS, puede convertir texto sin formato en una poderosa declaración de diseño que ayude guiar a los lectores a través de la información de su sitio. Capítulo 6:FORMATO DE TEXTO www.it-ebooks.info 191 www.it-ebooks.info Capítulo 7 7 márgenes, relleno, y Fronteras mi Cada etiqueta HTML está rodeada por un mundo de propiedades que afectan cómo aparece la etiqueta en un navegador web. Algunas propiedades, como los bordes y los colores de fondo, son inmediatamente evidentes a simple vista. Otros, sin embargo, son invisibles, como el relleno y el margen. Proporcionan un poco de espacio vacío en uno o más lados de una etiqueta. Al comprender cómo funcionan estas propiedades, puede crear columnas atractivas y barras laterales decorativas y controlar el espacio que las rodea (lo que los diseñadores llamanespacio en blanco) para que sus páginas se vean menos abarrotadas, más claras y más profesionales. En conjunto, las propiedades de CSS discutidas en este capítulo conforman uno de los conceptos más importantes en CSS: elmodelo de caja. Comprender el modelo de caja Probablemente pienses en letras, palabras y oraciones cuando piensas en un párrafo o titular. Probablemente también pienses en una foto, logotipo u otra imagen cuando piensas en el <imagen> etiqueta. Pero un navegador web trata estas (y todas las demás) etiquetas como poco cajas. Para un navegador, cualquier etiqueta es un cuadro con algo dentro: texto, una imagen o incluso otras etiquetas que contienen otras cosas, como se ilustra en la Figura 7-1. Rodeando el contenido se encuentran diferentes propiedades que componen la caja: • rellenoes el espacio entre el contenido y el borde del contenido. El relleno es lo que separa una foto del borde que la enmarca. • bordees la línea que se dibuja alrededor de cada borde de la caja. Puede tener un borde alrededor de los cuatro lados, en un solo lado o en cualquier combinación de lados. 193 www.it-ebooks.info comprensión EL MODELO DE CAJA • color de fondollena el espacio dentro del borde, incluyendo el área de relleno. • margenes lo que separa una etiqueta de otra. El espacio que suele aparecer entre la parte superior e inferior de los párrafos de texto en una página web, por ejemplo, es el margen. Para una etiqueta dada, puede usar cualquiera o todas estas propiedades en combinación. Puede establecer solo un margen para una etiqueta o agregar un borde, márgenes,yrelleno. O puede tener un borde y un margen pero sin relleno, y así sucesivamente. Si no ajusta ninguna de estas propiedades, terminará con la configuración del navegador, que puede gustarle o no. Por ejemplo, aunque los navegadores normalmente no aplican relleno ni bordes a las etiquetas de una página, algunas etiquetas, como los encabezados y los párrafos, tienen un margen superior e inferior preestablecido. Figura 7-1 El modelo de caja CSS incluye el contenido dentro de una etiqueta (por ejemplo, varias oraciones de texto) más relleno, bordes y márgenes. El área dentro del borde, que incluye el contenido y el relleno, también puede tener un color de fondo. En realidad, el color de fondo se dibuja debajo del borde, por lo que cuando asigna un borde discontinuo o punteado, el color de fondo aparece en los espacios entre los puntos o guiones. 194 Css3: el manual perdido www.it-ebooks.info NotaComo se discutió en la página 548, debido a que diferentes navegadores aplican diferentes cantidades de relleno y margen a las mismas etiquetas, es mejor "poner a cero" los valores de relleno y margen para todas las etiquetas. En otras Controlador ESPACIO CON márgenes y relleno palabras, use un conjunto de estilos simples, llamado reinicio de CSS, para eliminar el relleno y el margen de las etiquetas HTML. Luego, cuando cree estilos adicionales que agreguen margen y relleno, puede estar seguro de que tendrá una presentación uniforme entre navegadores. Controlando el espacio con márgenes y relleno Tanto los márgenes como el relleno agregan espacio alrededor del contenido. Utilice estas propiedades para separar un elemento de otro, por ejemplo, para agregar espacio entre un menú de navegación a la izquierda y el contenido de la página principal a la derecha, o para inyectar un espacio en blanco entre el contenido y un borde. Es posible que desee alejar el borde del borde de una foto (consulte la Figura 7-2). Figura 7-2 Cada foto de esta página tiene un margen de 10 píxeles, por lo que el espacio que separa dos fotos es de 20 píxeles. El relleno separa las imágenes de sus bordes y expone un color de fondo gris. Puede establecer el borde, el margen y el relleno de forma independiente para cada borde. Observe el relleno más grande aplicado al borde inferior de cada foto. El relleno y el margen funcionan de manera similar y, a menos que aplique un borde o un color de fondo, realmente no puede saber si el espacio entre dos etiquetas es causado por el relleno o por un margen. Pero si tiene un borde alrededor de un elemento o un fondo detrás, la diferencia visual entre las dos propiedades es significativa. El relleno agrega espacio entre el contenido y el borde y evita que el contenido aparezca apretado dentro del cuadro; también incluye el área de fondo, por lo que el espacio ocupado por el relleno puede estar vacío de contenido (como texto o una foto), pero aún se llenará con una imagen o un color de fondo. Los márgenes, por otro lado, agregan espacios en blanco (a menudo llamadoscanal) entre elementos, dando al aspecto general de la página una apariencia más clara. Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 195 Controlador ESPACIO CON márgenes y relleno Puede controlar cada lado del margen o relleno de un elemento de forma independiente. Cuatro propiedades controlan los bordes del margen:margen superior, margen derecho, margen inferior, y margen izquierdo.Del mismo modo, cuatro propiedades controlan el relleno:acolchado superior, acolchado derecho, acolchado inferior,yrelleno-izquierda.Puede usar cualquier medida de CSS válida para definir el tamaño de un margen o relleno, así: margen derecho: 20px; acolchado superior: 3em; margen izquierdo: 10%; Los píxeles y ems se usan comúnmente y actúan como lo hacen con el texto (consulte la página 160). Un margen de 20 píxeles agrega 20 píxeles de espacio, y 3 ems de relleno agregan un espacio equivalente a 3 veces el tamaño de fuente del elemento con estilo. También puede usar valores porcentuales, pero son complicados. (Consulte el cuadro a continuación para obtener más detalles). NotaPara eliminar todo el espacio para un margen o relleno, use 0 (margen superior: 0oparte inferior del relleno: 0,Por ejemplo). Para eliminar el espacio alrededor de los cuatro bordes de la ventana del navegador, para permitir que un banner, un logotipo u otro elemento de la página llegue hasta el borde sin dejar espacios, asigne a la etiqueta del cuerpo un margen de 0 y un relleno de 0: margen: 0; relleno 0;. CLÍNICA DE USUARIOS ELÉCTRICOS Márgenes, relleno y porcentajes Cuando utiliza porcentajes, los navegadores web calculan la cantidad de Es posible que desee agregar un <div>etiqueta a una página para agrupar el espacio en función de laancho del elemento contenedor. En una página contenido relacionado en un área de la barra lateral. (Verá un ejemplo de esto web simple, el elemento contenedor es el cuerpo de la página y llena la en el tutorial en la página 225). Esa barra lateral puede tener un ancho ventana del navegador. En este caso, el valor del porcentaje se basa en específico de 300 píxeles. Las etiquetas dentro de la barra lateral consideran el el ancho de la ventana del navegador en un momento dado. Digamos <div>etiquetar su elemento contenedor. Entonces, una etiqueta en la barra que la ventana tiene 760 píxeles de ancho. En ese caso, un margen lateral con un margen derecho del 10 % tendrá 30 píxeles de espacio vacío a su izquierdo del 10 % agrega 76 píxeles de espacio al borde izquierdo del derecha. elemento con estilo. Pero si cambia el tamaño de la ventana del navegador, ese valor cambia. Reducir la ventana del navegador a 600 píxeles cambia el margen a 60 píxeles (10 por ciento de 600). Para hacer las cosas más confusas, los valores porcentuales superior e inferior se calculan en función del ancho del elemento contenedor, no de su altura. Entonces, un margen superior del 20 % es el 20 % del Sin embargo, el elemento contenedor no siempre tiene el ancho de la ancho del contenedor de la etiqueta con estilo. ventana del navegador. Como verá en capítulos posteriores, cuando crea diseños más sofisticados, puede introducir nuevos elementos que ayuden a organizar su página. Taquigrafía de margen y relleno Con frecuencia querrá configurar los cuatro lados del margen o relleno de un estilo. Pero escribiendo las cuatro propiedades (margen derecho, margen izquierdo,y así sucesivamente) para cada estilo se vuelve tedioso. No temas: puedes usar las propiedades de acceso directo llamadasmargenyrelleno para establecer las cuatro propiedades rápidamente: 196 Css3: el manual perdido www.it-ebooks.info Controlador ESPACIO CON márgenes y relleno margen: 0 10px 10px 20px; relleno: 10px 5px 5px 10px; NotaSi el valor utilizado en una propiedad CSS es 0, entonces no necesita agregar una unidad de medida. Por ejemplo, simplemente escribamargen: 0;en lugar demargen: 0px;. El orden en que especifica los cuatro valores es importante. debe serarriba, derecha, abajo,y izquierda.Si te equivocas, estarás en problemas. De hecho, la manera más fácil de mantener el orden en orden es recordar mantenerse al margen.TRUNEDlicenciado en Derechoe—arriba, derecha, abajo e izquierda. Si desea usar el mismo valor para los cuatro lados, es aún más fácil: solo use un valor único. Si desea eliminar los márgenes de todos los <h1>etiquetas, puede escribir este estilo: h1 { margen: 0; } Del mismo modo, use la abreviatura para agregar la misma cantidad de espacio entre algún contenido y su borde: relleno: 10px; NotaCuando usa el mismo valor para la parte superior e inferior y otro valor para la izquierda y la derecha, puede usar dos valores.margen: 0 2em;establece la parte superiorymárgenes inferiores a 0 y a la izquierdaymárgenes derechos a 2 ems. Del mismo modo, si los márgenes superior e inferior (o relleno) difieren, pero el izquierdo y el derecho siguen siendo los mismos, puede utilizar tres valores. Por ejemplo,margen: 0 2em 1em;establece el margen superior en 0, los márgenes izquierdo y derecho en 2 ems y el margen inferior en 1 em. Márgenes en conflicto Cuando se trata de CSS, dos más dos no siempre son cuatro. Podría encontrarse con algunas matemáticas extrañas cuando el margen inferior de un elemento toca el margen superior de otro. En lugar de sumar los dos márgenes, un navegador web aplica el mayor de los dos márgenes (Figura 7-3, arriba). Digamos que el margen inferior de una lista desordenada se establece en 30 píxeles y el margen superior de un párrafo que sigue a la lista es de 20 píxeles. En lugar de sumar los dos valores para crear 50 píxeles de espacio entre la lista y el párrafo, un navegador web usa elmás grandemargen, en este caso 30 píxeles. Si no desea que esto suceda, utilice en su lugar el relleno superior o inferior (Figura 7-3, parte inferior). Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 197 Controlador ESPACIO CON márgenes y relleno Figura 7-3 Cuando dos márgenes verticales se encuentran, el más pequeño colapsa. Aunque el título superior tiene un margen inferior de 20 píxeles y el párrafo tiene un margen superior de 15 píxeles, un navegador web agrega solo 20 píxeles de espacio entre los dos elementos. Para obtener el espacio completo de 35 píxeles que desea, use relleno en lugar de márgenes, como se muestra en el título inferior. Aquí, el encabezado tiene 20 píxeles de relleno inferior. Esos 20 píxeles se agregan al margen superior de 15 píxeles del párrafo para formar un espacio de 35 píxeles. Las cosas se vuelven aún más extrañas cuando un elemento esadentrootro elemento Esta situación puede conducir a un comportamiento de rascarse la cabeza. Por ejemplo, supongamos que agrega un cuadro de "advertencia" a una página (como un <div>etiqueta para contener un mensaje de advertencia en su interior). Agrega un margen superior e inferior de 20 píxeles para separar el cuadro de advertencia del encabezado que se encuentra arriba y el párrafo de texto que se encuentra debajo. Hasta ahora, todo bien. Pero supongamos que inserta un encabezado dentro del cuadro de advertencia, y para dejar un pequeño espacio entre él y la parte superior e inferior del div, establece el margen del encabezado en 10 píxeles. Puede pensar que está agregando 10 píxeles de espacio entre el encabezado y la parte superior e inferior del div, pero estaría equivocado (Figura 7-4, arriba). En su lugar, el margen aparece arribael div. En este caso, no importa qué tan grande sea el margen que aplique al título: el margen seguirá apareciendoarribael div. NotaEn la jerga de CSS, este fenómeno se conoce comomárgenes colapsados, lo que significa que dos márgenes en realidad se convierten en uno. Tiene dos formas de solucionar este problema: agregue una pequeña cantidad de relleno alrededor de la etiqueta <div> o agregue un borde. Dado que el borde y el relleno se sientan entre los dos márgenes, los márgenes ya no se tocan, y el titular tiene un pequeño respiro (Figura 7-4, abajo). NotaLos márgenes horizontales (izquierdo y derecho) y los márgenes entre elementos flotantes no se colapsan de esta manera. Los elementos posicionados de forma absoluta y relativa, sobre los que aprenderá en el Capítulo 15, tampoco colapsan. 198 Css3: el manual perdido www.it-ebooks.info Eliminación de espacios con márgenes negativos La mayoría de las medidas en CSS tienen que ser un valor positivo; después de todo, ¿qué Controlador ESPACIO CON márgenes y relleno texto sería eso?20 píxeles negativosalto (o bajo) parece? El relleno también tiene que ser un valor positivo. Pero CSS permite muchas técnicas creativas usando márgenes negativos. Figura 7-4 ¡Santos márgenes cada vez más reducidos, Batman! Arriba: siempre que los márgenes verticales se toquen, incluso cuando un elemento está dentro de otro elemento (como el<h2>etiqueta dentro de este div), los márgenes colapsan. Inferior: para resolver este dilema, agregue un pequeño relleno o un borde alrededor del elemento contenedor (1 píxel de relleno superior e inferior en el<div>, en este caso). En lugar de agregar espacio entre una etiqueta y los elementos que la rodean, un margen negativo eliminaespacio. Por lo tanto, puede hacer que un párrafo de texto se superponga a un título, sobresalga del elemento que lo contiene (una barra lateral u otro diseño <división>),o incluso desaparecer de un borde de la ventana del navegador. Y, oye, incluso puedes hacer algo útil con márgenes negativos. Incluso cuando establece los márgenes entre dos titulares en 0, todavía hay un pequeño espacio entre el texto de los titulares (gracias a la altura de la línea del texto, como se describe en la página 168). Eso suele ser algo bueno, ya que es difícil leer oraciones que se juntan y se tocan. Pero, si se usa con moderación, reducir el espacio entre dos titulares puede producir algunos efectos interesantes. El segundo título de la Figura 7-5 (el que comienza con "Criar atún") tiene un margen superior de –10px aplicado. Esto mueve el título hacia arriba 10 píxeles para que se superponga ligeramente al espacio ocupado por el título que se encuentra arriba. Además, los bordes izquierdo y derecho de la ventana “¡Extra! ¡Extra!" titular en realidad toca las letras del titular más grande. También puede utilizar un margen negativo para simular un relleno negativo. En el tercer titular de la figura 7-5, el que comienza con “La técnica extraordinaria”, aparece una línea directamente debajo del texto. Esta línea es en realidad laarribaborde para el párrafo que sigue. (Aprenderá cómo agregar bordes en la página 202). Pero debido a que ese párrafo tiene un margen superior negativo, el borde se mueve hacia arriba y debajo del título. Date cuenta cómo Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 199 Controlador ESPACIO CON márgenes y relleno la cola descendente de la letra Q en el titular en realidad cuelgaabajola frontera. Dado que el relleno, el espacio entre el contenido (como esa letra Q) y un borde, no puede ser negativo, no puede mover un borde inferior hacia arriba sobre el texto o cualquier otro contenido. Pero obtienes el mismo efecto aplicando un borde al siguiente elemento y usando un margen negativo para moverlo hacia arriba. Figura 7-5 En este ejemplo, para hacer que el borde superior del último párrafo parezca que en realidad es el borde inferior del título que está encima, agregue un poco de relleno al párrafo. Alrededor de 5 píxeles de relleno superior mueven el párrafo hacia abajo desde el borde, mientras que 4 ems de relleno izquierdo sangran el texto del párrafo, permitiendo que el borde superior se extienda hasta el borde izquierdo. CONSEJODe hecho, puede usar un margen superior negativo en el párrafo o un margen inferior negativo en el título. Ambos tienen el mismo efecto de acercar el párrafo al título. En línea, en bloque y otras configuraciones de visualización Aunque los navegadores web tratan cada etiqueta como una especie de cuadro, no todos los cuadros son iguales. CSS tiene dos tipos diferentes de cajas:cajas de bloquesycajas en línea—que corresponden a los dos tipos de etiquetas—etiquetas a nivel de bloque y en línea. Anivel de bloquela etiqueta crea un descanso antes y después. El <p>La etiqueta, por ejemplo, crea un bloque que está separado de las etiquetas de arriba y de abajo. Titulares, <div>etiquetas, tablas, listas y elementos de lista son otros ejemplos de etiquetas a nivel de bloque. En línealas etiquetas no crean una ruptura antes o después de ellas. Aparecen en la misma línea que el contenido y las etiquetas junto a ellos. El <fuerte>etiqueta es una etiqueta en línea. Una palabra formateada con esta etiqueta felizmente se sienta junto a otro texto, incluso texto envuelto en otras etiquetas en línea como <em>.De hecho, se vería bastante extraño si enfatizaras una sola palabra en medio de un párrafo con el <fuerte>etiqueta y esa palabra apareció de repente en su propia línea por sí misma. Otras etiquetas en línea son <imagen>para agregar imágenes, <un> para crear enlaces y las diversas etiquetas utilizadas para crear campos de formulario. En la mayoría de los casos, CSS funciona igual para cajas en línea y cajas de bloques. Puede diseñar la fuente, el color y el fondo y agregar bordes a ambos tipos de cuadros. Sin embargo, 200 Css3: el manual perdido www.it-ebooks.info cuando se trata de márgenes y relleno, los navegadores tratan los cuadros en línea de manera diferente. Aunque puede agregar espacio a la izquierda o a la derecha de un elemento en línea Controlador ESPACIO CON márgenes y relleno usando el relleno izquierdo o derecho o los márgenes izquierdo o derecho, no puede aumentar la altura del elemento en línea con relleno o márgenes superior o inferior. En el párrafo superior de la Figura 7-6, el elemento en línea tiene un estilo con bordes, un color de fondo y 20 píxeles de margen en los cuatro lados. Pero el navegador solo agrega espacio a los lados izquierdo y derecho del elemento en línea. Figura 7-6 Agregar márgenes superior o inferior y relleno no hace que un elemento en línea sea más alto, por lo que puede encontrarse con un formato extraño. En el párrafo central, el fondo y los bordes de un enlace se superponen al texto de arriba y de abajo. El fondo aparece en la parte superior de la línea. antes del texto en línea con estilo, pero debajo de la línea que le sigue porque el navegador trata cada línea como si estuviera apilada encima de la línea anterior. Normalmente, eso no es un problema ya que las líneas de texto no suelen superponerse. Si desea que los márgenes superior e inferior y el relleno funcionen para un elemento en línea, puede usar el pantalla: bloque en línea instrucciones (abajo). Esto deja el elemento en línea, pero lo trata como un cuadro, por lo que se aplican (y obedecen) el relleno, los márgenes, los bordes y el ancho y el alto. Esto incluso funciona en Internet Explorer 7, pero solo para elementos normalmente en línea como enlaces,<fuerte>, <em>, y< lapso>etiquetas; también deberías agregaralineación vertical: medio para que IE 7 muestre el bloque en línea igual que otros navegadores. NotaUna excepción a la regla de que los elementos en línea no se hacen más altos cuando se agregan rellenos o márgenes es el <imagen> etiqueta (aunque es una etiqueta en línea). Los navegadores web expanden correctamente la altura del cuadro de la imagen para acomodar cualquier relleno y márgenes que agregue. Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 201 agregando FRONTERAS En ocasiones, es posible que desee que un elemento en línea se comporte más como un elemento a nivel de bloque y viceversa. Las listas con viñetas presentan cada elemento como su propio bloque: cada elemento de la lista se apila sobre el siguiente. Es posible que desee cambiar ese comportamiento para que los elementos de la lista aparezcan uno al lado del otro, todos en una sola línea, como en una barra de navegación (puede ver un ejemplo de uno en el cuadro de la página 307). Finalmente, es posible que desee tratar un elemento en línea como un elemento a nivel de bloque. Tal vez desee que una imagen incrustada en un párrafo esté en su propia línea, con un espacio arriba y abajo. Afortunadamente, CSS incluye una propiedad que le permite hacer exactamente eso: elmostrarpropiedad. Con él, puede hacer que un elemento a nivel de bloque actúe como un elemento en línea: pantalla: en línea; O puede hacer que un elemento en línea, como una imagen o un enlace, se comporte como un elemento a nivel de bloque: bloqueo de pantalla; NotaElmostrarproperty tiene un sinfín de opciones posibles, algunas de las cuales no funcionan en todos los navegadores. Elbloque en línea value funciona en los navegadores actuales (vea la Figura 7-6). Otro valor,ninguno,funciona en la mayoría de los navegadores y tiene muchos usos. Hace una cosa simple: oculta completamente el elemento con estilo para que no aparezca en un navegador web. Con un poco de programación JavaScript, puede hacer que un elemento oculto de esta manera se vuelva visible instantáneamente, simplemente cambiando su visualización de nuevo a cualquieraen líneaobloquear.Incluso puede hacer un elemento con una pantalla deningunoaparecer de repente usando CSS; verá un ejemplo de eso en la página 583. Adición de bordes Un borde es simplemente una línea que corre alrededor de un elemento. Como se muestra en la Figura 7-1, se encuentra entre cualquier relleno y márgenes que establezca. Un borde alrededor de cada borde puede enmarcar una imagen o marcar los límites de un banner u otro elemento de la página. Pero los bordes no necesariamente tienen que crear un cuadro completo alrededor de su contenido. Si bien puede agregar un borde a los cuatro bordes, puede agregar fácilmente un borde solo en la parte inferior o en cualquier combinación de lados. Esta flexibilidad le permite agregar elementos de diseño que no necesariamente se sienten como un borde. Por ejemplo, agregue un borde a la izquierda de un elemento, hágalo de alrededor de 1 em de grosor y se verá como una viñeta cuadrada. Un solo borde debajo de un párrafo puede funcionar como el <h> (regla horizontal) proporcionando un separador visual entre las secciones de una página. Usted controla tres propiedades diferentes de cada borde:color, ancho,yestilo.El color puede ser cualquiera de los valores de color CSS discutidos a partir de la página 154, como un número hexadecimal, una palabra clave o un valor RGB (o RGBA). El ancho de un borde es el grosor de la línea utilizada para dibujar el borde. Puede utilizar cualquier tipo de medida de CSS (excepto porcentajes) o las palabras clavedelgado, mediano,ygrueso.El método más común y fácil de entender es el de los píxeles. Finalmente, el estilo controla el tipo de línea dibujada. Hay muchos estilos diferentes y algunos se ven muy diferentes de un navegador a otro, como puede ver en la Figura 7-7. Tú 202 Css3: el manual perdido www.it-ebooks.info agregando especifique el estilo con una palabra clave. Por ejemplo,sólidodibuja una línea continua y FRONTERAS punteado crea una línea formada por guiones. CSS ofrece estos estilos:sólido, punteado, discontinuo, doble, surco, cresta, inserción, salida, ninguno,yoculto. (Ningunoyoculto funcionan de la misma manera: eliminan el borde por completo. ElningunoEl valor es útil para desactivar un solo borde. Vea el ejemplo en la página 205.) Figura 7-7 La apariencia de los estilos de borde puede variar mucho de un navegador a otro. Los navegadores de la imagen aquí están Internet Explorer 9 (arriba a la izquierda), Chrome para Windows (arriba a la derecha), Firefox para Mac (abajo a la izquierda) y Safari para Mac (abajo a la derecha). Taquigrafía de propiedad de borde Si alguna vez ha visto una lista de las diferentes propiedades de borde disponibles en CSS, puede pensar que los bordes son realmente complejos. Después de todo, hay 20 propiedades de borde diferentes, que encontrará en las siguientes secciones, además de un par que se aplican a las tablas. Pero todas estas propiedades son simplemente variaciones de un tema que brindan diferentes formas de controlar las mismas tres propiedades (color, ancho y estilo) para cada uno de los cuatro bordes. La propiedad más básica y directa esborde, que simplemente agrega cuatro bordes: borde: 4px sólido #FF0000; El estilo anterior crea un borde rojo sólido de 4 píxeles. Puede usar esta propiedad para crear un marco básico alrededor de una imagen, una barra de navegación u otro elemento que desee que aparezca como un cuadro independiente. NotaEl orden en que escribes las propiedades no importa:borde: 4px sólido #FF0000; funciona tan bien comoborde: #FF0000 sólido 4px;. Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 203 agregando FRONTERAS Dar formato a bordes individuales Puede controlar cada borde individualmente usando la propiedad apropiada:borde superior, borde inferior, borde izquierdo,oborde derecho.Estas propiedades funcionan igual que las normales.bordepropiedad, pero controlan sólo un lado. La siguiente declaración de propiedad agrega una línea discontinua roja de 2 píxeles debajo del estilo: borde inferior: 2px rojo discontinuo; Puedes combinar elbordepropiedad con una de las propiedades específicas de borde como borde izquierdopara definir el cuadro básico para todo el estilo pero personalizar un solo borde. Supongamos que desea que los lados superior, izquierdo y derecho de un párrafo tengan el mismo tipo de borde, pero desea que el borde inferior se vea ligeramente diferente. Puedes escribir cuatro líneas de CSS, así: borde superior: 2px negro sólido; borde izquierdo: 2px negro sólido; borde derecho: 2px negro sólido; borde inferior: 4px punteado #333; O bien, puede lograr el mismo efecto que las cuatro líneas anteriores de CSS con solo dos líneas: borde: 2px negro sólido; borde inferior: 4px punteado #333; La primera línea de código define el aspecto básico de los cuatro bordes y la segunda línea redefine solo el aspecto del borde inferior. No solo es más fácil escribir dos líneas de CSS en lugar de cuatro, sino que también facilita el cambio de estilo. Si desea cambiar el color de los bordes superior, izquierdo y derecho a rojo, solo tiene que editar una sola línea, en lugar de tres: borde: 2px sólidorojo; borde inferior: 4px punteado #333; Cuando utiliza este método abreviado, que define el aspecto básico de los cuatro bordes con elborde propiedad y luego reemplazando el aspecto de un solo borde con una de las propiedades específicas del borde comoborde izquierdo—es crucial que escriba el código en un orden específico. La configuración de borde global más general debe ir primero, y la configuración específica de borde en segundo lugar, así: borde: 2px negro sólido; borde inferior: 4px punteado #333; Porque elborde inferiorpropiedad aparece en segundo lugar, anula la configuración de la bordepropiedad. Si elborde inferiorlínea vino antes de labordepropiedad, entonces sería cancelada por elbordepropiedad, y los cuatro bordes serían idénticos. La última propiedad listada puede anular cualquier propiedad relacionada listada arriba. Este comportamiento es un ejemplo de la cascada de CSS sobre la que leyó en el Capítulo 5. 204 Css3: el manual perdido www.it-ebooks.info También puede utilizar este método abreviado para desactivar la visualización de un solo borde con el ningunopalabra clave. Supongamos que desea poner un borde alrededor de tres lados de un estilo (superior, agregando FRONTERAS izquierdo e inferior) pero ningún borde en el último lado (derecho). Solo dos líneas de código te dan el aspecto que buscas: borde: 2px recuadro #FFCC33; borde derecho: ninguno; La capacidad de modificar sutilmente los diferentes lados de cada borde es la razón por la que existen tantas propiedades de borde diferentes. Las 15 propiedades restantes le permiten definir colores, estilos y anchos individuales para el borde y para cada lado del borde. Por ejemplo, podrías reescribirborde: 2px doble #FFCC33;como esto: ancho del borde: 2px; estilo de borde: doble; color del borde: #FFCC33; Dado que está utilizando tres líneas de código en lugar de una, probablemente desee evitar este método. Sin embargo, cada borde de borde tiene su propio conjunto de tres propiedades, que son útiles para anular solo una propiedad de borde para un solo borde de borde. El borde derecho tiene estas tres propiedades:borde-derecho-ancho, borde-derecho-estilo, ybordederecho-color.Los bordes izquierdo, superior e inferior tienen propiedades con nombres similares:borde-izquierdo-ancho, borde-izquierdo-estilo,etcétera. Puede cambiar el ancho de un solo borde como este:borde-derecho-ancho: 4px;. Una cosa buena de este enfoque es que si luego decide que el borde debe ser sólido, necesita editar solo el genéricobordepropiedad cambiandopunteadoasólido. Además, puede especificar valores individuales para cada lado del borde utilizando el ancho de borde, estilo de borde,ycolor del bordepropiedades. Por ejemplo, ancho del borde: 10px 5px 15px 13px;aplica cuatro anchos diferentes a cada lado (superior, derecho, inferior e izquierdo). Imagine que desea tener un borde discontinuo de 2 píxeles alrededor de los cuatro bordes de un estilo, pero desea que cada borde sea de un color diferente. (Tal vez esté creando un sitio web para niños). Esta es una forma rápida de hacerlo: borde: 2px punteado; borde-color: verde amarillo rojo azul; Este conjunto de reglas crea un borde discontinuo de 2 píxeles alrededor de los cuatro bordes, mientras que el borde superior se vuelve verde, el borde derecho amarillo, el borde inferior rojo y el borde izquierdo azul. NotaPor lo general, agrega relleno cada vez que usa bordes. El relleno proporciona espacio entre el borde y cualquier contenido, como texto, imágenes u otras etiquetas. A menos que desee colocar un borde alrededor de una imagen, los bordes generalmente se colocan demasiado cerca del contenido sin relleno. Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 205 COLOREANDO EL Fondo Colorear el fondo Es muy fácil agregar un fondo a una página completa, un título individual o cualquier otro elemento de la página. Utilizar elcolor de fondopropiedad seguida de cualquiera de las opciones de color válidas que se describen a partir de la página 154. Si lo desea, agregue un verde sorprendentemente brillante al fondo de una página con esta línea de código: cuerpo {color de fondo: rgb(109,218,63); } Alternativamente, puede crear un estilo de clase llamado, por ejemplo, .revisarcon elcolor de fondopropiedad definida, y luego aplique la clase a la etiqueta del cuerpo en el HTML, así: < clase de cuerpo="revisión">. NotaTambién puede colocar una imagen en el fondo de una página y controlar la ubicación de esa imagen de muchas maneras diferentes. Explorará eso en el próximo capítulo. Además, puede agregar un degradado de color al fondo de cualquier elemento. Los colores de fondo son útiles para crear muchos efectos visuales diferentes. Puede crear un título llamativo configurando su fondo en un color oscuro y su texto en un color claro. Los colores de fondo también son una excelente manera de destacar parte de una página, como una barra de navegación, un banner o una barra lateral. Y no se olvide del método de color RGBA descrito en la página 155. Con él, puede hacer que el fondo sea parcialmente transparente, dejando que se vean los colores, las texturas o las imágenes subyacentes de otros objetos. Por ejemplo, puede establecer el color de fondo de la página en un color tostado. Luego, di que quieres un <div>etiqueta adentro para que sea un tono más claro de ese bronceado. En lugar de colocar un color sólido en el fondo de ese div, puede agregar el color blanco y luego controlar la opacidad de ese color, de modo que se muestren varios grados del color bronceado: cuerpo { color de fondo: rgb (247,226,155); } . especial-div { color de fondo: rgba(255.255.255,75); } NotaCuando utilice bordes y colores de fondo, tenga en cuenta lo siguiente: si el estilo del borde es punteado o discontinuo (vea la Figura 7-7), el color de fondo se muestra en los espacios vacíos entre los puntos o guiones. En otras palabras, los navegadores web en realidad pintan el color de fondobajola frontera 206 Css3: el manual perdido www.it-ebooks.info CREANDO redondeado Crear esquinas redondeadas rincones Como se mencionó anteriormente, los navegadores web tratan todos los elementos como cajas rectangulares rígidas. Eso se vuelve obvio cuando pones un borde alrededor de un párrafo o div. Afortunadamente, puede suavizar los bordes duros de esos cuadros agregando una esquina redondeada a sus estilos (vea la Figura 7-8). CSS3 introduce elborde-radiopropiedad para permitir que los diseñadores agreguen curvas a una o más esquinas de un elemento. En su forma más simple, elborde-radio La propiedad acepta un solo valor, que luego aplica a las cuatro esquinas de un elemento: . caja especial { color de fondo: rojo; borde-radio: 20px; } El navegador utiliza el valor del radio suministrado para dibujar un círculo en cada esquina del elemento. El valor es igual a la distancia desde el centro del círculo hasta su borde, su radio, como se muestra en la Figura 7-9. Los píxeles y ems son las medidas más comunes que usará, pero también puede usar porcentajes (aunque se comportan un poco diferente de lo que podría esperar, como se explica en la Figura 7-9). Figura 7-8 CSS3 te permite aplicar esquinas redondeadas a cualquier elemento. Asegúrese de tener un color de fondo o un borde en el elemento, o de lo contrario no podrá ver nada de esa impresionante redondez. Con un solo valor, el navegador dibuja el mismo radio para cada esquina del elemento. Por ejemplo, la imagen superior izquierda de la Figura 7-8 usa la siguiente declaración: borde-radio: 30px; Sin embargo, no está limitado al mismo valor para cada esquina. Puede proporcionar valores separados para cada esquina proporcionando cuatro valores. Por ejemplo, el cuadro superior derecho de la figura 7-8 tiene cuatro esquinas diferentes. La declaración es: borde-radio: 0 30px 10px 5px; Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 207 CREANDO redondeado rincones Los números comienzan en la parte superior izquierda del cuadro y avanzan en el sentido de las agujas del reloj. En otras palabras, el primer valor (0 en el ejemplo de la Figura 7-8) se aplica a la parte superior izquierda, el segundo (30 px) a la parte superior derecha, el tercero (10 px) a la parte inferior derecha y el cuarto (5 px ) en la esquina inferior izquierda. También puede proporcionar solo dos valores, en cuyo caso, el primer número se aplica a las esquinas superior izquierda e inferior derecha, mientras que el segundo número se aplica a las esquinas superior derecha e inferior izquierda. Figura 7-9 Puede crear esquinas circulares (arriba) o esquinas elípticas (abajo) proporcionando un solo valor:borde-radio: 20px—o una combinación de dos valores separados por/ --radio del borde: 40px/20px;. Si usa un solo valor porcentual, lo más probable es que termine con una esquina elíptica. Esto se debe a que el navegador calcula el radio horizontal usando un porcentaje del ancho del elemento y el radio vertical usando un porcentaje de la altura del elemento. Entonces, si escribes algo como borde-radio: 20%, a menos que el elemento sea un cuadrado perfecto, el navegador calculará una esquina elíptica más parecida a esta:borderadio: 20px/40px;. Además de las esquinas perfectamente redondas (es decir, circulares) que ha visto hasta ahora, también es posible aplicar una esquina elíptica, como las de los dos ejemplos inferiores de la Figura 7-8. Una ruta elíptica requiere dos valores de radio: el primero es el radio desde el centro de la ruta hasta uno de los bordes izquierdo o derecho, mientras que el segundo número es la distancia desde el centro de la ruta hasta uno de los bordes superior o inferior. Por ejemplo, para agregar esquinas como la que se muestra en la esquina inferior izquierda de la Figura 7-8, crearía esta declaración: borde-radio: 40px/20px; El40pxel valor es el radio horizontal; el20pxel valor es el radio vertical. La barra inclinada entre ellos le permite al navegador saber que está creando una ruta elíptica. Puede hacer que las cuatro esquinas tengan diferentes formas oblongas al proporcionar cuatro conjuntos de estos valores, como este: borde-radio: 40px/20px 10px/30px 20px/40px 10px/20px; Incluso puede mezclar y combinar esquinas elípticas y circulares si lo desea: borde-radio: 10px 10px/30px 20px/40px 10px; Finalmente, si desea seguir la ruta manual, puede usar propiedades separadas para definir la apariencia de cada esquina. Por ejemplo: borde-radio: 1em 2em 1.5em .75em; 208 Css3: el manual perdido www.it-ebooks.info CREANDO redondeado también se puede escribir como: rincones borde-superior-izquierda-radio: 1em; bordesuperior-derecho-radio: 2em; borde-inferiorderecho-radio: 1.5em; borde-inferiorizquierda-radio: .75em; NotaInternet Explorer 8 y versiones anteriores no entienden elborde-radiopropiedad, por lo que mostrarán esquinas cuadradas en su lugar. Además, la versión 3.2 de Safari para iOS y la versión 2.1 del navegador de Android requieren:webkitprefijo de proveedor como este: -webkit-border-radio: 20px;.Consulte el cuadro a continuación para obtener más información. Hasta la velocidad Prefijos de proveedores CSS es un conjunto de reglas en constante evolución. Incluso mientras crea propiedad fue propuesta por primera vez, Firefox apoyó un -radio páginas web hoy en día, hay personas inteligentes en el W3C (World Wide Web de mozborderpropiedad, mientras que Safari apoyó la Consortium) que trabajan en nuevas propiedades CSS y otras personas - webkit-border-radiopropiedad. inteligentes que agregan soporte para nuevas propiedades CSS en los Cuando una propiedad requiere un prefijo de proveedor, generalmente navegadores web que crean. De hecho, a veces los propios fabricantes de escribe varias líneas de código para crear el mismo efecto: una para navegadores crean una nueva propiedad CSS que creen que sería genial y la cada proveedor y, finalmente, una con la versión sin prefijo como esta: agregan a su navegador. Otras veces, el W3C piensa en nuevas propiedades CSS que los proveedores de navegadores intentan agregar lentamente a sus navegadores. - tamaño de caja de webkit: cuadro de borde; tamaño de caja: cuadro de borde; Durante este período, cuando se están desarrollando nuevas propiedades y estándares CSS, los fabricantes de navegadores se mueven con cautela. No quieren comprometerse por completo con las propiedades de CSS que pueden cambiar. Del mismo modo, mientras experimentan con las propiedades CSS de su propio diseño, los fabricantes de navegadores dudan en afirmar que han llegado a un estándar acordado. Para marcar una propiedad CSS como experimental o aún no completamente acordada, el fabricante de un navegador usa un prefijo antes del nombre de la propiedad. Cada uno de los principales fabricantes de navegadores tiene su propio prefijo: •- - tamaño de cuadro de moz: cuadro de borde; Por lo general, si el grupo de trabajo de CSS del W3C adopta una propiedad y finaliza suficientes detalles, los proveedores descartan la extensión. Por ejemplo, ahora todos los principales navegadores simplemente admiten el borde-radiopropiedad sin prefijo de proveedor requerido. Como leerá a lo largo de este libro, los detalles finales de algunas propiedades de CSS3 aún se están resolviendo, por lo que es posible que deba usar un prefijo de proveedor con ellos. Este libro le permitirá saber cuándo necesita estos prefijos y cómo usarlos con una propiedad en particular. webkit-es utilizado por Chrome, Safari y otros navegadores basados en WebKit •- moz-es utilizado por Mozilla Firefox •- o-es utilizado por la ópera •- EM-es utilizado por Microsoft Internet Explorer Cuando una propiedad está cambiando, un navegador puede admitir una versión prefijada por el proveedor. Por ejemplo, cuando elborde-radio Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 209 agregando gota Oscuridad Adición de sombras paralelas Como lee en la página 166, puede crear sombras paralelas sutiles (o no tan sutiles) en el texto para que se destaque de la página. CSS3 incluye elsombra de la cajapropiedad para agregar sombras paralelas al cuadro delimitador de un elemento para que pueda, por ejemplo, hacer un <div> parecen flotar sobre la página (consulte la Figura 7-10). Hay algunas opciones más que con elsombra de textopropiedad. Por ejemplo, puede hacer que aparezca una sombra dentro del cuadro como en la parte inferior de la Figura 7-10. Figura 7-10 El CSS3sombra de la cajale permite agregar sombras a sus elementos para que parezcan flotar sobre la página. Esta propiedad funciona en la mayoría de los navegadores actuales, incluido Internet Explorer 9. Desafortunadamente, IE 9 dibuja las sombras notablemente más finas que otros navegadores. Además, IE 8 y versiones anteriores simplemente ignoran la propiedad y no dibujan sombras en los elementos. 210 Css3: el manual perdido www.it-ebooks.info La sintaxis básica para elsombra de la cajaLa propiedad se muestra en la figura 7-11. El primer valor es un desplazamiento horizontal; es decir, este valor mueve la sombra a la derecha oa la izquierda agregando gota Oscuridad del elemento. Un número positivo mueve la sombra hacia la derecha (Figura 7-10, arriba) y un número negativo mueve la sombra hacia la izquierda. El segundo valor es el desplazamiento vertical: la posición de la sombra por encima o por debajo del elemento. Un elemento positivo coloca la sombra por debajo del borde inferior del cuadro (Figura 7-10, arriba), mientras que un valor negativo mueve la sombra por encima del borde superior del cuadro. NotaDebe usar píxeles o ems para los valores de sombra paralela. Los porcentajes no funcionarán. El tercer valor es el radio de la sombra. Determina qué tan borrosa y ancha es la sombra. un valor de 0no crea desenfoque, por lo que los bordes de la sombra son nítidos. Un valor grande crea más desenfoque y una sombra más espesa. Finalmente, el último valor es el color de la sombra paralela. Puede usar cualquier valor de color CSS, pero los valores RGBA se ven particularmente bien ya que puede controlar la opacidad del color para que parezca más translúcido y como una sombra. Figura 7-11 La sombra paralela más básica coloca una sombra coloreada a la izquierda (usando un valor negativo como se muestra aquí) o a la derecha (valor positivo) y encima de la parte superior (valor negativo) o debajo de la parte inferior (valor positivo) del elemento, y difumina la sombra con un radio de desenfoque especificado. Elsombra de la cajaLa propiedad incluye dos valores opcionales:recuadroy un valor diferencial. ElrecuadroLa palabra clave le dice a un navegador que dibuje la sombra dentro del cuadro (Figura 7-10, abajo). Simplemente agreguerecuadrocomo el primer valor de lasombra de la cajapropiedad para crear una sombra insertada: box-shadow: inserción 4px 4px 8px rgba(0,0,0,.75); También puede agregar undesparramarcomo cuarto valor (entre el radio de la sombra y el color de la sombra). La extensión expande la sombra en la cantidad especificada. En otras palabras, si agrega un valor diferencial de10 píxeles,un navegador expande la sombra 10 píxeles en cada dirección (básicamente haciéndola 20 píxeles más ancha y 20 píxeles más alta). El valor también Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 211 Determinando ALTURA Y ancho determina cuándo se aplica el radio de desenfoque. En otras palabras, cuando agrega un valor de dispersión, el desenfoque de la sombra no comienza hasta que se aplica el valor de dispersión. Esto es particularmente útil cuando desea agregar una sombra alrededor de todo el elemento, lo que muchos programas de edición de imágenes llamanbrillo. NotaEl navegador de Android y las versiones anteriores de Safari para iPhone requieren la versión con el prefijo del proveedor desombra de la cajatrabajar; consulte el cuadro en la página 209 para obtener más información sobre los prefijos de proveedores. En otras palabras, para hacer que una sombra de cuadro funcione en esos navegadores, así como en todos los navegadores nuevos, debe agregar dos declaraciones a un estilo: - webkit-caja-sombra: 2px 2px 10px #000000; sombra de caja: 2px 2px 10px #000000; Por ejemplo, en el segundo cuadro desde arriba en la Figura 7-10, los desplazamientos horizontal y vertical se establecen en0;el radio de la sombra es8 píxeles;y la propagación es2 píxeles.El valor de dispersión empuja la sombra hacia afuera 2 píxeles en los cuatro lados del cuadro; y luego los 8 píxeles del radio de la sombra extienden el desenfoque otros 8 píxeles. Incluso puede usar el valor de extensión para crear un segundo borde de diferente color alrededor de un borde existente. Aquí hay un ejemplo de eso: borde: 10px rgb sólido (100,255,30); sombra de cuadro: 0 0 0 10px rgb (0,33,255); Finalmente, puede incluso aplicar múltiples sombras a un estilo (Figura 7-10, segunda desde abajo). Simplemente agregue una coma después del primer conjunto de configuraciones de sombra y luego agregue otra sombra: sombra de cuadro: 10px 5px 8px #FF00FF, - 5px -10px 20px 5px rgb(0,33,255); Puede agregar tantas sombras como desee (y según lo permita el sentido común del diseño). NotaDesafortunadamente, hay mucha variación en la forma en que los navegadores dibujan una sombra de caja. IE 9, por ejemplo, crea una sombra notablemente más delgada que otros navegadores. Para una buena comparación visual de cómo los navegadores dibujan las sombras de los cuadros, visitehttp://thany.nl/apps/boxshadows/. Determinación de la altura y el ancho Otras dos propiedades de CSS que forman parte del modelo de cuadro de CSS son útiles para asignar dimensiones a un objeto, como una tabla, columna, banner o barra lateral. Elaltura y anchopropiedades asignan una altura y un ancho al área de contenido de un estilo. Usará estas propiedades a menudo cuando cree los tipos de diseños CSS descritos en la Parte tres de este libro, pero también son útiles para tareas de diseño más básicas, como asignar el ancho a una tabla, crear una barra lateral simple o crear una galería. de imágenes en miniatura (como la que se describe en los pasos de la página 278). 212 Css3: el manual perdido www.it-ebooks.info Agregar estas propiedades a un estilo es muy fácil. Simplemente escriba la propiedad seguida de cualquiera de los sistemas de medición de CSS que ya haya encontrado. Por ejemplo: Determinando ALTURA Y ancho ancho: 300px; ancho: 30%; altura: 20em; Los píxeles son, bueno, píxeles. Son fáciles de entender y fáciles de usar. También crean un ancho o alto exacto que no cambia. Unelloses el mismo que el tamaño del texto para el elemento con estilo. Digamos que establece el tamaño del texto en 24px; un em para ese estilo es 24px, por lo que si establece el ancho en 2em, entonces sería 2 x 24 o 48 píxeles. Si no establece un tamaño de texto en el estilo, el em se basa en el tamaño de texto heredado (consulte la página 104). NotaCSS3 introduce otra medida: lamovimiento rápido del ojo-que se basa en latamaño de fuentedelhtml elemento. Funciona en todos los principales navegadores, excepto Internet Explorer 8 y versiones anteriores. Consulte la página 161 para obtener más información sobremovimiento rápido del ojo unidad. Para elanchopropiedad, los valores porcentuales se basan en el porcentaje del ancho del elemento contenedor del estilo. Si configura el ancho de un título al 75% y ese título no está dentro de ningún otro elemento con un ancho establecido, entonces el título tendrá el 75 por ciento del ancho de la ventana del navegador. Si el visitante ajusta el tamaño de su navegador, el ancho del título cambiará. Sin embargo, si el título está contenido dentro de un <división> ( tal vez para crear una columna) que tenga 200 píxeles de ancho, el ancho de ese título será de 150 píxeles. Valores porcentuales para elalturaLas propiedades funcionan de manera similar, pero se basan en la altura del elemento contenedor, en lugar del ancho. Cálculo del ancho y la altura reales de una caja Mientras que laanchoyalturaLas propiedades parecen bastante sencillas, hay algunos matices que pueden hacerte perder el control. En primer lugar, hay una diferencia entre el valor que establece para el ancho y el alto de un estilo y la cantidad de espacio que un navegador web realmente usa para mostrar el cuadro del estilo. Elanchoyalturapropiedades establecen el ancho y la altura de la área de contenidodel estilo: el lugar donde se ubican el texto, las imágenes u otras etiquetas anidadas. (Consulte la Figura 7-1 para repasar dónde se encuentra el área de contenido dentro del modelo de cuadro general). El ancho real, es decir, la cantidad de espacio en pantalla proporcionado por el navegador web, es el total de los anchos de los márgenes , bordes, relleno y propiedades de ancho, como se ilustra en la Figura 7-12. Digamos que ha establecido las siguientes propiedades: ancho: 100px; relleno: 15px; ancho del borde: 5px; margen: 10px; Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 213 Determinando ALTURA Y ancho Cuando elanchoestá establecida, siempre sabe cuánto espacio se asigna solo para su contenido, las palabras y las imágenes que llenan el espacio, independientemente de cualquier otra propiedad que pueda establecer. No necesita hacer ningún cálculo porque el valor de la anchoproperty es el espacio para su contenido (en el ejemplo anterior, 100 píxeles). Por supuesto túhacertiene que realizar un poco de matemática cuando intenta averiguar exactamente cuánto espacio ocupará un elemento en una página web. En el ejemplo anterior, el ancho que un navegador web asigna para el cuadro del estilo es de 160 píxeles: 20 píxeles para los márgenes izquierdo y derecho, 10 píxeles para los bordes izquierdo y derecho, 30 píxeles para el relleno izquierdo y derecho y 100 píxeles por el ancho. Figura 7-12 Calcule el ancho real del cuadro de un elemento con estilo sumando susmargen, borde,relleno, yanchopropiedades. La altura ocupada en la pantalla por el elemento se calcula de la misma manera, el total de laaltura propiedad, los márgenes superior e inferior, los bordes superior e inferior y el relleno superior e inferior. La regla general para establecer alturas en los elementos de la página es¡no!Muchos diseñadores de CSS en ciernes intentan establecer alturas en todo en un intento de obtener un control perfecto de píxeles. Pero a menos que esté totalmente seguro de las dimensiones exactas del contenido dentro de una etiqueta, puede encontrarse con algunos resultados no deseados (vea la Figura 7-13). En este ejemplo, un cuadro de comillas extraídas que se usa para resaltar un comentario interesante de un artículo tiene un ancho y una altura establecidos de 100 píxeles. Cuando se agrega al cuadro más texto del que cabe en la altura de 100 píxeles, su contenido se derrama por la parte inferior. Incluso si te aseguras de que el texto que colocas dentro de un cuadro con una altura fija se ajuste, si un visitante aumenta el tamaño de fuente en su navegador, el texto podría cambiar de tamaño a una altura mayor que el cuadro. En otras palabras, elalturaLa propiedad es útil para controlar la altura de un div que contiene imágenes, por ejemplo, porque puede determinar correctamente la altura de las imágenes; sin embargo, si usa la altura para elementos que tienen texto, asegúrese de no solo probar sus páginas en los principales navegadores, sino también probar la página con diferentes tamaños de fuente aumentando el tamaño de fuente en el navegador web. 214 Css3: el manual perdido www.it-ebooks.info CONSEJOEl área del banner de una página es otro buen candidato para una altura determinada. Por lo general, el banner tiene contenido limitado: un logotipo, un cuadro de búsqueda, tal vez algunos botones de navegación. Con frecuencia, los banners tienen una buena cantidad Determinando ALTURA Y ancho de espacio en blanco (áreas vacías que ayudan a llamar la atención del visitante sobre los elementos clave del banner, como la barra de navegación), por lo que especificar una altura para un banner no suele causar problemas. Figura 7-13 Cuando establece la altura de un elemento (como el div de la barra lateral derecha aquí), pero el contenido interior es más alto que el elemento, los navegadores simplemente dejan que el contenido se derrame en la parte inferior del elemento debajo de sus bordes. Redefinición del ancho de caja con tamaño de caja Como se mencionó en la página 213, los navegadores web tradicionalmente calculan el ancho de un elemento sumando losborde, relleno,yanchopropiedades. Esto no solo lo obliga a (Dios no lo quiera) hacer cálculos matemáticos para calcular el ancho de visualización real de un elemento, sino que también puede causar otros problemas. Esto es especialmente cierto cuando crea diseños basados en flotantes usando porcentajes. Aprenderá los detalles de los diseños flotantes más adelante en este libro, pero en pocas palabras, CSS le permite colocar elementos uno al lado del otro usando el flotarpropiedad, que le permite crear varios diseños de columna. Al usar porcentajes con varias columnas, puede encontrarse con algunos problemas extraños. Digamos que tiene dos columnas (en realidad, dos etiquetas, como <div>tags), y desea que cada uno sea el 50 por ciento del ancho de la ventana. Entonces estableces las dos columnas a un ancho de50%;sin embargo, en el momento en que agrega relleno o un borde a una de las columnas, aumentará su ancho a más de50% (para ser exactos, será50%más la cantidad de relleno izquierdo y derecho y el ancho de los bordes izquierdo y derecho). En la mayoría de los casos, esto obligará a la segunda columna a caerabajola primera. Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 215 Determinando ALTURA Y ancho Afortunadamente, CSS3 ofrece una propiedad que le permite cambiar la forma en que un navegador calcula el ancho (y el alto) de la pantalla de un elemento. Eltamaño de cajapropiedad ofrece tres opciones: • Elcuadro de contenidoLa opción es la forma en que los navegadores siempre han definido el ancho y el alto de la pantalla de un elemento, como se describe en la página 213. Es decir, el navegador agrega los anchos de borde y los grosores de relleno a los valores establecidos para las propiedades de ancho y alto para determinar la etiqueta en pantalla. anchura y altura. Dado que este es el comportamiento predeterminado, no necesita especificar nada paracuadro de contenido. • Elcaja de rellenoopción le dice a un navegador que cuando configura un estiloanchoo alturapropiedad, debe incluir el relleno como parte de ese valor. Por ejemplo, supongamos que le da a un elemento 20 píxeles de relleno izquierdo y derecho y establece el ancho del elemento en 100 píxeles. El navegador considerará la parte de relleno de ese valor de 100 píxeles. En otras palabras, el área de contenido tendrá solo 60 píxeles de ancho (100 – 20 [relleno izquierdo] – 20 [relleno derecho]). • Elcuadro de bordeEl valor incluye tanto el relleno como el grosor del borde como parte del anchoyalturavalores. Esta configuración resuelve el problema de usar valores porcentuales para anchos discutidos anteriormente. En otras palabras, con eltamaño de cajapropiedad establecida encuadro de borde,cuando establece el ancho de un elemento en50%, por ejemplo, ese elemento ocupará el 50 por ciento del espacio, incluso si agrega relleno y bordes a ese elemento. Si no le gusta la forma estándar en que los navegadores calculan el ancho y la altura de los elementos, vaya con elcuadro de bordevalor. (A menos, por supuesto, que tenga alguna razón inusual por la que quiera incluir el relleno pero no el borde como parte del cálculo). Para usar eltamaño de cajapropiedad, simplemente proporcione uno de los tres valores de la lista. Por ejemplo: tamaño de caja: cuadro de borde; Además, Firefox todavía (en el momento de escribir este artículo) no admite el nombre de propiedad estándar, por lo que debe usar la versión con el prefijo del proveedor (consulte el cuadro en la página 209); lo mismo ocurre con las versiones anteriores de Safari para iOS y Android (versión 3 y anteriores). para asegurarse de quetamaño de cajaLa configuración también funciona en todos esos navegadores, debe escribir tres declaraciones como esta: - tamaño de cuadro de moz: cuadro de borde; - tamaño de caja de webkit: cuadro de borde; tamaño de caja: cuadro de borde; De hecho, muchos diseñadores web están encontrando lacuadro de bordeconfiguración tan útil que crean un estilo de selector universal (página 63) para aplicarlo a cada elemento en una página: 216 Css3: el manual perdido www.it-ebooks.info Determinando ALTURA Y ancho *{ - tamaño de cuadro de moz: cuadro de borde; - tamaño de caja de webkit: cuadro de borde; tamaño de caja: cuadro de borde; } Como leerá en la página 467, usandocuadro de bordees extremadamente útil al crear diseños web receptivos de CSS3 que cambian de tamaño para adaptarse a diferentes tamaños de dispositivos (como un iPhone, una tableta y un monitor de escritorio). NotaEltamaño de cajaproperty incluso funciona en Internet Explorer 8 y versiones anteriores, por lo que es compatible con más del 95 por ciento de los navegadores en uso. Desafortunadamente, IE 7 no comprende esta propiedad, por lo que si usa el cuadro de bordeconfiguración, IE 7 lo ignorará y dibujará elementos mucho más anchos (y más altos) que en otros navegadores. Si aún necesita admitir IE 7, omita esta propiedad. Controlando el grifo con la propiedad de desbordamiento Cuando el contenido dentro de una etiqueta con estilo es más grande que el ancho y la altura definidos por el estilo, suceden algunas cosas raras. Como se muestra en la Figura 7-13, los navegadores permiten que el contenido se derrame fuera de la caja (más allá de los bordes y, a menudo, sobre otro contenido). Afortunadamente, puede controlar lo que debe hacer un navegador en esta situación con el Desbordamientopropiedad. Overflow acepta cuatro palabras clave que controlan cómo se debe mostrar el contenido que desborda los bordes de un cuadro: • visible.Esta opción es lo que hacen normalmente los navegadores. Es lo mismo que no establecer la propiedad en absoluto (Figura 7-14, arriba). • Desplazarse.Le permite agregar barras de desplazamiento (Figura 7-14, centro). Crea una especie de ventana de mininavegador en su página y se parece a los marcos HTML de la vieja escuela, o al HTML <iframe>etiqueta. Puedes usarDesplazarsepara proporcionar una gran cantidad de contenido en una pequeña cantidad de espacio. Desafortunadamente, las barras de desplazamientosiempreaparecerá cuando utilice esta opción, incluso si el contenido cabe dentro del cuadro. • auto.Para hacer que las barras de desplazamiento sean opcionales, use elautoopción. Hace lo mismo queDesplazarse pero agrega barras de desplazamiento solo cuando es necesario. • oculto.Oculta cualquier contenido que se extienda fuera del cuadro (Figura 7-14, parte inferior). Esta opción es un poco peligrosa, puede hacer que parte del contenido desaparezca de la página, pero es un truco útil para los diseños basados en elementos flotantes (página 222). Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 217 Determinando ALTURA Y ancho Figura 7-14 ElDesbordamientoLa propiedad le brinda tres formas básicas de manejar el texto que no cabe dentro de un cuadro: visible muestra el contenido de todos modos (arriba);Desplazarseyautoagregar barras de desplazamiento (centro); y oculto simplemente no muestra nada que no encaje (abajo). 218 Css3: el manual perdido www.it-ebooks.info Altos y anchos máximos y mínimos En caso de que aún no te hayas dado cuenta, CSS ofrece mucha flexibilidad. Además del estándaranchoyalturapropiedades, encontrará cuatro variaciones: Determinando ALTURA Y ancho • Elanchura máximaLa propiedad, como era de esperar, establece el ancho máximo para un elemento. Ese elemento puede ser más delgado que la configuración, pero no puede ser más ancho que esa configuración. Esta opción es útil cuando desea que su página cambie de tamaño para adaptarse a diferentes anchos de pantalla, pero no desea que la página sea tan ancha que sea demasiado difícil de leer en un monitor realmente grande. Por ejemplo, supongamos que agrega este estilo a una página: cuerpo { ancho máximo: 1200px; } Este estilo permite que la página se adapte al ancho de pantallas más pequeñas, como teléfonos inteligentes y tabletas. Pero en un monitor de escritorio realmente grande, la página no se ampliará más de 1200 píxeles, por lo que la página no puede crecer de manera ilegible. • ElAltura máximala propiedad funciona de manera muy similaranchura máxima,excepto que es para la altura del elemento. Sin embargo, como se mencionó en la página 214, normalmente es mejor no meterse con la altura de un elemento. • Elancho mínimoLa propiedad establece el ancho mínimo de un elemento. El elemento puede estirarse más allá del valor de ancho mínimo, pero nunca puede volverse más delgado. Si, por ejemplo, nota que cuando cambia el tamaño de la ventana de su navegador, el elemento es tan delgado que el diseño se desmorona, puede establecer un ancho mínimo como este: cuerpo { ancho mínimo: 760px; } Si un visitante reduce la ventana de su navegador para que solo tenga 500 píxeles de ancho, entonces el navegador agregará una barra de desplazamiento en lugar de dejar que los elementos de la página se estrechen demasiado. • Elmin-alturala propiedad funciona comoancho mínimo,excepto la altura. Esta propiedad puede resolver el problema representado en la figura 7-13. Con una altura mínima, le estás diciendo a un navegador web que haga que el elemento tenga al menos una cierta altura. Si el contenido dentro del elemento es más alto, entonces el navegador también hará que todo el elemento sea más alto. También puede usar las propiedades mínimas y máximas juntas. Por ejemplo, si desea asegurarse de que una página tenga al menos 760 píxeles de ancho, pero nunca se expanda a más de 1200 píxeles, puede usar este estilo: cuerpo { ancho mínimo: 760px; ancho máximo: 1200px; } Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 219 envase Contenido con Flotante Elementos Envolviendo contenido con elementos flotantes HTML normalmente fluye desde la parte superior de la ventana del navegador hasta la parte inferior, un título, párrafo o elemento de nivel de bloque encima de otro. Esta pantalla similar a un procesador de texto es visualmente aburrida (Figura 7-15, arriba), pero con CSS, está lejos de atascarse con él. Aprenderá muchos métodos nuevos para organizar elementos en una página web en la Parte 3, pero puede darle vida a sus páginas con una pequeña propiedad de CSS:flotar. ElflotarLa propiedad mueve un elemento a la izquierda o a la derecha. En el proceso, el contenido debajo del elemento flotante se mueve hacia arriba y envuelve el flotador (Figura 7-15, abajo). Los elementos flotantes son ideales para mover información complementaria fuera del camino del texto principal de la página. Las imágenes se pueden mover a cualquier borde, lo que permite que el texto las envuelva con elegancia. Del mismo modo, puede desplazar una barra lateral de información relacionada y enlaces a un lado. Figura 7-15 El flujo normal de HTML es de izquierda a derecha, de arriba a abajo, con un elemento de nivel de bloque (título, párrafo, div, etc.) apilado encima del siguiente. Permitiéndote romper esta uniformidad, elflotar property es una de las herramientas más poderosas de CSS. Sus usos van desde simplemente mover una imagen a un lado de un párrafo hasta proporcionar un control de diseño completo sobre banners, barras laterales, barras de navegación y otros elementos de la página. 220 Css3: el manual perdido www.it-ebooks.info Aunque puede usar flotantes de formas complejas (y confusas), como verá en el Capítulo 13, la propiedad básica es muy simple. Se necesita una de tres palabras clave:izquierda derechao envase Contenido con Flotante Elementos ninguno-al igual que: flotador izquierdo; • izquierda.Desliza el elemento con estilo hacia la izquierda mientras que el contenido debajo se envuelve alrededor del lado derecho del elemento. • bien.Desliza el elemento a la derecha. • ninguno.Apaga el flotador y devuelve el objeto a su posición normal. Los elementos flotantes se mueven al borde izquierdo o derecho de suelemento contenedor. En algunos casos, esto solo significa que el elemento se mueve al borde izquierdo o derecho de la ventana del navegador. Sin embargo, si hace flotar un elemento que está dentro de otra etiqueta con un ancho o una posición establecidos en una página web, el flotador irá al borde izquierdo o derecho de esa etiqueta, el "contenedor" del elemento flotante. Por ejemplo, puede tener un cuadro en la página que tiene 300 píxeles de ancho y flota en el borde derecho de la ventana del navegador. Dentro de ese cuadro, tienes una imagen que flota hacia la izquierda. Esa imagen se desliza hacia el borde izquierdo de ese cuadro de 300 píxeles de ancho, no hacia el borde izquierdo de la ventana del navegador. Incluso puedes usar elflotarpropiedad con un elemento en línea, como <imagen>etiqueta. De hecho, hacer flotar una foto a la izquierda o a la derecha usando CSS es un uso muy común de la flotar propiedad. Un navegador web trata un elemento en línea flotante como un elemento a nivel de bloque, por lo que no se encuentra con los problemas de relleno y margen que normalmente afectan a los elementos en línea (consulte la página 200). También puede hacer flotar un elemento a nivel de bloque como un título o un párrafo. Una técnica común es hacer flotar una etiqueta <div> (o uno de los nuevos elementos de HTML5 como <artículo>, <sección>,o <aparte>)que contiene otras etiquetas HTML y contenido de la página para crear una especie de caja contenedora. De esta forma, puede crear barras laterales, comillas y otros elementos de página independientes. (Verá un ejemplo de esto en el tutorial de este capítulo). Cuando flote elementos a nivel de bloque, también debe configurar elanchopropiedad para ese elemento (de hecho, las reglas de CSS requieren establecer el ancho de los elementos flotantes para todas las etiquetas, excepto las imágenes). De esta manera, puede controlar cuánto espacio horizontal ocupa el bloque y cuánto espacio está disponible para que el contenido debajo de él se mueva hacia arriba y se envuelva alrededor del bloque. NotaElorden de origen—el orden en el que escribe su HTML— tiene un gran impacto en la visualización de elementos flotantes. Debe aparecer el HTML de la etiqueta flotante.antesel HTML de cualquier contenido que envuelva el elemento flotante. Digamos que ha creado una página web compuesta por un <h1>etiqueta seguida de un <p>etiqueta. Hacia el final de eso <p>etiqueta, también ha insertado una foto usando el <imagen>etiqueta. Si haces flotar esa foto a la derecha, digamos, entonces el <h1>etiqueta y la mayor parte del contenido dentro de ese <p>la etiqueta seguirá apareciendo encima de la foto; solo contenido que sigue al <imagen>la etiqueta se envolverá alrededor del lado izquierdo de la imagen. Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 221 envase Contenido con Flotante Elementos Fondos, bordes y flotantes Para consternación de muchos diseñadores web, los fondos y los bordes no reaccionan a los elementos flotantes de la misma manera que lo hace el contenido. Digamos que haces flotar un elemento (una barra lateral, por ejemplo) hacia la derecha. El contenido debajo de la barra lateral se mueve hacia arriba y lo envuelve, como debería. Pero si ese contenido tiene un fondo o borde, entonces ese fondo o borde realmente aparecedebajola barra lateral flotante (Figura 7-16, izquierda). En esencia, un navegador web envuelve el texto alrededor del flotante, pero no el borde ni el fondo. Lo creas o no, esto es absolutamente kosher y (de acuerdo con las reglas) cómo se supone que debe funcionar. Por supuesto, es posible que no desee seguir estas reglas; es posible que desee que el borde o el fondo se detengan cuando alcance el elemento flotante (Figura 7-16, derecha). Con un poco de magia CSS, puedes hacerlo. Primero, debe agregar una regla al estilo que tenga un fondo o bordes debajo del flotador. Una vez que localice el estilo, agregue esta línea:desbordamiento: oculto;. El Desbordamiento(página 217) hace que desaparezca cualquier fondo o borde que se extienda por debajo del flotador. Otro enfoque es agregar un borde alrededor del elemento flotante; cuando hace que el borde sea lo suficientemente grueso y haga coincidir su color con el color de fondo de la página, el borde parece un espacio vacío, aunque cubre y oculta el color de fondo y los bordes que se extienden debajo de él. Figura 7-16 En este ejemplo, hay un<h1> etiqueta con un color de fondo y un<h2> etiqueta con un borde (izquierda). agregandoDesbordamiento: oculto;al estilo para el<h1> La etiqueta (derecha) evita que el título aparezca debajo del elemento flotante (barra lateral). Detener el flotador A veces necesitas una forma de decirle a una etiqueta que ignore un elemento flotante. Es posible que tenga un aviso de derechos de autor que siempre debe aparecer en la parte inferior de la ventana del navegador. Si tiene una barra lateral particularmente alta que flota en el lado izquierdo de la página, el aviso de derechos de autor en realidad podría estar redactado en la página y envuelto alrededor del flotador. En lugar de aparecer en la parte inferior de la página, los derechos de autor se encuentran más arriba en la página, al lado de la barra lateral. Desea que la parte del aviso de derechos de autor de su página se niegue a envolver el elemento flotante y, en su lugar, se coloque debajo de él. 222 Css3: el manual perdido www.it-ebooks.info Otros problemas ocurren cuando tiene varios elementos flotantes juntos. Si los elementos flotantes no son muy anchos, flotan hacia arriba y uno al lado del otro, y si tienen diferentes envase Contenido con Flotante Elementos alturas, pueden entrar en un atasco poco atractivo (vea la Figura 7-17, arriba). En este caso, los elementos flotantesno deberíaflotar uno al lado del otro. CSS proporciona la claropropiedad solo para este tipo de problemas. Elclaropropiedad instruye a un elemento ano envolveralrededor de un elemento flotante. Al borrar un elemento, esencialmente lo fuerza a desplegarse debajo del elemento flotante. Además, puede controlar qué tipo de flotador (izquierdo o derecho) se borra o forzar un estilo para que simplemente ignore ambos tipos de flotadores. Elclaropropiedad acepta las siguientes opciones: • izquierda.El estilo se colocará debajo de los elementos que flotan a la izquierda, pero aún se envolverá alrededor de los objetos que flotan a la derecha. • bien.Fuerza una caída debajo de los objetos flotantes a la derecha, pero aún envuelve los objetos flotantes a la izquierda. • ambos.Fuerza una caída debajo de los elementos flotantes a la izquierda y a la derecha. • ninguno.Desactiva la limpieza por completo. En otras palabras, hace que un elemento envuelva objetos flotantes tanto a la izquierda como a la derecha, que es como funcionan normalmente los navegadores web. En el caso de un aviso de derechos de autor que debe aparecer en la parte inferior de la página, querrá que borre tanto los objetos flotantes a la izquierda como a la derecha; siempre debe estar debajo de otro contenido y nunca debe ajustarse a la izquierda o a la derecha. de cualquier otro artículo. Aquí hay un estilo de clase que haría precisamente eso: . derechos de autor { Limpia los dos; } La figura 7-17 muestra cómo elclaroLa propiedad puede evitar que los elementos flotantes de diferentes alturas se agrupen. Las tres fotos en esa figura tienen un flotante derecho aplicado a ellas. En la figura superior, la foto de los tomates (1) es la primera imagen de la página y aparece en el extremo derecho. La segunda imagen (2) obedece al flotante establecido en la primera imagen y se envuelve a la izquierda de la misma. La última foto (3) es demasiado ancha para colocarse al lado de la segunda foto (2), pero aun así intenta envolver tanto (1) como (2). Se atasca en el proceso. Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 223 envase Contenido con Flotante Elementos Figura 7-17 Arriba: a veces no desea que un elemento se envuelva alrededor de un objeto flotante. Abajo: Aplicando elclaropropiedad (en este casoclaro: correcto;) a cada imagen les impide sentarse uno al lado del otro. Elclaroaplicado a la foto (2) evita que se envuelva junto a la imagen (1). Aplicarclaro: correctoa la foto (3) obliga a que aparezca debajo de la foto (2). Usandoclaro: correcto;en las imágenes evita que las fotos se coloquen una al lado de la otra (Figura 7-17, abajo). Elclaroaplicado a la segunda foto evita que se envuelva junto a la primera imagen, mientras que la última imagen está a la derechaclaroLa propiedad obliga a que aparezca debajo de la segunda imagen. 224 Css3: el manual perdido www.it-ebooks.info NotaEste asunto de los flotantes izquierdos, flotantes derechos y cómo eliminarlos suena complicado, y lo es. Esta sección le ofrece una introducción básica. Volverá a ver el tema en el Capítulo 13 y eventualmente aprenderá a usar los flotadores de Tutorial: márgenes, Antecedentes, Y FRONTERAS formas más sofisticadas. Tutorial: márgenes, fondos y bordes En este tutorial, explorará elementos del modelo de caja CSS, ajustará el espaciado alrededor de los objetos en una página, agregará bordes coloridos a los elementos de una página y controlará el tamaño y el flujo de los elementos de la página. 1.Para comenzar, debe descargar los archivos del tutorial que se encuentran en el sitio web complementario de este libro enwww.sawmac.com/css3/.Haga clic en el enlace del tutorial y descargue los archivos. (Todos los archivos están incluidos en un archivo zip. Consulte las instrucciones detalladas para descomprimir los archivos en el sitio web). Los archivos de este tutorial se encuentran dentro del07carpeta. Control de márgenes y fondos de página Comenzará con un archivo HTML muy básico que contiene una hoja de estilo interna con un estilo básico de restablecimiento de CSS. No hay mucho que ver en este momento (vea la figura 7-18). NotaPara obtener una vista previa del resultado final, consulte la Figura 7-21. 2.En su editor de texto favorito, abra07→barra lateral.html. Ya hay una hoja de estilo interna agregada a esta página que contiene el mismo conjunto de estilos discutidos en la página 116. Los estilos básicamente eliminan todos los márgenes, el relleno y el tamaño de fuente de los elementos más comunes a nivel de bloque y eliminan muchas de las visualizaciones entre navegadores. problemas que encontrará relacionados con estas propiedades. Como mínimo, siempre debe incluir este conjunto de estilos en cada hoja de estilo que cree. Probablemente las propiedades más importantes son lamargeny relleno ajustes en el primer estilo. Hay suficientes rarezas entre navegadores relacionadas con esas dos propiedades, por lo que siempre debe ponerlas a cero y comenzar de nuevo. Comenzará con algo simple: un color de fondo. 3.En la hoja de estilo interna, haga clic directamente después del comentario CSS /*estilos de restablecimiento final */y agregue un estilo de selector de etiquetas: html { color de fondo: rgb(253,248,171); } Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 225 Tutorial: márgenes, Antecedentes, Y FRONTERAS Este estilo agrega un color de fondo amarillo claro a la página. Si desea colorear el fondo de una página web, puede agregar elcolor de fondopropiedad a cualquiera de los <html> etiqueta o el <cuerpo>etiqueta. A continuación, agregará algunos márgenes, bordes y otras propiedades al <cuerpo>etiqueta. NotaEs posible que esté acostumbrado a usar colores hexadecimales (como #FDF8AB) en lugar de colores RGB. Puede usar una herramienta como el convertidor en línea enwww.colorhexa.com/para convertir entre los dos. Usar RGB es una buena idea porque los colores RGBA, con su transparencia opcional (página 155), son muy útiles y es más fácil seguir con un modelo de color (RBG) en lugar de mezclar dos (RGB y hexadecimal). 4.Agregue otro estilo a la hoja de estilo interna: cuerpo { color de fondo: rgb (255,255,255); borde: 3px rgb sólido (75,75,75); } Este estilo agrega un color de fondo blanco al <cuerpo>etiqueta y un borde gris oscuro de 3 píxeles. Porque el <cuerpo>la etiqueta se encuentra dentro de <html>etiqueta, un navegador web considera que está "encima" de la etiqueta <html>etiqueta, por lo que el fondo blanco cubrirá el color amarillo que agregó en el paso anterior. A continuación, le dará un ancho a la etiqueta del cuerpo y ajustará el relleno y los márgenes. CONSEJONormalmente, si agrega una propiedad de color de fondo al <cuerpo>etiqueta, ese color llena toda la ventana del navegador; sin embargo, si también agrega un color de fondo al <html>etiqueta, el color de fondo del cuerpo llena solo el área con contenido. Para ver esto en acción, solo obtenga una vista previa de la página web después de completar el Paso 3 anterior; luego borra elhtmlestilo de etiqueta y vuelva a obtener una vista previa de la página. Un poco extraño, pero útil, de curiosidades de CSS. 5.Edite el estilo de cuerpo que acaba de crear agregando cinco nuevas propiedades (los cambios están en negrita): cuerpo { color de fondo: rgb (255,255,255); borde: 3px rgb sólido (75,75,75); ancho: 760px; margen superior: 20px; margen izquierdo: automático; margen derecho: automático; relleno: 15px; } Elanchorestringe el cuerpo para que solo tenga 760 píxeles de ancho: si la ventana del navegador de un visitante tiene más de 760 píxeles de ancho, verá el color de fondo delhtmlestilo y un cuadro de 760 píxeles con el fondo blanco de lacuerpo etiqueta. 226 Css3: el manual perdido www.it-ebooks.info Tutorial: márgenes, Antecedentes, Y FRONTERAS Figura 7-18 Esta página web es HTML básico, con un estilo único que elimina gran parte del estilo integrado del navegador web. se verá mucho mejor con un cambio de imagen de modelo de caja. Elmargen superiorpropiedad agrega 20 píxeles de espacio desde el borde superior de la ventana del navegador, empujando elcuerpoetiquete hacia abajo solo un poco, mientras que la configuración de los márgenes izquierdo y derecho centran el cuerpo en el medio de la ventana del navegador. "Auto" es solo otra forma de decirle a un navegador: "Averígualo", y desde entoncesautoEl valor se aplica a los márgenes izquierdo y derecho, un navegador simplemente proporciona el mismo espacio en el lado izquierdo y derecho. Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 227 Tutorial: márgenes, Antecedentes, Y FRONTERAS NotaTambién podrías usar elmargenpropiedad abreviada (página 186) para condensar esas tres líneas de configuración de márgenes en una sola como esta: margen: 20px automático 0 automático; Finalmente, para mantener el contenido dentro de <cuerpo>al tocar la línea del borde, se agregan 15 píxeles de espacio al interior del cuerpo usando elrelleno propiedad; en otras palabras, la imagen y el texto tienen una sangría de 15 píxeles desde los cuatro bordes. A continuación, agregará un resplandor alrededor del cuadro con elsombra de la cajapropiedad. 6.Editar elcuerpoestilo que acaba de crear agregando una última propiedad después del borde pero antes del ancho (los cambios están en negrita): cuerpo { color de fondo: rgb (255,255,255); borde: 3px rgb sólido (75,75,75); sombra de caja: 0 0 15px 5px rgba(44,82,100,.75); ancho: 760px; margen superior: 20px; margen izquierdo: automático; margen derecho: automático; relleno: 15px; } Este estilo agrega brillo al cuadro al crear una sombra de 15 píxeles colocada directamente detrás del cuadro (la0 0la parte al principio indica que la sombra no está desplazada hacia la izquierda/derecha o arriba/abajo; simplemente está en segundo plano). El5px El valor es el valor de dispersión (página 211), y empuja la sombra 5 píxeles alrededor de los cuatro bordes. Finalmente, elrgbEl valor establece el color en un azul oscuro que es solo un 75 por ciento sólido (es decir, puede ver hasta el fondo amarillo). Su hoja de estilo está bastante avanzada y está listo para revisar la página. 7.Guarde el archivo y obtenga una vista previa de la página en un navegador web. Debería ver un cuadro blanco con una imagen, un montón de texto y un contorno gris con un brillo azulado flotando en un mar de amarillo (vea la Figura 7-19). El texto necesita una atención amorosa. Te encargarás de eso a continuación. 228 Css3: el manual perdido www.it-ebooks.info Tutorial: márgenes, Antecedentes, Y FRONTERAS Figura 7-19 Establecer los márgenes izquierdo y derecho paraautopara cualquier elemento con un ancho establecido, lo centra. En este caso, establecer un ancho para elcuerpo y agregando margen- izquierda: automáticoy margen derecho: automático lo coloca justo en el centro de la ventana del navegador. Desafortunadamente, no hay una manera fácil de centrar un elemento verticalmente (con el mismo espacio arriba y abajo) usando CSS. Sin embargo, hay algunos trucos que se les han ocurrido a los diseñadores astutos. Si busca elementos centrados verticalmente, consultewww . vanseodesign.com/css/ centrado-vertical/. Ajuste del espacio alrededor de las etiquetas Dado que los estilos de restablecimiento de CSS prácticamente eliminaron todo el formato del texto de esta página, deberá crear estilos para que los encabezados y los párrafos se vean geniales. Comenzarás con el <h1>etiqueta en la parte superior de la página. Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 229 Tutorial: márgenes, Antecedentes, Y FRONTERAS 1.Regrese a su editor de texto y elbarra lateral.htmlarchivo.Haga clic al final de la llave de cierre delcuerposelector de etiquetas, presione Entrar (Retorno) para crear una nueva línea y luego agregue el siguiente estilo: h1 { tamaño de fuente: 2,75 em; familia tipográfica: Georgia, "Times New Roman", Times, serif; peso de fuente: normal; alineación de texto: centro; espaciado entre letras: 1px; color: rgb (133,161,16); transformación de texto: mayúsculas; } Este estilo usa muchas de las propiedades de formato de texto discutidas en el capítulo anterior: el título superior tiene 2,75 ems de alto (44 píxeles en la mayoría de los navegadores) y está todo en mayúsculas, usa la fuente Georgia y tiene un color verde, con un pequeño espacio entre ellos. cada letra. Eltexto alineadoLa propiedad se asegura de que el texto esté centrado en el medio del cuadro. La verdadera diversión es agregar un color de fondo para resaltar realmente el título. CONSEJOGuarde la página y obtenga una vista previa en un navegador web después de cada paso de este tutorial. De esa manera, obtendrá una mejor comprensión de cómo estas propiedades CSS afectan los elementos a los que dan formato. 2.Añadir una nueva propiedad a lah1estilo de etiqueta para que se vea así (cambios en negrita): h1 { tamaño de fuente: 2,75 em; familia tipográfica: Georgia, "Times New Roman", Times, serif; peso de fuente: normal; alineación de texto: centro; espaciado entre letras: 1px; color: #85A110; transformación de texto: mayúsculas; color de fondo: rgb (226,235,180); } Si obtiene una vista previa de la página ahora, verá que el título tiene un fondo verde claro. Cuando se aplica a un elemento de nivel de bloque como un título, el fondo llena todo el espacio horizontal disponible (en otras palabras, el color no solo se encuentra detrás del texto "El asombroso mundo de CSS", sino que se extiende hasta el final borde derecho de la caja). 230 Css3: el manual perdido www.it-ebooks.info El texto del título está un poco apretado: la "T" que comienza el título toca el borde del fondo. Con un poco de relleno, puedes arreglar esto. Tutorial: márgenes, Antecedentes, Y FRONTERAS 3.Añadir otra propiedad a lah1estilo de etiqueta para que se vea así (cambios en negrita): h1 { tamaño de fuente: 2,75 em; familia tipográfica: Georgia, "Times New Roman", Times, serif; peso de fuente: normal; alineación de texto: centro; espaciado entre letras: 1px; color: #85A110; transformación de texto: mayúsculas; color de fondo: rgb (226,235,180); relleno: 5px 15px 2px 15px; } ElrellenoLa propiedad abreviada proporciona una forma concisa de agregar relleno alrededor de los cuatro lados del contenido; en este caso, se agregan 5 píxeles de espacio sobre el texto, 15 píxeles a la derecha, 2 píxeles en la parte inferior y 15 píxeles a la izquierda. Hay otro problema con el titular: debido al relleno agregado alcuerpoetiqueta (consulte el Paso 5 en la página 226), el título tiene una sangría de 15 píxeles desde los bordes izquierdo y derecho del borde verde que rodea el cuerpo. El titular se vería mejor si tocara el borde verde. Ningún problema; márgenes negativos al rescate. 4.Agregue una última propiedad a lah1estilo de etiqueta para que se vea así (cambios en negrita): h1 { tamaño de fuente: 2,75 em; familia tipográfica: Georgia, "Times New Roman", Times, serif; peso de fuente: normal; alineación de texto: centro; espaciado entre letras: 1px; color: #85A110; transformación de texto: mayúsculas; color de fondo: rgb (226,235,180); relleno: 5px 15px 2px 15px; margen: 0 -15px 20px -15px; } Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 231 Tutorial: márgenes, Antecedentes, Y FRONTERAS Aquí, la abreviatura de margen establece el margen superior en 0, el margen derecho en -15 píxeles, el margen inferior en 20 píxeles y el margen izquierdo en -15 píxeles. El margen inferior solo agrega un poco de espacio entre el título y el párrafo que sigue. El siguiente truco es el uso de valores negativos para los márgenes izquierdo y derecho. Como se mencionó en la página 190, puede asignar un margen negativo a cualquier elemento. Esta propiedad extrae el elemento hacia la dirección del margen; en este caso, el título se extiende 15 píxeles a la izquierda y 15 píxeles a la derecha, expandiendo el título y sacándolo sobre elcuerporelleno de la etiqueta. 5.Ahora, agregará algo de formato de <h2>etiquetasAgregue el siguiente estilo después delh1 estilo de etiqueta: h2 { tamaño de fuente: 1,5 em; familia de fuentes: "Arial Narrow", Arial, Helvetica, sans-serif; color: rgb (249,107,24); borde superior: 2px punteado rgb (141,165,22); borde inferior: 2px punteado rgb (141,165,22); acolchado superior: 5px; parte inferior del relleno: 5px; margen: 15px 0 5px 0; } Este estilo agrega un formato de texto básico y un borde punteado encima y debajo del título. Para agregar un poco de espacio entre el texto del título y las líneas, coloca un pequeño relleno en la parte superior e inferior. Finalmente, elmargenLa propiedad agrega más de 15 píxeles por encima del título y 5 píxeles por debajo. 6.Guarde el archivo y obtenga una vista previa de la página en un navegador web. Los titulares se ven bien (vea la Figura 7-20). A continuación, creará una barra lateral en el lado derecho de la página. 232 Css3: el manual perdido www.it-ebooks.info Tutorial: márgenes, Antecedentes, Y FRONTERAS Figura 7-20 Con solo unos pocos estilos, puede agregar colores de fondo, controlar los márgenes en toda la página y ajustar el espacio entre los títulos y los párrafos. Construyendo una barra lateral Las barras laterales son elementos comunes en la mayoría de los tipos de publicaciones impresas, como revistas, libros y periódicos. Compartimentan y resaltan pequeños fragmentos de información como una lista de recursos, información de contacto o una anécdota relacionada. Pero para que sean eficaces, las barras laterales no deben interrumpir el flujo de la historia principal. Deberían, como su nombre indica, sentarse discretamente a un lado, lo que puede hacer que suceda fácilmente con CSS. Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 233 Tutorial: márgenes, Antecedentes, Y FRONTERAS 1.Regrese a su editor de texto y abra elbarra lateral.htmlarchivo. Primero, debe aislar la región de la página que conforma la barra lateral. El <div>La etiqueta es la herramienta perfecta. Puede encerrar cualquier cantidad de HTML en su propio fragmento autocontenido envolviéndolo en un <div>etiqueta. 2.Desplácese hacia abajo en la página hasta el HTML y haga clic enantesel primero <h2> etiqueta (la que tiene el título "NOTA").Luego escriba <clase div="barra lateral">,y presione Entrar (Retorno). Este HTML marca el comienzo de la barra lateral y le aplica una clase. Crearás el . barra lateralestilo de clase pronto, pero primero debe indicar el final de la barra lateral cerrando el <división>. 3.Haga clic después del cierre </p>etiqueta que sigue inmediatamente al <h2>etiqueta (esta es la </p>que aparece justo antes de <h2>¿Quién sabía que CSS tenía tal poder?</ h2>. Presione Entrar y luego escriba </división>. Acabas de envolver un título y un párrafo dentro de un <div>etiqueta. A continuación, creará un estilo para él. 4.Desplácese hacia atrás hasta la hoja de estilo de la página y agregue el siguiente estilo debajo del h2estilo que creó anteriormente: . barra lateral { ancho: 30%; flotar derecho; margen: 10px; } Este estilo establece el ancho del área de contenido (donde aparece el texto) en un 30 por ciento. No tiene que usar un valor absoluto como píxeles para anchos. En este caso, el ancho de la barra lateral es el 30 por ciento del ancho del contenedor. Elflotar La propiedad mueve la barra lateral al lado derecho del cuadro, y elmargenLa propiedad agrega 10 píxeles de espacio alrededor de la barra lateral. Si obtiene una vista previa de la página en un navegador, verá que la forma básica y la ubicación de la barra lateral están configuradas, pero hay un problema: los bordes del < h2> aparecen etiquetasdebajola caja. Aunque la barra lateral flotante quita el texto de los titulares, los flotantes no desplazan los bordes ni los fondos. Esos solo aparecen justo debajo de la barra lateral flotante. Una forma de solucionar este problema es simplemente agregar un color de fondo a la barra lateral, para que no pueda ver elh2 fronteras (También hay otra técnica, que usará en el Paso 8 en la página 236). 5.Agregue otras dos propiedades al archivo .barra lateralestilo para que se vea así (cambios en negrita): . barra lateral { ancho: 30%; flotar derecho; margen: 10px; 234 Css3: el manual perdido www.it-ebooks.info Tutorial: márgenes, Antecedentes, Y FRONTERAS color de fondo: rgb (250,235,199); relleno: 10px 20px; } Estas propiedades agregan un color naranja claro a la barra lateral y sangran el texto de los bordes de la barra lateral para que no toque los bordes que está a punto de agregar. 6.Agregue dos propiedades más al archivo .barra lateralestilo para que se vea así (cambios en negrita): . barra lateral { ancho: 30%; flotar derecho; margen: 10px; color de fondo:rgb(250.235.199); relleno: 10px 20px; borde: 1px punteado rgb (252,101,18); borde superior: 20px rgb sólido (252,101,18); } Este es un ejemplo de la práctica técnica descrita en la página 205. Si desea que la mayoría de los bordes alrededor de un elemento sean iguales, primero puede definir un borde para los cuatro bordes; en este caso, una línea naranja punteada de 1 píxel alrededor toda la barra lateral, y luego proporcione nuevas propiedades de borde para los bordes específicos que desea cambiar; en este ejemplo, el borde superior tendrá 20 píxeles de alto y sólido. Esta técnica le permite usar solo dos líneas de código CSS en lugar de cuatro (borde superior, borde inferior, borde izquierdo,yborde derecho). A continuación, agregará esquinas redondeadas y una sombra paralela para que esta barra lateral realmente se destaque. 7.Finalmente, agregue dos propiedades más al archivo .barra lateralestilo para que se vea así (cambios en negrita): . barra lateral { ancho: 30%; flotar derecho; margen: 10px; color de fondo:rgb(250.235.199); relleno: 10px 20px; borde: 1px punteado rgb (252,101,18); borde superior: 20px rgb sólido (252,101,18); borde-radio: 10px; sombra de caja: 5px 5px 10px rgba(0,0,0,.5); } Elborde-radio(página 207) le permite crear esquinas redondeadas. En este caso, la configuración de 10 píxeles proporciona una curva de aspecto prominente. Elsombra de la caja La propiedad aquí agrega una sombra paralela debajo y a la derecha del cuadro, lo que hace que parezca que está flotando sobre la página. Ya casi terminas. Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 235 Tutorial: márgenes, Antecedentes, Y FRONTERAS El título dentro de la barra lateral no se ve muy bien. Utiliza las mismas propiedades que el otro <h2>etiquetas (debido a lah2estilo de etiqueta que creó en el Paso 4). El borde distrae y el margen superior empuja el título demasiado hacia abajo desde la parte superior de la barra lateral. Afortunadamente, puede usar un selector descendiente para anular esas propiedades. 8.Después de la .barra lateralestilo, en la hoja de estilo interna, agregue un selector descendiente: . barra lateral h2 { borde: ninguno; margen superior: 0; relleno: 0; } Debido a la .barra lateral,este estilo es más poderoso, es decir, tiene mayor especificidad como se describe en la página 114—que el básicoh2estilo. Borra el borde del originalh2 estilo de etiqueta, junto con el margen superior y todo el relleno. Sin embargo, dado que este estilo no tiene un tamaño de fuente, color o familia de fuentes, esas propiedades del h2el estilo aún se aplica: ¡es la cascada en acción! La página se ve bien, pero los bordes en <h2>las etiquetas aún se ejecutan hasta y detrás de la barra lateral. Eso simplemente no se ve bien, pero se puede arreglar fácilmente. 9.Localice el <h2>estilo y agregar elDesbordamientopropiedad, así: h2 { tamaño de fuente: 1,5 em; familia de fuentes: "Arial Narrow", Arial, Helvetica, sans-serif; color: rgb (249,107,24); borde superior: 2px punteado rgb (141,165,22); borde inferior: 2px punteado rgb (141,165,22); acolchado superior: 5px; parte inferior del relleno: 5px; margen: 15px 0 5px 0; desbordamiento: oculto; } Configuración de laDesbordamientopropiedad aocultooculta los bordes que pasan más allá del texto del título y debajo del elemento flotante. 10Guarde el archivo y obtenga una vista previa de la página web en un navegador. La página debería parecerse a la Figura 7-21. 236 Css3: el manual perdido www.it-ebooks.info Tutorial: márgenes, Antecedentes, Y FRONTERAS Figura 7-21 Un puñado de estilos CSS agregan elegancia al diseño de HTML aburrido. Observe cómo la barra lateral flotante atrae la atención y la aparta del cuerpo principal del texto. Ir más lejos Para probar sus nuevas habilidades, intente este ejercicio por su cuenta: Cree unpagestilo de etiqueta para agregar algo de dinamismo a los párrafos de la página: pruebe algunas configuraciones de márgenes, color de fuente, etc. A continuación, cree un estilo de clase para formatear el aviso de derechos de autor que aparece en la parte inferior de labarra lateral.htmlpágina (llamada, digamos, .derechos de autor).En este estilo, agregue un borde sobre el aviso de derechos de autor, cambie el color del texto, reduzca el tamaño de la fuente y cambie el tipo a mayúsculas. (Sugerencia: use eltransformación de textopropiedad discutida en la página 163.) Después de haber creado el estilo, agregue el atributo de clase apropiado al <p>etiqueta en el HTML. Capítulo 7:MÁRGENES, RELLENO Y BORDES www.it-ebooks.info 237 www.it-ebooks.info Traducido del inglés al español - www.onlinedoctranslator.com Capítulo 8 8 Adición de gráficos a páginas web No importa cuánto arruines tu texto o juegues con los bordes y los márgenes, nada afecta más la apariencia de tu sitio que las imágenes que le agregas. Y una vez más, CSS le brinda más control de imágenes de lo que nunca soñó con HTML. Puede trabajar con gráficos en CSS en dos frentes: el <imagen>etiqueta y laimagen de fondopropiedad (que le permite colocar una imagen en el fondo de cualquier etiqueta en una página). norte Este capítulo profundiza en algunas de las formas creativas en que puede implementar imágenes con CSS. La mejor manera de aprender a usar gráficos en CSS es verlos en acción, por lo que este capítulo tiene tres tutoriales, cuéntelos, tres. Al crear una página web de galería de fotos y usar imágenes para el estilo general de la página, será un profesional de la distribución de imágenes en muy poco tiempo. Descubriendo CSS y la etiqueta <img> El venerable <imagen>tag ha sido el caballo de batalla de los sitios web llenos de fotos desde el comienzo de la World Wide Web. Incluso los sitios sin fotos lo usan para agregar logotipos, botones de navegación e ilustraciones. Si bien CSS no tiene ninguna propiedad destinada específicamente a dar formato a las imágenes, puede aprovechar las propiedades de CSS que ya aprendió para mejorar los gráficos de su sitio. por ejemplo, elborde property es una forma rápida y sencilla de enmarcar una imagen o unificar el aspecto de una galería de fotos. Aquí hay un resumen de las propiedades CSS que se usan más comúnmente con las imágenes: • Fronteras.Usa uno de los muchosbordepropiedades (página 202) para enmarcar una imagen. Verá un ejemplo de esto en el tutorial en la página 273. Dado que cada lado del borde puede tener un color, estilo y ancho diferentes, tiene muchas opciones creativas. 239 www.it-ebooks.info agregando Fondo IMÁGENES • Relleno.ElrellenoLa propiedad (página 195) agrega espacio entre un borde y una imagen. Al dejar un poco de espacio para respirar entre una foto y su marco, el relleno simula el tablero de fibraesteraque se utiliza en los marcos de fotos tradicionales para rodear y compensar la imagen. Y al establecer un color de fondo, incluso puede cambiar el color del tapete. • Flotar.Una imagen flotante la mueve al borde izquierdo o derecho de la página o, si la imagen está contenida en otro elemento de diseño, como una barra lateral, al borde izquierdo o derecho del elemento contenedor de la imagen. El texto y otros elementos de la página se envuelven alrededor de la imagen. Incluso puede hacer flotar varias imágenes para crear una galería de imágenes flexible de varias filas. Verá un ejemplo de esta técnica en el tutorial de la página 272. • Márgenes.Para agregar espacio entre una imagen y otro contenido de la página, use el margen propiedad. Cuando haces flotar una imagen, el texto que la envuelve suele estar incómodamente cerca de la imagen. Agregar un margen izquierdo (para imágenes flotantes a la derecha) o un margen derecho (para imágenes flotantes a la izquierda) agrega espacio entre el texto y el gráfico. En la mayoría de los casos, no creará un estilo para el <imagen>etiquetarse a sí mismo. Formatear esta etiqueta es usar un pincel demasiado amplio, ya que formateatodoimágenes en su página, incluso aquellas con funciones muy diferentes, como el logotipo, los botones de navegación, las fotos e incluso los anuncios gráficos. Después de todo, no querrías el mismo marco negro alrededor de todas esas imágenes. En su lugar, debe usar un estilo de clase, como .galeríaImageno .logo,para aplicar el estilo de forma selectiva. Otro enfoque es utilizar un selector descendente para orientar las imágenes agrupadas en una sección de una página. Si tienes una galería de fotos, puedes colocar todas las fotos dentro de un < div>etiqueta con un nombre de clase degalería,y luego cree un estilo solo para las imágenes dentro de eso <división>,como esto: .imagen de la galería. Agregar imágenes de fondo Elimagen de fondoLa propiedad es la clave para hacer sitios web visualmente impactantes. Aprenda a usarlo y sus propiedades primas, y puede hacer que su sitio se destaque por encima del resto. Para ver un ejemplo del poder de las imágenes de fondo, consulte www.csszengarden.com(Figura 8-1). El HTML de las dos páginas que se muestran en la Figura 8-1 es exactamente el mismo; las diferencias visuales se logran mediante el uso de diferentes imágenes de fondo. ¿Cómo es eso para el poder de CSS? Si ha creado algunos sitios web, probablemente haya usado una imagen para el fondo de una página, tal vez un pequeño gráfico que se repite en el fondo de la ventana del navegador creando un patrón (con suerte) sutil. Ese método HTML tradicional usaba el < cuerpo>etiquetasfondoatributo. Pero CSS hace mejor el mismo trabajo. NotaEn las próximas páginas, conocerá tres propiedades de imagen de fondo aprendiendo el código CSS individual para cada una. Más adelante en el capítulo, aprenderá un método abreviado que le ahorrará mucho teclear. 240 Css3: el manual perdido www.it-ebooks.info agregando Fondo IMÁGENES Figura 8-1 CSSzengarden.com muestra el poder de CSS al demostrar cómo puede transformar un solo archivo HTML en dos páginas de aspecto completamente diferente. El verdadero secreto para hacer que cada uno de los maravillosos diseños luzca único es el uso extensivo de imágenes de fondo. (De hecho, cuando observa el código HTML de estas páginas, verá que no hay una sola<imagen>etiqueta en él.) Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 241 agregando Fondo IMÁGENES Hasta la velocidad GIF, JPEG y PNG: los gráficos de la Web Los gráficos por computadora vienen en cientos de formatos de archivo diferentes valores de color adyacentes. JPEG es el formato que utilizan muchas diferentes, con una asombrosa variedad de acrónimos: JPEG, GIF, TIFF, cámaras para guardar fotos. Cuando su software de gráficos guarda un archivo PICT, BMP, EPS, etc. JPEG, ejecuta un análisis de color complejo para reducir la cantidad de datos Afortunadamente, los gráficos en la Web son un poco más simples. Los navegadores web actuales funcionan con tres formatos de gráficos principales: GIF, JPEG y PNG, cada uno de los cuales proporciona una buenacompresión. A necesarios para representar con precisión la imagen. En el lado negativo, la compresión JPEG hace que el texto y las áreas grandes de color sólido se vean manchadas. través de una manipulación informática inteligente, la compresión reduce el Finalmente, elPNG(Portable Network Graphics) incluye las mejores tamaño del archivo del gráfico para que pueda viajar más rápidamente a través características de GIF y JPEG, pero necesita saber qué versión de PNG de Internet. El que elija depende de la imagen que desee agregar a su página. usar para cada situación. PNG8 es básicamente un reemplazo para GIF. GIF(Graphics Interchange Format) brindan una buena compresión para imágenes que tienen áreas de color sólido: logotipos, texto, pancartas simples, etc. Los GIF también ofrecen transparencia de un solo color, lo que significa que puede hacer que desaparezca un color en el gráfico, lo que permite que el fondo de una página web se muestre a través de Al igual que GIF, ofrece 256 colores y transparencia básica de un solo color. Sin embargo, PNG8 generalmente comprime las imágenes a un tamaño de archivo ligeramente más pequeño que GIF, por lo que las imágenes PNG8 se descargan un poco más rápido que la misma imagen guardada en formato GIF. En otras palabras, use PNG8 sobre GIF. parte de la imagen. Además, los GIF pueden incluir animaciones PNG24 y PNG32 (que es básicamente PNG24 con transparencia alfa) simples. ofrecen la paleta de colores ampliada de las imágenes JPEG, sin pérdida Sin embargo, una imagen GIF puede contener un máximo de solo 256 tonos, lo que generalmente hace que las fotos se veanposterizado(irregular y de colores poco realistas, como un póster). En otras palabras, esa foto de un atardecer radiante que tomaste con tu cámara digital no se verá tan bien como un GIF. (Si no necesita animar una imagen, el formato PNG8 que se analiza más adelante de calidad. Esto significa que las fotos guardadas como PNG24 o PNG32 tienden a ser de mayor calidad que las JPEG. Pero antes de subirse al carro PNG, las imágenes JPEG ofrecen muy buena calidad y unmucho tamaño de archivo más pequeño que PNG24 o PNG32. En general, JPEG es una mejor opción para fotos y otras imágenes que incluyen muchos colores. es una mejor opción que GIF). jpeg(Los gráficos del Joint Photographic Experts Group, por otro lado, comienzan donde los GIF terminan. Los gráficos JPEG pueden contener millones de colores diferentes, lo que los hace ideales para fotografías. Los JPEG no solo hacen un mejor trabajo en las fotos, sino que también comprimen las imágenes multicolores mucho mejor que los GIF, porque el algoritmo de compresión JPEG tiene en cuenta cómo percibe el ojo humano Finalmente, PNG32 ofrece una característica que ningún otro formato ofrece: 256 niveles de transparencia (también llamadosalfatransparencia), lo que significa que puede ver el fondo de una página web a través de una sombra paralela en un gráfico, o incluso hacer un gráfico que tenga un 50 por ciento de opacidad (lo que significa que puede ver a través de él) para crear un efecto translúcido fantasmal. Elimagen de fondoLa propiedad agrega un gráfico al fondo de un elemento. Para poner una imagen en el fondo de una página web, puede crear un estilo para la <cuerpo> etiqueta: cuerpo { imagen de fondo: url(images/bg.gif); } 242 Css3: el manual perdido www.it-ebooks.info agregando La propiedad toma un valor: la palabra claveURL,seguido de una ruta al archivo gráfico entre paréntesis. Puede usar una URL absoluta como esta:URL (http://www.cosmofarmer.com/ Fondo IMÁGENES image/bg.gif)—o una ruta relativa al documento o raíz como estas: url(../images/bg.gif) /* relativo al documento */ url(/images/bg.gif) /* relativo a la raíz */ Como se explica en el cuadro de la página 244, las rutas relativas al documento proporcionan instrucciones en relación con el archivo de hoja de estilo,nola página HTML que estás diseñando. Estos serán uno y el mismo, por supuesto, si está utilizando una hoja de estilo interna, pero debe tener este punto en cuenta si está utilizando unexternohoja de estilo. Digamos que tienes una carpeta llamadaestilos(que contiene las hojas de estilo del sitio) y una carpeta denominadaimágenes (sosteniendo las imágenes del sitio). Ambas carpetas se encuentran en la carpeta principal del sitio junto con la página de inicio (Figura 8-2). Cuando un visitante ve la página de inicio, también se carga la hoja de estilo externa (Paso 1 en la Figura 8-2). Ahora, supongamos que la hoja de estilo externa incluye un estilo para <cuerpo>etiqueta con la propiedad de imagen de fondo establecida para usar el archivo gráficobg.gifen la carpeta de imágenes. La ruta relativa al documento llevaría desde la hoja de estilo hasta el gráfico (Paso 2 en la Figura 8-2). En otras palabras, el estilo se vería así: cuerpo { imagen de fondo: url(../images/bg.gif); } Esta ruta se divide así: ../ significa “subir un nivel” (es decir, hasta la carpeta que contiene elestiloscarpeta);imágenes/significa “ir a la carpeta de imágenes”; ybg.gif especifica ese archivo. Figura 8-2 Las rutas relativas al documento se calculan en relación con la hoja de estilo, no con la página web a la que se aplica el estilo. En los ejemplos hasta ahora, la ruta no está entre comillas como en HTML, pero las comillas también están bien. En CSS, las tres líneas de código siguientes son kosher: Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 243 Controlador repetición imagen de fondo: url(images/bg.gif); imagen de fondo: url("images/bg.gif"); imagen de fondo: url('imágenes/bg.gif'); Hasta la velocidad Tipos de URL En CSS, debe especificar unURLcuando agrega una imagen de fondo o adjunta una hoja de estilo externa mediante el método @import (página Aquí hay algunos consejos sobre qué tipo usar: • Si apunta a un archivo que no está en el mismo servidor que la 42). Una URL oLocalizador Uniforme de Recursoses una ruta a un hoja de estilo,debeusar una ruta absoluta. Es el único tipo archivo ubicado en la Web. Hay tres tipos de caminos: ruta absoluta, que puede apuntar a otro sitio web. ruta relativa a la raíz, yruta relativa al documento. Los tres simplemente indican dónde un navegador web puede encontrar un archivo en particular (como otra página web, un gráfico o una hoja de estilo externa). • Las rutas relativas a la raíz son buenas para las imágenes almacenadas en su propio sitio. Dado que siempre comienzan en la carpeta raíz, puede mover la hoja de estilo sin afectar la ruta desde la raíz hasta la imagen en el sitio. Sin embargo, son difíciles Una ruta absoluta es como una dirección postal: contiene toda la información necesaria para que un navegador web ubicado en cualquier parte del mundo encuentre el archivo. Una ruta absoluta incluyehttp://, el nombre de host y la carpeta y el nombre del archivo. Por ejemplo: http://www.cosmofarmer.com/images/bluegrass.jpg. de usar cuando crea sus diseños por primera vez: no puede obtener una vista previa de las rutas relativas a la raíz a menos que esté viendo sus páginas web a través de un servidor web, ya sea su servidor web en Internet o un servidor web. Lo configuré en su propia computadora con fines de prueba. En otras palabras, Arelativo a la raízruta indica dónde se encuentra un archivo en relación con la si solo está abriendo una página web desde su computadora carpeta de nivel superior de un sitio: la carpeta raíz del sitio. Una ruta relativa a usando el archivo del navegador→Abra el comando, entonces no la raíz no incluyehttp://o el nombre de dominio. Comienza con una / (barra verá ninguna imagen colocada usando rutas relativas a la raíz. oblicua) que indica la carpeta raíz del sitio (la carpeta en la que se encuentra la • Las rutas relativas al documento son las mejores cuando página de inicio). Por ejemplo/images/bluegrass.jpgindica que el archivo diseña en su propia computadora sin la ayuda de un servidor bluegrass.jpgse encuentra dentro de una carpeta llamada imágenes, que a su web. Puede crear sus archivos CSS y luego revisarlos en un vez se encuentra en la carpeta de nivel superior del sitio. Una manera fácil de navegador web simplemente abriendo una página web crear una ruta relativa a la raíz es tomar una ruta absoluta y eliminar lahttp://y almacenada en su disco duro. Estas páginas funcionarán el nombre de host. bien cuando las mueva a su sitio web real, vivo y vivo en Arelativo al documentoruta especifica la ruta desde el documento actual Internet, pero tendrá que volver a escribir las URL de las hasta el archivo. Cuando se trata de una hoja de estilo, esto significa la imágenes si mueve la hoja de estilo a otra ubicación en el ruta de la hoja de estilo al archivo especificado, no la ruta desde la servidor. página web actual hasta el archivo. Controlando la Repetición Si usas elimagen de fondopropiedad por sí misma, el gráfico siempre se muestra en mosaico, llenando todo el fondo de una página web. Afortunadamente, puede utilizar elfondorepetirpropiedad para especificar cómo (o si lo hace) una imagen en mosaico: repetición de fondo: sin repetición; La propiedad acepta cuatro valores:repetir, no-repetir, repetir-x,yrepetir-y: 244 Css3: el manual perdido www.it-ebooks.info POSICIONANDO UN • Fondo repetires la configuración normal para las imágenes de fondo que desea mostrar de izquierda a derecha y de arriba a abajo hasta que todo el espacio se llene con un gráfico imagen (Figura 8-3). Figura 8-3 Tenga cuidado al colocar imágenes en mosaico en el fondo de una página web. Elija una imagen sin mucho contraste que se integre en mosaicos (izquierda). Una imagen con demasiado contraste (derecha) dificulta la lectura del texto. • sin repeticiónmuestra la imagen una sola vez, sin mosaicos ni repeticiones. Es una opción muy común y la usará con frecuencia al colocar imágenes en el fondo de etiquetas que no sean el cuerpo. Puede usarlo para colocar un logotipo en la esquina superior de una página o para usar gráficos personalizados para viñetas en listas, por nombrar un par. (Verá el ejemplo de viñetas en acción en el tutorial en la página 286). • repetir-xrepite una imagen horizontalmente a lo largo del eje x (el ancho horizontal de la página, si su geometría está oxidada). Es perfecto para agregar un banner gráfico en la parte superior de una página web (Figura 8-4, izquierda) o un borde decorativo en la parte superior o inferior de un título. (Consulte la página 299 del tutorial para ver un ejemplo de este efecto). • repetir-yrepite una imagen verticalmente a lo largo del eje y (la longitud vertical de la página). Puede usar esta configuración para agregar una barra lateral gráfica a una página (Figura 8-4, derecha) o para agregar una sombra paralela repetida a cualquier lado de un elemento de página (como una barra lateral). Posicionamiento de una imagen de fondo Colocar y colocar una imagen de fondo en mosaico es solo la mitad de la diversión. Con el posición de fondopropiedad, CSS le permite controlar la ubicación exacta de una imagen de varias maneras. Puede especificar los puntos de inicio horizontales y verticales de un gráfico de tres formas: palabras clave, valores exactos y porcentajes. Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 245 POSICIONANDO UN Fondo imagen Figura 8-4 Agregue fondos gráficos a los banners y barras laterales de una página aprovechando el control de mosaico que ofrece elrepetir-x( izquierda) yrepetir-y( derecha) opciones. Palabras clave Obtiene dos conjuntos de palabras clave para trabajar. El primero controla las tres posiciones horizontales—izquierda centro derecha-y el segundo controla las tres posiciones verticales— arriba, centro, abajo (Figura 8-5). Suponga que desea colocar un gráfico directamente en el medio de una página web. Puedes crear un estilo como este: cuerpo { imagen de fondo: url(bg_page.jpg); repetición de fondo: sin repetición; posición de fondo: centro centro; } Para mover ese gráfico a la esquina superior derecha, simplemente cambie la posición de fondo a esto: posición de fondo: arriba a la derecha; NotaSi ha decidido colocar una imagen en mosaico (configurandorepetición de fondoa uno de los valores enumerados en la sección anterior), entonces elposición de fondola propiedad controla laa partir depunto de la primera baldosa. Entonces, por ejemplo, si usas elrepetiropción, aún verá todo el fondo lleno por la imagen. Es solo que la posición delprimerocambios de mosaico en función de los cualesposición de fondoajuste que usó. Las palabras clave son realmente útiles cuando desea crear banners verticales u horizontales. Si quisiera un gráfico centrado en una página y en mosaico hacia abajo para crear un fondo para el contenido (Figura 8-6, izquierda), entonces crearía un estilo como este: 246 Css3: el manual perdido www.it-ebooks.info POSICIONANDO UN Fondo cuerpo { imagen imagen de fondo: url (fondo.jpg); fondorepetir: repetir-y; posición de fondo: parte superior central; } Figura 8-5 Puede utilizar palabras clave para colocar una imagen en el fondo. No importa el orden en que especifique las palabras clave:centro Superiory parte superior central ambos tienen el mismo efecto. Así mismo, usando elparte inferior central,oarribapalabras clave, puede colocar una imagen que se repite horizontalmente usandorepetir-x (Figura 8-4, izquierda) en un lugar particular de la página (o dentro de un elemento con estilo). Figura 8-6 Utilizar elfondoposiciónapuntalarerty al colocar una imagen en mosaico, ya sea verticalmente (izquierda) u horizontalmente (derecha). En la imagen de la izquierda, el gráfico es un cuadro blanco ancho con sombras paralelas en los bordes izquierdo y derecho. El color de fondo de la página es gris, por lo que el texto de la página parece estar en una hoja de papel blanca flotando sobre la pantalla. Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 247 POSICIONANDO UN Fondo imagen CONSEJODe hecho, puede agregar una imagen de fondo a ambos <html>y <cuerpo>etiquetas Si coloca en mosaico ambas imágenes horizontalmente y coloca el <cuerpo>la imagen de la etiqueta en la parte superior y el <html>la imagen de la etiqueta en la parte inferior, puede lograr el efecto de dos franjas cortando la parte superior e inferior de la página, sin importar qué tan alta sea la página. ¡Y funciona en todos los navegadores actuales, incluso en IE 6! ERROR DEL NAVEGADOR Tocando fondo Cuando se muestra una imagen en el fondo de una página web, la Si la página web tiene solo un par de párrafos de texto y se muestra en un mayoría de los navegadores no siempre colocan la imagen en posición monitor realmente grande, la mayoría de los navegadores tratan la "parte vertical de la manera esperada. Por ejemplo, si establece la posición inferior" como la parte inferior del último párrafo, no como la parte inferior de vertical enabajo,la imagen no siempre aparece en la parte inferior de la la ventana del navegador. Si se encuentra con esta molestia, simplemente ventana del navegador. Esto sucede cuando el contenido de una página agregue este estilo a su hoja de estilo: es más corto que la altura de la ventana del navegador. html { altura: 100%; }. Valores precisos También puede colocar imágenes de fondo utilizando valores de píxeles o ems. Utiliza dos valores: uno para indicar la distancia entre el borde izquierdo de la imagen y el borde izquierdo del contenedor, y otro para especificar la distancia entre el borde superior de la imagen y el borde superior del estilo. (Dicho de otra manera, el primer valor controla la posición horizontal, el segundo valor controla la posición vertical). Digamos que quiere viñetas personalizadas para una lista. Si agrega una imagen de fondo al < li> etiqueta, las viñetas a menudo no se alinean exactamente (vea la Figura 8-7, arriba). Así que puedes simplemente empujar las balas en su lugar usando elposición de fondopropiedad (Figura 8-7, abajo). Si la lista se vería mejor con, digamos, las viñetas 5 píxeles más a la derecha y 8 píxeles más abajo, agregue esta declaración al estilo que define la imagen de fondo: posición de fondo: 5px 8px; No puede especificar distancias desde la parte inferior o la derecha utilizando medidas de píxeles o em, por lo que si desea asegurarse de que una imagen se coloque exactamente en la esquina inferior derecha de la página o un elemento con estilo, utilice palabras clave (abajo a la derecha)o porcentajes, como se analiza a continuación. Sin embargo, puede usar valores negativos para mover una imagen fuera del borde derecho o por encima del borde superior, ocultando esa parte de la imagen. Es posible que desee utilizar valores negativos para recortar parte de una imagen. O bien, si la imagen de fondo tiene mucho espacio en blanco adicional en el borde superior o izquierdo, puede usar valores negativos para eliminar ese espacio adicional. 248 Css3: el manual perdido www.it-ebooks.info POSICIONANDO UN Fondo imagen Figura 8-7 El uso de imágenes personalizadas para viñetas a veces requiere un posicionamiento cuidadoso, de modo que el gráfico de viñetas aparezca a la distancia correcta y perfectamente centrado en el texto del elemento de la lista. Valores porcentuales Finalmente, puede usar valores porcentuales para colocar una imagen de fondo. Usar porcentajes de esta manera es complicado, y si puede lograr el efecto que busca con la palabra clave o los valores precisos discutidos anteriormente, utilícelos. Pero debe usar porcentajes para colocar un elemento en un lugar que sea proporcional al ancho de un elemento. Por ejemplo, si desea colocar un gráfico a tres cuartas partes de un título y no conoce el ancho del elemento. Al igual que con los valores de píxeles o em, proporciona dos porcentajes: uno para indicar la posición horizontal y el segundo para indicar la posición vertical. Lo que mide el porcentaje es un poco complicado. En pocas palabras, un valor de porcentaje alinea el porcentaje especificado de la imagen con el mismo porcentaje del elemento con estilo. ¿Qué? La mejor manera de entender cómo funcionan los valores porcentuales es mirar algunos ejemplos. Para colocar una imagen en el medio de una página (como la que se muestra en el centro de la Figura 8-8), escribiría esto: posición de fondo: 50% 50%; Esta declaración coloca el punto de la imagen que está al 50 por ciento del borde izquierdo directamente encima del punto que está al 50 por ciento del borde izquierdo de la página (o cualquier elemento que hayas diseñado con la imagen de fondo). La declaración también alinea el punto de la imagen que está al 50 por ciento de su parte superior con el punto que está al 50 por ciento del borde superior de la página o elemento con estilo. En otras palabras, el centro de la imagen está alineado con el centro del elemento. Esto significa que, cuando se utilizan porcentajes, el punto exacto de la imagen que se está alineando puede ser un punto en movimiento. Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 249 POSICIONANDO UN Fondo imagen objetivo. (Eso se debe a que los porcentajes de posicionamiento de su elemento con estilo pueden cambiar si sus visitantes cambian el tamaño de sus navegadores). NotaColocar una imagen verticalmente en el fondo de una página mediante el uso de porcentajes no colocará necesariamente la imagen en el lugar correcto si el contenido de la página no ocupa toda la altura de la ventana del navegador. Vea el cuadro en la página 248 para la solución a este problema. Al igual que con los valores de píxeles y em, puede especificar valores de porcentaje negativos, aunque los resultados pueden ser difíciles de predecir. También puede mezclar y combinar valores de píxeles/em con valores porcentuales. Por ejemplo, para colocar una imagen que está a 5 píxeles del borde izquierdo del elemento, pero colocada en el medio de la altura del elemento, podría usar esto: posición de fondo: 5px 50%; NotaAunque las imágenes de fondo pueden mejorar la calidad visual de sus páginas web, por lo general no aparecen si su visitante imprime la página. La mayoría de los navegadorespoderimprima los fondos, pero generalmente requiere trabajo adicional por parte de su visitante. Si planea que sus visitantes impriman páginas de su sitio, es posible que desee mantener usando el <imagen>etiqueta para insertar imágenes de misión crítica como el logotipo de su sitio o un mapa de su tienda. Figura 8-8 Cada una de las cuatro imágenes que se muestran aquí se han colocado en esta página web (representadas por el recuadro negro grande) utilizando valores porcentuales. Cuando utilice valores porcentuales, primero identifique el "punto de anclaje" en la imagen:50% 50%, por ejemplo, es el centro de la imagen central. Luego, identifique el punto 50/50 en la página misma: nuevamente, eso estaría directamente en el centro de la página. Ese lugar es donde se coloca el punto de anclaje de la imagen. Las otras tres imágenes están colocadas de la misma manera. Fijar una imagen en su lugar Normalmente, si hay una imagen de fondo en una página web y el visitante tiene que desplazarse hacia abajo para ver más de la página, la imagen de fondo también se desplaza. Como resultado, 250 Css3: el manual perdido www.it-ebooks.info POSICIONANDO UN cualquier patrón en el fondo de la página parece moverse junto con el texto. Además, cuando tiene una imagen que no se repite en el fondo, puede desplazarse por la parte superior de la página fuera de la vista. Si colocó el logotipo del sitio o un gráfico de marca de agua en el fondo de la página, entonces puedenoquiere que desaparezca cuando los visitantes se desplacen. Fondo imagen La solución CSS a tales dilemas es elarchivo adjunto de fondopropiedad. Tiene dos opciones— Desplazarseyfijado. Desplazarsees el comportamiento normal del navegador web; es decir, desplaza la imagen de fondo junto con el texto y otros contenidos de la página.Fijado, sin embargo, mantiene la imagen en su lugar en el fondo (vea la Figura 8-9). Entonces, si desea colocar el logotipo de su empresa en la esquina superior izquierda de la página web y mantenerlo allí incluso si el espectador se desplaza, puede crear un estilo como este: cuerpo { imagen de fondo: url(images/logo.gif); repetición de fondo: sin repetición; archivo adjunto de fondo: fijo; } ElfijadoLa opción también es muy buena cuando se usa un fondo repetitivo en mosaico. Cuando tiene que desplazarse, el texto de la página desaparece de la parte superior, pero el fondo no se mueve: el contenido de la página parece flotar con gracia sobre el fondo. Figura 8-9 ¿Está buscando una manera de definir el logotipo de un sitio (como la imagen de CosmoFarmer 2.0) para que cuando los espectadores se desplacen hacia abajo en la página, el logotipo permanezca en su lugar? Utilizando el fijadoopción para elarchivo adjunto de fondo propiedad, puede bloquear una imagen de fondo en su lugar. De esa forma, incluso si la página es muy larga y el visitante tiene que desplazarse hacia abajo, la imagen permanece visible en la página web (abajo). Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 251 POSICIONANDO UN Fondo imagen Definición del origen y recorte para un fondo CSS3 agrega la capacidad de decirle a un navegador dónde debe comenzar la imagen de fondo en relación con el borde, el relleno y el contenido de un elemento. Por ejemplo, normalmente, cuando coloca una imagen en mosaico, comienza en la esquina superior izquierda del relleno de un elemento (vea la imagen superior central en la Figura 8-10). Sin embargo, puede cambiar la posición del punto de inicio de esa imagen, usando elfondo-origenpropiedad. Toma uno de tres valores: • cuadro de bordecoloca la imagen en la esquina superior izquierda del área asignada al borde (arriba a la izquierda en la Figura 8-10). • caja de rellenocoloca la imagen en la esquina superior izquierda del área asignada al relleno (parte superior central en la Figura 8-10). Esto es normalmente donde un navegador coloca una imagen de fondo. • cuadro de contenidocoloca la imagen en la esquina superior derecha del área asignada al contenido (arriba a la derecha en la Figura 8-10). Por supuesto, esta configuración no importa si no hay un borde ni ningún relleno alrededor de un elemento; además, el efecto puede ser muy sutil, especialmente si tiene un patrón de mosaico continuo. Notani elfondo-origenni elclip de fondolas propiedades funcionan en Internet Explorer 8 y versiones anteriores. Dado que IE 8 sigue siendo un navegador muy popular, utilice estas propiedades con precaución. Sin embargo, puede notarse si no está repitiendo una imagen. Por ejemplo, si elige elsin repetición(página 245) y la imagen de fondo aparece solo una vez, puede colocar esa imagen en la esquina superior izquierda del área de contenido (dentro de cualquier relleno) de esta manera: imagen de fondo: url(logotipo.png); repetición de fondo: sin repetición; fondo-origen: cuadro de contenido; además, elfondo-origenLa propiedad se puede usar de manera efectiva con otra propiedad nueva:clip de fondo.Elclip de fondoLa propiedad limita el área donde aparece la imagen de fondo. Normalmente, las imágenes de fondo llenan toda el área de un elemento, incluso detrás de los bordes y las áreas de relleno (abajo a la izquierda en la Figura 8-9). Sin embargo, puede especificar dónde aparece la imagen con uno de estos tres valores: • cuadro de bordepermite que la imagen aparezca detrás del contenido hasta detrás de los bordes. Notará esto solo si tiene bordes con espacios visibles como una línea discontinua (abajo a la izquierda en la Figura 8-9). Esto es normalmente lo que hacen los navegadores, por lo que no hay una razón real para usar esta configuración. • caja de rellenolimita cualquier fondo a solo el área de relleno y el contenido del elemento (parte inferior central en la Figura 8-9). Esto es útil si tiene un borde punteado o discontinuo y no desea que la imagen aparezca en los espacios del borde. • cuadro de contenidolimita el fondo solo al área de contenido. El relleno y el área detrás del borde estarán libres de cualquier imagen (abajo a la derecha en la Figura 8-9). 252 Css3: el manual perdido www.it-ebooks.info POSICIONANDO UN Combinandofondo-origenyclip de fondo,puede asegurarse de que una imagen comience en la parte superior izquierda del área de contenido y aparezca solo detrás de contenido como este: Fondo imagen fondo-origen: cuadro de contenido; clip de fondo: cuadro de contenido; Figura 8-10 Elclip de fondo La propiedad también se aplica a los colores de fondo. Si agregó un borde no sólido (como punteado, discontinuo o doble), el color de fondo normalmente se muestra detrás del borde en las áreas vacías. Sin embargo, para limitar ese color justo dentro del borde, simplemente establecería el elementoclip de fondopropiedad a caja de relleno. Imágenes de fondo de escala A diferencia del HTML <imagen>etiqueta, normalmente puede cambiar el tamaño de una imagen de fondo. Se coloca en el fondo con el tamaño que usted lo creó. Sin embargo, CSS3 añade untamaño de fondo propiedad, que le permite controlar el tamaño de una imagen de fondo. Tiene la opción de usar valores o palabras clave para establecer el tamaño: • Proporcione un valor de alto y ancho para establecer el tamaño de la imagen. Puede usar un valor absoluto como un valor de píxel: tamaño de fondo: 100px 200px; Este código establece la imagen de fondo en 100 píxeles de ancho y 200 píxeles de alto. También puede establecer el valor de solo el ancho o la altura y establecer el otro enauto: tamaño de fondo: 100px automático; En este caso, la imagen de fondo tiene 100 píxeles de ancho y el navegador establece automáticamente el ancho para mantener intacta la relación de aspecto de la imagen (para que no se distorsione). También puede utilizar valores porcentuales. Si desea que la imagen se escale para ajustarse completamente al fondo, puede usar100%para ambas configuraciones (Figura 8-11, izquierda): tamaño de fondo: 100% 100%; Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 253 POSICIONANDO UN Fondo imagen • ElcontenerLa palabra clave obliga a la imagen a cambiar de tamaño para ajustarse mientras se mantiene la relación de aspecto de la imagen (Figura 8-10, centro). Dependiendo de la forma de la imagen y del elemento, la imagen se estira para ajustarse al ancho o al alto del elemento. tamaño de fondo: contener; • ElcubrirLa palabra clave fuerza el ancho de la imagen para que se ajuste al ancho del elemento y la altura de la imagen para que se ajuste a la altura del elemento. Por lo general, esto distorsiona la imagen al aplastarla o estirarla para que se ajuste al elemento (Figura 8-10, derecha). tamaño de fondo: portada; Eltamaño de fondoLa propiedad casi siempre termina cambiando el tamaño de la imagen original: si la imagen es más pequeña que los elementos, el navegador aumenta la escala de la imagen, lo que generalmente resulta en una notable pixelación y degradación de la imagen (como con las imágenes de fondo en la Figura 8-10). CONSEJOUtilizando eltamaño de fondoLa propiedad puede ser especialmente útil cuando trabaja con elementos cuyo tamaño se mide mediante porcentajes, como los diseños receptivos que se analizan en el Capítulo 14. Por ejemplo, si coloca una imagen en el fondo de un banner que tiene 960 píxeles cuando se ve en una computadora de escritorio monitor pero se reduce a 480 cuando se ve en un teléfono, puede colocar una imagen de fondo grande en el banner y usar esta configuración: tamaño de fondo: 100 % automático; Esto obliga al navegador web a cambiar el tamaño de la imagen para que se ajuste a medida que el banner se reduce a un tamaño más delgado. Figura 8-11 ElfondotamañoLa propiedad es la única forma de cambiar el tamaño de una imagen de fondo. Tenga en cuenta que, si bien la mayoría de los navegadores entienden soporte esta propiedad, Internet Explorer 8, que todavía se usa ampliamente, no lo hace, así que úselo con cuidado (o, si no le importa IE 8, úselo con un abandono imprudente). 254 Css3: el manual perdido www.it-ebooks.info usando Uso de la abreviatura de propiedad de fondo Fondo propiedad Taquigrafía Como puede ver en los ejemplos de la sección anterior, para realmente tomar el control de las imágenes de fondo, necesita aprovechar el poder de varias propiedades de fondo diferentes. pero escribiendoimagen de fondo, adjunto de fondo,y así sucesivamente una y otra vez realmente puede pasar factura en sus manos. Pero hay una manera más fácil: la fondo propiedad abreviada. En realidad, puede agrupar todas las propiedades de fondo (incluido elcolor de fondoproperty) en una sola línea de CSS optimizado. Simplemente escriba fondo seguido de los valores deaccesorio de fondo, archivo adjunto,ycolor de fondo.El siguiente estilo establece el fondo en blanco y agrega una imagen de fondo fija que no se repite justo en el medio de la página: cuerpo { fondo: url(bullseye.gif) centro centro sin repetición fijo #FFF; } Tampoco es necesario especificar todos los valores de propiedad. Puedes usar uno o cualquier combinación de ellos. Por ejemplo:fondo: amarilloes el equivalente de color de fondo: amarillo.Cualquier valor de propiedad que omita simplemente vuelve a su comportamiento normal, así que supongamos que especifica solo una imagen: fondo: url(imagen/bullseye.gif); Eso es el equivalente de esto: fondo: url(imagen/bullseye.gif) desplazarse hacia la izquierda arriba repetir transparente; Este comportamiento de restablecer valores no definidos a sus valores predeterminados puede generar algunos resultados inesperados. Por ejemplo, supongamos que agrega estas dos declaraciones a un estilo: color de fondo: amarillo; fondo: url(image/bullseye.gif) sin repetición; Es posible que espere ver una sola imagen de ojo de buey sobre un color de fondo amarillo. Pero no lo hará, porque un navegador restablece elcolor de fondoa transparente (invisible) cuando se encuentra con elfondopropiedad sin color especificado. Para sortear esta situación, debe especificar elcolor de fondosegundo, así: fondo: url(image/bullseye.gif) sin repetición; color de fondo: amarillo; Además, cuando se aplican varios estilos al mismo elemento, sin darse cuenta puede terminar borrando las imágenes de fondo. Por ejemplo, supongamos que desea agregar una imagen de fondo a cada párrafo de una página, por lo que crea un estilo como este: pag { fondo: url (icono.png) izquierda arriba sin repetición rgb (0,30,0); } Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 255 usando Fondo propiedad Taquigrafía Luego decide que desea que el primer párrafo después de cada Título 2 tenga un fondo azul, por lo que crea esto: h2 + pag { fondo: azul; } Este segundo estilo utiliza la taquigrafía, que restablece todos los demásfondopropiedades a sus valores predeterminados. En el caso de una imagen, el valor predeterminado es ninguna imagen, por lo que en lugar de simplemente agregar un fondo azul al párrafo y dejar la imagen en su lugar, ¡este estilo en realidad borra la imagen! En otras palabras, elfondoLa propiedad abreviada puede ayudarlo a escribir menos código, pero también puede causarle problemas, así que tenga en cuenta este comportamiento. NotaPuede usar las propiedades de fondo CSS3 más nuevas:tamaño de fondo, origen de fondo, yclip de fondo—en la taquigrafía de fondo, pero no es necesariamente una buena idea. Primero, dado que IE 8 no comprende esas propiedades, agregarlas a la declaración de fondo hará que IE 8 omita las otras propiedades válidas (en otras palabras, ignorará todas las configuraciones de fondo). Además, debe poner las propiedades en un orden específico, y ningún navegador (a partir de este escrito) puede manejar tanto elposición de fondoy tamaño de fondovalores juntos en una sola declaración. Para evitar esto, puede crear una declaración con las propiedades abreviadas comunes y aceptadas (imagen, posición, repetición, ubicación y color) y luego agregar declaraciones separadas después de la declaración abreviada para las nuevas propiedades CSS3. Preguntas frecuentes Búsqueda de imágenes gratuitas no soy un artista No puedo dibujar, no puedo pintar, ni siquiera tengo una se les aplicó una licencia Creative Commons. (Aunque no cuestan cámara digital. ¿Dónde puedo encontrar ilustraciones para mi sitio? dinero, no todas las fotos en estos sitios se pueden usar en Gracias a Dios por la Web. Es la ventanilla única para los genios creativos que no podrían arrinconarse aunque lo intentaran. Hay proyectos comerciales. Asegúrese de leer la letra pequeña de cualquier foto que desee usar). muchos sitios de descarga de fotos e ilustraciones de pago, pero Si está buscando viñetas para agregar a las listas, íconos para también hay bastantes opciones completamente gratuitas. Para ver mejorar su barra de navegación o patrones para llenar la pantalla, fotos, consulte el archivo de la morgue (www.morguefile.com), que a hay muchos sitios para elegir. Some Random Dude (no, en serio, pesar del espeluznante nombre tiene muchas fotos maravillosas ese es el nombre del sitio web) ofrece un conjunto de 121 iconos proporcionadas de forma gratuita por personas a las que les encanta de forma gratuita:www.somerandomdude.com/work/sanscons/. Y tomar fotografías. Stock.xchng (www.sxc.hu) es otro excelente recurso si está buscando patrones de mosaico interesantes, consulte los fotográfico. Abrir Foto (http://openphoto.net) también proporciona patrones en estos sitios: ColourLovers.com (www.colorlovers. es/ imágenes basadas en licencias Creative Commons, y puede usar el patrones), Patrón4u (www.kollermedia.at/pattern4u), y dedos de motor de búsqueda en el sitio web de Creative Commons para calamar (ht tp://squidf inger s .com/patrones). O crea tus propios encontrar imágenes (y videos y música) que se pueden usar en fondos en mosaico con estos creadores de patrones en línea: proyectos personales y comerciales:http://search.creativecommons.org. BgPatterns (http://bgpatterns.com), Generador de bandas 2.0 ( Además, puede utilizar Flickr (www.flickr.com/creativecommons) y www.stripegenerator.com), y PatternCooler (www. Álbumes web de Picasa (http://picasaweb.google.com) para buscar patroncooler.com). imágenes que tengan 256 Css3: el manual perdido www.it-ebooks.info usando Uso de múltiples imágenes de fondo Múltiple Fondo IMÁGENES Si bien una imagen de fondo está bien, poder superponer varias imágenes en un fondo tiene sus usos. Por ejemplo, suponga que desea agregar una imagen de fondo a una barra lateral para que parezca un pergamino (Figura 8-12). Si simplemente coloca una sola imagen en el fondo, podría funcionar al principio (arriba a la izquierda en la Figura 8-12), pero si agrega mucho texto dentro de esa barra lateral, no se verá tan bien (arriba a la derecha). en la Figura 8-12). Esto se debe a que la imagen tiene un tamaño y no crecerá ni se reducirá para adaptarse al tamaño de la barra lateral. Afortunadamente, CSS3 te permite agregar varias imágenes al fondo de un elemento. En el ejemplo del pergamino, puede utilizar tres imágenes de fondo: una para la parte superior del pergamino, otra para la parte inferior del pergamino y otra para su área de texto. Esa última imagen es una imagen en mosaico sin problemas, por lo que a medida que la barra lateral se hace más alta, la imagen simplemente se divide en mosaicos para adaptarse al espacio. Por supuesto, también puede usar varias imágenes para tareas más simples. Por ejemplo, supongamos que desea agregar una imagen colorida y ricamente texturizada al fondo de un elemento y también agrega un logotipo de dos colores. Como se explica en el cuadro de la página 242, JPEG es un mejor formato cuando una imagen tiene muchos colores, mientras que PNG8 es mejor para áreas de color sólido como un logotipo. En este caso, puedes tener lo mejor de ambos mundos usando un JPEG para el fondo colorido y un PNG8 para el logotipo. Para múltiples imágenes de fondo, simplemente use elimagen de fondopropiedad con una lista de imágenes separadas por comas como esta: imagen de fondo: url(scrollTop.jpg), url(scrollBottom.jpg), url(desplazamientoMedio.jpg); NotaEn este código de ejemplo, cada URL aparece en su propia línea, pero no es necesario que lo haga de esa manera. Puede escribir todo esto en una sola línea (muy larga). Sin embargo, a la mayoría de los diseñadores les resulta más fácil de leer si coloca cada imagen en su propia línea y usa espacios (o tabulaciones) para sangrar las siguientes líneas y alinearlas. Solo tenga en cuenta que necesita una coma después de cada imagen especificada, excepto la última, que generalmente requiere el punto y coma necesario para finalizar una declaración. Debido a que las imágenes de fondo normalmente se dividen en mosaicos, por lo general deberá incluir un repetición de fondoTambién puede agregar otras propiedades de fondo (si no lo hace, las imágenes simplemente se colocarían una encima de la otra ocultando todas las imágenes debajo). También puede agregar otras propiedades de fondo, con un conjunto similar de valores separados por comas como este: repetición de fondo: sin repetición, no repetir, repetir-y; Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 257 usando Múltiple Fondo IMÁGENES Figura 8-12 Tenga en cuenta que varias imágenes de fondo no funcionan en Internet Explorer 8. Consulte el cuadro en la página 259 para conocer una forma de usar varias imágenes de fondo con IE 8. Cuando se usan varios valores como este, el primer valor (sin repeticiónen este ejemplo) va con la primera imagen listada en elimagen de fondopropiedad (scrollTop.png); el segundo va con la segunda imagen de la lista, y así sucesivamente. Debido a que esto puede volverse confuso rápidamente, muchos diseñadores web usan el método abreviado para especificar varias imágenes, como esta: fondo: url (scrollTop.jpg) centro superior sin repetición, url(scrollBottom.jpg) centro inferior sin repetición, url(scrollMiddle.jpg) centro superior repetición-y; 258 Css3: el manual perdido www.it-ebooks.info UTILIZANDO NotaMúltiples imágenes de fondo se superponen, como capas en un programa de edición de imágenes. El orden en que enumera las imágenes de fondo determina qué imagen aparece en la parte superior. La primera imagen de la lista está en la degradado Antecedentes capa superior del elemento, la segunda en la segunda capa y la última en la capa inferior. En el código de ejemplo anterior, la parte superior del pergamino (scrollTop.jpg) está encima de la parte inferior del pergamino (scrollbottom.jpg), que a su vez se encuentra sobre el área de texto del pergamino (scrollMedio.jpg). CLÍNICA DE USUARIOS ELÉCTRICOS Falsificar múltiples fondos Internet Explorer 8 todavía se usa mucho (gracias a Windows XP). Pero . barra lateral { fondo: url(scrollMiddle.jpg) center top repeat- debido a que IE 8 no admite varias imágenes, es posible que sienta que y; debe mantenerse alejado de ellas. Sin embargo, hay un par de formas de falsificar múltiples fondos. La más simple es agregar imágenes de } fondo individuales a los elementos superpuestos. Por ejemplo, puede . barra lateral:antes de { contenido: url (scrollTop.jpg); lograr el mismo efecto de desplazamiento que se muestra en la Figura 8-12 agregando el área de texto central del desplazamiento al fondo del } <div>etiqueta, que crea esa región de la barra lateral. Luego, agregue la . barra lateral: después de { contenido: url (scrollBottom.jpg); parte superior del pergamino al fondo del primer elemento en la barra lateral; en este caso, es un <h2>etiqueta con el texto "Anuncios". Finalmente, agregue la imagen de la parte inferior del pergamino a la parte inferior del último elemento en la barra lateral, en este caso, una lista desordenada. El título y la lista desordenada están dentro del div de la barra lateral, y esto se encuentra en la parte superior de <división>. } Para mover las imágenes para que no estén en la parte superior o inferior del elemento, deberá aprender a usar el posicionamiento absoluto para poder mover el contenido generado. Aprenderá sobre el posicionamiento absoluto en profundidad en el Capítulo 15. Los fondos múltiples de CSS3 le permiten agregar tantas Otra técnica utiliza contenido generado por CSS (página 595). El imágenes de fondo como desee. Al usar contenido generado, está contenido generado es una forma de agregar contenido antes y/o limitado a solo tres imágenes: el fondo del elemento y sus después de un elemento. Puede agregar texto, pero también puede pseudoclases antes y después. Utilizará este método de contenido agregar imágenes. El contenido generado se encuentra sobre el generado para crear varias imágenes de fondo en el tutorial de la elemento, por lo que en el ejemplo de desplazamiento, podría agregar página 290. la parte superior del desplazamiento al :antespseudo clase y la parte inferior del desplazamiento a la :despuéspseudo clase, así: Utilizando fondos degradados Gradientes: las transiciones suaves de color de azul a rojo o de negro a blanco son elementos básicos comunes de cualquier programa de edición de imágenes. Crear cambios sutiles de un color similar a otro crea una especie de calidad brumosa; Apple usa degradados en los botones y otros elementos de la interfaz de usuario en su software OS x y iPhone. Solía ser que tenías que abrir Photoshop y crear un archivo de imagen enorme con el degradado que buscabas. Ahora puede dejar que el navegador cree gradientes para usted. Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 259 UTILIZANDO degradado Antecedentes CSS3 admite gradientes de fondo, básicamente, imágenes creadas sobre la marcha por un navegador web. De hecho, se utiliza el habitualimagen de fondopropiedad para crear el degradado. Tienes varios tipos de degradados para elegir. Gradientes lineales El tipo más básico de gradiente es un gradiente lineal. Se mueve en línea recta desde un borde de un elemento a otro, pasando de un color a otro (consulte la Figura 8-13). En esencia, especifica dónde comienza el degradado (en el borde de un elemento), el color inicial y el color final. Por ejemplo, para crear un degradado que comienza con negro en el borde izquierdo de un elemento y luego cambia a blanco en el extremo derecho del elemento, escribiría esto: imagen de fondo: degradado lineal (izquierda, negro, blanco);; NotaComo se explica en el recuadro de la página 209, no puede simplemente usar elgradiente lineal( )valor para las imágenes de fondo. Para que funcione, la mayoría de los navegadores requieren un prefijo de proveedor, como:webkit-linear-gradiente. Puede crear un degradado utilizando cualquier valor de color CSS (página 54), como palabras clave comoblancoonegro,valores hexadecimales como #000000,valores RGB comorgb(0,0,0), etcétera. Para identificar la posición inicial, puede utilizarizquierda, derecha, arriba,oabajo. De hecho, si desea un degradado que se mueva en diagonal a lo largo del elemento, puede combinar palabras clave. Por ejemplo, para dibujar un degradado que viaje desde la esquina superior izquierda hasta la esquina inferior derecha cambiando de negro a blanco, escriba esto: imagen de fondo: degradado lineal (arriba a la izquierda, negro, blanco); Figura 8-13 Los degradados lineales le permiten omitir el antiguo método de agregar degradados al fondo de un elemento: cree el degradado como un gráfico en Photoshop o Fireworks y luego use elfondoimagenpropiedad para colocar ese gráfico en el fondo del elemento. 260 Css3: el manual perdido www.it-ebooks.info UTILIZANDO Tampoco está limitado a las palabras clave. Puede especificar un valor de grado que especifique la dirección del degradado. Los grados se escriben con un número de 0 a 360 seguido degradocomo degradado Antecedentes esto:0 grados (Figura 8-14). Tendrá que hacer algunas pruebas y errores para obtener el efecto que desea, pero así es como funciona aproximadamente:0 gradossignifica comenzar a la izquierda y moverse a la derecha, mientras que45 gradoscomienza en la esquina inferior izquierda y mueve el degradado 45 grados hacia la esquina superior derecha. Por ejemplo, el degradado creado en la imagen inferior izquierda de la Figura 8-13 utiliza esta declaración: imagen de fondo: gradiente lineal (45 grados, rgb (0,0,0), rgb (204,204,204)); En un elemento perfectamente cuadrado,45 gradosrepresenta la esquina inferior izquierda y es lo mismo que usar la palabra claveabajo a la izquierda.En otras palabras esto: imagen de fondo: gradiente lineal (45 grados, rgb (0,0,0), rgb (204,204,204)); Es lo mismo que esto: imagen de fondo: degradado lineal (abajo a la izquierda, rgb (0,0,0), rgb (204,204,204)); Sin embargo, en una imagen rectangular, estas dos declaraciones no crearán los mismos degradados. Eso es porque un navegador dibuja una línea imaginaria a través del medio del elemento. El ángulo que especifique es el ángulo de esa línea. Por ejemplo, en el elemento ancho y rectangular de la Figura 8-14, abajo, una línea dibujada a 45 grados por el centro en realidad no va desde la parte inferior izquierda hasta la parte superior derecha del elemento. Se ejecuta en algún lugar entre la izquierda y la mitad de la parte inferior del elemento hasta un punto entre el borde medio y derecho en la parte superior. Figura 8-14 El valor de grado que proporciona para un degradado lineal se usa para crear una línea que pasa por el medio de un punto imaginario en el centro del elemento. El gradiente se dibuja a lo largo de esta línea. El valor dicta dónde comienza el gradiente y la pendiente del gradiente. Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 261 UTILIZANDO degradado Antecedentes PARADAS DE COLOR Los degradados que has visto hasta ahora usan solo dos colores, pero puedes agregar tantos como quieras. Los colores adicionales se llamanel color se detiene,y dejan que el fondo haga la transición de un color a un segundo color, luego de ese segundo color a un tercer color, y así sucesivamente, hasta que el color final finaliza el degradado. Para agregar paradas de color, simplemente agregue más valores de color al degradado. Por ejemplo, la imagen de abajo a la derecha en la Figura 8-13 contiene tres colores: negro a blanco a negro: imagen de fondo: degradado lineal (izquierda, negro, blanco, negro); Por supuesto, puede usar cualquier valor de color (expresado como palabras clave, hexadecimal o RGB) e incluso mezclarlos y combinarlos, por lo que incluso puede escribir la línea de código anterior de esta manera: imagen de fondo: gradiente lineal (izquierda, negro, rgb (255,255,255), #FFFFFF, HSL (0,0,0%)); Los navegadores web distribuyen uniformemente los colores, por lo que en este ejemplo, el extremo izquierdo comienza en negro; el fondo del medio del elemento es blanco; y luego el extremo derecho del elemento es negro. Sin embargo, puede colocar las diferentes paradas de color en ubicaciones más específicas en el fondo agregando un segundo valor después del color. CONSEJOPuede obtener algunos efectos realmente salvajes si agrega elposición de fondopropiedad a un elemento con un fondo degradado. Esencialmente, puede cambiar lo que el navegador considera que es el punto de partida del degradado. Pruébalo. Por ejemplo, supongamos que desea comenzar con un rojo intenso, luego aumentar rápidamente a un naranja quemado alrededor del 10 por ciento en el elemento, permanecer en ese color naranja durante la mayor parte del elemento y luego volver rápidamente a un rojo intenso, como la imagen superior en la Figura 8-15. Para hacer esto, usaría cuatro paradas de color (rojo, naranja, naranja y rojo) y especificaría dónde deben colocarse las dos paradas blancas: imagen de fondo: degradado lineal (izquierda, #900, #FC0 10 %, #FC0 90 %, #900); Note que el10%se aplica al segundo color (el naranja): esto le dice al navegador que necesita llegar a este color al 10 por ciento del ancho del elemento. Asimismo, el90% indica que el navegador debe permanecer en ese color naranja hasta que alcance el 90 por ciento del elemento y luego comience la transición al rojo intenso en el extremo derecho del elemento. NotaNo tiene que usar porcentajes para colocar paradas de color. También puede usar píxeles o ems. Sin embargo, los porcentajes son más flexibles y se adaptan a medida que cambia el ancho o la altura de un elemento. Una excepción son los degradados lineales repetitivos que se analizan en la página 260. Los valores de píxel para las paradas son muy útiles para crear este tipo de degradados en mosaico. No necesita usar ningún valor para el primer o último color, ya que el navegador asume que el primer color comienza en0%y el último color termina en100%.Sin embargo, si quisiera mantener un color de inicio sólido más adentro del elemento, podría proporcionar un 262 Css3: el manual perdido www.it-ebooks.info UTILIZANDO valor después del primer color. Por ejemplo, la imagen inferior de la Figura 8-15 se crea con esta declaración: degradado Antecedentes imagen de fondo: degradado lineal (izquierda, #900 20 %, #FC0 30 %, #FC0 70 %, #900 80 %); Observe que el primer color—#900—también tiene una posición de20%.Esto significa que el primer 20 por ciento del elemento (de izquierda a derecha) debe ser de color rojo sólido. Luego, en el punto del 20 por ciento, el degradado debería comenzar a cambiar al color naranja en el 30 por ciento. Figura 8-15 Puede especificar dónde aparecen las paradas de color en un degradado lineal. En el ejemplo superior, un color rojo oscuro cambia rápidamente de la izquierda a un color naranja en el 10 por ciento del ancho del elemento. Para crear un área grande de color sólido en el medio, necesita dos paradas de color con el mismo valor de color. Básicamente, un degradado de un color al mismo color no es un degradado en absoluto. Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 263 UTILIZANDO degradado Antecedentes PREFIJOS DE PROVEEDORES Y SOPORTE DE INTERNET EXPLORER Como leyó en el cuadro de la página 209, muchas de las propiedades CSS más nuevas requieren un prefijo de proveedor antes del nombre de la propiedad: -webkit-para Chrome y Safari, -moz-para Firefox, y -o-para Ópera. Esto es cierto para los gradientes. Desafortunadamente, debe escribir declaraciones para cada uno de los navegadores. En otras palabras, para que el degradado simple de la página 262 funcione en los diferentes navegadores, debe escribir este código: imagen de fondo: -webkit-linear-gradient (izquierda, negro, blanco); imagen de fondo: -moz-linear-gradient (izquierda, negro, blanco); imagen de fondo: -o-linear-gradient (izquierda, negro, blanco); imagen de fondo: degradado lineal (izquierda, negro, blanco); Así es, cuatro veces el trabajo. Para empeorar las cosas, los gradientes no son compatibles con Internet Explorer 9 y versiones anteriores. Si elige usar degradados, debe proporcionar un color de respaldo para IE 9 y versiones anteriores. Encuentre un color sólido que coincida con el tono general de su degradado y declárelo primero, seguido de las declaraciones de degradado, así: color de fondo: #FC0; imagen de fondo: -webkit-linear-gradient (izquierda, #900, #FC0, #900); imagen de fondo: -moz-linear-gradient (izquierda, #900, #FC0, #900); imagen de fondo: -o-linear-gradient (izquierda, #900, #FC0, #900); imagen de fondo: degradado lineal (izquierda, #900, #FC0, #900); IE 9 aplicará el color de fondo y, dado que no comprende los gradientes lineales, omitirá las demás declaraciones. Otros navegadores aplicarán el color de fondo, pero también crearán un degradado que cubra el color de fondo. Si está utilizando colores RGBA con algún nivel de transparencia, entonces no querrá que se vea el color de fondo. En este caso, utilice elfondopropiedad abreviada en su lugar, y lacolor de fondoserá anulado (gracias al comportamiento peculiar del fondopropiedad abreviada discutida en la página 255). Entonces puedes usar este código para los colores RGBA: color de fondo: #FC0; fondo: -webkit-linear-gradient(izquierda, rgba(153,0,0,.5), #FC0, rgba(153,0,0,.5)); fondo: -moz-linear-gradient(izquierda, rgba(153,0,0,.5), #FC0,rgba(153,0,0,.5)); fondo: -o-linear-gradient(izquierda, rgba(153,0,0,.5), #FC0, rgba(153,0,0,.5)); fondo: degradado lineal (izquierda, rgba (153,0,0, .5), #FC0, rgba (153,0,0, .5)); NotaComo puede ver, hay mucho código involucrado en la creación de gradientes. Además, las versiones anteriores de WebKit (Safari en Mac y navegadores iOS y Android) siguen una sintaxis completamente diferente para los degradados lineales. Debido a esto, probablemente querrá usar la herramienta de creación de gradientes en línea que se describe en la página 269. Hará que su proceso de creación de gradientes sea mucho más fácil. 264 Css3: el manual perdido www.it-ebooks.info UTILIZANDO Repetición de degradados lineales Normalmente, un degradado lineal llena todo el elemento con el primer color en un punto y el degradado Antecedentes último color en el borde opuesto del elemento. Sin embargo, es posible crear degradados repetitivos para que pueda crear patrones de degradado. En esencia, define un degradado con paradas de color específicas; el navegador dibuja el degradado y luego repite ese patrón, colocándolo en el fondo del elemento. Por ejemplo, para obtener el gradiente repetitivo de la imagen de la izquierda en la Figura 8-16, puede escribir este código: imagen de fondo: gradiente lineal repetitivo (abajo a la izquierda, #900 20px, #FC0 30px, #900 40px) En casos como este, es muy útil usar valores de píxel para las paradas de color. En esencia, el navegador dibuja un degradado que comienza en la parte inferior izquierda; comienza con 20 píxeles de color rojo intenso, luego pasa a naranja a los 30 píxeles y luego vuelve a rojo intenso a los 40 píxeles. Una vez que se dibuja ese degradado, el navegador simplemente lo coloca en mosaico en el fondo como una imagen en mosaico. NotaHay mucho espacio para experimentar con gradientes. Para ver algunas de las cosas increíbles que son posibles, visite la galería de patrones CSS3 enhttp://lea.verou.me/css3patterns/,www.standardista. com/ cssgradients/, y el increíble uso de gradientes para crear banderas del mundo enwww.standardista.com/ CSS3gradients/flags.html. Incluso puede usar degradados repetitivos para crear rayas sólidas sin ninguna de las transiciones elegantes y sutiles entre colores. Por ejemplo, la imagen de la derecha en la Figura 8-16 se crea con esta declaración: imagen de fondo: gradiente lineal repetitivo (45 grados, #900 0, #900 10px, #FC0 10px, #FC0 20px); Aquí, comienzas con rojo intenso (#900)en el0punto, y volver a rojo en el10 píxeles punto. Dado que está cambiando entre los mismos colores, el navegador lo dibuja como un color sólido. A continuación, hace la transición a naranja (#FC0)a 10 píxeles. Dado que ese es el mismo lugar en el que termina el rojo, no es una transición sutil, el patrón simplemente va de rojo a naranja. Finalmente, la transición pasa al mismo naranja a 20 píxeles, creando otra línea continua. Debido a que se trata de un degradado lineal repetitivo, el navegador simplemente coloca en mosaico ese patrón para rellenar el fondo del elemento. Ahora las malas noticias. La repetición de degradados lineales funciona en la mayoría de los navegadores, pero no en versiones anteriores de Safari (anteriores a 5.1 o iOS 5) o en IE 9 y anteriores. Por lo tanto, es una buena idea agregar un color de fondo alternativo; también debe asegurarse de incluir todas las declaraciones prefijadas por el proveedor, por lo que el primer gradiente de repetición se vería así: Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 265 UTILIZANDO degradado Antecedentes color de fondo: #FC0; fondo: -webkit-repeating-linear-gradient (abajo a la izquierda, #900 20px, #FC0 30px, #900 40px) fondo: -moz-repeating-linear-gradient(abajo a la izquierda, #900 20px, #FC0 30px, #900 40px) fondo: -o-repetición-degradado lineal (abajo a la izquierda, #900 20px, #FC0 30px, #900 40px) fondo: gradiente lineal repetitivo (abajo a la izquierda, #900 20px, #FC0 30px, #900 40px) Figura 8-16 Puede crear patrones de rayas utilizando los degradados lineales repetitivos de CSS3. Gradientes radiales CSS también proporciona una forma de crear degradados radiales: degradados que irradian hacia afuera en un patrón circular o elíptico (consulte la Figura 8-17). La sintaxis es similar a los degradados lineales y, en su forma más simple, solo necesita proporcionar un color inicial (el color en el medio del degradado) y un color final (el color al final del degradado). Por ejemplo, la imagen superior izquierda de la Figura 8-17 se crea con este código: imagen de fondo: degradado radial (rojo, azul); Esto crea una forma elíptica que se ajusta a la altura y el ancho del elemento, con el centro del degradado (el rojo inicial) en el centro del elemento. También puede hacer degradados circulares agregando una palabra clave "círculo" antes de los colores. Por ejemplo, la imagen superior derecha de la Figura 8-17 se crea con este código: imagen de fondo: degradado radial (círculo, rojo, azul); 266 Css3: el manual perdido www.it-ebooks.info UTILIZANDO Mientras que un navegador normalmente dibuja el centro de un degradado radial en el centro del elemento, puede colocar el centro del degradado usando las mismas palabras clave y degradado Antecedentes valores de posicionamiento que usa para elposición de fondopropiedad (página 246). Por ejemplo, en la imagen central izquierda de la Figura 8-17, el degradado radial comienza un 20 por ciento desde el borde izquierdo del elemento y un 40 por ciento desde la parte superior del elemento. Los valores de posicionamiento van antes de la palabra clave color y forma, así: imagen de fondo: gradiente radial (20% 40%, círculo, rojo, azul); Para dictar el tamaño del degradado, puede usar una de cuatro palabras clave: • Ellado más cercanoLa palabra clave le dice al navegador que haga que el degradado se extienda desde el centro solo hasta el lado más cercano al centro. Por ejemplo, en la imagen central izquierda de la Figura 8-17, el lado más cercano al centro del degradado es el borde superior, por lo que el radio del círculo viaja desde el centro del círculo hasta este borde. Esto mantiene todo el degradado dentro del elemento. Aquí está el código para producir este gradiente: imagen de fondo: degradado radial (20% 40%, círculo del lado más cercano, rojo, azul); Cuandolado más cercanose aplica a un gradiente elíptico, los dos lados más cercanos (es decir, la parte superior o inferior y los lados izquierdo o derecho) se utilizan para calcular los radios x e y de la elipse. • Elesquina más cercanaLa palabra clave mide el ancho del degradado desde su centro hasta la esquina del elemento más cercano (centro-derecha en la Figura 8-17). Esto puede significar que el gradiente puede desbordar el elemento. Por ejemplo, el círculo dibujado en la parte superior de la imagen del centro a la derecha en la Figura 8-17 demuestra el tamaño real del degradado. Parte del gradiente se extiende más allá del elemento: imagen de fondo: degradado radial (20 % 40 %, círculo en la esquina más cercana, rojo, azul); • Ellado más lejanopalabra clave mide el radio de un círculo desde su centro hasta el lado del elemento que está más alejado. En el caso de un gradiente elíptico, es la distancia desde el centro hasta el lado superior o inferior más lejano y el lado izquierdo o derecho más lejano. Aquí está el código para producir la imagen en la parte inferior izquierda de la Figura 8-17: imagen de fondo: gradiente radial (20% 40%, círculo del lado más lejano, rojo, azul); • Elesquina más lejanapalabra clave mide el radio de un círculo desde su centro hasta la esquina del elemento que está más alejado. Aquí está el código para producir la imagen en la parte inferior derecha de la Figura 8-17: imagen de fondo: degradado radial (20 % 40 %, círculo en la esquina más alejada, rojo, azul); Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 267 UTILIZANDO degradado Antecedentes Figura 8-17 Los degradados radiales son degradados elípticos (arriba a la izquierda) o circulares (arriba a la derecha). Puede controlar la ubicación del degradado dentro del fondo del elemento, así como controlar el tamaño del degradado. Al igual que con los degradados lineales, puede usar varias paradas de color y establecer la ubicación de esas paradas de color. Por ejemplo, supongamos que desea un degradado circular compuesto por un rojo brillante, un naranja y un amarillo. Desea que el rojo aparezca por un tiempo antes de que cambie a naranja, y luego el naranja dura un poco más hasta que aparece el amarillo al final. Puede usar valores porcentuales para dictar dónde aparecen los colores: imagen de fondo: degradado radial (20 % 40 %, círculo, 20 % rojo, 80 % naranja, amarillo); Por supuesto, al igual que con los degradados lineales, puede usar valores de color CSS válidos, por lo que puede reescribir este código como: imagen de fondo: degradado radial (20 % 40 %, círculo, rgb (255,0,0) 20 %, rgb (255,165,0) 80 %, #FFFF00); Al igual que con los degradados lineales, Internet Explorer 9 y versiones anteriores no sabrán de lo que estás hablando si usas un degradado radial, y tampoco las versiones de Safari anteriores a 5.1 (y iOS 5). Debe agregar un color de fondo de respaldo y también deberá agregar todos los prefijos del proveedor. Por ejemplo: 268 Css3: el manual perdido www.it-ebooks.info SOLICITUD FÁCIL DEGRADADOS con color de fondo: rojo; fondo: -webkit-radial-gradient(20% 40%, circle, red 20%, orange 80%, yellow); coLorziLLa fondo: -moz-radial-gradient(20% 40%, circle, red 20%, orange 80%, yellow); fondo: -o-radial-gradient(20% 40%, circle, red 20%, orange 80%, yellow); fondo: degradado radial (20 % 40 %, círculo, 20 % rojo, 80 % naranja, amarillo); Gradientes radiales repetitivos Al igual que con los degradados lineales, puede crear degradados radiales que se repiten, perfectos para ese aspecto de diana o cuando desee hipnotizar a los visitantes de su sitio web. Debe asegurarse de agregar porcentajes o valores reales de píxeles o em para las distintas paradas de color para que el navegador sepa el tamaño de un solo degradado radial y luego pueda repetirlo. Por ejemplo: imagen de fondo: gradiente radial repetitivo (círculo, rojo 20 px, naranja 30 px, amarillo 40 px, rojo 50 px); Tenga en cuenta que para crear un degradado radial repetitivo de apariencia suave, debe terminar con el mismo color con el que comenzó (rojo, en este ejemplo). Esto proporciona un cambio de color suave de regreso al color original. Si no lo hace (por ejemplo, si acaba de terminar con el color amarillo en el código anterior), entonces hay una línea nítida donde termina el último color y comienza el primer color del degradado repetido. CONSEJODebido a que los navegadores web tratan los gradientes lineales y radiales simplemente como imágenes de fondo, puede usar las otras propiedades de las imágenes de fondo, comotamaño de fondo, posición de fondo,y así sucesivamente con ellos. Además, puede tener múltiples degradados separados por comas en un solo estilo, al igual que puede tener múltiples imágenes de fondo (página 257). De hecho, puedes mezclar imágenes con degradados en un mismo elemento. Aplicación de degradados fáciles con Colorzilla La complejidad de los degradados y su compatibilidad limitada con el navegador pueden haber hecho que decidas no utilizarlos en tu CSS. Afortunadamente, existe una herramienta en línea que facilita la creación de la mayoría de los tipos de degradados (excepto los degradados repetidos). Es el humildemente llamado Ultimate CSS Gradient Generator (www.colorzilla.com/gradienteeditor/), que se muestra en la Figura 8-18. Si bien esta herramienta en línea es solo una página web, tiene muchas opciones. Aquí hay una forma de usarlo: 1.Comience con un ajuste preestablecido seleccionando uno de los degradados en la ventana de ajustes preestablecidos (#1 en la Figura 8-18). No tienes que hacer este paso, pero construir el degradado puede ser más rápido si comienzas con algo parecido a lo que buscas. Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 269 SOLICITUD FÁCIL DEGRADADOS con coLorziLLa 2.En el menú de orientación, elija un tipo de degradado (#2 en la Figura 8-18). Esta herramienta está limitada a degradados radiales y lineales que van de arriba a abajo, de izquierda a derecha, de arriba a la izquierda a abajo a la derecha, de abajo a la izquierda a arriba a la derecha o en diagonal. Sin embargo, una vez que haya creado el código, puede reemplazar la palabra clave angle (arriba a la izquierda,por ejemplo) con un título (65 grados,Por ejemplo). Asimismo, la herramienta crea degradados radiales elípticos; si quieres un degradado circular, solo encuentraelipsey reemplazarlo concírculoen el CSS final. No puede crear degradados lineales repetidos o degradados radiales repetidos con esta herramienta. 3.Para cambiar el color y la posición de una parada de color, haga clic para seleccionarla (#3 en la Figura 8-18). A menos que le gusten los colores preestablecidos, deberá editar cada una de las paradas de color. 4.Para cambiar el color de la parada de color, haga clic en el cuadro de color (#4 en la Figura 8-18). Aparece un selector de color emergente. Puede hacer clic para seleccionar un color o, si conoce los valores RGB, hexadecimales o HSL del color, puede escribirlos. Haga clic en Aceptar para seleccionar el nuevo color y cerrar el selector de color. 5.opcionalmente, puede establecer la posición de la parada de color en el campo Ubicación a la derecha del cuadro de color (#5 en la Figura 8-18). Escriba un valor de porcentaje o, más fácilmente, arrastre la parada de color en la barra de gradación (#3 en la Figura 8-18). NotaPara eliminar una parada de color, selecciónela de la barra de gradación (#3 en la Figura 8-18) y presione el botón Eliminar debajo de ella. 6.Agregue paradas de color adicionales haciendo clic debajo de la barra de gradación en el lugar donde desea agregar la parada de color. Después de agregar una nueva parada de color, cambie su color y posición según lo desee (pasos 4 y 5). 7.También puede alterar la opacidad del degradado haciendo que el principio o el final sean ligeramente o completamente transparentes.Seleccione una de las paradas encima de la barra de gradación (#6 en la Figura 8-18) y luego ajuste su opacidad y posición (#7 en la Figura 8-18). 270 Css3: el manual perdido www.it-ebooks.info SOLICITUD FÁCIL DEGRADADOS NotaUltimate CSS Gradient Generator también intenta crear un degradado que funcione un poco en IE 9 y versiones anteriores. Haga clic en la casilla de verificación de IE en el cuadro de vista previa de la parte superior derecha (vea la Figura 8-18) para ver el efecto, que utiliza con coLorziLLa una función patentada de IE llamadafiltrospara lograr un gradiente. Desafortunadamente, IE solo puede simular gradientes lineales que se ejecutan de izquierda a derecha o de arriba a abajo, no gradientes radiales ni gradientes en ángulo. 8.una vez que haya creado el degradado, señale el cuadro CSS y haga clic en el botón Copiar cuando aparezca (#8 en la Figura 8-18). Esto copia el código CSS en el portapapeles de su computadora. Luego puede ir al editor de texto de su elección y pegar el código en el estilo al que desea agregar un degradado de fondo. Ultimate CSS Gradient Generator utiliza una característica exclusiva de IE para simular un degradado para las versiones 9 y anteriores de Internet Explorer. De hecho, proporciona dos alternativas, una para IE 9 y otra para versiones anteriores. El de IE 9 utiliza otra tecnología de imagen: SVG ográficas vectoriales escalables—para lograr su magia, y usarla es una buena idea. El de las versiones anteriores de IE usa un filtro, que no siempre puede simular el gradiente correctamente y ralentiza el rendimiento de IE, por lo que es mejor que ignore IE 8 y versiones anteriores. Para hacer esto: 1.Active la casilla de verificación Compatibilidad con IE9 en la parte inferior derecha debajo del cuadro de código CSS (consulte la Figura 8-18). Esto agrega el código para crear un degradado SVG. 2.Copie el código CSS (Paso 8 anterior) y péguelo en su CSS. 3.Localice el código de filtro de IE y elimínelo. La última línea del código que copiaste se parece a esto: filtro: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f4c6b', endColorstr='#7ed6d3',GradientType=1); /* IE6-8 respaldo en gradiente horizontal */ Si realmente necesita admitir IE 8, deje este código y pruebe el gradiente en IE 8 para asegurarse de que se muestre correctamente. 4.Finalmente, agregue uncolor de fondopropiedad en el lugar donde eliminó el código de filtro de IE; este es el color que aparecerá en el fondo para IE 8 y versiones anteriores. Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 271 Tutorial: MEJORANDO IMÁGENES Figura 8-18 La forma más fácil de comenzar con los degradados es usar una herramienta en línea como Ultimate CSS Gradient Generator ( www.colorzilla. com/gradienteditor/). A la izquierda, cerca de la parte superior de la página, encontrarás una galería de degradados ya creados. Puede elegir uno de ellos como punto de partida simple y ajustar sus colores y paradas de color para que coincidan con su visión, o crear su propio degradado. Tutorial: Mejora de imágenes Una galería de fotos es un ejemplo perfecto de una página web llamativa. Este tutorial reúne una variedad de técnicas de estilo de imagen. Darás formato a las imágenes con marcos y leyendas, crearás una galería de fotos que sea lo suficientemente flexible para verse bien en una variedad de tamaños de ventana y usarás elsombra de la caja(página 210) para crear sombras paralelas de aspecto profesional. Para comenzar, debe descargar los archivos del tutorial que se encuentran en el sitio web complementario de este libro enwww.sawmac.com/css3/. Haga clic en el enlace del tutorial y descargue los archivos. Todos los archivos están incluidos en un archivo zip, por lo que primero debe descomprimirlos. (Hay instrucciones detalladas en el sitio web). Los archivos para este tutorial están en el08carpeta. 272 Css3: el manual perdido www.it-ebooks.info Tutorial: MEJORANDO Enmarcar una imagen Estará trabajando en una página web básica del sitio web ficticio (en caso de que pensara que era real) CosmoFarmer.com (Figura 8-19). En este caso, ya hay una hoja de estilo externa adjunta a la página, que agrega un formato de texto básico. IMÁGENES 1.Inicie un navegador web y abra el archivo.08→01_imagen_ex→imagen.html. Figura 8-19 Antes y después: CSS, eso es. Si confía solo en HTML, las imágenes ocupan mucho espacio (arriba). Con un poco de CSS (abajo) puedes encuadrar una imagen y moverla fuera del camino. Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 273 Tutorial: MEJORANDO IMÁGENES 2.abre el archivoestilos.cssen elimagen_excarpeta en su editor de texto favorito. Este archivo es la hoja de estilo externa utilizada por elimagen.htmlarchivo. Comenzará agregando un estilo de clase a esta hoja de estilo y luego aplicando una clase a <imagen> etiqueta en el archivo HTML. 3.Desplácese hasta la parte inferior del archivo y luego escriba lo siguiente: img.figura { } el seleccionadorimg.figurase dirige a cualquier <imagen>etiqueta con elcifraclase que se le aplica. Usará esto para formatear selectivamente solo las imágenes que desee. (También puede simplemente nombrar el estilo.cifra-la única diferencia es que ese estilo se aplicaría acualquier etiqueta con la figura de la clase, no solo imágenes). 4.Agregarflotarymargenpropiedades al estilo que acaba de crear, así: flotar derecho; margen: 10px; El flotante derecho mueve la imagen al lado derecho de la página, permitiendo que el texto se mueva hacia arriba y se ajuste al borde izquierdo de la foto. Los márgenes le dan a la foto un poco de espacio para respirar y la alejan del texto, el costado de la página y el título de arriba. A continuación, agregará un borde, un color de fondo y algo de relleno para que la imagen se parezca más a una instantánea real. 5.Agregarborde, color de fondo,yrelleno,para que el estilo final se vea así: img.figura { flotar derecho; margen izquierdo: 10px; margen inferior: 10px; borde: 1px sólido #666; color de fondo: #CCC; relleno: 10px; } Si guarda este archivo y luego obtiene una vista previa de la página web en este momento, no verá ningún cambio, ya que el estilo de la clase no tiene efecto hasta que haya agregado la clase a una etiqueta. 6.Guardar y cerrar elestilos.cssarchivo y abra elimagen.htmlarchivo.Localiza el <img> etiquetar y agregarclase = "figura"por lo que la etiqueta se ve así: <img src="../images/grass.jpg" alt="Apartamento Grass" width="200" height="200" class="figure"> Ahora esa imagen adquiere todas las propiedades de formato que definió para la . cifraestilo de clase 274 Css3: el manual perdido www.it-ebooks.info 7.Obtenga una vista previa de la página en un navegador web.Debería verse como la imagen inferior en la Figura 8-19. Tutorial: MEJORANDO IMÁGENES Una imagen puede valer más que mil palabras, pero a veces aún se necesitan algunas palabras para explicar una imagen. Entonces, en la siguiente parte de este tutorial, agregará un título debajo de la foto. Con frecuencia querrá agregar un título a una imagen o foto para proporcionar más información sobre el sujeto, dónde se tomó la foto, etc. En lugar de simplemente hacer flotar la imagen, como hizo en el ejercicio anterior, desea que el texto de la leyenda también flote. La mejor manera de hacer que ambos floten es envolver la imagen y el texto en un contenedor que flote como una sola unidad. Este método mantiene juntos la foto y el texto relacionado. Si decide más tarde que desea cambiar su diseño, tal vez hacerlos flotar hacia la izquierda, no hay problema: simplemente cambie el formato de todo el contenedor. Afortunadamente, HTML5 incluye dos etiquetas nuevas para este requisito: la <figura>La etiqueta tiene la intención de encerrar una imagen que pretende ser una figura ilustrativa. Además, el <figcaption>La etiqueta se puede usar para encerrar, lo adivinó, una leyenda de figura. Primero, necesita ajustar algo del HTML. NotaDebido a que ahora está utilizando algunas etiquetas HTML5, debe incluir el archivo JavaScript HTML5shiv para obligar a IE 8 y versiones anteriores a reconocer el <figura>y <figcaption>etiquetas Consulte el recuadro de la página 24. 8.Regrese a su editor de texto y elimagen.htmlarchivo.Localice el <imagen>etiqueta en el código, y primero elimine laclase = "figura"que agregó en el paso 6 y agregue <figura> antes de esa etiqueta. Esto marca el comienzo del contenedor. Ahora agregará el título y cerrará el < figura>para indicar el final del recipiente. 9.Después del <imagen>agregue el código en negrita a continuación, para que el HTML se vea así: <figura> <img src="../images/grass.jpg" alt="Hierba bendita trepadora" width="200" height="200"/> <figcaption>Figura 1: Creeping Bentgrass es más adecuado para uso en exteriores y debe evitarlo el agricultor de interior. </figcaption> </figura> 10Desplácese hasta la parte inferior del archivo y elimine el archivo .cifraestilo que creó anteriormente. Agregará un nuevo estilo para el elemento de figura. Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 275 Tutorial: MEJORANDO IMÁGENES 11Agregue este estilo a laestilos.cssarchivo: cifra { flotar derecho; ancho: 222px; margen: 15px 10px 5px 10px; } Ya has usado elflotar derechopropiedad en el tutorial anterior, y la propiedad margen agrega un pequeño espacio en blanco alrededor de los cuatro bordes del <figura> etiqueta. pero cual es elanchopara, usted pregunta? Aunque la foto tiene un ancho establecido (200 píxeles), el párrafo de título no lo tiene. Cuando no establece un ancho, el párrafo hace que el <figura>Ampliar más que la foto. En este caso, desea que el título sea tan ancho como la foto y su marco. El valor de 222 píxeles proviene de un poco de matemática utilizada para calcular el área total ocupada por la foto en la página: mientras que la foto tiene solo 200 píxeles de ancho, los 10 píxeles de relleno izquierdo y derecho, así como el 1 píxel de la imagen el borde izquierdo y el borde derecho de 1 píxel hacen que el ancho total de la foto sea igual a 222 píxeles de borde a borde (consulte la página 213 para repasar cómo calcular el ancho de un elemento). A continuación, agregará el formato de la imagen. 12Agregue este estilo a laestilos.cssarchivo: figura img { borde: 1px sólido #666; color de fondo: #CCC; relleno: 10px; } Este selector descendiente afecta a cualquier <imagen>etiquetaadentroun <figura>etiqueta. Dado que está utilizando un selector descendiente aquí, no necesita agregar una clase al <img>etiqueta. A continuación, aplicará estilo al pie de foto. 13Agregue el siguiente estilo a laestilos.csshoja de estilo: figcaption { fuente: negrita 1em/normal Verdana, Arial, Helvetica, sans-serif; color: #333; alineación de texto: centro; } Este estilo usa algunas de las propiedades que aprendió en el Capítulo 6 para crear un título alineado en el centro, en negrita y gris usando la fuente Verdana. Afortunadamente, el fuenteLa propiedad abreviada en la primera línea le permite incluir cuatro propiedades diferentes en una sola declaración de estilo. Para que la leyenda se destaque aún más, agregue un color de fondo y un borde. 276 Css3: el manual perdido www.it-ebooks.info Tutorial: MEJORANDO 14Agregue tres propiedades a lafigcaptionestilo, así: IMÁGENES figcaption { fuente: negrita 1em/normal Verdana, Arial, Helvetica, sans-serif; color: #333; alineación de texto: centro; color de fondo: #e6f3ff; borde: 1px punteado #666; relleno: 5px; } El propósito decolor de fondo, borde,yrellenoLas propiedades deben ser claras: para crear un cuadro de color alrededor del título. Ahora es el momento de obtener una vista previa de su trabajo. 15.Guarde los dosimagen.htmlyestilos.cssarchivos y obtener una vista previa de losimagen.html archivo en un navegador web. dieciséis.Ahora ve una razón por la que es más fácil desarrollar un diseño usando una hoja de estilo interna: necesita trabajar y guardar solo un archivo en lugar de dos.La página debería parecerse a la Figura 8-20. (Puede encontrar una versión completa de esta página en el 08_terminado→01_imagen_excarpeta.) Figura 8-20 Con el uso de un contenedor <figura> etiqueta, un flotador a la derecha y un poco de estilo, es fácil agregar leyendas a las fotos. Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 277 Tutorial: CREANDO una fotografía galería Tutorial: Creación de una galería de fotos La gente solía confiar en HTML <mesa>etiqueta para crear filas y columnas para guardar las imágenes en una galería de fotos. Pero puedes lograr el mismo efecto con un poco de CSS y mucho menos de HTML. 1.abre el archivo08→02→galería_ex→galería.html. Primero, una revisión rápida del HTML utilizado para construir la galería de fotos. La página contiene seis fotos y pies de foto. Cada foto y pie de foto está contenido en un < figura>.La foto en sí es un <imagen>etiqueta y el título está dentro de un <figcaption> etiqueta. <figura> <img src="../images/diente de león.jpg" alt="Diente de león" height="200" width="200"/> <figcaption>Figura 6: El diente de león: flagelo del agricultor de apartamentos. </ figcaption> </figura> NotaDebido a que está utilizando algunas etiquetas HTML5, debe incluir el HTML5HTML5shivArchivo JavaScript para obligar a IE 8 y versiones anteriores a reconocer el <figura>y <figcaption>etiquetas Consulte el recuadro de la página 24. 2.Localice el <enlace>cerca de la parte superior del archivo, coloque el cursordespuésesa etiqueta, y luego presione Enter (Return) para crear una nueva línea en blanco. El <enlace>etiqueta adjunta una hoja de estilo externa que contiene algunos formatos básicos. 3.Agregue una hoja de estilo interna.Luego agregue dos nuevos estilos, de la siguiente manera: <estilo> figura img { borde: 1px sólido #666; color de fondo: #FFF; relleno: 4px; } figcaption { fuente: 1,1 em/normal Arial, Helvetica, sans-serif; alineación de texto: centro; margen: 10px 0 0 0; } </estilo> Estos dos estilos agregan un borde a cada imagen de la galería y establecen la fuente, la alineación y los márgenes de los títulos. El primero es un selector descendente para apuntar solo a las imágenes dentro de las figuras. A continuación, coloque las fotos una al lado de la otra. 278 Css3: el manual perdido www.it-ebooks.info Tutorial: CREANDO NotaCuando inserte la hoja de estilo interna, asegúrese de colocarla en la sección de encabezado de la página, después de la etiqueta de enlace y antes del comentario condicional de IE, que adjunta elHTML5shivArchivo JavaScript (página 24). una fotografía galería 4.Agregue el siguiente estilo a la hoja de estilo interna que acaba de crear: cifra { flotador izquierdo; ancho: 210px; margen: 0 10px 10px 10px; } Este estilo hace flotar cada par de foto/pie de foto hacia la izquierda. De hecho, coloca las fotos una al lado de la otra hasta que no queda más espacio en la fila. Luego, el navegador suelta las siguientes fotos en una fila, hasta que todas las fotos se muestran una fila encima de la siguiente. el ancho es eltotalancho de la foto más relleno y bordes. En este ejemplo, son 200 píxeles para la foto, 8 píxeles para el relleno izquierdo y derecho y 2 píxeles para los bordes izquierdo y derecho. NotaEn esta galería de fotos ficticia, cada imagen tiene el mismo ancho. En el mundo real, puede tener imágenes de diferentes tamaños. Consulte el cuadro a continuación para ver un truco que le permite organizar filas de imágenes de diferentes anchos. El uso de imágenes de diferentes alturas no funcionará (como verá en el Paso 5). Cuando tenga imágenes con diferentes alturas, quédese con las tablas HTML. CLÍNICA DE USUARIOS ELÉCTRICOS Cuando un ancho no sirve para todos Es muy fácil configurar una galería de fotos, como la de este tutorial, Por ejemplo: <figura clase="w300">. cuando las fotos tienen convenientemente el mismo ancho. Pero, ¿y si Luego crea un estilo de clase, por ejemplo .w300,y establezca tienes fotos de diferentes anchos? Una solución es crear un estilo para el ancho al ancho de la imagen (en este caso, 300) más 10 cada ancho diferente y aplicar una clase al <figura>etiqueta para la para cubrir el relleno y los bordes: .w300 {ancho: 310}. imagen en particular. (Eso es mucho trabajo, por lo que valdría la pena hacer un poco de trabajo de edición de fotos para estandarizar sus fotos a solo un puñado de anchos diferentes primero). 5.Guarde el archivo y previsualice elgalería.htmlpágina en un navegador web.Debería verse como la imagen de la izquierda en la Figura 8-21. Ajuste el ancho de la ventana de su navegador para hacerlo más delgado y más ancho y observe cómo las imágenes fluyen en el espacio. Ajá, algo no está del todo bien. La segunda fila de imágenes tiene dos espacios vacíos donde deberían estar las fotos. Este problema se produce porque el título de la segunda imagen de la primera línea es más alto que los demás títulos de la línea. Las imágenes que saltan a otra fila chocan con esa leyenda y no pueden pasarla. (Puedes leer más sobre estoflotar propiedad snafu en la página 425.) Afortunadamente, hay una solución simple a este dilema. Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 279 Tutorial: CREANDO una fotografía galería 6.Regrese a su editor de texto y elgalería.htmlarchivo.Localiza elcifraestilo. Eliminar elflotador izquierdoy añadirpantalla: bloque en línea; alineación vertical: superior.El estilo terminado debería verse así: cifra { pantalla: bloque en línea; alineación vertical: superior; ancho: 210px; margen: 0 10px 10px 10px; } Elpantalla: bloque en línea(página 308) trata cada par de imagen/título como un bloque (un cuadro con alto y ancho) pero también como un elemento en línea (para que los bloques puedan colocarse uno al lado del otro). además, elalineación verticalpropiedad establecida en arribase asegura de que cada <figura>la etiqueta se alinea con la parte superior de todas las demás <figura>etiquetas seguidas. 7.Guarde el archivo y obtenga una vista previa de la página en un navegador web.Vea el lado derecho de la Figura 8-21. Si cambia el tamaño de la ventana del navegador, la galería se vuelve a formatear. Con una ventana más ancha, puede colocar cuatro o incluso cinco imágenes en una fila, pero si la hace más pequeña, solo verá una o dos imágenes por fila. Figura 8-21 Elementos flotantes a continuación entre sí es una forma de simular la apariencia de columna y fila de una tabla. Pero no funciona bien si los elementos tienen diferentes alturas (izquierda). Usando mostrar: bloque en líneaes otra forma de obligar a los elementos a sentarse uno al lado del otro (derecha) sin el desagradable comportamiento de caída que se muestra en la imagen de la izquierda. 280 Css3: el manual perdido www.it-ebooks.info Tutorial: CREANDO una fotografía Adición de sombras paralelas Tu galería se ve bien, pero puedes hacerla aún más impresionante. Agregar sombras paralelas galería debajo de cada foto le da a la página una ilusión de profundidad y una calidad tridimensional realista. Pero antes de iniciar Photoshop, le alegrará saber que no es necesario agregar sombras paralelas individuales. En cambio, puede hacer que CSS agregue automáticamente una sombra a cualquier imagen que desee. Antes de CSS3 (y en ediciones anteriores de este libro), tenía que pasar por un proceso elaborado para agregar sombras paralelas a las imágenes en esta galería, agregando divs adicionales alrededor de las imágenes y usando dos gráficos de fondo, y todavía no se veía como una sombra perfecta. Afortunadamente, CSS3 lo hace tan fácil que terminará este tutorial en dos pasos. 1.En un editor de texto, abra elestilos.cssarchivo que completó en el tutorial anterior. Actualizarás elimagenestilo que creó antes. 2.Agregarsombra de caja: 2px 2px 4px rgba(0,0,0,.5);al final defigura img estilo para que se vea así (cambios en negrita): figura img { borde: 1px sólido #666; color de fondo: #FFF; relleno: 4px; sombra de caja: 2px 2px 4px rgba(0,0,0,.5); } Aprendiste sobre elsombra de la cajapropiedad en la página 210. Aquí ha agregado una sombra que se extiende 2 píxeles a la derecha de la imagen, 2 píxeles debajo de la imagen y que se extiende 4 píxeles. Usando un color RGBA (página 155), puede establecer la sombra en un 50 por ciento de color negro transparente. 3.Guarde el archivo y obtenga una vista previa de la página.Debería parecerse a la Figura 8-22. Cada imagen tiene su propia sombra paralela, ¡y ni siquiera tuvo que abrir Photoshop! Puede encontrar una versión completa de este tutorial en el08_terminado→galería_excarpeta. Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 281 Tutorial: usando Fondo IMÁGENES Figura 8-22 Agregar sombras paralelas a las fotos le da a la página un aspecto tridimensional y aumenta el atractivo visual de cualquier galería de fotos. Afortunadamente, con CSS puede agregar fácilmente una sombra paralela a cualquier imagen sin siquiera tocando Photoshop. Tutorial: uso de imágenes de fondo el cssimagen de fondoLa propiedad es el arma secreta del diseño web moderno. Puede convertir una página web aburrida y llena de texto en un deslumbrante torbellino de imágenes (consulte la Figura 8-23). Dado que puede usarlo para agregar una imagen al fondo de cualquier etiqueta HTML, los diseños que puede crear están limitados solo por su imaginación. El ejemplo de la sombra del tutorial anterior es solo un ejemplo del uso creativo de una imagen de fondo. Otros adornos de imagen de fondo comunes incluyen aplicar un fondo de página y agregar viñetas personalizadas a listas desordenadas. Explorará algunas de estas tareas comunes en este tutorial. 282 Css3: el manual perdido www.it-ebooks.info Tutorial: usando Agregar una imagen al fondo de la página Ya sea un patrón intrincado, un logotipo o una fotografía a pantalla completa, las imágenes Fondo IMÁGENES aparecen en el fondo de muchas páginas web. De hecho, agregar una imagen al fondo de una página es probablemente la aplicación más común de laimagen de fondopropiedad. 1.En su editor de texto, abra el archivo08→bg_ex→bg_images.html. Esta página tiene un diseño básico de dos columnas: una página muy simple, con texto formateado sobre un fondo blanco (Figura 8-23, arriba). Para comenzar, agregará una imagen de fondo a la página. La página tiene una hoja de estilo externa con el formato básico, pero para evitar tener que leer todos los estilos de ese archivo, agregará una hoja de estilo interna para los pasos de este tutorial. 2.Haga clic entre la apertura y el cierre <estilo>etiquetasAgregue el siguiente estilo: cuerpo { imagen de fondo: url(images/bg_page.png); fondo-repetir: repetir-x; color de fondo: #FFF; } La primera línea de código apunta a la imagen:bg_pagina.png: desea mostrar en la página. El archivo se almacena en elimágenescarpeta. Este gráfico es un degradado que comienza como azul claro en la parte superior y se desvanece a blanco en la parte inferior. El gráfico no es tan alto como el contenido de la página, por lo que, sin más instrucciones, se colocaría en mosaico una y otra vez a lo largo ya lo ancho de la página. En cierto punto de la página, ese azul claro volvería a aparecer y se desvanecería una vez más hacia el blanco. Para evitar este problema antiestético, ha configurado elrepetición de fondopropiedad para que la imagen se coloque en mosaico de izquierda a derecha para adaptarse a cualquier ancho de la ventana del navegador, pero no en mosaicoabajola página. La última línea de código establece el color de fondo de la página para que coincida con el final del degradado, por lo que la imagen se desvanece sin problemas en el color de fondo de la página. Podrías pensar que usar un degradado lineal sería mucho mejor que usar una imagen con degradado. En algunos casos, eso es cierto. Sin embargo, al agregar un degradado lineal al fondo de una página, el navegador web literalmente tiene que volver a dibujar ese degradado de fondo cada vez que cambia el tamaño de la ventana del navegador, lo que provoca una ralentización notable de la representación de la página y hace que la página se sienta lenta. Además, debido a que los degradados lineales no funcionan en IE 9 o versiones anteriores sin algún código adicional, por ahora se quedará con una imagen de fondo. NotaUsando la abreviatura de propiedad de fondo, puede condensar las tres líneas de código del Paso 2 en una sola línea de CSS:fondo: url(images/bg_page.png) repetir-x #FFF. 3.Guarde el archivo y obtenga una vista previa en un navegador web. El degradado azul del gráfico de fondo gotea por la página. No está mal, pero el azul también aparece en el fondo del texto. Puede hacer que el texto destaque dándole al fondo un color diferente. Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 283 Tutorial: usando Fondo IMÁGENES 4.Regrese a su editor de texto y elbg_images.htmlarchivo.Agregue otro estilo para el <div>que contiene el contenido de la página: . envoltorio { color de fondo: #FFF; } Figura 8-23 Usando imágenes de fondo, puede hacer que una página que ya está bien organizada (izquierda) se vea mucho más elegante (derecha). Dado que puede agregar imágenes al fondo de cualquier etiqueta en una página, la posible colocación de gráficos en una página es casi ilimitada. El div contenedor tiene un ancho fijo, centrado en el medio de la página, que contiene todo el texto de la página. Este estilo le da un fondo blanco, pero con la ayuda de una imagen, puedes hacerlo mejor que eso. 5.Edite el estilo que creó en el Paso 4 agregando una imagen de fondo: . envoltorio { color de fondo: #FFF; imagen de fondo: url (imágenes/bg_main.jpg); posición de fondo: arriba a la izquierda; repetición de fondo: sin repetición; } Estas tres líneas de código agregan una imagen de fondo en la parte superior izquierda del <div>; elsin repeticiónopción para elrepetición de fondopropiedad significa que la imagen solo aparece una vez. Si guarda el archivo y obtiene una vista previa en un navegador web, ahora verá la imagen de una mano actuando como si estuviera sosteniendo la página. Muy genial. El único problema es que el texto está demasiado arriba, cubriendo la imagen. A continuación, empujará hacia abajo el título superior y la barra lateral izquierda. 6.Agregue dos estilos más a la hoja de estilo interna: . pancarta { margen superior: 48px; } . anuncio { margen superior: 115px; } 284 Css3: el manual perdido www.it-ebooks.info Tutorial: usando Fondo La primera línea solo agrega un poco de relleno, empujando hacia abajo el banner que contiene el título hasta que toca la parte superior de la página en blanco, mientras que el segundo estilo mueve la IMÁGENES barra lateral izquierda lo suficiente como para borrar la imagen de la mano. La página ahora debería verse como la Figura 8-24. Figura 8-24 CSS te permite combinar un color de fondo y una imagen de fondo, lo que resulta muy útil en este ejemplo. El área de texto principal tiene un color de fondo blanco que ayuda a separar el texto de la gradación que se desvanece en el fondo de la página. Además, un gráfico de una mano sosteniendo una hoja de papel agrega profundidad al diseño. Sustitución de bordes con gráficos ElbordeLa propiedad es una herramienta útil en su arsenal de diseño, pero la cantidad limitada de estilos de borde que ofrece CSS puede volverse aburrida. Una línea dibujada a mano con un poco de textura captará mejor la atención de sus visitantes que una simple y recta. Puede omitir la propiedad del borde y agregar cualquier tipo de línea que desee como imagen de fondo, muy fácil. En esta parte del tutorial, reemplazará el subrayado debajo de cada <h2>etiqueta en el área de texto principal con un gráfico personalizado que parece una línea dibujada a mano. 1.Regrese a su editor de texto y elbg_images.htmlarchivo.Agregar un estilo para el <h2> etiquetas dentro de la principal <div>etiqueta: . principal h2 { imagen de fondo: url(imágenes/subrayado.png); repetición de fondo: sin repetición; } Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 285 Tutorial: usando Fondo IMÁGENES Elimagen de fondopropiedad especifica qué gráfico usar en el fondo de <h2>etiquetas dentro de cualquier etiqueta con una clase deprincipal,mientras que elsin repetición value se asegura de que el gráfico solo aparezca una vez. Si obtiene una vista previa del archivo ahora, verá que el subrayado no se alinea exactamente. De hecho, no esbajoen absoluto. ¡Está por encima de los titulares! 2.Agregue la siguiente declaración de estilo al archivo .principal h2estilo debajo del repetición de fondopropiedad: posición de fondo: abajo a la izquierda; Cambió la ubicación inicial del gráfico para que aparezca en el borde izquierdo y en la parte inferior del <h2>etiquetas Sin embargo, si obtiene una vista previa de la página ahora, es posible que no note mucha mejora. El subrayado correenel texto del titular. Pero hay una solución fácil. Dado que el valor inferior utilizado aquí pone el gráfico en la parte inferior del bloque creado por el <h2>etiqueta, solo necesita aumentar la altura total del bloque para mover la línea un poco hacia abajo. Lo harás con un poco de relleno en la parte inferior. NotaCSS3 proporciona un medio para usar imágenes para los bordes. Desafortunadamente, es un poco complejo y no funciona en Internet Explorer 9 o anterior. Dado que puede lograr un efecto similar en este ejemplo usando una imagen de fondo, en este tutorial irá por ese camino. Sin embargo, si desea obtener más información sobre las imágenes de borde, visite www.css3files.com/border. 3.Edite el .principal h2estilo una última vez, para que se vea así: . principal h2 { imagen de fondo: url(imágenes/subrayado.png); repetición de fondo: sin repetición; posición de fondo: abajo a la izquierda; parte inferior del relleno: 7px; } El relleno, como recordará de la página 195, es el espacio entre el borde (también el borde del fondo) y el contenido. También aumenta la altura total del cuadro, en este caso, agregando 7 píxeles de relleno inferior. Ahora, el gráfico de líneas se coloca en la parte inferior de lah2bloque, pero en el espacio vacío creado por el relleno inferior. 4.Guarde el archivo y obtenga una vista previa de la página en un navegador web. Cada <h2>la etiqueta tiene el subrayado dibujado a mano. A continuación, abordará el cuadro de la barra lateral, haciéndolo parecer un poco menos cuadrado y animando las listas con viñetas. Uso de gráficos para listas con viñetas La viñeta promedio que se usa para las listas desordenadas es un punto negro, no muy inspirador. Pero puedes usar elimagen de fondoproperty para reemplazar esas viñetas monótonas con cualquier imagen que desee. El primer paso es ocultar las viñetas que normalmente aparecen junto a los elementos de la lista. 286 Css3: el manual perdido www.it-ebooks.info Tutorial: usando 1.Regrese a su editor de texto y elimágenes.htmlpágina.Agregue un estilo para dar formato a los elementos de la lista en la barra lateral izquierda. Fondo IMÁGENES . anuncio li { estilo de lista: ninguno; } La lista con viñetas está dentro de un <div>con una clase deanuncio,por lo que este selector descendente apunta solo a los elementos de la lista (<li>etiquetas) dentro de ese div. El estilo elimina la viñeta. Ahora agregue el gráfico. NotaTambién puedes aplicarestilo de lista: ninguno;a un estilo que afecta al <ul>o <viejo>etiquetas para eliminar viñetas decadaelemento de la lista. 2.Agregue las siguientes dos propiedades al archivo .anuncio liestilo: imagen de fondo: url(images/bullet.png); repetición de fondo: sin repetición; Has visto estas dos propiedades antes. Agregan una imagen al fondo y desactivan la repetición para que el gráfico aparezca solo una vez. Si obtiene una vista previa de la página, verá que las viñetas actualmente se superponen al texto de la lista y que los elementos de la lista están un poco atascados (Figura 8-25, izquierda). Un poco de relleno y margen arreglarán esto. 3.Agregue dos propiedades más al archivo .anuncio liestilo: relleno-izquierda: 25px; margen inferior: 10px; El relleno izquierdo agrega un espacio vacío, moviendo efectivamente el texto fuera del camino para mostrar el nuevo icono de viñeta. El margen inferior agrega un poco de espacio para respirar entre cada elemento de la lista (Figura 8-25, centro). Sólo hay un defecto final. La imagen de la viñeta está un poco demasiado arriba en la línea, lo que hace que la punta del icono sobresalga demasiado por encima del texto. Pero puedes arreglarlo fácilmente con elposición de fondopropiedad. 4.Termina este estilo agregandoposición de fondo: 0px 4px;.El estilo completo debería verse así: . anuncio li { estilo de lista: ninguno; imagen de fondo: url(images/bullet.png); repetición de fondo: sin repetición; posición de fondo: 0 4px; relleno-izquierda: 25px; margen inferior: 10px; } Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 287 Tutorial: usando Fondo IMÁGENES Esta última declaración de estilo coloca el icono de viñeta en el extremo izquierdo (esa es la0) y 4 píxeles desde la parte superior (4 píxeles)del elemento de la lista. Mueve el ícono hacia abajo solo un poco, lo suficiente para que la viñeta se vea perfecta. NotaComo se discutió en la página 255, este tipo de posicionamiento exacto es precisamente la razón por la que debe usar el fondopropiedad en lugar de laimagen de estilo de listapropiedad para agregar viñetas gráficas a sus listas. 5.Guarde el archivo y obtenga una vista previa de la página en su navegador. La lista ahora debería tener pestañas tridimensionales con signos de exclamación rojos en lugar de círculos negros tristes (Figura 8-25, derecha). Figura 8-25 Reemplazar las viñetas negras regulares con sus propios gráficos es fácil. Solo unos pocos pasos adicionales aseguran que las viñetas y el texto se coloquen en la ubicación correcta. Dar personalidad a la barra lateral En este punto, la barra lateral se ve bastante bien. El texto está bien formateado y las viñetas se ven geniales, pero la barra lateral se pierde un poco en el mar de blanco. Agregar una imagen de fondo puede hacer que la barra lateral se destaque de una manera caprichosa. Puede usar una sola imagen, la imagen de desplazamiento que se muestra en la imagen inferior de la Figura 8-23, en el fondo de <div>etiqueta, pero para asegurarse de que el texto se ajuste exactamente al desplazamiento, debe limitar la cantidad de contenido que coloca en la barra lateral. Demasiado texto y no cabrá encima de la imagen única (arriba a la izquierda en la Figura 8-12), demasiado poco y habrá demasiado espacio vacío en el gráfico. Un enfoque más flexible permitiría que la imagen crezca a medida que la barra lateral adquiera más contenido (abajo a la derecha en la Figura 8-12). Como se explica en la página 257, hay varias formas de lograr este efecto. Puede colocar la parte de fondo del pergamino (donde aparece el texto) como una imagen de fondo repetida en el div, luego colocar una imagen de fondo para la parte superior del pergamino en el título en la parte superior del div y una imagen de fondo en la parte inferior del elemento de la lista en la parte inferior del div. De hecho, ese es el método utilizado en ediciones anteriores de este libro. Sin embargo, ahora que la mayoría de los navegadores admiten múltiples fondos CSS3, puede usarlos en su lugar. Es mucho más simple y no requiere tres estilos diferentes para funcionar. 1.Regrese a su editor de texto y elbg_images.htmlarchivo.Localiza el .anuncioestilo que agregó en el Paso 6 en la página 284 y agregue una propiedad adicional: 288 Css3: el manual perdido www.it-ebooks.info Traducido del inglés al español - www.onlinedoctranslator.com Tutorial: usando Fondo IMÁGENES Esta última declaración de estilo coloca el icono de viñeta en el extremo izquierdo (esa es la0) y 4 píxeles desde la parte superior (4 píxeles)del elemento de la lista. Mueve el ícono hacia abajo solo un poco, lo suficiente para que la viñeta se vea perfecta. NotaComo se discutió en la página 255, este tipo de posicionamiento exacto es precisamente la razón por la que debe usar el fondopropiedad en lugar de laimagen de estilo de listapropiedad para agregar viñetas gráficas a sus listas. 5.Guarde el archivo y obtenga una vista previa de la página en su navegador. La lista ahora debería tener pestañas tridimensionales con signos de exclamación rojos en lugar de círculos negros tristes (Figura 8-25, derecha). Figura 8-25 Reemplazar las viñetas negras regulares con sus propios gráficos es fácil. Solo unos pocos pasos adicionales aseguran que las viñetas y el texto se coloquen en la ubicación correcta. Dar personalidad a la barra lateral En este punto, la barra lateral se ve bastante bien. El texto está bien formateado y las viñetas se ven geniales, pero la barra lateral se pierde un poco en el mar de blanco. Agregar una imagen de fondo puede hacer que la barra lateral se destaque de una manera caprichosa. Puede usar una sola imagen, la imagen de desplazamiento que se muestra en la imagen inferior de la Figura 8-23, en el fondo de <div>etiqueta, pero para asegurarse de que el texto se ajuste exactamente al desplazamiento, debe limitar la cantidad de contenido que coloca en la barra lateral. Demasiado texto y no cabrá encima de la imagen única (arriba a la izquierda en la Figura 8-12), demasiado poco y habrá demasiado espacio vacío en el gráfico. Un enfoque más flexible permitiría que la imagen crezca a medida que la barra lateral adquiera más contenido (abajo a la derecha en la Figura 8-12). Como se explica en la página 257, hay varias formas de lograr este efecto. Puede colocar la parte de fondo del pergamino (donde aparece el texto) como una imagen de fondo repetida en el div, luego colocar una imagen de fondo para la parte superior del pergamino en el título en la parte superior del div y una imagen de fondo en la parte inferior del elemento de la lista en la parte inferior del div. De hecho, ese es el método utilizado en ediciones anteriores de este libro. Sin embargo, ahora que la mayoría de los navegadores admiten múltiples fondos CSS3, puede usarlos en su lugar. Es mucho más simple y no requiere tres estilos diferentes para funcionar. 1.Regrese a su editor de texto y elbg_images.htmlarchivo.Localiza el .anuncioestilo que agregó en el Paso 6 en la página 284 y agregue una propiedad adicional: 288 Css3: el manual perdido www.it-ebooks.info Tutorial: usando Fondo . anuncio { fondo: url(images/scroll_top.jpg) parte superior central sin repetición, IMÁGENES url(images/scroll_bottom.jpg) parte inferior central sin repetición, url(images/scroll_middle.jpg) parte superior central repetida; margen superior: 115px; } Sí, esa es sólo una propiedad: lafondopropiedad, pero tiene tres imágenes diferentes. El orden en que enumeras estas imágenes es importante, ya que se apilan una encima de la otra. En este caso, la primera imagen es la parte superior del pergamino; solo aparece una vez (sin repetición)en la parte superior y central. La segunda imagen es la parte inferior del pergamino; también aparece solo una vez, pero en la parte inferior del div. Finalmente, la parte media del rollo—scroll_middle.jpg—se superpondrá debajo de las otras dos imágenes (ya que aparece en último lugar en la lista) y se repetirá a lo largo del eje y (arriba y abajo), por lo que si <div>se hace más alta, la imagen simplemente se convierte en mosaico para llenar el espacio. Si obtiene una vista previa de la página, verá algunos problemas. Primero, el texto aparece encima de las partes superior e inferior enrolladas del pergamino. Un poco de relleno arreglará eso. 2.Actualizar el .anuncioestilo para agregar relleno superior e inferior.Realice los cambios enumerados en negrita a continuación: . anuncio { fondo: url(images/scroll_top.jpg) parte superior central sin repetición, url(images/scroll_bottom.jpg) parte inferior central sin repetición, url(images/scroll_middle.jpg) parte superior central repetida; relleno: 70px 0 60px 0; margen superior: 115px; } Otro problema es que la lista con viñetas sobresale en los lados izquierdo y derecho de la imagen de la barra lateral. Para que la lista con viñetas quepa en el pergamino, debe agregar un margen izquierdo y derecho. 3.Localiza el .anuncio liestilo que creó anteriormente y agregue dos propiedades al final para que se vea así: # anuncio li { estilo de lista: ninguno; imagen de fondo: url(images/bullet.png); repetición de fondo: sin repetición; posición de fondo: 0 4px; relleno-izquierda: 25px; margen inferior: 10px; margen izquierdo: 30px; margen derecho: 40px; } Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 289 Tutorial: usando Fondo IMÁGENES Estas propiedades mueven los bordes izquierdo y derecho de cada elemento con viñetas lo suficiente como para borrar los bordes de la imagen de fondo. 4.Guarde el archivo y obtenga una vista previa en un navegador web. La página debería parecerse a la imagen de la derecha en la Figura 8-23, en todos los navegadores actuales excepto en Internet Explorer 8. Ese navegador no admite varias imágenes de fondo. Conseguir que el desplazamiento aparezca en IE 8 Si bien Internet Explorer 8 no admite varias imágenes, puede falsificarlas, especialmente si solo necesita dos o tres imágenes de fondo. Con el contenido generado (página 595), puede agregar texto o imágenes antes y después de cualquier elemento de una página. En este caso, puede agregar la parte superior del pergamino antes del div y la parte inferior del pergamino después del div. Si no está tan preocupado por admitir IE 8, puede omitir este paso, pero si desea ver cómo hacer que esto funcione en IE 8 y versiones posteriores, así como en todos los demás navegadores actuales, siga leyendo. 1.Edite el .anunciostyle por lo que solo hay una imagen de fondo (la mitad del desplazamiento) y sin relleno: . anuncio { fondo: url(images/scroll_middle.jpg) repetir-y centro superior; margen superior: 115px; } No necesitará el relleno, ya que las otras imágenes ocuparán espacio encima y debajo del div. A continuación, agregará la parte superior del pergamino como elemento anterior al div. 2.Agregue el siguiente estilo debajo del archivo .anuncioestilo: . anuncio:antes de { contenido: url (imágenes/scroll_top.jpg); } Como se menciona en la página 70, el:antespseudo-elemento le permite agregar contenido antes de una etiqueta. Esto podría ser texto o (como en este caso) una imagen. Ahora para la parte inferior del pergamino. 3.Agregue el siguiente estilo debajo de:antesestilo que acaba de agregar: . anuncio: después de { contenido: url (imágenes/scroll_bottom.jpg); } Esto agrega la parte inferior del desplazamiento después del div. Bueno, en realidad no va tras el div, va encima y el div se expande para adaptarse a él. De hecho, si obtiene una vista previa de la página, verá un poco del fondo del div (el pergamino) debajo de la parte inferior curva del pergamino. Lo arreglarás con un poco más de magia CSS. 290 Css3: el manual perdido www.it-ebooks.info Tutorial: usando 4.Edite el estilo que acaba de crear agregando dos líneas más de código (en negrita a continuación): Fondo IMÁGENES . anuncio: después de { contenido: url (imágenes/scroll_bottom.jpg); posición: relativa; abajo: -5px; } Te estás adelantando un poco aquí, ya que no aprenderás sobre elposición property en profundidad hasta el Capítulo 15, pero en pocas palabras, está moviendo la parte inferior del desplazamiento hacia abajo 5 píxeles para cubrir el fondo del div. Ahora la página debería verse como la imagen de la derecha en la Figura 8-23, y como la que creó en la parte anterior de este tutorial con múltiples imágenes. Encontrará ambas páginas en el08_terminado/03_bg_excarpeta:bg_images.html y bg_images_ie8.html. Capítulo 8:AGREGAR GRÁFICOS A PÁGINAS WEB www.it-ebooks.info 291 www.it-ebooks.info Capítulo 9 9 Arreglar tu Navegación del sitio I Es seguro decir que sin enlaces no habría Web. La capacidad de estar en una página, luego hacer clic en algo en la pantalla y de repente ver una página en una computadora a medio mundo de distancia es lo que hace que la Web sea tan útil. Los enlaces también son la forma en que sus visitantes navegan por su sitio web. Es por eso que los diseñadores web se preocupan por hacer que sus enlaces se vean bien y funcionen correctamente. En este capítulo, aprenderá a aplicar estilo a los enlaces para que se destaquen del resto del texto. También puede hacer que sus enlaces proporcionen pistas visuales para que los visitantes de su sitio puedan ver dónde están y dónde han estado. Aprenderá a usar CSS para crear botones en pantalla y barras de navegación como los usan los profesionales. Y en la sección de tutoriales, obtendrá experiencia práctica en la creación de un conjunto completo de funciones de navegación que funcionan en todos los navegadores. Seleccionando qué enlaces al estilo Como siempre en CSS, debe seleccionar algo antes de poder diseñarlo. Para los enlaces, debe decirle a CSS no soloquéquieres estilizar, pero tambiéncuandoquieres que se aplique ese estilo. Los navegadores web realizan un seguimiento de cómo un visitante interactúa con los enlaces y luego muestra ese enlace de manera diferente según el estado del enlace, oestado. Cuando utiliza un selector de enlaces CSS, también puede apuntar a un estado de enlace específico. Comprensión de los estados de enlace La mayoría de los navegadores reconocen cuatro estados de enlace básicos: un enlace no visitado, un enlace que ya ha sido visitado (lo que significa que la URL se almacena en el historial del navegador), un enlace sobre el que se encuentra el mouse del visitante y un enlace en el que se hace clic. Como se describe en 293 www.it-ebooks.info SELECCIONANDO ¿QUÉ ENLACES? De estilo El Capítulo 3, CSS, le brinda cuatro selectores de pseudoclases para acompañar estos estados: :enlace, :visitado, :pasar,y :activo.Utilizándolos, puede aplicar diferentes formatos a cada estado, por lo que no hay duda en la mente de su visitante si ha estado allí o ha hecho eso. NotaLos navegadores también reconocen una pseudoclase llamada:enfocar.Los enlaces obtienen:enfocarcuando los visitantes reacios al mouse usan el teclado para tabularlos. Esta pseudoclase también es divertida de usar con campos de texto de formulario, como verá en el tutorial de formularios en la página 395. Suponga que desea cambiar el color del texto de un enlace no visitado del aburrido azul del navegador a un naranja vivo. Agrega este estilo: a:enlace { color: #F60; } Una vez que alguien ha hecho clic en ese enlace, su estado cambia avisitado,y su color cambia al morado que usan la mayoría de los navegadores. Para cambiar ese color a rojo intenso, usa este estilo: a:visitado { color: #900; } CONSEJOCuando desee proporcionar un estilo que se aplique a todos los estados de enlace, por ejemplo, use la misma fuente y el mismo tamaño de fuente para todos los estados de enlace, aplique estilo al HTML <un>etiqueta creando un genéricoaselector. A continuación, puede utilizar los estilos de estado de enlace específicos:a: visitado,por ejemplo, para cambiar el color o de alguna otra manera personalizar el aspecto de ese estado. PALABRA A LOS SABIOS Límites de visitas Debido a problemas de privacidad, los navegadores han comenzado a eBay.com, BankofAmerica.com o not-safe-for-work.com. imponer límites estrictos sobre las propiedades de CSS que puede Debido a ese problema potencial, está limitado a diseñar el aplicar a:visitado pseudoclase. Resulta que algunos tipos nefastos han color de fondo,ycolor del borde de enlaces visitados, y solo si descubierto cómo usar JavaScript para leer los cambios en el estilo de: ya ha asignado un color, un color de fondo o un color de visitadoenlaces para determinar los sitios que la gente había visitado. borde a los estados normales de esos enlaces. En otras Por ejemplo, al cargar una nueva imagen de fondo para los enlaces palabras, no puedes hacer mucho con:visitado pseudo-clase visitados, puede determinar si un visitante ha estado en Paypal.com, por más tiempo. El :flotarpseudo-clase ofrece muchas posibilidades creativas; aprenderá algunos más adelante en este capítulo. Le permite alterar completamente el aspecto de un enlace cuando un visitante mueve el mouse sobre él. Si ha utilizado JavaScript engorroso para hacer que los botones gráficos cambien cuando el mouse pasa sobre ellos, le encantará poder crear el mismo efecto solo con CSS. Pero para comenzar con un ejemplo simple, este estilo cambia el color de un enlace cuando el mouse pasa sobre él: a: pasar el cursor {color: #F33; } 294 Css3: el manual perdido www.it-ebooks.info SELECCIONANDO CONSEJOTenga cuidado al agregar propiedades CSS a:flotarpseudo-clase. Las propiedades que cambian el tamaño del elemento flotante pueden afectar a otros elementos a su alrededor. Por ejemplo, si aumenta el tamaño de la fuente de un enlace ¿QUÉ ENLACES? De estilo de texto sobre el que se desplaza el mouse, el texto del enlace crecerá y apartará otros elementos del camino. El efecto puede ser discordante. Y finalmente, si usted es uno de esos diseñadores obsesivo-compulsivos que no dejan piedra de diseño sin remover, puede incluso cambiar el aspecto de un enlace durante los pocos milisegundos en que un visitante hace clic en él. Así es cómo: a:activo {color: #B2F511; } En la mayoría de los casos, probablemente tendrá un genéricoaestilo, :visitado,y :flotarestilos en sus hojas de estilo. Para obtener el máximo control del diseño, es posible que desee diseñar todos los diferentes estados. Pero para que eso funcione, debe especificar los enlaces en un orden particular: vincular, visitar, desplazar,yactivo.Usa este mnemotécnico fácil para recordarlo:Lovmi/ JATe. Esta es la forma correcta de agregar los cuatro estilos de enlace: a:enlace { color: #F60; } a:visitado { color: #900; } a: hover {color: #F33; } a:activo {color: #B2F511; } Si cambia el orden, los estados flotante y activo no funcionarán. Por ejemplo, si ponesa: flotarantesun enlaceya: visitado,entonces el cambio de color no tendrá efecto al pasar el mouse. Nota¿Por qué importa el orden? Eso sería gracias a nuestro amigo la cascada (ver Capítulo 5). Todos esos estilos tienen la misma especificidad, por lo que el orden en que aparecen en el código determina el estilo que gana. Un enlace puede ser ambosno visitadoyse cernía sobre. Entonces si elun enlaceel estilo ocupa el último lugar en el código, luego gana y el color dea: flotarnunca se aplica. Orientación a enlaces particulares Los estilos del apartado anterior son básicos.aestilos de etiquetas. Apuntan a ciertos estados de enlace, pero diseñantodoenlaces en una página. ¿Qué sucede si desea diseñar algunos enlaces de una manera y otros enlaces de otra? Una solución simple es aplicar una clase a etiquetas de enlace particulares. Supongamos que tiene un montón de enlaces dentro del cuerpo de un artículo, algunos de los cuales apuntan a sitios que desea resaltar (por ejemplo, enlaces a sitios web que pertenecen a sus amigos, socios comerciales o patrocinadores). Es posible que desee identificar estos enlaces para que las personas sepan que son especiales y es más probable que hagan clic en ellos. En este caso, puede aplicar una clase a estos enlaces externos, así: <a href="http://www.hydroponicsonline.com" class="sponsor">Visita este gran recurso</a> Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 295 SELECCIONANDO ¿QUÉ ENLACES? De estilo Para diseñar este enlace a su manera, crearía estilos como este: a.sponsor { familia tipográfica: Arial, sans-serif; } a.sponsor:enlace { color: #F60; } a.sponsor:visited { color: #900; } a.sponsor:hover { color: #F33; } a.sponsor:active {color: #B2F511; } Dejando de lado elay solo especificar la clase también funciona: . patrocinador { familia tipográfica: Arial, sans-serif; } . patrocinador:enlace { color: #F60; } . patrocinador: visitado { color: #900; } . patrocinador: flotar { color: #F33; } . patrocinador:activo {color: #B2F511; } Ahora solo aquellos enlaces con una clase de "patrocinador" obtendrán este formato. NotaEstos ejemplos solo cambian los colores de los enlaces, pero eso es solo para simplificar la demostración. Puedes usar cualquierPropiedad CSS para formatear enlaces (excepto:visitadoenlaces, como se explica en el recuadro de la página 296). Como verá en la siguiente sección, tiene muchas formas creativas de diseñar enlaces. Agrupar enlaces con selectores descendientes Si un montón de enlaces aparecen juntos en un área de una página, también puede ahorrar tiempo utilizandoselectores descendientes. Digamos que tiene cinco enlaces que conducen a las secciones principales de su sitio. Representan su barra de navegación principal, por lo que desea darles un aspecto distintivo. Simplemente envuelva esos enlaces en HTML5 <navegación>etiqueta. Ahora tiene una manera fácil de identificar y formatear solo esos enlaces: nav a { familia de fuentes: Arial, sans-serif; } nav a: enlace { color: #F60; } nav a: visitado { color: #900; } nav a: hover { color: #F33; } nav a:activo {color: #B2F511; } Alternativamente, puede usar un <div>etiqueta (si aún no está listo para las etiquetas HTML5) y agregue una clase a ese div: <div class="mainNav">: . mainNav a { familia de fuentes: Arial, sans-serif; } . mainNav a:enlace { color: #F60; } . mainNav a: visitado { color: #900; } . mainNav a: hover { color: #F33; } . mainNav a:activo {color: #B2F511; } Al usar selectores descendientes, es fácil diseñar enlaces de manera diferente para diferentes áreas de una página web. (Vea la página 553 en el Capítulo 17 para una discusión detallada del poder de los selectores descendientes.) 296 Css3: el manual perdido www.it-ebooks.info CONSEJOEs muy común usar listas con viñetas para presentar enlaces (verá un ejemplo de esta técnica en la página 304). En este caso, puede agregar una ID o clase al <ul>etiqueta para la lista—<ul class="mainNav">,por ejemplo, ENLACES DE ESTILO luego cree selectores descendientes como .navegación principal a: enlacepara darles estilo. Estilo de enlaces Ahora que sabe cómo crear un selector que apunte a enlaces, ¿cómo debería diseñarlos? ¡De cualquier forma que quieras! No hay ninguna propiedad CSS destinada solo para enlaces. Tiene acceso a todas las propiedades de CSS, por lo que solo está limitado por su imaginación. Solo asegúrese de que sus enlaces se vean como enlaces. No es que tengan que ser azules y estar subrayados, pero los enlaces deben tener un aspecto diferente al texto sin enlaces para que los visitantes sepan que pueden hacer clic en ellos. Si hace que un enlace parezca un botón, agregando un borde, incluido un fondo y haciendo que cambie de color cuando se pasa el mouse sobre él, la mayoría de las personas entenderán que pueden hacer clic en él. O utilice un degradado lineal (página 260) para agregar textura y profundidad a un vínculo. Del mismo modo, los enlaces que aparecen en pasajes largos de texto deben verse claramente distintos. Puede hacer que los enlaces se destaquen poniendo el texto en negrita, manteniendo el subrayado tradicional, coloreando el fondo o agregando un estilo de desplazamiento. Incluso puede agregar un gráfico (como una flecha) que proporcione una señal visual clara de que hacer clic en el texto lo lleva a otro lugar. CONSEJOA menos que establezca un <imagen>etiquetasbordeatribuir a0,Internet Explorer agrega un borde alrededor de las imágenes vinculadas. Para evitar que esto suceda, agregue este estilo básico a sus hojas de estilo:img {borde: ninguno; }. Subrayado de enlaces Desde el comienzo de la Web, el texto azul vibrante subrayado ha señalado: "Haga clic aquí para ir allí". Pero ese subrayado y color son a menudo las dos primeras cosas que un diseñador quiere cambiar. Los subrayados son una forma tan común de marcar un enlace que resultan aburridos (#1 en la Figura 9-1). Afortunadamente, puede hacer varias cosas para eliminar o mejorar el subrayado estándar, al mismo tiempo que se asegura de que sus enlaces sean identificables: • Elimina el subrayado por completo.Para eliminar el subrayado normal, utilice el decoración de textopropiedad y laningunovalor: a {decoración de texto: ninguno;} Por supuesto, eliminar el subrayado por completo puede confundir a sus visitantes. A menos que proporcione otras señales visuales, sus enlaces se ven exactamente igual que el resto del texto (#2 en la Figura 9-1). Entonces, si sigue esta ruta, asegúrese de resaltar los enlaces de alguna otra manera, como poner el texto del enlace en negrita (#3 en la Figura 9-1), colorear el fondo, agregar un gráfico informativo o hacer que el enlace se vea como un (página 305). Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 297 ENLACES DE ESTILO • Subrayar al pasar el ratón por encima.Algunos diseñadores eliminan los subrayados de todos los enlaces, los resaltan de alguna otra manera y luego vuelven a agregar los subrayados cuando el visitante mueve el mouse sobre el enlace (#4 en la Figura 9-1). Para hacerlo, simplemente elimine el subrayado de los enlaces y luego vuelva a introducirlo usando el:flotarpseudo-clase: a{ texto-decoración: ninguno; color de fondo: #F00; } a: pasar el cursor { color de fondo: transparente; decoración de texto: subrayado; } Figura 9-1 Tiene muchas maneras de hacer que la línea aburrida (1) debajo de los enlaces sea más emocionante. Comience eliminando el enlace por completo (2, 3, 4). Mejor aún, cree un enlace más estilizado usando la propiedad de borde (5) o una imagen de fondo (6). • Usa un borde inferior.No puede controlar el color, el ancho o el estilo de un subrayado de enlace regular. Siempre es una línea continua de 1 píxel del mismo color que el texto del enlace. Para una mayor variedad, utilice elborde inferioren su lugar (#5 en la Figura 9-1). Ocultar el subrayado normal y agregar un borde de línea discontinua se ve así: 298 Css3: el manual perdido www.it-ebooks.info a{ ENLACES DE ESTILO texto-decoración: ninguno; borde inferior: discontinuo 2px #9F3; } Puede modificar el estilo, el ancho y el color del borde. Para poner más espacio entre el texto y el borde, utilice elrellenopropiedad. • Usa una imagen de fondo.Puede personalizar aún más el aspecto de los enlaces utilizando una línea gráfica. Por ejemplo, el #6 en la Figura 9-1 usa un gráfico que parece una línea dibujada a mano. Existe una técnica similar para subrayar títulos en el tutorial del Capítulo 8 (página 285). Comience creando un gráfico subrayado con un programa como Fireworks o Photoshop, que tienen herramientas de pincel que simulan el aspecto de un crayón, un rotulador o lo que sea. A continuación, cree un estilo para el enlace que elimine el subrayado normal y agregue una imagen de fondo. Asegúrese de que el gráfico se repita horizontalmente y esté colocado en la parte inferior del enlace. Es posible que también deba agregar un pequeño relleno inferior para colocar la línea. Aquí hay un ejemplo: a{ texto-decoración: ninguno; fondo: url(images/underline.gif) repetir-x abajo a la izquierda; parte inferior del relleno: 5px; } Crear un botón También puede hacer que los vínculos se parezcan a los botones de los cuadros de diálogo y las barras de herramientas que ve en los programas de escritorio. Los botones se ven muy bien en las barras de navegación, pero también puede usarlos para cualquier enlace pequeño (de una o dos palabras) en sus páginas. Sus principales aliados en esta tarea son loscolor de fondo,yrellenopropiedades. Con ellos, es fácil crear una amplia gama de botones que parecen cuadrados (vea la Figura 9-2). Supongamos que agregó una clase a un enlace que le gustaría diseñar como un botón: <a href="stale . html" class="button">¡Donas gratis aquí!</a>.Para agregar un contorno negro básico alrededor de este enlace (como la imagen superior izquierda en la Figura 9-2), crearía este estilo: un botón { borde: sólido 1px #000; } Puede volverse más elegante agregando un color de fondo también, así: un botón { borde: sólido 1px #000; color de fondo: #333; } Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 299 ENLACES DE ESTILO NotaEn estos ejemplos, ambosun botóno .botónfuncionaría para nombres de estilo. En el caso de un botón,el estilo solo se aplica a <un>etiquetas con la clasebotón,mientras .botónse aplica a cualquier etiqueta con ese nombre de clase. Si desea asegurarse de que el estilo solo se aplique a una etiqueta en particular, agregue el nombre de la etiqueta al principio. Agregar el nombre de la etiqueta también es un recordatorio útil al revisar su código CSS: proporciona una pista valiosa sobre el formato que se pretende que tenga el estilo. Cuando veasun botón,está claro que el estilo está dirigido a enlaces particulares. Figura 9-2 Usar el borde, el fondo y el relleno properties para convertir un enlace en un botón obviamente en el que se puede hacer clic. Simplemente agregando un borde (arriba a la izquierda) puede ser suficiente para transmitir el mensaje. O puede crear botones de apariencia más sofisticada al combinando diferentes bordes de diferentes colores, estilos y anchos con el color de fondo propiedad (página 206). Y, para aquellos navegadores que soportanlineal- degradado(página 260), sombra de texto(página 166),sombra de la caja (página 210), y esquinas redondeadas conborderadio(página 207), puede lograr algunos efectos de aspecto verdaderamente notables (fila inferior). Eso sí, no es necesario que los cuatro bordes tengan el mismo ancho, tipo o color. Ni siquiera tienes que tener cuatro bordes. Una técnica de diseño común es agregar un aspecto biselado a un botón usando cuatro colores de borde diferentes, como se muestra en la parte superior derecha de la Figura 9-2. Crear el aspecto biselado no es difícil, pero debe recordar qué hace que algo parezca tridimensional: la fuente de luz. Imagina una luz brillando en uno de los cuatro lados; ese lado es el más claro, mientras que el lado opuesto es el más oscuro (ya que el botón elevado bloquea la luz y pone ese lado en una "sombra"). Los otros dos lados deben tener sombras entre los bordes "iluminado" y "sombreado". Aquí está el CSS utilizado para crear el diseño biselado en la esquina superior derecha de la Figura 9-2: 300 Css3: el manual perdido www.it-ebooks.info un botón { ENLACES DE ESTILO fondo: #B1B1B1; color: #FFF; fuente-peso: negrita; ancho del borde: 4px; estilo de borde: sólido; borde-superior-color: #DFDFDF; borde-derecho-color: #666; borde-fondo-color: #333; bordeizquierdo-color: #858585; } Tenga en cuenta que puede (y probablemente debería) crear un:flotarestado para sus botones también. De esa manera, sus botones pueden reaccionar cuando un visitante mueve su mouse sobre el enlace, brindando comentarios visuales útiles. En el caso de un botón biselado, invertir los distintos colores (aclarar un fondo oscuro, oscurecer un borde claro, etc.) es muy efectivo. El uso de degradados lineales y esquinas redondeadas, las sombras de cuadro y texto realmente pueden agregar profundidad a un botón. Por ejemplo, el botón en la parte inferior central de la Figura 9-2 se crea con este código: 1. color de fondo: #ee432e; 2. imagen de fondo: -webkit-linear-gradient(superior, #ee432e 0 %, #c63929 50 %, 3. #b51700 50%, #891100 100%); 4. imagen de fondo: -moz-linear-gradient(arriba, #ee432e 0%, #c63929 50%, 5. #b51700 50%, #891100 100%); 6. imagen de fondo: -o-lineal-gradiente (superior, #ee432e 0%, #c63929 50%, #b51700 7. 50%, #891100 100%); 8. imagen de fondo: degradado lineal (superior, #ee432e 0 %, #c63929 50 %, #b51700 9. 50%, #891100 100%); 10. borde: 1px sólido #951100; 11. borde-radio: 5px; 12. box-shadow: recuadro 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px 13. n.º 333333; 14. relleno: 12px 20px 14px 20px; 15. texto-decoración: ninguno; 16. color: #fff; 17. fuente: negrita 20px/1 “helvetica neue”, helvetica, arial, sans-serif; 18. alineación de texto: centro; 19. sombra de texto: 0px -1px 1px rgba(0, 0, 0, 0.8); La línea 1 establece un color de fondo rojo intenso; este color se proporciona para los navegadores que no entienden los gradientes lineales (IE 9 y versiones anteriores, así como otros navegadores más antiguos). Las líneas 2 a 5 configuran un degradado lineal para varios navegadores. La línea 6 agrega un borde simple, mientras que Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 301 ENLACES DE ESTILO la línea 7 crea las esquinas redondeadas y la línea 8 agrega una sutil sombra insertada y una segunda sombra debajo del botón; en otras palabras, aplica dos sombras paralelas, lo cual es perfectamente legal, como se describe en la página 211. La línea 9 agrega relleno para proporcionar espacio alrededor del texto del botón y el borde del botón, mientras que la línea 10 elimina el subrayado que normalmente aparece debajo de los enlaces. Las últimas líneas establecen propiedades para el texto en el botón, incluido su color, fuente, alineación y sombra de texto. CONSEJOLa creación de botones atractivos a menudo implica acumular propiedades CSS (como puede ver en el código anterior). Si necesita un poco de ayuda para crear todo ese código, consulte el generador de botones CSS3http://css3button.net. Para ver otros excelentes ejemplos de botones CSS3, visitehttp://hellohappy.org/css3-buttons/yhttp://murodediseñadorweb. com/tutorials/css3-gradiente-botones. Uso de gráficos Agregar gráficos a los enlaces es una de las maneras más fáciles y visualmente más emocionantes de mejorar la navegación de su sitio. Hay una gran cantidad de técnicas y diseños posibles, pero ninguno de los buenos involucra un HTML <imagen>etiqueta. En cambio, puede agregar fácilmente imágenes atractivas e informativas a cualquier enlace usando el CSSimagen de fondopropiedad. Puede ver varios ejemplos en la Figura 9-3. (También aprenderá técnicas más avanzadas para usar imágenes para crear botones gráficos y rollovers a partir de la página 314). Figura 9-3 Incluso un simple gráfico puede animar un enlace y aclarar su propósito. Un icono de globo (abajo a la izquierda) es una forma de indicar un enlace externo. Si necesita un repaso enimagen de fondoy propiedades relacionadas, regrese a la página 240. Mientras tanto, aquí hay algunas cosas que debe tener en cuenta cuando usa imágenes con enlaces: • no olvidesno-repetirNormalmente, un gráfico de fondo se muestra repetidamente en el fondo. Con muchos gráficos, ese efecto se ve horrible para los enlaces (arriba a la derecha, Figura 9-3). A menos que esté utilizando un patrón sutil como un relleno degradado, recuerde configurar la opción de repetición para detener el mosaico de esta manera:repetición de fondo: sin repetición;. 302 Css3: el manual perdido www.it-ebooks.info • Colocación de control conposición de fondo.Para colocar una imagen con precisión en el fondo, utilice elposición de fondopropiedad (página 246). Cuando desee colocar una imagen en el extremo derecho de un enlace pero centrada verticalmente en la línea, use este CSS:posición de fondo: centro derecha. ENLACES DE ESTILO Para una ubicación más precisa, use un valor específico como píxeles o ems. Estas unidades de medida facilitan el desplazamiento rápido de un gráfico a un par de píxeles del borde izquierdo del enlace. Al combinar estas unidades con un valor porcentual, puede centrar fácilmente un gráfico verticalmente dentro de un enlace pero colocarlo a una distancia exacta del borde izquierdo:posición de fondo: 10px 50%;. CONSEJOAl colocar imágenes de fondo, el primer valor es la ubicación horizontal (de izquierda a derecha); el segundo es la colocación vertical (de arriba hacia abajo). Desafortunadamente, no hay forma de colocar exactamente una imagen desde los bordes derecho o inferior. Entonces, si desea mover una imagen desde el borde derecho un poco, entonces tiene dos opciones: primero, en su programa de edición de imágenes, puede agregar un espacio vacío al borde derecho del gráfico. La cantidad de espacio vacío que agregue debe ser equivalente a cuánto desea sangrar ese gráfico desde la derecha. Una vez que haya creado el gráfico, utilice elposición de fondopropiedad para colocar el gráfico en el borde derecho del elemento: por ejemplo,posición de fondo: arriba a la derecha;.O puede usar valores porcentuales:posición de fondo: 90% 75%; coloca el punto que se encuentra al 90 por ciento del borde izquierdo de la imagen encima del punto al 90 por ciento del borde izquierdo del elemento con estilo. Como puede imaginar, este método no proporciona una precisión completa, por lo que deberá experimentar un poco. (Consulte la página 249 para obtener más información sobre cómo funciona el posicionamiento porcentual). • El acolchado te da espacio.Si está utilizando una imagen o icono para marcar un enlace, asegúrese de agregar relleno en el lado en el que se encuentra la imagen para quitar el texto del enlace. Por ejemplo, el tercer ejemplo de la Figura 9-3 tiene 30 píxeles de relleno a la izquierda para evitar que la palabra "Hogar" se superponga a la imagen de la casa, mientras que un pequeño relleno a la derecha deja espacio para el globo terráqueo en la imagen inferior izquierda. NotaDado que la etiqueta <a> es un elemento en línea, agregar relleno superior e inferior (o, para el caso, márgenes superior e inferior) no tiene ningún efecto. Consulte la página 200 para saber por qué. Sin embargo, puede convertir un enlace en un elemento a nivel de bloque (bloqueo de pantalla)por lo que puede aceptar relleno y márgenes superior e inferior, o usar el bloque en línea configuración (pantalla: bloque en línea).Verá ambas técnicas más adelante en este capítulo. • Usa las pseudoclases.No olvides el:flotary :visitadopseudo-clases. Pueden agregar excelentes efectos dinámicos y proporcionar comentarios útiles sobre sus enlaces. Puedes intercambiar en undiferentegráfico de fondo para cualquiera de estas pseudoclases. Por ejemplo, podría tener un gráfico de bombilla tenue en el fondo de un enlace normal, pero cambiar ese gráfico a una bombilla encendida cuando el mouse se desplaza sobre él. Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 303 Edificio navegación Barras Si decide utilizar un gráfico para un enlace:flotarestado, tenga en cuenta que los navegadores no descargan el gráfico hasta que el mouse de su visitante realmente pasa sobre el enlace, por lo que habrá un retraso notable antes de que aparezca el gráfico. Sin embargo, una vez que se descarga el gráfico, el retraso desaparece. Consulte la página 313 para conocer una técnica para evitar este incómodo problema. Construcción de barras de navegación Cada sitio necesita buenas funciones de navegación para guiar a los visitantes a la información que buscan y ayudarlos a encontrar el camino de regreso. La mayoría de los sitios están organizados en secciones, como Productos, Información de contacto, Blog corporativo, etc. Esta estructura les permite a los visitantes saber qué información esperar y dónde pueden encontrarla. La mayor parte del tiempo, encuentra enlaces a las secciones principales de un sitio en unbarra de navegación. CSS facilita la creación de una barra de navegación atractiva, efectos de rollover y todo. Uso de listas desordenadas En el fondo, una barra de navegación no es más que un montón de enlaces. Más específicamente, en realidad es unlistade las diferentes secciones de un sitio. En el Capítulo 1, aprendió que la misión de HTML es proporcionar una estructura significativa a su contenido. En consecuencia, siempre debe usar una etiqueta que sea apropiada para el significado de ese contenido. Para una lista de elementos, ese es el <ul>o etiqueta de lista desordenada, la misma que usa para crear listas con viñetas. No importa si desea que su lista tengaNoviñetas o para estirar horizontalmente a lo largo de la parte superior de la página: puede hacer todo eso diseñando el <ul>etiqueta con CSS. La Figura 9-4 muestra un ejemplo. Figura 9-4 Usando CSS, puede doblar HTML ordinario<ul>etiquetas a su gusto y conviértalas en barras de navegación verticales u horizontales. Parafraseando una frase clásica de una película, "No necesitamos balas apestosas". El HTML de una barra de navegación es sencillo. Hay un solo enlace dentro de cada elemento de la lista individual. Además, necesita una forma de diseñar solo esa lista desordenada. (No quieres actual listas de elementos para que parezcan barras de navegación). Aplicar una clase o id al <ul> etiqueta es un buen enfoque: 304 Css3: el manual perdido www.it-ebooks.info Edificio navegación <ul clase="navegación"> <li><a href="index.html">Inicio</a></li> <li><a Barras href="noticias.html">Noticias</a></li> <li><a href ="reviews.html">Reseñas</a></li> </ul> El CSS varía un poco dependiendo de si desea una barra de navegación horizontal o vertical. En cualquier caso, debe hacer dos cosas: • Retire las balas.A menos que se suponga que la barra de navegación debe verse como una lista con viñetas, elimine las viñetas configurando eltipo-estilo-listapropiedad a ninguno: ul.nav { tipo-estilo-lista: ninguno; } • Elimine el relleno y los márgenes.Dado que los navegadores sangran los elementos de la lista desde la izquierda, también debe eliminar este espacio agregado. Algunos navegadores hacen la sangría usandorelleno,y otros usanmargen,por lo que debe establecer ambos en 0: ul.nav { tipo-estilo-lista: ninguno; relleno-izquierda: 0; margen izquierdo: 0; } Básicamente, estos dos pasos hacen que cada elemento de la lista se vea como cualquier elemento simple a nivel de bloque, como un párrafo o un título (excepto que un navegador no inserta márgenes entre los elementos de la lista). En este punto, puede comenzar a diseñar los enlaces. Si desea una barra de navegación vertical, siga leyendo; para barras de navegación horizontales, consulte la página 307. Barras de navegación verticales Una barra de navegación vertical es solo un montón de enlaces apilados uno encima del otro. Quitar las viñetas, el margen izquierdo y el relleno (como se explicó en la sección anterior) lo lleva casi todo el camino, pero necesita conocer algunos trucos adicionales para que las cosas se vean bien: 1.Muestra el enlace como un bloque. Desde el <un>La etiqueta es un elemento en línea, es tan ancho como el contenido que contiene. Los botones con texto de diferente longitud (como Inicio y Nuestros productos) tienen diferentes anchos. La apariencia escalonada de botones de diferentes anchos apilados uno encima del otro no se ve bien, como puede ver en el n.º 1 de la Figura 9-5. Además, el relleno superior e inferior y los márgenes no tienen efecto en los elementos en línea. Para sortear estas limitaciones, diseña el enlace como un elemento de bloque: ul.nav a { bloqueo de pantalla; } Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 305 Edificio navegación Barras El valor del bloque no solo hace que cada botón tenga el mismo ancho, sino que también hace que se pueda hacer clic en toda el área del enlace. De esa forma, cuando sus visitantes hagan clic en áreas donde no hay texto de enlace (como el relleno alrededor del enlace), seguirán activando el enlace. 2.Restringir el ancho de los botones. Hacer que los enlaces sean elementos a nivel de bloque también significa que son tan anchos como la etiqueta en la que están anidados. Entonces, cuando están sentados en una página, esos enlaces se extienden a lo ancho de la ventana del navegador (#2 en la Figura 9-5 ). Tienes varias formas de hacerlos un poco más angostos. Primero puedes establecer el ancho de <un>etiqueta. Si desea que cada botón tenga 8 ems de ancho, por ejemplo, agréguelo alanchopropiedad: Figura 9-5 En solo cuatro sencillos pasos, puede convertir una lista desordenada de enlaces en una atractiva barra de navegación. ul.nav a { bloqueo de pantalla; ancho: 8em; } Establecer un ancho para cualquiera de las etiquetas que envuelven esos enlaces, como el <li>o <ul>etiquetas—también funciona. 306 Css3: el manual perdido www.it-ebooks.info Si el texto del botón ocupa solo una línea, también puede centrar el texto verticalmente para que haya Edificio navegación el mismo espacio por encima y por debajo del texto del enlace. Simplemente agregue una altura al Barras enlaceyestablecer sualtura de la líneapropiedad al mismo valor: a{ altura: 1,25 cm; altura de línea: 1,25 em; } NotaEs posible que no necesite establecer un ancho explícito si la barra de navegación está dentro de un elemento de diseño de página que tiene un ancho. Como leerá en la tercera parte, es fácil crear una barra lateral que abrace el borde izquierdo (o derecho) de una página. La barra lateral tiene un ancho establecido, por lo que colocar la barra de navegación de la lista desordenada dentro de ella restringe automáticamente el ancho de los botones. Ahora que todo este trabajo está fuera del camino, puede diseñar los botones al contenido de su corazón. Agregue relleno, colores de fondo, márgenes, imágenes o lo que sea que le haga cosquillas a su fantasía artística. Si desea extender los botones para que no se toquen, agregue un margen inferior (o superior) a cada enlace. Barras de navegación horizontales CSS le permite convertir un conjunto de elementos de lista apilados en una presentación de enlaces uno al lado del otro, como la que se muestra en la Figura 9-4. Esta sección le muestra dos formas comunes de crear una barra de navegación horizontal a partir de una lista. El primero—usando el pantalla: bloque en líneapropiedad: es fácil, pero generalmente conduce a un pequeño espacio entre los botones. Hay una forma de evitar esto, pero implica preocuparse por su HTML. Si desea una barra de navegación horizontal donde los botones se toquen, cambie a la < flotanteul>método descrito en la página 310. TALLER DE TRABAJO Cuando las fronteras chocan Si los botones de la barra de navegación se tocan y aplica un class con el estilo de borde inferior correcto y aplíquelo al último enlace, borde alrededor de cada vínculo, los bordes se duplican. En otras o mejor aún, agregue un borde inferior a la etiqueta <ul> que encierra palabras, el borde inferior de un botón toca el borde superior del la barra de navegación. (Verá este truco en acción en el tutorial de este siguiente botón. capítulo en la página 310). Para evitar esto, agregue el borde solo a laarribade cada enlace. De esa Lo mismo ocurre cuando tienes enlaces horizontales. En este caso, los bordes manera, obtendrá solo una línea de borde donde la parte inferior de derecho e izquierdo de los botones adyacentes se tocan. Simplemente cada botón toca la parte superior del siguiente. desactive los bordes izquierdos de los botones y agregue un borde izquierdo a Sin embargo, esta solución deja toda la barra de navegación sin bordes debajo la etiqueta contenedora: el <ul>etiqueta, por ejemplo. del último enlace. Para solucionar ese problema, puede crear un Cualquiera que sea el método que utilice, comience eliminando las viñetas y el espacio dejado del <ul> etiqueta, como se ilustra en el #1 en la Figura 9-6. Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 307 Edificio navegación Barras Figura 9-6 Crear un menú horizontal a partir de una lista desordenada de enlaces requiere solo unos pocos pasos. Sin embargo, usando elen líneaybloque en líneaEl método da como resultado un espacio notable entre los botones (encerrados en un círculo). Consulte la nota en la página 303 para conocer el motivo y una posible solución. UTILIZANDO DISPLAY: INLINE Y DISPLAY: INLINE-BloCK El método más simple para crear una barra de navegación horizontal consiste en cambiar el mostrar propiedad de los elementos de la lista debloquearaen línea.Es fácil de hacer usando CSS. 1.Cree un estilo para la lista desordenada para eliminar cualquier relleno, márgenes y viñetas. ul.nav { margen izquierdo: 0px; relleno-izquierda: 0px; estilo de lista: ninguno; borde inferior: 1px punteado #000; } En este caso, también agregó un borde inferior, que aparecerá debajo de los botones (vea el n.º 1 en la Figura 9-6). 2.Haga que los elementos de la lista sean elementos en línea. Los elementos en línea no crean un salto de línea antes o después de ellos como lo hacen los elementos a nivel de bloque. Configuración de lamostrarpropiedad del <li>etiquetas aen línea los hace aparecer uno al lado del otro (#2 en la Figura 9-6). . nav li { pantalla: en línea; } Sin embargo, debe asegurarse de no tener demasiados botones. Si no encajan todos uno al lado del otro, algunos caerán debajo de la primera fila. 308 Css3: el manual perdido www.it-ebooks.info NotaTambién podrías usarbloque en líneapara el estilo anterior, pero solo si no le importa Internet Explorer 7, que solo le permite aplicarbloque en líneaa elementos en línea como enlaces, no a elementos de nivel de bloque como el < Edificio navegación Barras li>etiqueta. 3.Dale estilo a los enlaces. Puede eliminar el subrayado debajo de los enlaces y agregar un borde alrededor de ellos. También puede agregar color de fondo o una imagen de fondo para proporcionar profundidad visual. Agregue relleno si necesita más espacio alrededor del texto de cada enlace. Si desea algo de espacio entre cada botón, aplique un margen derecho. El siguiente estilo le da a los enlaces una apariencia similar a un botón, como se muestra en los números 3 y 4 en la Figura 9-6: . navegar un { pantalla: bloque en línea; borde: 1px punteado #000; borde inferior: ninguno; relleno: 5px 15px 5px 15px; color de fondo: #EAEAEA; texto-decoración: ninguno; color: #333; } En primer lugar, debe configurar elmostrarpropiedad de los enlaces abloque en línea. Esto asegura que se respeten los márgenes y el relleno superior e inferior (como se describe en la página 200, normalmente los elementos en línea ignoran los márgenes y el relleno superior e inferior, así como los valores de ancho y alto). Luego puede diseñar los botones al contenido de su corazón. Aquí, agregó un borde a los enlaces y eliminó el borde inferior para que no se duplique en el borde inferior aplicado a la lista desordenada. CONSEJOPuede hacer que todos los botones tengan el mismo tamaño configurando el ancho de los enlaces. Para que esta barra de navegación horizontal aparezca en el centro de la página, agreguealineación de texto: centro;a la <ul>estilo de la etiqueta. De hecho, este es uno de los beneficios de esta técnica sobre la técnica de flotación que se describe a continuación: cuando usaen líneaybloque en línea,puede centrar su barra de navegación, lo que no puede hacer con los flotadores. Sin embargo, notará que los botones no se tocan (vea el área marcada con un círculo en la Figura 9-6). Eso tiene que ver con la forma en que los navegadores web tratan el espacio en blanco entre el <li>etiquetas Por ejemplo, tome este ejemplo HTML: <ul clase="navegación"> <li><a href="index.html">Inicio</a></li> <li><a href="noticias.html">Noticias</a></li> <li><a href ="reviews.html">Reseñas</a></li> </ul> Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 309 Edificio navegación Barras Los navegadores web tratan el retorno de carro después de uno </li>y antes del proximo <li>como un espacio Hay un par de maneras de eliminar este espacio: • Poner el cierre </li>y abriendo <li>en la misma línea así: <ul clase="navegación"> <li><a href="index.html">Inicio</a></li><li> <a href="noticias.html">Noticias</a></li><li> <a href ="reviews.html">Reseñas</a></li> </ul> Este tipo de código normalmente no se escribe de esta manera, y un programa como Dreamweaver definitivamente no lo escribiría de esta manera. Para quitar el espacio, tienes que entrar y cambiar el código a mano. • Agregar un margen derecho negativo a los elementos de la lista. Por ejemplo, podrías cambiar el liestilo en el Paso 2 anterior a esto: . navegación li { pantalla: en línea; margen derecho: -5px; } El valor del margen negativo básicamente extrae el siguiente elemento de la lista en 5 píxeles para cerrar el espacio entre los botones. El problema con esta técnica es que el valor exacto que use variará según el tamaño del texto (5 píxeles pueden funcionar o no), por lo que deberá experimentar para obtener el valor adecuado. USO DE FLOTADORES PARA NAVEGACIÓN HORIZONTAL Otra técnica más popular es hacer flotar los elementos de la lista. Este método también coloca los enlaces uno al lado del otro. Además, esta técnica no sufre el problema de espaciado del método en línea. NotaLas barras de navegación formadas por elementos flotantes son difíciles de centrar horizontalmente en el medio de una página. Cuando necesite hacer eso, elen líneamétodo descrito en la página 308 es mejor. 1.Flotar los elementos de la lista. Agregando un flotante izquierdo al <li>tags los elimina del flujo normal de arriba hacia abajo de los elementos: . nav li { flotador: izquierda; } Los elementos de la lista flotante (junto con sus enlaces adjuntos) se deslizan uno al lado del otro, al igual que las imágenes en el tutorial de la galería de fotos en la página 278. (Puede hacerlos flotar fácilmente si desea que esos botones se alineen a la derecha borde de la pantalla o que contiene la barra lateral). 310 Css3: el manual perdido www.it-ebooks.info Edificio navegación Barras Preguntas frecuentes Menús emergentes ¿Cómo creo esos geniales menús emergentes que muestran un Si no es del tipo que lo hace usted mismo, o si simplemente tiene prisa, submenú de enlaces cuando alguien pasa el mouse sobre un botón?? puede usar el generador de menús Pure CSS gratuito, una página web Las barras de navegación que tienen múltiples niveles de menús que aparecen o se deslizan hacia afuera son extremadamente populares. Son una manera similar a un asistente que produce el HTML y el CSS necesarios para usted: http://purecssmenu.com. perfecta de incluir muchas opciones de enlaces en una barra de navegación La única desventaja del enfoque CSS es que los submenús desaparecen compacta. Puedes crearlos de un par de maneras. instantáneamente si el mouse de su visitante se desvía. Puede esperar Primero, está el enfoque de solo CSS. Puede encontrar un tutorial que todos sus visitantes tengan excelentes reflejos, o puede probar un básico sobre el proceso enhttp://line25.com/tutorials/howto- enfoque diferente: use CSS para diseñar los botones y JavaScript para create-a-pure-css-dropdown-menu. Para ver un menú CSS spif fy controlar las acciones de los submenús. Para un menú de JavaScript que usa transiciones CSS para animar la aparición y desaparición muy simple, pruebe el complemento de navegación jQuery en https:// de los menús desplegables, consultewww . red-team-design.com/ github.com/dansdom/plugins-navegación. css3-animated-dropdown-menu. 2.Agregarbloqueo de pantallaa los enlaces Los enlaces son elementos en línea, por lo que los valores de ancho (así como el relleno y los márgenes superior e inferior) no se aplican a ellos. Hacer que un navegador muestre los enlaces como elementos de bloque le permite establecer un ancho exacto para el botón y agregar una cantidad cómoda de espacio en blanco encima y debajo de cada enlace: ul.nav a { pantalla: bloque; } 3.Dale estilo a los enlaces. Agregue colores de fondo, bordes, etc. 4.Agrega un ancho. Si desea que los botones de navegación tengan anchos idénticos, establezca un ancho para el <un> etiqueta. El ancho exacto que utilice depende de la cantidad de texto que haya en cada botón. Obviamente, para un enlace como Filosofía corporativa, necesita un botón más ancho. Si desea que cada botón tenga simplemente el ancho del texto interior, no establezca un ancho. Sin embargo, puede agregar relleno izquierdo y derecho para darle al texto un respiro. CONSEJOPara centrar el texto en el medio del botón, agreguealineación de texto: centro;al estilo de los enlaces. Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 311 Edificio navegación Barras 5.Agregardesbordamiento: ocultoa la <ul>estilo de etiqueta Si tiene un borde, un color de fondo o una imagen, debe "contener el flotante", es decir, los elementos de la lista flotante dentro de <ul>aparecerá al final de la lista (y fuera del <ul>borde de etiquetas o color de fondo). ul.nav { desbordamiento: oculto; } Estos son los estilos necesarios para crear la barra de navegación que se muestra en la Figura 9-7. Observe que los botones tienen el mismo ancho y el texto del botón está centrado. . navegación { margen: 0px; relleno: 0px; estilo de lista: ninguno; borde inferior: 3px rgb sólido (204,204,204); desbordamiento: oculto; } . navegación li { flotador izquierdo; } . navegar un { ancho: 12em; bloqueo de pantalla; borde: 3px rgb sólido (204,204,204); borde inferior: ninguno; borde-radio: 5px 5px 0 0 ; relleno: 10px; margen derecho: 5px; color de fondo: rgb(95,95,95); imagen de fondo: -webkit-linear-gradient(rgb(175,175,175), rgb(95,95,95)); imagen de fondo: -moz-linear-gradient(rgb(175,175,175), rgb(95,95,95)); imagen de fondo: -olinear-gradient(rgb(175,175,175), rgb(95,95,95)); imagen de fondo: degradado lineal (rgb (175,175,175), rgb (95,95,95)); texto-decoración: ninguno; color blanco; alineación de texto: centro; familia tipográfica: Arial, Helvetice, sans-serif; fuente-peso: negrita; } 312 Css3: el manual perdido www.it-ebooks.info ESTILO CSS PRECARGA RUEDAS Figura 9-7 Los elementos de la lista flotante le permiten crear elementos de igual ancho botones para una barra de navegación como esta. Puede ver el CSS real que creó esta barra en la página opuesta. Preguntas frecuentes Dónde obtener ayuda con la barra de navegación Nunca he hecho una barra de navegación antes, pero realmente quiero También puede encontrar un montón de diseños geniales de navegación que mi sitio tenga una. Simplemente no creo que pueda ponerlo todo basados en listas enhttp://css.maxdesign.com.au/listamatic. junto por mi cuenta. ¿Hay algo que me guíe a través de todo el proceso por primera vez?? Finalmente, si no quiere molestarse en crear el suyo propio, pruebe el asistente List-O-Matic enwww.accessify.com/toolsand-wizards/ Sí. De hecho, hay un tutorial en este mismo capítulo que le developer-tools/list-o-matic. Este sitio es para cierta información, como muestra paso a paso cómo crear una barra de navegación. Pasa a fuentes y colores, y puede crear el CSS que necesita para la navegación la página 324. basada en listas. Incluso te permite crear submenús (también conocidos En línea, puede encontrar tutoriales, además de herramientas que hacen parte del como menús desplegables). trabajo por usted. Para obtener más información sobre cómo convertir listas ordinarias en elementos de navegación extraordinarios, visite el tutorial de listas paso a paso en:http://css.maxdesign.com.au/listutorial. Rollovers de precarga de estilo CSS En los viejos tiempos, hacer que un enlace gráfico cambiara a otro gráfico cuando se pasaba el mouse sobre JavaScript requería. Con CSS, puede lograr efectos similares con:flotar pseudoclase y una imagen de fondo. Sin embargo, hay un problema con el método CSS: a menos que su visitante ya haya descargado el gráfico dinámico, hay un retraso notable mientras el navegador absorbe el nuevo gráfico y lo muestra. El retraso ocurre solo la primera vez que el visitante se desplaza sobre el enlace, pero aún así, esperar a que se carguen los gráficos es muy del siglo XX. Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 313 ESTILO CSS PRECARGA RUEDAS La solución de JavaScript puede evitar este problema gracias a una técnica llamada precarga,que descarga automáticamente el gráfico de rollover mucho antes de que se necesite. Pero CSS no le da esa opción, por lo que debe utilizar otra maniobra inteligente llamadaObjetos CSS, que utiliza un solo gráfico para crear diferentes estados para el mismo botón. NotaCompañías como Yahoo y Google utilizan ampliamente los CSS Sprites, no solo para efectos de rollover, sino también para optimizar la velocidad de descarga de los sitios web. Puedes conocer más sobre ellos enhttp://codificación.smashingmagazine. com/2009/04/27/el-misterio-de-CSS-sprites-técnicas-herramientas-y-tutoriales/. He aquí cómo implementar el método: 1.En su programa de edición de imágenes favorito, cree una imagen con diferentes versiones del botón. Puede crear un estado regular, un estado de rollover y tal vez incluso un estado de "usted está aquí". Coloque las imágenes una encima de la otra, con la imagen de enlace normal arriba y la imagen de rollover debajo. NotaFireworks CS6 tiene una herramienta integrada para crear sprites CSS. También hay muchas herramientas en línea para ayudarlo a crearlos: SpritePad (http://spritepad.wearekiss.com) es un ejemplo. 2.Mida las distancias desde la parte superior de todo el gráfico hasta la parte superior de cada imagen. En la Figura 9-8 (arriba), el borde superior de la imagen dinámica está a 39 píxeles de la parte superior del gráfico. 3.Cree un estilo CSS para el enlace regular.Incluya la imagen en el fondo y colóquela en la parte superior izquierda del estilo (Figura 9-8, centro). Su estilo puede ser algo como esto: a { background: #E7E7E7 url(images/pixy.png) superior izquierda sin repetición; } 4.Crear el:flotarestilo. Aquí está el truco: utilice elposición de fondopropiedad para desplazar el gráfico hacia arriba, por lo que la primera imagen desaparece y la imagen de rollover se vuelve visible (Figura 9-9, abajo). a: hover { posición de fondo: 0 -39px; } Además de evitar el temido retraso de la descarga, esta técnica te ayuda a mantener tus gráficos de navegación organizados en un solo archivo. 314 Css3: el manual perdido www.it-ebooks.info ESTILO particular Tipos de Enlaces Figura 9-8 Con el método CSS Sprites, puede evitar un molesto retraso mientras el navegador descarga una imagen dinámica por primera vez. Al combinar todos los diferentes gráficos de estado de enlace en una sola imagen, puede mostrar un estado diferente simplemente ajustando la posición de la imagen de fondo. NotaAlgunos sitios web llevan esta técnica al extremo. Yahoo, Amazon y Google (entre muchos otros) a menudo juntan docenas de pequeñas imágenes en un solo archivo y muestran solo la parte del archivo que contiene el botón deseado. Puedes ver un ejemplo de Amazon aquí:www.flickr.com/photos/mezzoblue/3217540317. Los sitios con millones de visitantes diarios se benefician de los sprites complejos, ya que es más fácil y rápido para un servidor web enviar un solo archivo de imagen (aunque más grande) que docenas de archivos más pequeños. En un nivel más manejable, el sitio web de un conocido diseñador usa un solo gráfico para administrar los 15 botones diferentes en su barra de navegación. Puedes leer sobre su técnica enhttp://veerle-v2.duoh.com/blog/comentarios/ the_xhtml_css_template_phase_of_my_new_blog_part_2/. También puede ver esta técnica en acción en el tutorial de este capítulo, en el Paso 8 en la página 320. Dar estilo a tipos particulares de enlaces Los diseñadores web se vinculan a todo tipo de cosas: otras páginas web en sus sitios, páginas web en otros sitios, archivos de Adobe Acrobat, documentos de Word y archivos zip, por nombrar algunos. Para ayudar a guiar a los visitantes de su sitio, es posible que desee proporcionar pistas para que sepan adónde conduce un enlace antes de que hagan clic en él. Los selectores avanzados son una excelente manera de hacer precisamente eso. Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 315 ESTILO particular Tipos de Enlaces Enlaces a otros sitios web Puede crear fácilmente un estilo que identifique enlaces a otros sitios web mediante un selector de atributos. Como leyó en la página 72, los selectores de atributos le permiten diseñar etiquetas HTML que tienen un atributo particular, por ejemplo, un <imagen>etiqueta con elalternativaatributo establecido en Nuestra compañía. También puede diseñar etiquetas cuyos atributoscomenzarcon ciertos valores. Cualquier enlace que apunte fuera de su sitio debe ser una URL absoluta (consulte el cuadro en la página 244), lo que significa que debe comenzar conhttp://-Por ejemplo,http://www.yahoo.com. Entonces, para crear un estilo que solo afecte a los enlaces que usan una URL absoluta, use este selector: a[href^='http://'] El=se traduce como "comienza con", por lo que este selector coincide con enlaces como <a href="http://www.google.com/">, <a href="http://www.sawmac.com/css3/">,etcétera. Puede diseñarlos de la forma que desee, pero una técnica común es agregar una pequeña imagen junto al enlace, un ícono que indica un enlace externo. Verá esto en acción en la página 321 del tutorial de este capítulo. Si utiliza enlaces absolutos para apuntar a otras páginas ensusitio, entonces deberá agregar otro estilo para "desactivar" el estilo; de lo contrario, terminará resaltando esos enlaces como enlaces externos, cuando en realidad son solo enlaces dentro de su sitio. Este segundo estilo solo usa una versión más detallada del selector mencionado anteriormente. Por ejemplo, si su sitio está ubicado enwww.misitio.com, luego puede crear un selector que se aplique a esos enlaces como este:a[href^='http://www.misitio.com'].Poniendo todo esto junto, si desea agregar un ícono de globo al lado de los enlaces externos, pero no para los enlaces dentro de su sitio, puede crear estos dos estilos: a[href^='http://'] { fondo: url(images/globe.png) sin repetición centro derecha; relleno derecho: 15px; } a[href^='http://www.misitio.com'] { fondo: ninguno; relleno derecho: 0; } NotaSi quiere ser realmente elegante con su CSS, puede combinar el selector de atributos con el CSS3 :no()selector para crear un estilo único que afectará a todas las URL absolutasexceptolos que apuntan a su propio sitio: a[href^='http://']:not(a[href^='http://www.mysite.com']) Este selector de aspecto loco se traduce como "seleccionar todos los enlaces que comienzan conhttp://, peronolos que comienzan con http://www.mysite.com.” La desventaja de esta técnica es que Internet Explorer 8 y versiones anteriores no comprenden:no()selector. 316 Css3: el manual perdido www.it-ebooks.info ESTILO particular Tipos de Enlaces de correo electrónico Los enlaces de correo electrónico son otro tipo especial de enlace. Normalmente, los enlaces de correo electrónico se ven como Enlaces cualquier otro enlace: azul y subrayado. Sin embargo, no actúan como cualquier otro enlace. Al hacer clic en uno, se inicia el programa de correo electrónico de un visitante, y algunas personas encuentran que iniciar un nuevo programa mientras navegan por un sitio web realmente les distrae, así que hágales saber que es para correo electrónico. Se aplica la misma técnica básica descrita anteriormente para los enlaces externos. Dado que todos los enlaces de correo electrónico comienzan conenviar a:,puede crear un selector como el siguiente para crear un estilo para formatear solo enlaces de correo electrónico: a[href^='correo a:'] Verá un ejemplo de esto en acción en el tutorial en la página 321. Enlaces a tipos específicos de archivos Algunos enlaces apuntan a archivos, no a otras páginas web. A menudo ve el informe anual de una empresa en línea como un archivo PDF descargable o un archivo zip de archivos (como los tutoriales de este libro) en un sitio web. Los enlaces a esos tipos de archivos generalmente fuerzan al navegador a descargar el archivo en la computadora del visitante o, para los archivos PDF, inician un complemento que le permite ver el archivo dentro del navegador. Hacer clic en un enlace puede ser una verdadera molestia, ¡solo para descubrir que en realidad comenzó una descarga de 100 MB! Puede identificar tipos de archivos específicos de la misma manera que los enlaces externos o los enlaces de correo electrónico. Pero en lugar de buscar información específica al principio de la URL del enlace, puede encontrarla al final. Por ejemplo, un enlace a un documento PDF podría verse así <a href="informe_anual.pdf">,mientras que un enlace a un archivo zip podría verse así: <a href="tutoriales.zip">.En cada caso, el tipo de archivo específico se identifica mediante una extensión al final de la URL: pdf o .zip. CSS proporciona un selector de atributos que le permite encontrar atributos que terminan con información específica. Entonces, para crear un estilo para enlaces a archivos PDF, use este selector: a[href$='.pdf'] $=significa "termina en", por lo que este selector significa "seleccionar todos los enlaces cuyohrefel atributo termina en .pdf.” También puede crear estilos similares para otros tipos de archivos: a[href$='.zip'] /* archivo zip */ a[href$='.doc'] /* documento de Word */ Verá ejemplos de esta técnica en el tutorial de la página 323. Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 317 Tutorial: ENLACES DE ESTILO Tutorial: Estilo de enlaces En este tutorial, aplicará estilo a los enlaces de varias formas, como agregar rollovers y gráficos de fondo. Para comenzar, descargue los archivos del tutorial del sitio web complementario de este libro en www.sawmac.com/css3. Haga clic en el enlace del tutorial y descargue los archivos. Todos los archivos están encerrados en un archivo zip, por lo que primero debe descomprimirlos. (Encontrará instrucciones detalladas en el sitio web). Los archivos de este tutorial se encuentran dentro del09carpeta. Formato de enlace básico 1.Inicie un navegador web y abra el archivo.09→Enlaces→enlaces.html. Esta página contiene una variedad de enlaces (marcados con un círculo en la Figura 9-9) que apuntan a otras páginas del sitio, enlaces a páginas en otros sitios web y una dirección de correo electrónico. Comience cambiando el color de los enlaces en esta página. 2.abiertoenlaces.htmlen un editor de texto y coloque el cursor entre la apertura y el cierre <estilo>etiquetas La página ya tiene adjunta una hoja de estilo externa con un formato básico, además de <estilo>etiquetas para una hoja de estilo interna. NotaComo lo ha hecho antes, colocará los estilos para este ejercicio en una hoja de estilo interna para facilitar la codificación y la vista previa. Cuando termine, es mejor mover los estilos a una hoja de estilo externa. 3.Agregue un nuevo estilo a la hoja de estilo interna: <estilo> a{ color: #207EBF; } </estilo> Este estilo es tan genérico como parece. Se aplicará a todos <un>etiqueta en la página. Es un buen lugar para comenzar, ya que configura el aspecto general de los enlaces de la página. Agregará más estilos que le permitirán identificar vínculos en áreas específicas de la página. Ahora es el momento de eliminar ese viejo y aburrido subrayado debajo del enlace. 4.Agregartexto-decoración: ninguno;al estilo que acaba de crear. Esto elimina el subrayado, pero también hace que el enlace sea menos visible en la página. Recuerde: siempre debe hacer algo para que los enlaces se destaquen y los visitantes de su sitio puedan hacer clic en ellos. 318 Css3: el manual perdido www.it-ebooks.info Tutorial: ENLACES DE ESTILO Figura 9-9 Aquí hay una página web básica con enlaces en su configuración de navegador estándar, subrayada y azul (o violeta, si son enlaces a páginas visitadas anteriormente). En este caso, algunos enlaces apuntan a otras páginas del sitio, algunos apuntan a otros sitios y uno es una dirección de correo electrónico. En este tutorial, diseñará cada uno de estos enlaces de manera diferente. 5.Agregarpeso de fuente: negrita;haciaaestilo. Ahora los enlaces aparecen en negrita (otro texto también puede aparecer en negrita). A continuación, reemplazará el subrayado, pero lo hará de forma un poco más creativa, usando un borde en lugar del decoración de textopropiedad. 6.Agrega unbordedeclaración al estilo, por lo que se ve así: a{ color: #207EBF; texto-decoración: ninguno; fuente-peso: negrita; borde inferior: 2px sólido #F60; } Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 319 Tutorial: ENLACES DE ESTILO Los enlaces realmente se destacan, y el uso de un borde en lugar del subrayado normal que se aplica a los enlaces le permite cambiar el color, el tamaño y el estilo de la línea (Figura 9-11, izquierda). Ahora cambiará el aspecto de los enlaces visitados. 7.Agrega un :visitadoEstilo de pseudoclase para enlaces visitados: a: visitado { color: #6E97BF; } Este estilo cambia el aspecto de los enlaces visitados a un tono más claro y gris del color del enlace principal, una forma sutil de desviar la atención de una página ya visitada. Si obtiene una vista previa de la página, haga clic en uno de los enlaces (pruebe uno en la parte central de la página) y luego regrese a laenlaces.htmlpágina. Debería ver que el enlace se vuelve más claro en color. También notará que permanece en negrita y continúa teniendo el subrayado naranja que asignó alaestilo en el Paso 6. Esa es la cascada en acción (Capítulo 5)—ela: visitadoEl estilo es más específico que un simple selector, por lo que su propiedad de color anula el color asignado por elaestilo. Es hora de ir un paso más allá agregando un efecto de rollover, de modo que el fondo del enlace cambie de color cuando el mouse se mueva sobre él. 8.Agrega un :flotarestilo de pseudoclase a la hoja de estilo: a: pasar el cursor { color: #FFF; color de fondo: #6E97BF; bordefondo-color: #6E97BF; } Esta pseudoclase se aplica solo cuando el mouse está sobre el enlace. La calidad interactiva de los rollovers les permite a los visitantes saber que el enlace hace algo (Figura 9-10). Figura 9-10 Con un par de estilos, puede cambiar la apariencia de cualquier enlace. Con el :flotarpseudo-clase, incluso puede cambiar a un estilo diferente cuando el mouse se mueve sobre el enlace. 320 Css3: el manual perdido www.it-ebooks.info Agregar una imagen de fondo a un enlace El enlace de correo electrónico en la parte inferior de la página no se ve diferente a los otros enlaces en la Tutorial: ENLACES DE ESTILO página (Figura 9-11, arriba). Sin embargo, tiene otros planes para ese enlace mailto. Dado que apunta a una dirección de correo electrónico, hacer clic en él no lleva al visitante a otra página, sino que inicia un programa de correo electrónico. Para proporcionar una señal visual que enfatice este punto, agregará un lindo ícono de correo electrónico. 1.Agregue un selector descendiente a la hoja de estilo interna delenlaces.htmlarchivo: a[href^="correo a:"] { color: #666666; borde: ninguno; fondo: url(images/email.gif) sin repetición centro izquierdo; } Este es un selector de atributos avanzado, que selecciona cualquier enlace que comience con correo a,: (en otras palabras, selecciona enlaces de correo electrónico). Elborde: ningunoajuste elimina el subrayado definido por elaestilo que creó en el paso 6: busca un aspecto sutil aquí. El fondoLa propiedad agrega una imagen en el borde izquierdo del enlace. Finalmente, elsin repeticiónEl valor obliga al gráfico a aparecer una sola vez. El problema es que el gráfico se encuentra directamente debajo del enlace, por lo que es difícil leer el texto (encerrado en un círculo en la imagen del medio en la Figura 9-11). 2.Agregue 20 píxeles de relleno izquierdo alatributoestilo que acaba de crear: relleno-izquierda: 20px; Recuerde que el relleno ajusta el espacio entre el contenido y su borde. Entonces, agregar un poco de relleno izquierdo mueve el texto más de 20 píxeles pero deja el fondo en su lugar. Un último toque: aleja un poco todo el enlace del aviso de derechos de autor. 3.Agregue 10 píxeles de margen izquierdo al estilo, para que finalmente quede así: a[href^="enviar a:"] { color: #666666; borde: ninguno; fondo: url(images/email.gif) sin repetición centro izquierdo; relleno-izquierda: 20px; margen izquierdo: 10px; } Este pequeño ajuste visual deja en claro que el ícono está relacionado con el enlace y no es parte del aviso de derechos de autor (Figura 9-11, abajo). Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 321 Tutorial: ENLACES DE ESTILO Figura 9-11 Solo unos pocos toques sutiles pueden ayudar a que el propósito de un enlace sea obvio. En este caso, un enlace simple (arriba) se vuelve claramente identificable como un enlace de correo electrónico (abajo). Resaltar diferentes enlaces En ocasiones, es posible que desee indicar que un enlace apunta a otro sitio web. De esta manera, puede dar a sus visitantes una pista visual de que hay información adicional en otro lugar de Internet o advertirles que saldrán de su sitio si hacen clic en el enlace. Además, es posible que desee identificar vínculos que apunten a archivos descargables u otros documentos que no sean de la página web. En la página web en la que está trabajando, la barra lateral de "Recursos" de la derecha contiene diferentes tipos de enlaces que resaltará con iconos: un icono diferente para cada tipo de enlace. Primero, configurará un estilo básico que se aplique a todos esos enlaces. 1.Agregue este estilo a laenlaces.htmlhoja de estilo interna: . recursos un { borde inferior: ninguno; } Dado que todos los enlaces que desea formatear están dentro de un <div>con los recursos de la clase, el selector descendiente.recursos unapunta solo a esos enlaces. Este estilo elimina el subrayado que agregó el estilo de enlace genérico. 322 Css3: el manual perdido www.it-ebooks.info A continuación, agregará un icono junto a los enlaces externos. 2.Agregue otro estilo al final de laenlaces.htmlhoja de estilo interna: Tutorial: ENLACES DE ESTILO . recursos a[href^='http://'] { fondo: url(images/globe.png) arriba a la derecha sin repetición; } Este es un estilo de selector descendente que utiliza el selector de atributos avanzado que se analiza en la página 317. Básicamente, apunta a cualquier enlace que comience conhttp://(pero solo aquellos que también están dentro del elemento con la claserecursos).Al igual que con el estilo de enlace de correo electrónico que creó anteriormente, este estilo agrega una imagen de fondo. Coloca la imagen en el lado derecho del enlace. Sin embargo, este estilo tiene un problema similar al estilo de enlace de correo electrónico: la imagen se encuentra debajo del texto del enlace. Afortunadamente, la solución es la misma: solo agregue algo de relleno para mover la imagen fuera del camino del texto. Sin embargo, en este caso, en lugar de agregar el relleno izquierdo, agregará el relleno derecho (ya que el ícono aparece en el lado derecho del enlace). Además, dado que cada enlace en el cuadro de recursos tendrá un icono de tamaño similar, puede guardar algo de código agregando el relleno al archivo .recursos unestilo que creó en el Paso 1. 3.Edite el .recursos unestilo para que se vea así: . recursos un { borde inferior: ninguno; relleno derecho: 22px; } Si guarda la página y obtiene una vista previa en un navegador web, verá pequeños iconos de globo terráqueo a la derecha de los dos enlaces inferiores en la barra lateral. Es hora de formatear los otros enlaces. 4.Agregue tres estilos más a la hoja de estilo interna: . recursos a[href$='.pdf'] { fondo: url(images/acrobat.png) arriba a la derecha sin repetición; } . recursos a[href$='.zip'] { fondo: url(images/zip.png) arriba a la derecha sin repetición; } . recursos a[href$='.doc'] { fondo: url (imágenes/palabra.png) arriba a la derecha sin repetición; } Estos tres estilos analizan cómo elhreftermina el atributo; identifica enlaces a archivos de Adobe Acrobat (.pdf), archivos zip (.zip) o documentos de Word (.doc); y asigna un icono diferente en cada caso. Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 323 Tutorial: Creando un navegación Bar 5.Finalmente, agregue un estado flotante para los enlaces de recursos: . recursos a: hover { color: #000; color de fondo: rgba(255,255,255,.8); } Este estilo cambia el color del texto y agrega un color de fondo (vea la Figura 9-12). Puede encontrar una versión terminada de este tutorial en el09_terminado/enlaces/enlaces . html archivo. Figura 9-12 Con los selectores de atributos avanzados, puede identificar y diseñar fácilmente diferentes tipos de enlaces: enlaces externos, enlaces a archivos PDF, documentos de Word y archivos zip. Tutorial: creación de una barra de navegación En este ejercicio, convertirá una simple lista antigua de enlaces en una barra de navegación espectacular, completa con efectos de rollover y un efecto de botón "Está aquí". 1.En un editor de texto, abra09→barra_navegación→barra_navegación.html. Como puede ver, todavía no hay mucho en este archivo. Hay una hoja de estilo interna con los estilos básicos de restablecimiento discutidos en la página 115, y una regla que establece algunas propiedades básicas para <cuerpo>etiqueta. El HTML consta de una lista desordenada con seis enlaces. Se ve como el ejemplo #1 en la Figura 9-13. Su primer paso es agregar algo de HTML para que pueda orientar su CSS para formatear los enlaces en esta lista. 2.Localiza la apertura <ul>etiquetar y agregarclase="navprincipal"a él, por lo que se ve así: <ul class="mainNav"> El atributo de clase identifica esta lista como el área de navegación principal. Use esta clase para crear selectores descendientes para formatear solo estos enlaces, y no solo cualquier enlace antiguo en la página. 324 Css3: el manual perdido www.it-ebooks.info Tutorial: Creando un navegación Bar Figura 9-13 Si bien puede parecer una gran cantidad de pasos, transformar una simple lista desordenada de enlaces en una barra de navegación sofisticada requiere solo unos pocos estilos. 3.Bajo elcuerpoestilo en la hoja de estilo interna, agregue un nuevo estilo: . navegación principal { margen: 0; relleno: 0; estilo de lista: ninguno; } Este estilo se aplica solo a una etiqueta con una clase denavegación principal—en este caso, el <ul> etiqueta. Elimina la sangría y las viñetas que los navegadores aplican a las listas desordenadas, como se muestra en el n.º 2 de la figura 9-13. A continuación, comenzará a formatear los enlaces. 4.Agregue un selector descendente para formatear los enlaces en la lista: . navegación principal a { color: #000; tamaño de fuente: 11px; transformación de texto: mayúsculas; texto-decoración: ninguno; } Este estilo define el formato de texto básico para los enlaces. Establece el color y el tamaño de la fuente, convierte todas las letras en mayúsculas y elimina la línea que generalmente se encuentra debajo de los enlaces (#3 en la Figura 9-13). Ahora empieza a hacer que los enlaces parezcan botones. Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 325 Tutorial: Creando un navegación Bar 5.Hacia .mainNav aestilo, agregue lo siguientebordeyrellenopropiedades: borde: 1px punteado #999; relleno: 7px 5px; Si obtiene una vista previa del archivo ahora, verá algunos problemas (#4 en la Figura 9-13): Los bordes se superponen y los cuadros no tienen el mismo ancho. Eso es porque el <un> La etiqueta es un elemento en línea, por lo que el ancho del cuadro es tan ancho como el texto del enlace. Además, el relleno superior e inferior no agrega altura a los cuadros en línea, por lo que los bordes se superponen. (Consulte la página 200 para obtener una discusión sobre los cuadros en línea). Puede solucionar estos problemas cambiando la forma en que un navegador muestra estos enlaces. 6.Agregarbloqueo de pantalla;hacia .mainNav aestilo. Has cambiado la visualización básica del <un>etiqueta para que actúe como un párrafo u otro elemento a nivel de bloque, con los enlaces perfectamente apilados uno encima del otro. El único problema ahora es que también se extienden por toda la longitud de la ventana del navegador, un poco demasiado anchas para un botón. Puede solucionar esto restringiendo el ancho de <ul>estilo de la etiqueta. 7.En la hoja de estilo interna, busque el archivo .mainNavestilo y agregarancho: 175px; lo: . navegación principal { margen: 0; relleno: 0; estilo de lista: ninguno; ancho: 175px; } Con el ancho de la lista ahora establecido en 175 píxeles, los enlaces aún se expanden, pero están limitados al ancho de su contenedor (el <ul>etiqueta). En muchos casos, tendrá una lista de enlaces dentro de algún elemento de diseño (como una barra lateral) que ya tiene un ancho establecido, por lo que podrá omitir este paso. (Aprenderá cómo agregar barras laterales en la Parte Tres). Ahora viene la parte divertida. 8.Agregue propiedades de fondo al archivo .mainNav aestilo, así: . navegación principal a { color: #000; tamaño de fuente: 11px; transformación de texto: mayúsculas; texto-decoración: ninguno; borde: 1px punteado #999; relleno: 7px 5px; bloqueo de pantalla; color de fondo: #E7E7E7; imagen de fondo: url(images/nav.png); repetición de fondo: sin repetición; posición de fondo: 0 2px; } 326 Css3: el manual perdido www.it-ebooks.info Estas líneas agregan un color de fondo gris a los enlaces y una imagen que no se repite en el borde izquierdo de cada botón (#5 en la Figura 9-13). Todavía tiene un par de cosas que Tutorial: Creando un navegación Bar corregir: el texto del enlace se superpone al icono y el borde entre cada botón tiene un grosor de 2 píxeles. (Técnicamente, los bordes todavía tienen un grosor de solo 1 píxel, pero los bordes inferior y superior de los enlaces contiguos crean una línea de 2 píxeles). CONSEJOUtilizando elfondopropiedad abreviada, puede escribir el código en el Paso 8 de esta manera:fondo: # E7E7E7 url(images/nav.png) sin repetición 0 2px;. 9.Retire el borde inferior y ajuste el relleno para el .mainNav aestilo, por lo que se ve así: . navegación principal a { color: #000; tamaño de fuente: 11px; transformación de texto: mayúsculas; texto-decoración: ninguno; borde: 1px punteado #999; borde inferior: ninguno; relleno: 7px 5px 7px 30px; bloqueo de pantalla; color de fondo: #E7E7E7; imagen de fondo: url(images/nav.png); repetición de fondo: sin repetición; posición de fondo: 0 2px; } El texto de cada enlace queda fuera del ícono y los bordes se ven muy bien... excepto por una cosa. El borde inferior del último enlace ya no está. (¡A veces CSS se siente como dos pasos adelante, un paso atrás!) Pero hay algunas formas de solucionar este problema. Una forma es crear un estilo de clase con elborde inferiorconfiguración y luego aplicarlo solo a ese último enlace. Pero sería más fácil aplicar un borde inferior al <ul>etiqueta que contiene la lista de enlaces. (Dado que no hay relleno en esa etiqueta, no hay espacio que separe la parte superior de <ul>desde la parte superior de ese primer enlace). 10Agregue un borde inferior al archivo .mainNavestilo para que se vea así: . navegación principal { margen: 0; relleno: 0; estilo de lista: ninguno; ancho: 175px; borde inferior: 1px punteado #999; } Ahí lo tiene: una barra de navegación básica que usa bordes, relleno, color de fondo e imágenes (#6 en la Figura 9-13). Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 327 Tutorial: Creando un navegación Bar Adición de rollovers y creación de enlaces "Usted está aquí" Ahora es el momento de agregar algunas funciones interactivas y avanzadas a esta barra de navegación. Primero, agregará un efecto de rollover a los botones en su barra de navegación principal. De esa forma, los botones cambian para mostrar a su visitante en qué botón está a punto de hacer clic. También es considerado informar a su visitante en qué página de su sitio se encuentra. Usando la misma barra de navegación HTML que ya tiene, puede hacer que esta interactividad suceda automáticamente. Simplemente haga que el formato del botón cambie para que coincida con la sección de la página. Suena simple, pero requiere un poco de planificación y configuración, como verá en los siguientes pasos. El efecto de rollover es fácil, así que sáquelo del camino primero: 1.En elbarra_navegación.htmlarchivo, agregue el siguiente estilo al final de la hoja de estilo: . mainNav a: hover { font-weight: negrita; color de fondo: #B2F511; posición de fondo: 3px 50%; } Este estilo establece el estado de desplazamiento del botón. Pone el texto dentro del botón en negrita y cambia el color de fondo a un verde vibrante. Además, utiliza la técnica CSS Sprites que se analiza en la página 314. Se utiliza la misma imagen que en el paso 8 de la página 326; sin embargo, esa imagen en realidad contiene tres iconos diferentes (consulte la figura 9-14). En este caso, la imagen se centra dentro del botón y muestra el icono del medio en el archivo. Ahora, mover el mouse sobre cualquiera de los botones cambia instantáneamente su apariencia. (Abra la página en su navegador web y pruébelo usted mismo). Figura 9-14 Con algo de CSS básico, es fácil crear efectos de rollover interactivos para los botones de navegación. Incluso puede resaltar automáticamente la sección del sitio en la que se encuentra la página actual. Para acelerar la descarga de los gráficos de la barra de navegación, puede usar el método CSS Sprites descrito en la página 314. Básicamente, usa una imagen (marcada con un círculo en la parte superior derecha) y ajusta su posición para los diferentes estados de cada botón (fila inferior). 328 Css3: el manual perdido www.it-ebooks.info A continuación, haga que su barra de navegación sea más informativa resaltando el botón que coincide con la sección en la que se encuentra la página. Para hacerlo, debe identificar dos Tutorial: Creando un navegación Bar cosas en el HTML de la barra de navegación: la sección a la que pertenece una página y la sección a la que apunta cada enlace. Para este ejemplo, suponga que la página en la que está trabajando es la página de inicio. NotaComo alternativa, puede crear un estilo de clase que cambie la apariencia de un vínculo y aplicarlo al vínculo que representa la sección de la página. Para una página de horóscopo, aplicaría la clase al enlace Horóscopo en la barra de navegación: <a href="/horóscopos/" class="current">Horóscopos</a>. 2.Localice el <cuerpo>etiquetar y luego agregarclase="casa",al igual que: <body class="casa"> Ahora que sabe a qué sección pertenece esta página, puede usar un selector descendente para crear reglas CSS especiales que se aplican solo a las etiquetas en las páginas dentro de la sección Características. A continuación, debe identificar la sección a la que se aplica cada enlace, lo que logra agregando algunas clases a esos enlaces. 3.En el código HTML de la barra de navegación, ubique el enlace Inicio y luego agregueclase = "enlace de inicio"por lo que la etiqueta se ve así: <a href="/index.html"clase = "enlace de inicio">Inicio</a> Esta clase identifica este enlace y proporciona la información que necesita para crear un estilo que se aplique solo a ese enlace. También debe agregar una clase a los otros enlaces en la barra de navegación. 4.Repita el Paso 3 para cada uno de los otros enlaces usando las siguientes clases: FeatureLink, ExpertLink, QuizLink, ProjectLink,yHoróscopoEnlace. Ha terminado con la parte HTML de este ejercicio. Ahora es el momento de crear algo de CSS. Debido a que proporcionó clases para identificar los diferentes enlaces, es fácil crear un selector descendiente para resaltar el enlace Funciones. 5.Agregue otro estilo a la hoja de estilo de la página: . home .homeLink { color de fondo: #FFFFFF; posición de fondo: 97% 100%; relleno derecho: 15px; relleno-izquierda: 30px; fuente-peso: negrita; } Has visto todas estas propiedades antes. Nuevamente, está utilizando el método CSS Sprites para ajustar la posición de la imagen de fondo. Esta vez, la imagen se mueve hacia la derecha un 97 por ciento (es decir, el punto del 97 por ciento de la imagen coincide con el punto del 97 por ciento del botón), y la parte inferior de la imagen se coloca en la parte inferior de la botón. En otras palabras, muestra la Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 329 Tutorial: Creando un navegación Bar en la parte inferior de la imagen (consulte la Figura 9-14). Consulte la página 249 para ver una discusión sobre cómo funcionan los valores porcentuales con imágenes de fondo. La parte más interesante es el selector—.inicio .homeLink.Es un selector muy específico que se aplica solo a un enlace con una clase deenlace de inicioeso estambiéndentro de una <cuerpo>etiqueta con una clase dehogar.Si cambia la clase de la página aprueba,por ejemplo, el enlace a la página de inicio ya no está resaltado. Obtenga una vista previa de la página en un navegador para ver el efecto: el enlace Inicio ahora tiene un fondo blanco y un icono de clip. Para hacer que esto funcione para los otros enlaces, necesitas expandir este selector un poco... OK, haz que sea unlote. 6.Edite el selector para el estilo que acaba de agregar, así: . casa .homelink, . función .featurelink, . experto .experlink, . cuestionario .quizlink, . proyecto .projectlink, . horoscopo .horoscopoLink { color de fondo: #FFFFFF; posición de fondo: 97% 100%; relleno derecho: 15px; relleno-izquierda: 30px; fuente-peso: negrita; } Sí, eso es mucho CSS. Pero su trabajo de configuración aquí tiene una gran recompensa. Este estilo ahora se aplica a todos los enlaces en la barra de navegación, pero solo bajo ciertas condiciones, que es exactamente como desea que se comporte. Cuando cambias elclase atributo del <cuerpo>etiquetar aprueba,el enlace al Cuestionario se resalta en lugar del enlace a la sección Características. Es hora de tomar su trabajo para una prueba de manejo. NotaEste selector extenso es un ejemplo del selector de grupo que se analiza en la página 62. 7.Cambiar elclaseatributo del <cuerpo>etiquetar acaracterísticacomo esto: <body class="característica"> Obtenga una vista previa de la página y ¡zas! El vínculo Función ahora está resaltado con un fondo blanco y un icono de clip (Figura 9-14). El secreto en este punto es simplemente cambiar la clase en el <cuerpo>etiqueta para indicar a qué sección del sitio pertenece una página. Para una página de horóscopo, cambie la clase aclase = "horóscopo"en el <cuerpo>etiqueta. 330 Css3: el manual perdido www.it-ebooks.info Nota¿Listo para llevar este diseño más allá? Intente agregar un efecto de rollover para complementar el estilo que creó en el paso 6. (Sugerencia: use el :flotarpseudo-clase como parte del selector como este: .prueba .quizLink: pasar el mouse.) También intente agregar un Tutorial: Creando un navegación Bar gráfico diferente para el enlace Inicio. (Usted tiene uncasa.pngarchivo en la carpeta de imágenes para usar). Para ver la versión completa de esta barra de navegación, consulte el archivo09_terminado→barra de navegación→nav_bar_vertical.html. De vertical a horizontal Suponga que desea una barra de navegación horizontal que se encuentra en la parte superior de la página. No hay problema: usted hizo la mayor parte del trabajo duro en la última parte de este tutorial. Simplemente modifique esa página un poco para distribuir los botones a lo largo de una sola línea. (Usarás elbarra_navegación. htmlarchivo que acaba de completar, por lo que si desea mantener la barra de navegación vertical, guarde una copia del archivo antes de continuar). 1.Asegúrese de haber completado todos los pasos anteriores para crear la barra de navegación vertical y tener el archivobarra_navegación.htmlabre en tu editor de texto. Ahora verá lo fácil que es cambiar la orientación de una barra de navegación. Comience por limpiar parte del trabajo que ya hizo. Debe eliminar el ancho que configuró para el <ul>etiqueta en el Paso 7 en la página 326. Ese ancho impedía que los botones de navegación abarcaran toda la longitud de la página. Pero desde el <ul>necesita extenderse mucho más para contener los botones uno al lado del otro, este ancho tiene que desaparecer. 2.Encuentra el .mainNavestilo y, a continuación, elimine elancho: 175px;declaración. Y ahora es el momento del gran secreto de las barras de navegación verticales: colocar los botones uno al lado del otro. 3.Agregue un nuevo estilo a su hoja de estilo (directamente debajo del archivo .mainNavel estilo es un buen lugar): . mainNav li { flotador izquierdo; ancho: 12em; } Este estilo se aplica al <li>etiqueta (los elementos de la lista que contienen cada enlace). La primera declaración hace flotar la etiqueta a la izquierda. De esta forma, cada <li>la etiqueta intenta ajustarse al lado derecho del anterior <li>etiqueta. Además, establecer el ancho de la <li>etiqueta define el ancho de cada botón. Aquí, un valor de 12 ems proporciona suficiente espacio para contener el nombre de enlace más largo: Horóscopos. Cuando trabaja con enlaces más largos, necesita aumentar este valor. Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 331 Tutorial: Creando un navegación Bar Si obtiene una vista previa de la página ahora, verá que los conceptos básicos están completos. Todo lo que queda son algunas mejoras cosméticas (vea las áreas marcadas con círculos del n.° 1 en la figura 9-15). Primero, el borde inferior que creó en el Paso 10 en la página 327 se extiende por toda la longitud del <ul>etiqueta: más ancha que los propios botones de navegación. Aún más extraño, ese borde inferior ya no está en la parte inferior, ¡está encima de los botones de navegación! Además, dado que los botones se encuentran uno al lado del otro, sus bordes izquierdo y derecho se combinan para crear un borde de 2 píxeles entre cada botón. Ya solucionarás ese problema. Figura 9-15 Cambiar una pila vertical de botones de navegación al formato mucho más corto, uno al lado del otro, de una barra de navegación horizontal solo requiere un par de pasos. La mayor parte de su esfuerzo consiste en ajustar los estilos por consideraciones cosméticas como bordes y fondo colocación de imagen. 4.En el .mainNav aestilo, cambioborde inferior: ninguno;aborde izquierdo: ninguno;. Este cambio elimina el borde izquierdo para que los bordes no se doblen entre los botones y, al mismo tiempo, agrega un borde en la parte inferior de cada botón. Pero eso <ul>el borde inferior de la etiqueta todavía está encima de los botones, y ahora a la barra de navegación le falta un borde en el botón del extremo izquierdo (vea las áreas en círculos del #2 en la Figura 9-15). No hay problema, simplemente cambie el borde en el <ul>etiqueta. 5.Localiza el .mainNavestilo y cambioborde inferior: 1px punteado #999999; a borde izquierdo: 1px discontinuo #999999;. Si obtiene una vista previa de la página ahora, verá que el borde sobre los botones ya no está, pero aún no hay un borde izquierdo (#3 en la Figura 9-15). Estás presenciando una de las complicaciones de usar flotadores. Es decir, hacer flotar los elementos de la lista los elimina del flujo normal del documento, por lo que los navegadores web ya no los ven como parte de <ul> etiqueta, y el <ul>la etiqueta se reduce a casi ninguna altura; esa es la razón por la cual el borde inferior de la UL también apareció en la parte superior. (Si todo este escenario suena confuso, lo es. Es por eso que hay una sección completa del Capítulo 13 dedicada a tratar el problema; consulte la página 425 para obtener más detalles). 332 Css3: el manual perdido www.it-ebooks.info Afortunadamente, si bien el problema es complejo, la solución es simple. Agregue una propiedad CSS a la lista con viñetas. Tutorial: Creando un navegación Bar 6.Agregue una propiedad más al final del .mainNavestilo (los cambios están en negrita): . navegación principal { margen: 0; relleno: 0; estilo de lista: ninguno; borde izquierdo: 1px punteado #999999; desbordamiento: oculto; } Eldesbordamiento: ocultofuerza a la lista desordenada a expandirse. ¿Por qué funciona esta propiedad? Vea la cobertura detallada en la página 222. Finalmente, ese clip alineado con el borde derecho del botón “Usted está aquí” se ve divertido (#4 en la Figura 9-15). Cambiará su posición al borde izquierdo del botón. 7.Localice el estilo “Usted está aquí” que creó en el Paso 6 en la página 330.(Es el que tiene el selector loco y de largo aliento.) Cambie su posición de fondo de 97% 100%a3px 100%.El estilo ahora debería verse así: . casa .homelink, . función .featurelink, . experto .experlink, . cuestionario .quizlink, . proyecto .projectlink, . horoscopo .horoscopoLink { color de fondo: #FFFFFF; posición de fondo: 3px 100%; relleno derecho: 15px; relleno-izquierda: 30px; fuente-peso: negrita; } Obtenga una vista previa de la página y encontrará una barra de navegación horizontal completamente funcional (#5 en la Figura 9-15). Para ver la versión terminada, abra el archivo09_terminado→barra_navegación→ nav_bar_horizontal.html. NotaEs posible que desee centrar el texto dentro de cada botón. Si es así, debe hacer dos cosas: Agregaralineación de texto: centro;hacia .mainNav aestilo y ajustar ese estilorelleno izquierdohasta que el texto se vea absolutamente centrado. Capítulo 9:MEJORANDO LA NAVEGACIÓN DE SU SITIO www.it-ebooks.info 333 www.it-ebooks.info Capítulo 10 10 Transformaciones CSS, Transiciones, y animaciones F o la corta historia de la web, los diseñadores han tenido pocas opciones para agregar animación a sus sitios web. El GIF animado humilde y de aspecto ridículo proporciona una animación básica dentro de una imagen. El programa Flash de Adobe le permite crear animaciones complejas e incluso juegos y aplicaciones web, pero su curva de aprendizaje es empinada y no puede interactuar con el otro código HTML de su página, como las imágenes, los titulares y los párrafos que componen la mayoría de los sitios web. contenido. JavaScript le permite animar cualquier cosa en una página web, pero a costa de aprender un lenguaje de programación completo. Afortunadamente, CSS3 proporciona una forma de mover, transformar y animar cualquier elemento HTML en una página, sin recurrir a ninguna de esas otras tecnologías. Transforma CSS3 introduce varias propiedades que transforman un elemento de página web, ya sea girándolo, escalando, moviéndolo o distorsionándolo a lo largo de sus ejes horizontal y vertical (un proceso llamado sesgar). Puede usar una transformación, por ejemplo, para proporcionar una ligera inclinación (rotación) a una barra de navegación, o hacer que una imagen sea el doble de grande cuando un visitante pasa el mouse sobre ella. Incluso puedes combinar múltiples transformaciones para algunos efectos visuales salvajes. La propiedad CSS básica para lograr cualquiera de estos cambios es el CSStransformar propiedad. Utiliza esta propiedad al proporcionar el tipo de transformación que desea y un valor que indica cuánto transformar el elemento. Por ejemplo, para rotar un elemento, proporciona la palabra clavegirar,seguido del número de grados para girarlo: transformar: rotar (10 grados); 335 www.it-ebooks.info TRANSFORMAR La declaración anterior gira el elemento 10 grados en el sentido de las agujas del reloj. Las transformaciones CSS son relativamente nuevas y, por ese motivo, no son compatibles con todos los navegadores. Mientras que Internet Explorer 9, Safari, Chrome, Firefox y Opera admiten transformaciones 2D, Internet Explorer 8 y versiones anteriores no lo hacen. Además, debe usar prefijos de proveedores para todos los navegadores actuales. Entonces, para que el código anterior funcione, debe reescribirlo así: - transformación de webkit: rotar (10 grados); - transformación moz: rotar (10 grados); - o-transformar: rotar (10 grados); - ms-transform: rotar (10 grados); transformar: rotar (10 grados); NotaAnteriormente en este libro, ha visto otras propiedades de CSS3 que requieren prefijos de proveedores (-webkitlinear- gradiente),Por ejemplo. Hasta ahora, no ha encontrado el prefijo -ms-, que significa Microsoft y está dirigido a Internet Explorer. Internet Explorer 9 no comprende muchas propiedades de CSS3, por lo que normalmente no necesita prefijos de proveedores para ese navegador. Internet Explorer 10 (que puede estar disponible cuando lea esto) no usará prefijos de proveedores para la mayoría de las propiedades de CSS3 que se analizan en este libro. Sin embargo, IE 9haceentender eltransformarpropiedad, por lo que necesita usar el -ms-transformarproperty para que cualquier transformación funcione en ese navegador. Una característica extraña de las transformaciones CSS es que no afectan a otros elementos a su alrededor. En otras palabras, si rota un elemento 45 grados, en realidad puede superponer elementos arriba, abajo o al costado. Los navegadores web comienzan reservando el espacio que normalmente ocuparía el elemento (antes de la transformación), y luego transforman el elemento (girarlo, agrandarlo, moverlo o sesgarlo). Este proceso es evidente cuando aumenta el tamaño de un elemento mediante una transformación escalafunción (página 338). Si aumenta el tamaño de un elemento dos veces, el navegador amplía el elemento transformado pero no quita nada del contenido que lo rodea, lo que generalmente provoca que partes de la página se superpongan (Figura 10-1). En otras palabras, el navegador web conserva todas las demás partes de la página tal como aparecerían si el elemento no se ampliara. Figura 10-1 Sal de mi camino... o no. Los elementos transformados son prácticamente ignorados por otros elementos a su alrededor. agrandando el<div>aquí (el cuadrado grande) simplemente hace que se superponga con el titular que está arriba y abajo. El cuadro en el medio, con el contorno punteado, representa el div antes de que se escalara en dos. 336 Css3: el manual perdido www.it-ebooks.info Girar EltransformarpropiedadgirarLa función es fácil de entender: le das un valor de grado de 0 a TRANSFORMAR 360, y el navegador rota ese elemento el número especificado de grados alrededor de un círculo (ver Figura 10-2). Para especificar un valor de grado, utilice un número seguido de gradoPor ejemplo, para rotar un elemento 180 grados, agregue esta declaración: transformar: rotar (180 grados); NotaPara ahorrar espacio, estos ejemplos no incluyen todos los prefijos de proveedores aquí, pero cuando coloca este código en una hoja de estilo, debe agregar el -webkit-transform, -moz-transform, -o-transform,y - ms-transformarpropiedades también. Incluso puede usar números negativos para rotar el elemento en sentido contrario a las agujas del reloj. Por ejemplo, el elemento en la parte superior central de la Figura 10-2 se gira 45 grados en sentido antihorario de esta manera: transformar: rotar (-45 grados); El valor0 gradosno proporciona rotación, mientras que360 gradoses una rotación completa, y 720 gradosson dos rotaciones completas. Por supuesto, mirar un elemento que se ha girado una, dos o tres veces se verá como un elemento que no se ha girado en absoluto (arriba a la izquierda y abajo a la derecha en la Figura 10-2), por lo que está probablemente se pregunte por qué alguna vez usó un valor de 360 o superior. CSS3 proporciona un mecanismo para animar cambios en las propiedades de CSS. Entonces, por ejemplo, puede hacer que un botón gire cuatro veces cuando un visitante pasa el mouse sobre él comenzando con una rotación inicial de0 grados y añadiendo un:flotarestilo para ese botón que tiene una rotación de1440 grados.Aprenderá a hacer esto en la página 339. Figura 10-2 Dé vuelta a su página en su cabeza. Con el girarfunción puede hacer que cualquier elemento de la página (div, botón, banner, foto o pie de página) gire ligeramente o completamente de forma salvaje. Como siempre, tenga en cuenta a su audiencia y asegúrese de que su página siga siendo legible cada vez que aplique cualquier tipo de transformación CSS. Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 337 TRANSFORMAR Escala También puede cambiar el tamaño de un elemento, haciéndolo más grande o más pequeño usando elescala función (ver Figura 10-3). Por ejemplo, para hacer que un elemento sea el doble de grande, agrega esta declaración: transformar: escala(2); El número que proporcione entre paréntesis es un factor de escala, un número que se multiplica por el tamaño actual del elemento. Por ejemplo,1no hay escala, .5es la mitad del tamaño actual, mientras que4es cuatro veces el tamaño actual. En otras palabras, un número entre 0 y 1 reduce el tamaño de un elemento, mientras que un número mayor que 1 lo hace más grande (un valor de 0 en realidad hace que el elemento sea invisible en la página). Figura 10-3 Utilizar elescalafunción para aumentar el tamaño de cualquier elemento de la página. Tenga en cuenta que cuando amplía un elemento, el navegador no quita otros elementos de la página. De hecho, siempre que aumente la escala de un elemento, lo más probable es que se superponga a otros elementos (el cuadro en la parte superior derecha, por ejemplo). Puede leer más sobre cómo se transforman los navegadores elementos junto con otro contenido de la página en la página 335. El elemento y todo lo que contiene está escalado por este número. Por ejemplo, si escalas un <div> etiquete por un factor de dos, no solo ese div sería el doble de ancho y alto, sino que también el texto dentro sería el doble de grande, al igual que cualquier imagen dentro de él. Por supuesto, es posible que se pregunte por qué alguna vez usaría esto. Después de todo, podría aumentar o disminuir fácilmente el ancho y la altura del elemento, usando el CSS anchoyaltura propiedades, y puede escalar el tamaño del texto hacia arriba o hacia abajo usando eltamaño de fuentepropiedad. El uso más común de la escala es realizar un cambio visual en un elemento de forma dinámica en la página. Por ejemplo, pasar el mouse sobre un botón puede hacer que ese botón sea momentáneamente más grande. Podrías lograr este efecto con:flotarestado. 338 Css3: el manual perdido www.it-ebooks.info Traducido del inglés al español - www.onlinedoctranslator.com Por ejemplo, supongamos que tiene un enlace en una página con la extensión .botónclase aplicada. Puede crear un estilo simple como este para formatear ese botón: TRANSFORMAR . botón { fuente: .9em Arial, Helvetica, sans-serif; borde-radio: .5em; color de fondo: rgb(34,255,23); borde: 1px sólido rgba (0,0,0, .5); relleno: 0,5 em; } Para enfatizar realmente ese botón, puede hacer que se haga un poco más grande cuando un visitante pasa el mouse sobre él, así: . botón: flotar { - transformación de webkit: escala (1.2); - transformación moz: escala (1.2); - o-transformada: escala (1.2); - transformada ms: escala (1.2); transformar: escala (1.2); } Cuando el visitante quita el mouse del botón, la transformación se elimina y el botón vuelve a su tamaño normal. En la página 345, incluso aprenderá cómo puede animar este cambio de tamaño usando transiciones CSS. CONSEJOPuedes usar una idea similar para las imágenes. Muestre una galería de imágenes pequeñas y luego agregue un:flotar estilo para que cuando un visitante pase el mouse sobre la imagen, se haga más grande. Para que esto se vea bien, debe insertar la versión final ampliada de la imagen dentro del HTML, pero establecer su tamaño más pequeño usando CSS o < imagen> etiquetasanchoyalturapropiedades. Incluso puede escalar las dimensiones horizontales y verticales por separado. Para hacer esto, proporcione dos valores separados por una coma dentro de los paréntesis; el primer número es la escala horizontal y el segundo es la escala vertical. Por ejemplo, para hacer que un elemento sea la mitad de ancho pero el doble de alto, use esta declaración: transformar: escala(.5,2); Puede ver el efecto en la parte inferior izquierda de la Figura 10-3. CSS3 también proporciona funciones separadas para la escala horizontal y vertical:escalaX escalas a lo largo del eje horizontal, mientras queescalaYescalas verticalmente. Por ejemplo, para hacer un elemento el doble de alto sin cambiar su ancho, escribirías esto: transformar: escalaY(2); NotaNuevamente, para ahorrar espacio, este ejemplo muestra solo la versión sin prefijo de la propiedad de transformación. Para que esto funcione en todos los navegadores, deberá agregar el prefijo adecuado:kit web, -moz,etcétera. Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 339 TRANSFORMAR Pero para hacer un elemento tres veces y media más ancho, pero no más alto ni más bajo, usaría: transformar: escalaX(3.5); Hay otro truco visual que ofrece el escalado: la capacidad de voltear un elemento al revés y al revés. Nadie está seguro de qué rama de las matemáticas usó el W3C para crear este sistema, pero si usa un número negativo conescala,en realidad le das la vuelta a un elemento. Por ejemplo, aquí se explica cómo voltear un elemento al revés y de izquierda a derecha: transformar: escala (-1); Esto produce la imagen representada en la Figura 10-4, izquierda. También puede voltear el elemento en un solo eje. En la imagen de lucha de la figura 10-4, la imagen se voltea solo sobre su eje horizontal. Voltear el elemento a lo largo de su eje vertical produce la imagen del medio: transformar: escala (-1,1); Produce el efecto de un espejo sostenido al costado del elemento, o como si hubiera volteado el elemento y estuviera mirando a través de su parte posterior. ¡Qué divertido! Figura 10-4 Las formas en que puede usar CSS para confundir y enfurecer a los visitantes de su sitio web no tienen fin. El cuadro de la izquierda se voltea sobre el eje horizontal, el cuadro en el el centro se voltea sobre el eje vertical, y el de la derecha se voltea en ambos sentidos. Por supuesto, si desea crear un sitio de homenaje a Leonardo DaVinci (www . mos.org/sln/ Leonardo/ LeonardoRighttoLeft.html), ¡crear una imagen especular de todo el texto en una página puede ser justo lo que necesitas! Traducir EltransformarpropiedadtraducirLa función simplemente mueve un elemento desde su posición actual una cantidad determinada hacia la izquierda o hacia la derecha y hacia arriba o hacia abajo. Por sí mismo, realmente no es tan útil. Como leyó en la página 335, cuando un navegador web transforma un elemento, no reorganiza la página; presenta la página como si el elemento no tuviera transformación. En consecuencia, cuando mueve un div u otra etiqueta, usando eltraducir función, el navegador deja un espacio vacío donde normalmente aparecería la etiqueta, 340 Css3: el manual perdido www.it-ebooks.info y luego dibuja el elemento en su nueva posición (ver Figura 10-5). Si simplemente quiere colocar un elemento en la página, puede usar el posicionamiento absoluto o relativo como se TRANSFORMAR describe en el Capítulo 15. Figura 10-5 Eltraducirfunción mueve un elemento un número determinado de píxeles, ems o un porcentaje de su lugar normal en una página. Esto a menudo deja un espacio vacío: el área en blanco entre los dos titulares es donde se destaca el<div> normalmente aparecería la etiqueta. Sin embargo,traducires útil cuando desea realizar movimientos sutiles en respuesta a un desplazamiento o clic. Por ejemplo, en muchos diseños de interfaz de usuario, cuando hace clic en un botón, se mueve ligeramente hacia abajo y hacia la izquierda, simulando el aspecto de un botón 3D real que se presiona en un teclado. Puede simular este efecto usando el traducirfunción y el:activoestado de un enlace: . botón: activo { - webkit-traducir(1px,2px); - moz-traducir(1px,2px); - o-traducir(1px,2px); - ms-translate(1px,2px); traducir(1px,2px); } EltraducirLa función toma dos valores: el primero especifica el movimiento horizontal y el segundo el movimiento vertical. En este ejemplo, al hacer clic en un elemento con el . botónclass mueve ese elemento un píxel a la derecha y dos píxeles hacia abajo. Use un número negativo para el primer valor para mover el elemento a la izquierda; use un número negativo para el segundo valor para mover el elemento hacia arriba. Tampoco está limitado a los valores de píxeles. Cualquier valor de longitud de CSS válido:px, em, %,y así sucesivamente funcionará. CSS3 también proporciona dos funciones adicionales para mover un elemento solo hacia la izquierda o hacia la derecha:traducirX—y arriba o abajo—traducirY.Por ejemplo, para mover un elemento hacia arriba 0,5 ems, utilice eltraducirYfuncionar así: transformar: traducirY(-.5em); Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 341 TRANSFORMAR La verdadera diversión con la función de traducción es cuando se usa con transiciones CSS. Con la transición CSS, puede animar el movimiento del elemento para que viaje por la pantalla. Aprenderá cómo hacerlo en la página 345. Sesgar Sesgar un elemento le permite inclinarlo sobre sus ejes horizontal y vertical: esto puede darle a un elemento una sensación tridimensional (vea la Figura 10-6). Por ejemplo, para inclinar todas las líneas verticales de modo que se inclinen hacia la izquierda 45 grados (como en la primera imagen de la Figura 10-6), escribiría este código: transformar: sesgar (45 grados, 0); Para hacer lo mismo a lo largo del eje Y (imagen del medio en la Figura 10-6), escribiría esto: transformar: sesgar (0,45 grados); Puede sesgar un elemento en ambos ejes a la vez. Por ejemplo, aquí está el código usado para producir la tercera imagen en la Figura 10-6: transformar: sesgar (25 grados, 10 grados); El primer valor es un valor de grado de0 gradosa360 grados,procediendo en sentido contrario a las agujas del reloj desde la parte superior del elemento. Por ejemplo, en la primera imagen de la Figura 10-6, los 45 grados están representados por una línea dibujada desde el centro del elemento y rotada 45 grados en sentido antihorario (abajo a la izquierda). Figura 10-6 La función de sesgo es una forma de simular un aspecto 3D. Sin embargo, como verá en el cuadro de la página 345, CSS3 en realidad ofrece una mejor manera de simular tres dimensiones, con transformaciones 3D. NotaRecuerde agregar versiones prefijadas del navegador deltransformarpropiedad a su CSS terminado: - transformación de webkit, -transformación de moz,etcétera. 342 Css3: el manual perdido www.it-ebooks.info El segundo valor es también un valor de grado de0 gradosa360 gradosPero éste procede en el sentido de las agujas del reloj desde la derecha del elemento. Entonces, la imagen del medio en la Figura 10-6 muestra una TRANSFORMAR inclinación de 45 grados de todas las líneas horizontales. CONSEJOVisitahttp://westciv.com/tools/transforms/index.htmlpara jugar con una herramienta en línea para visualizar transformaciones CSS. Al igual que con traducir y escalar, CSS3 ofrece funciones separadas para los ejes x e y: sesgadoXysesgado. NotaCSS3 proporciona otro método de transformación llamadomatriz. Una matriz es una matriz de números, como se usa en álgebra avanzada. Son bastante alucinantes y nada intuitivos a menos que seas Stephen Hawking. Pero si quieres saber cómo funcionan, visitahttp://dev.opera.com/articles/view/understanding-the-css-transformsmatrix/para una explicación lo más lúcida posible. Transformaciones Múltiples No estás limitado a una sola transformación. Puede escalar una imagen y sesgarla; gírelo y tradúzcalo; o use cualquiera de las cuatro funciones de transformación diferentes simultáneamente. Simplemente agregue funciones adicionales altransformarpropiedad, cada uno separado por un espacio. Por ejemplo, así es como puede rotar un elemento 45 grados y agrandarlo al doble de su tamaño normal: transformar: rotar (45 grados) escala (2); Aquí hay un ejemplo con las cuatro transformaciones aplicadas al mismo tiempo: transformar: sesgar (45 grados, 0 grados) escala (.5) traducir (400 px, 500 px) rotar (90 grados); El orden en el que coloca las funciones de transformación es el orden en el que el navegador aplica estos efectos. Por ejemplo, en el segundo ejemplo, el elemento primero se sesga, luego se escala, luego se traslada y finalmente se gira. El orden realmente no importa a menos que estés usandotraducir.Desdetraducirrealmente mueve el elemento, si lo coloca antes de rotar, por ejemplo, el navegador primero mueve el elemento y luego lo rota. Dado que el elemento se movió primero, el punto alrededor del cual gira ha cambiado. Por otro lado, si lo rota primero, entonces está moviendo el elemento rotado una cierta cantidad desde su centro (que ahora está en una nueva ubicación). origen Normalmente, cuando aplica una transformación a un elemento, el navegador web utiliza el centro del elemento como punto de transformación. Por ejemplo, cuando rota un elemento, el navegador lo rota alrededor de su punto central (Figura 10-7, izquierda). Sin embargo, CSS3 te permite cambiar ese punto de transformación, usando eltransformar-origenpropiedad. Funciona igual que elposición de fondopropiedad (página 246); puede proporcionar valores de palabras clave, valores absolutos en píxeles y valores relativos en ems y porcentajes. Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 343 TRANSFORMAR Por ejemplo, para rotar un div alrededor de su punto superior izquierdo (Figura 10-7, centro), puede usar el izquierdayarribapalabras clave, como esta: transformar-origen: arriba a la izquierda; También puede utilizar valores de píxel: transformar-origen: 0 0; O porcentajes: transformar-origen: 0% 0%; Asimismo, para rotar un elemento alrededor de su esquina inferior derecha (Figura 10-7, derecha), use elbienyabajopalabras clave: transformar-origen: abajo a la derecha; Que también es equivalente a: transformar-origen: 100% 100%; Cuando se utilizan valores de píxel, em o porcentaje, el primer número es la posición horizontal y el segundo es la posición vertical. NotaEltransformar-origenLa propiedad no tiene efecto en los elementos que solo se mueven usando el traducirfunción. Figura 10-7 Configuración de latransformarorigenpropiedad cambia el punto en el elemento donde se aplica la transformación. El origen predeterminado es la mitad del elemento (izquierda), pero puede cambiarlo a la parte superior izquierda (centro) o a la parte inferior derecha (derecha). Los cuadrados punteados representan el elemento si no se hubiera girado (su posición habitual en la página). 344 Css3: el manual perdido www.it-ebooks.info TRANSICIONES CLÍNICA DE USUARIOS ELÉCTRICOS Transformaciones 3D CSS3 también ofrece un tipo de transformación mucho más complejo. Las muestra un cubo giratorio, que puede cambiar en un transformaciones 3D le permiten simular un espacio tridimensional en la conjunto giratorio de fichas. pantalla plana de un monitor, tableta o teléfono. • Otra gran demostración de Apple, la galería de imágenes Horizontal Para obtener una breve introducción a las transformaciones 3D, visite 3D (ht tps: //desarrollador. apple.com/safar idemos/ showcase/ http://codificación. smashingmagazine.com/2012/01/06/aventuras-en- gallery/) le permite hojear, como un carrusel, a través de una serie la-tercera-dimensión-css-3-d-transforms/yhttp://blogs.msdn. com/b/ie/ de fotos. archive/2012/02/02/css3-3d-transforms-in-ie10. aspx. Para ver algunos • Pila de nieve: use las teclas de flecha izquierda y derecha para enviar excelentes ejemplos de transformaciones 3D en acción, visite estos una galería interminable de fotos tomadas por:http://www.satine. sitios: org/research/webkit/snowleopard/snowstack.html. • Uno de los primeros ejemplos del poder de las transformaciones 3D, • El sitio web de BeerCamp 2011 (http://2011.beercamp.com) la página Morphing Power Cubes de Apple (www.webki t. org/ blog-files/3d-transforms/morphing-cubes.html) proporciona una forma innovadora de navegar moviendo las páginas "hacia adelante" y "hacia atrás" a través del espacio. Transiciones Si bien las transformaciones pueden ser divertidas (especialmente lasgirarfunción), realmente dan vida a su página cuando se combinan con una transición CSS3. Atransiciónes simplemente una animación de un conjunto de propiedades CSS a otro conjunto durante un período de tiempo específico. Por ejemplo, puede hacer que un banner gire 360 grados en el transcurso de dos segundos. Para que una transición funcione, necesita algunas cosas en su lugar: • Dos estilos.Un estilo representa el aspecto inicial del elemento, por ejemplo, un botón de navegación rojo, mientras que el segundo estilo es el aspecto final, un botón de navegación azul. El navegador web se encargará del proceso de animar el cambio entre los dos estilos (cambiar el botón de rojo a azul, por ejemplo). • Eltransiciónpropiedad.CSS3 agrega eltransiciónpropiedad: la salsa secreta que hace posible la animación. En general, se aplica eltransición propiedad al estilo original, el estilo que define el aspecto de un elemento antes de que comience la animación. • Un gatillo.El disparador es la acción que provoca el cambio entre los dos estilos. Con CSS, puede usar varias pseudoclases para activar una animación. El más común es el:flotarpseudo-clase. Con él, puede animar el cambio entre la apariencia normal de un elemento y cómo se ve cuando un visitante pasa el mouse sobre él. Verás un ejemplo de eso en solo un minuto. Además, Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 345 tienes :activo (cuando se hace clic con el mouse en un elemento), :objetivo (cuando un elemento TRANSICIONES es el destino del enlace), y:enfocar (cuando se tabula un enlace, o se hace clic en un campo de formulario o se tabula). Más allá de eso, puede usar JavaScript para cambiar dinámicamente el estilo de cualquier etiqueta (consulte el cuadro en la página 351). Cuando el activador ya no se aplica, cuando el visitante quita el mouse de un botón de navegación, por ejemplo, el navegador devuelve la etiqueta a su estilo anterior. y anima todo el proceso. En otras palabras, solo necesita establecer una transición a un elemento una vez, y el navegador se encarga de animar de un estilo a otro y volver al estilo original. Un navegador web no puede animar todas las propiedades de CSS, pero todavía tiene una larga lista de propiedades para elegir. Además derotar, escalar, traducir, ysesgar transformaciones sobre las que acaba de leer, también puede animarcolor, color de fondo, color de borde, ancho de borde, tamaño de fuente, alto, ancho, espacio entre letras, alto de línea, margen, opacidad, relleno, espacio entre palabras;las propiedades de posicionamiento —arriba, izquierda, derecha,yabajo-del que aprenderá en el Capítulo 15; y muchas otras propiedades. Puede encontrar una lista completa enwww.w3.org/TR/css3-transitions/ #animatable-properties. NotaLas transiciones CSS3 funcionan en la mayoría de los navegadores. Desafortunadamente, cuando se trata de Internet Explorer, solo la versión 10 y posteriores comprenden las transiciones CSS. Debido a esto, es mejor usar las transiciones simplemente como una forma de agregar emoción visual. En general, esto está bien: IE 9 y versiones anteriores, en la mayoría de los casos, podrán cambiar entre dos estilos (por ejemplo, mostrar unflotarestilo) sin animar ese cambio. Agregar una transición El corazón de las transiciones CSS son cuatro propiedades que controlan qué propiedades animar, cuánto dura la animación, el tipo de animación utilizada y un retraso opcional antes de que comience la animación. Aquí hay un ejemplo simple. Supongamos que desea que el color de fondo de un botón de navegación cambie de naranja a azul cuando un visitante pasa el mouse sobre él. Primero, comienza con los dos estilos necesarios para cambiar entre estos dos colores. Por ejemplo, puede aplicar una clase de .Botón de navegaciónal enlace y luego crea dos estilos, así: . botón de navegación { color de fondo: naranja; } . botón de navegación: hover { color de fondo: azul; } Estos estilos funcionarán en cualquier navegador; Al pasar el cursor sobre el botón de navegación, el fondo cambiará de naranja a azul. Sin embargo, el cambio es instantáneo. Para hacer que el color se anime durante un segundo, agregue dos nuevas propiedades al archivo .Botón de navegación estilo, así: 346 Css3: el manual perdido www.it-ebooks.info . botón de navegación { color de fondo: naranja; propiedad de TRANSICIONES transición: color de fondo; transiciónduración: 1s; } . botón de navegación: hover { color de fondo: azul; } La primera propiedad—propiedad de transición—especifica qué propiedades animar. Puede especificar una sola propiedad (como en el ejemplo anterior), use la palabra clavetodo para animar todas las propiedades CSS que cambian, o use una lista separada por comas para especificar más de una (pero no todas) propiedades. Por ejemplo, supongamos que crea un:flotarestilo para que el color del texto, el color de fondo y el color del borde cambien. Enumeras las tres propiedades de esta manera: propiedad de transición: color, color de fondo, color de borde; O, para simplificar, utilice eltodopalabra clave como esta: propiedad de transición: todos; En la mayoría de los casos, usandotodofunciona bien, ya que cada cambio de CSS está animado, lo que crea un efecto visual agradable. Para especificar cuánto tarda en completarse la animación, utilice elduración de la transición propiedad. Esta propiedad toma un valor en segundos o milisegundos (milésimas de segundo). Por ejemplo, para que una transición tarde medio segundo en completarse, puede utilizar cualquiera de las siguientes opciones: duración de la transición: 0,5 s; O: transición-duración: 500ms; Incluso es posible establecer tiempos separados para cada propiedad animada. Por ejemplo, cuando un visitante pasa el mouse sobre un botón, es posible que desee que el color del texto cambie rápidamente, que el color de fondo cambie un poco más lentamente y que el color del borde cambie muy lentamente. Para hacerlo, necesita listar las propiedades animadas, usandopropiedad de transicióny luego enumere los tiempos, usandoduración de la transición,como esto: propiedad de transición: color, color de fondo, color de borde; duración de la transición: 0,25 s, 0,75 s, 2 s; El orden en que enumera las horas debe coincidir con el orden en que enumera las propiedades. Entonces, en el ejemplo anterior, .25sva con elcolorpropiedad, .años 75con el color de fondopropiedad, y la2scon elcolor del bordepropiedad. Si mueve las propiedades, su tiempo cambia. Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 347 TRANSICIONES Desafortunadamente, como muchas propiedades de CSS3, las transiciones requieren prefijos de proveedores para funcionar. En otras palabras, el .Botón de navegaciónEl ejemplo anterior no funcionará en la mayoría de los navegadores hasta que agregue los prefijos de proveedores adecuados, por lo que debe volver a escribir ese estilo de esta manera: . botón de navegación { color de fondo: naranja; - propiedad de transición de webkit: color de fondo; - moz-transition-property: color de fondo; - o-transición-propiedad: color de fondo; propiedad de transición: color de fondo; - webkit-transition-duration: 1s; - moz-transición-duración: 1s; - o-transition-duration: 1s; transición-duración: 1s; } No necesitas un -EMel prefijo del proveedor para Internet Explorer desde IE 9 y versiones anteriores no entienden las transiciones, e IE 10 entiende las versiones sin prefijo de las propiedades de transición. NotaA partir de este escrito, las versiones actuales de Firefox y Opera ya no requieren prefijos de proveedores para las transiciones. Pero para asegurarse de que sus animaciones aún funcionen en versiones anteriores de esos navegadores, es mejor seguir usando el -mozy -oprefijos de proveedores por el momento. Tiempo de transición Para tener una transición animada que funcione, solo necesita configurarpropiedad de transición yduración de la transición.Sin embargo, puede controlar la velocidad de la animación usando elfunción de temporización de transiciónpropiedad. Esta propiedad puede resultar un poco confusa: no controla el tiempo que tarda la animación (eso es lo queduración de la transiciónpropiedad es para). En cambio, controla la velocidad.durantela animación. Por ejemplo, puede comenzar la animación lentamente y luego completarla rápidamente, creando un efecto donde el color de fondo cambia casi imperceptiblemente al principio y luego completa rápidamente su cambio de color. Elfunción de temporización de transiciónLa propiedad puede tomar una de cinco palabras clave: lineal, facilidad, facilidad de entrada, facilidad de salida,yfacilidad de entrada y salida.Si no especifica una función de temporización, el navegador utiliza elfacilidadmétodo, que comienza la animación lentamente, se acelera en el medio y se ralentiza al final, proporcionando un cambio más orgánico. El linealLa opción proporciona un cambio constante a lo largo de toda la duración de la animación. Ninguna opción es realmente mejor que la otra, solo brindan diferentes apariencias, así que pruébalas para ver cuál te gusta más. 348 Css3: el manual perdido www.it-ebooks.info Para usarlo, simplemente agregue elfunción de temporización de transiciónpropiedad y el método que le gustaría usar: TRANSICIONES función de temporización de transición: facilidad de entrada y salida; Por supuesto, al igual que con todas estas propiedades de transición, también debe agregar prefijos de proveedores. Entonces, para que esta línea de código funcione en tantos navegadores como sea posible, deberá reescribirla como: - webkit-transition-timing-function: facilidad de entrada y salida; - moz-transition-timing-function: facilidad de entrada y salida; - o-transition-timing-function: facilidad de entrada y salida; función de temporización de transición: facilidad de entrada y salida; NotaEs mucho más fácil ver las diferentes funciones de temporización que describirlas. Visitawww.el-arte-de-la-web . com/css/timing-function/para ver una excelente comparación lado a lado de los cinco métodos de cronometraje. También puede usar lo que se llama uncubic-beziervalor para elfunción de temporización de transiciónpropiedad. La curva de Bezier traza el progreso de la animación a lo largo del tiempo (consulte la Figura 10-8). Si ha utilizado un programa de dibujo como Adobe Illustrator, probablemente esté familiarizado con las curvas de Bezier. Al ajustar dos puntos de control, puede controlar cómo se curva la línea: cuanto más inclinada sea la línea, más rápida será la animación, cuanto más plana sea la línea, más lenta. Por ejemplo, la curva de Bézier que se muestra en la figura 10-8 comienza empinada (la animación comienza rápidamente), luego se aplana en el medio (la animación se ralentiza) y luego vuelve a ser empinada (la animación avanza rápidamente hasta su estado final). Para crear este tipo de animación, agregue esta línea de código: función de temporización de transición: cubic-bezier (.20, .96, .74, .07); Las curvas cúbicas de Bezier no son algo que se te pueda ocurrir de la cabeza. Es mejor que utilice una de las muchas herramientas en línea para crear y probar diferentes funciones de temporización. La herramienta César de Mathew Lein es una de las mejores:http:// matthewlein.com/ceaser/. Al igual que con elduración de la transiciónpropiedad, puede aplicar diferentes tiempos a diferentes propiedades. Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 349 TRANSICIONES Figura 10-8 La creación de una curva Bézier cúbica le permite crear una amplia gama de funciones de temporización interesantes para sus animaciones. Puede hacer que comiencen muy lentamente y terminen rápidamente, o viceversa. La herramienta César en línea hace que la creación de curvas Bézier cúbicas sea muy fácil: simplemente tome el controlador en el punto inferior izquierdo y arrastre para cambiar la pendiente de la línea, y luego arrastre el punto de control en el punto superior derecho. Cuanto más inclinada sea la línea, más rápido será el progreso de la animación en esa etapa. En este ejemplo, la línea comienza relativamente plana, lo que significa que la animación se moverá lentamente al principio, luego aumentará abruptamente al final, lo que significa que la animación progresará rápidamente hasta el final al final de la duración de la transición. 350 Css3: el manual perdido www.it-ebooks.info TRANSICIONES CLÍNICA DE USUARIOS ELÉCTRICOS Uso de JavaScript para desencadenar transiciones Las transiciones CSS3 son animaciones fáciles de usar integradas directamente en los las transiciones funcionan cada vez que cambia una propiedad CSS, incluso si navegadores web (al menos en la mayoría de los navegadores web). Puede crear efectos cambia la propiedad CSS usando JavaScript. complejos simplemente definiendo un conjunto de propiedades CSS para comenzar y JavaScript es un lenguaje de programación que le permite agregar un conjunto de propiedades CSS para terminar, y luego dejar de lado y dejar que el interactividad a las páginas web, crear interfaces de usuario dinámicas y navegador web se encargue del resto. muchas otras cosas. Pero también puede usar JavaScript para Desafortunadamente, está limitado a solo un puñado de selectores de CSS para simplemente agregar o eliminar una clase de un elemento, o cambiar activar esas transiciones. Más comúnmente, usará el:flotarpseudo-clase para cualquier propiedad de CSS que desee. Con JavaScript, puede agregar hacer que un elemento cambie cuando se pasa el mouse sobre él. También una clase a una imagen cuando un visitante hace clic en el enlace puede utilizar el:enfocarpseudo-clase en un elemento de formulario para "Mostrar imagen más grande". Esa nueva clase simplemente escala la animarlo cuando un usuario hace clic dentro de él (por ejemplo, puede hacer imagen (usando elescala transformación discutida en la página 367). Al que un área de texto de varias líneas crezca en altura cuando se enfoca, luego agregar una transición a la imagen, tendrá una animación instantánea. se reduce a unas pocas líneas cuando un visitante hace clic fuera de él) ). JavaScript es un gran tema digno de su propio libro... da la casualidad de que hayJavaScript y jQuery: El manual perdidode Por ejemplo, CSS no tiene un:hacer clicpseudo-clase, por lo que si desea este autor que vale la pena leer. Pero si desea comenzar con la activar una transición cuando alguien hace clic en un elemento, no forma más sencilla de usar las transiciones CSS activadas por puede hacerlo con CSS. Del mismo modo, si desea pasar el cursor sobre JavaScript, lea este breve tutorial:www.netmagazine.com/ un elemento pero desencadenar una animación en otro elemento, no tutorials/getmore-out-your-css-transitions-jquery. tendrá suerte... si solo está utilizando CSS. Pero CSS Retrasar el inicio de una transición Finalmente, puede evitar que una transición se anime de inmediato con eltransiciónretraso propiedad. Por ejemplo, si desea esperar medio segundo antes de que comience la animación, puede agregar este código: transición-retraso: .5s; Y, por supuesto, esta propiedad requiere prefijos de proveedores, por lo que para que este código funcione en la mayoría de los navegadores, debe escribir: - webkit-transition-delay: .5s; - moz-transición-retraso: .5s; - o-transition-delay: .5s; transición-retraso: .5s; Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 351 TRANSICIONES La mayoría de las veces, no querrá usar un retraso para todas las propiedades, ya que socava el potencial de interactividad de la transición. Después de todo, es más como un truco cruel hacer que sus visitantes esperen un segundo antes de ver algún cambio visual cuando pasan el mouse sobre su botón. Sin embargo, si está animando varias propiedades, es posible que desee hacer que una propiedad espere hasta que las demás finalicen antes de que comience su animación. Por ejemplo, supongamos que tiene un botón cuyo color de fondo y color de texto desea cambiar, y luego el color del borde cambia repentinamente después de que las otras dos propiedades hayan terminado. Así es como podrías hacerlo: . botón de navegación { de color negro; color de fondo: #FF6603; borde: 5px sólido #660034; propiedad de transición: color, color de fondo, color de borde; transición-duración: 1s, 1s, .5s; transición-retraso: 0, 0, 1s; } . botón de navegación: hover { color blanco; color de fondo: #660034; color del borde: #FF6603; } Al igual que con la propiedad de duración de la transición, puede especificar diferentes valores de retraso para cada propiedad. El orden en el que enumera los tiempos debe coincidir con el orden de las propiedades enumeradas parapropiedad de transición.Por ejemplo, en el código anterior, no hay demora para la transición entre el color y el color de fondo, pero hay una demora de un segundo antes de que cambie el color del borde. CONSEJOPor lo general, coloca las propiedades de transición en el estilo inicial (por ejemplo, .Botón de navegaciónen la página 348), no el estilo final (.Botón de navegación: pasar el mouse).Sin embargo, aquí hay un truco para usar con los menús desplegables de CSS (vea el cuadro en la página 313). Un problema con los menús desplegables en CSS es que, por lo general, desaparecen muy rápidamente si accidentalmente se sale del menú con el mouse. Sin embargo, puede hacer que el menú aparezca rápidamente pero desaparezca lentamente usando eltransición-retrasopropiedad. Para hacerlo, agregue el siguiente código al estilo original: transición-retraso: 5s; Luego no agregue ningún retraso a:flotarestilo: transición-retraso: 0; Es un poco contradictorio, pero este código básicamente hace que:flotarla transición ocurre de inmediato, sin demora. Pero volver al estilo normal (donde desaparece el menú) tarda 5 segundos. Durante ese tiempo, un visitante tiene suficiente tiempo para mover su mouse errante sobre el menú antes de que desaparezca. 352 Css3: el manual perdido www.it-ebooks.info Taquigrafía de transición Escribiendo todas las diferentes propiedades:transición-propiedad, transición-duración, TRANSICIONES transición-tiempo-función,yduración de la transición-puede volverse bastante agotador. Especialmente cuando considera que también necesita crear versiones prefijadas por el proveedor de cada uno de ellos. Afortunadamente, existe una forma más rápida de crear transiciones: la transiciónpropiedad. Esta propiedad agrupa todas las demás propiedades en una sola. Para usarlo, simplemente enumere la propiedad, la duración, la función de tiempo y la duración en una lista separada por espacios. Por ejemplo, para animar todas las propiedades CSS durante un segundo usando elfacilidad enfunción de temporización, con un retraso de medio segundo, escriba lo siguiente: transición: todo 1s-in .5s; Necesitas enumerar cualquieratodoo una sola propiedad CSS y una duración, pero la función de temporización y el retraso son opcionales. Por defecto, la función de temporización esfacilidad eny no hay demora. Entonces, si simplemente desea animar la transición de todas las propiedades CSS durante un segundo, escriba esto: transición: todo 1s; Si solo desea animar el cambio en el color de fondo, enumere esa propiedad: transición: color de fondo 1s; Solo puede enumerar una sola propiedad CSS aquí, por lo que si desea animar varias propiedades CSS (pero no todas), puede escribir una lista separada por comas de propiedades de transición separadas por espacios. Tome el ejemplo de la página 347, donde elcolor del bordeLa propiedad se anima por separado del color y el color de fondo. Puedes reescribir ese código así: transición: color 1s, color de fondo 1s, color de borde .5s 1s; Para que el código sea más fácil de leer, muchos diseñadores web colocan cada transición en una línea separada, como esta: transición: color 1s, color de fondo 1s, borde-color .5s 1s; Esto es perfectamente legal siempre que recuerde separarlos con una coma y terminar todo el asunto con un punto y coma. Y, por supuesto, también debe crear versiones con prefijo de proveedor: - transición de webkit: color 1s, color de fondo 1s, borde-color .5s 1s; - transición moz: color 1s, color de fondo 1s, borde-color .5s 1s; Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 353 ANIMACIONES - o-transición: color 1s, color de fondo 1s, borde-color .5s 1s; transición: color 1s, color de fondo 1s, borde-color .5s 1s; animaciones CSS3 proporciona otro mecanismo más rico en funciones para crear animaciones. Con las transiciones CSS, solo puede animar de un conjunto de propiedades CSS a otro. CSS3animacionesle permite animar de un conjunto de propiedades a otro conjunto a otro conjunto y así sucesivamente. Además, puede hacer que una animación se repita, hacer una pausa cuando un visitante pasa el mouse sobre ella e incluso invertirse una vez que la animación llega a su fin. Las animaciones CSS3 son un poco más complicadas que las transiciones, pero tienen el beneficio adicional de que no necesariamente necesitan un disparador para comenzar la animación. Si bien puede agregar una animación a un:flotarestado para que la animación se reproduzca cuando el mouse pasa sobre un elemento, también puede hacer que una animación comience cuando se carga la página. Este efecto le permite llamar la atención sobre un banner o logotipo al animarlo en la página cuando un visitante ingresa por primera vez a su sitio. NotaLas animaciones CSS3, como las transiciones, no funcionan en Internet Explorer 9 o versiones anteriores. Sin embargo, son compatibles con la mayoría de los demás navegadores actuales. El primer paso para crear una animación es crear un conjunto de fotogramas clave. En animación, un fotograma clavees un solo cuadro de una animación que dicta cómo se ve la escena. Supongamos que el primer fotograma clave muestra una pelota en un lado de un campo de fútbol. Al agregar un segundo fotograma clave, puede definir un punto final para la animación, como la pelota dentro de la portería al otro lado del campo de fútbol. Luego, un navegador web proporciona la animación entre los dos fotogramas clave al dibujar todos los pasos intermedios: la pelota que viaja por el campo en su camino hacia la portería. Si está pensando en transiciones, use una idea similar, tiene razón. En una transición, define dos estilos y deja que el navegador anime el cambio de un estilo a otro. De esta forma, podría pensar en cada uno de esos estilos como un fotograma clave. Sin embargo, las animaciones CSS3 te permiten definirmúltiplefotogramas clave, para que pueda crear efectos animados mucho más complejos: una pelota de fútbol que viaja desde un lado del campo, a un jugador, a otro jugador y luego a la portería, por ejemplo. Hay dos pasos para crear una animación: 1.Defina la animación.Esto implica configurar fotogramas clave que enumeran las propiedades CSS para animar. 354 Css3: el manual perdido www.it-ebooks.info 2.Aplicar la animación a un elemento.Una vez definida, puede aplicar la animación a cualquier número de elementos en una página. Incluso puede configurar tiempos, retrasos y otras ANIMACIONES propiedades de animación independientes para cada elemento. Por lo tanto, puede usar la misma animación con configuraciones ligeramente diferentes varias veces en una página. Definición de fotogramas clave El primer paso es configurar sus fotogramas clave. La sintaxis involucrada puede parecer un poco extraña, pero esta es la estructura básica: @keyframes nombre de animación { de { /* enumera las propiedades CSS aquí */ } a{ /* enumera las propiedades CSS aquí */ } } Empiezas con @fotogramas clave,seguido de un nombre. El nombre es como llamas a la animación. Terminará usando ese nombre más adelante cuando aplique la animación a un elemento en la página, así que hágalo descriptivo, como "fundido de salida" o "fundido de entrada". Nota El término @fotogramas claveno es una propiedad CSS, se llamaen la regla. Otras reglas en CSS incluyen el @importardeclaración para cargar una hoja de estilo externa desde otra hoja de estilo (página 42), y @medios de comunicaciónpara definir estilos para diferentes tipos de medios, como una impresora (página 523) o diferentes tamaños y resoluciones de pantalla (página 547). Luego agrega al menos dos fotogramas clave. En el ejemplo actual, las palabras clavede yase utilizan para crear el fotograma clave inicial (desde) y el fotograma clave final (hasta). Dentro de cada fotograma clave, agrega una o más propiedades CSS, como si estuviera creando un estilo. De hecho, puede pensar en cada fotograma clave como un estilo CSS con una o más propiedades CSS. Por ejemplo, supongamos que desea crear una animación que desvanezca un elemento a la vista. Podrías empezar con unopacidadvalor de0 (invisible), y terminar con un valor de1 (totalmente visible): @keyframes se desvanecen{ de { opacidad: 0; } a{ opacidad: 1; } } Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 355 ANIMACIONES Tampoco está limitado a solo dos fotogramas clave. Puede utilizar valores porcentuales para definir varios fotogramas clave. El porcentaje representa en qué parte de la duración total de la animación debe ocurrir el cambio. Por ejemplo, suponga que desea crear un efecto en el que el fondo de un elemento cambie de amarillo a azul y luego a rojo. Puedes escribir esto: @keyframes fondoGlow { de { color de fondo: amarillo; } 50% { color de fondo: azul; } a{ color de fondo: rojo; } } En este caso, el fondo azul aparecerá a la mitad de la animación. Si desea que el amarillo dure más y el azul aparezca después de que se completen las tres cuartas partes de la animación, use75%en lugar de50%.Puede continuar agregando fotogramas clave adicionales de esta manera (por ejemplo, en25%, 66%,etcétera). NotaPuedes reemplazar eldepalabra clave con0%y elapalabra clave con100%. Tampoco está limitado a una sola propiedad CSS. Puede colocar cualquier número de propiedades animables (página 346) dentro de cada fotograma clave:color de fondo, opacidad, ancho, alto,etcétera: @keyframes growAndGlow { de { color de fondo: amarillo; } 50% { transformar: escala (1.5); color de fondo: azul; } a{ transformar: escala(3); color de fondo: rojo; } } 356 Css3: el manual perdido www.it-ebooks.info En el ejemplo anterior, el color de fondo no solo pasa por tres colores, sino que también aumenta su tamaño hasta que es tres veces su tamaño original. ANIMACIONES También puede ser bastante complicado con los valores porcentuales agregando múltiples valores porcentuales para un conjunto de propiedades CSS. Esto es útil en un par de casos: primero, es bueno si desea animar hasta cierto punto, hacer una pausa y luego continuar. Por ejemplo, digamos que le gustaría comenzar con un color de fondo amarillo para un <div>etiqueta. Luego, le gustaría cambiar ese color a azul, quedarse en azul por un tiempo y luego terminar con un color rojo. En otras palabras, desea una especie de pausa en el medio mientras el color de fondo permanece constante antes de cambiar nuevamente. Puedes hacerlo con este código: @keyframes brillan { de { color de fondo: amarillo; } 25%, 75% { color de fondo: azul; } a{ color de fondo: rojo; } } Observe la25%, 75%en la línea 5. Eso significa25%del camino a través de la animación, el color de fondo del elemento debe ser azul. Sin embargo, debe ser azul. 75%del camino también. En otras palabras, desde el25%marcar a la75%marca, el fondo permanecerá azul sólido, antes de finalmente volverse rojo. Si esta animación se ejecutó durante 4 segundos, durante los 2 segundos centrales de la animación, el fondo del elemento permanecería en azul sólido. También puede usar porcentajes cuando desee usar el mismo conjunto de propiedades CSS para diferentes partes de la animación. Por ejemplo, digamos que desea animar el color de fondo nuevamente, pero esta vez vaya de amarillo a azul a naranja a azul a naranja a rojo. El azul y el naranja aparecen dos veces, por lo que en lugar de escribir sucolor de fondo propiedades varias veces, en su lugar puede hacer esto: @keyframes brillan { de { color de fondo: amarillo; } 20%, 60% { color de fondo: azul; } 40%, 80% { color de fondo: naranja; } Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 357 a{ ANIMACIONES color de fondo: rojo; } } En este caso, el color de fondo se volverá azul en el20%marca, naranja en el40% marca, luego azul de nuevo en el60%marca, y naranja por última vez en el80%marca antes de finalmente ponerse rojo. Una desventaja de las animaciones CSS3 es que requieren prefijos específicos del proveedor (como muchas propiedades CSS3). En otras palabras, necesita repetir sus fotogramas clave paracada navegador. Entonces, para escribir esta animación de aparición gradual simple para que funcione en tantos navegadores como sea posible, debe escribir esto: @-webkit-keyframes fadeIn { de { opacidad: 0; } a{ opacidad: 1; } } @-moz-keyframes fadeIn{ de { opacidad: 0; } a{ opacidad: 1; } } @-o-keyframes fadeIn{ de { opacidad: 0; } a{ opacidad: 1; } } @keyframes se desvanecen{ de { opacidad: 0; } 358 Css3: el manual perdido www.it-ebooks.info a{ ANIMACIONES opacidad: 1; } } Observe los dos guiones: uno entre la @ y el prefijo del proveedor y otro entre el prefijo del proveedor y la palabrafotogramas clave NotaNo necesitas el -EM-prefijo de proveedor para Internet Explorer en este caso. IE 9 y versiones anteriores no entienden las animaciones CSS de todos modos, y IE 10 es compatible con @fotogramas clavesintaxis sin prefijo. Aplicar una animación Una vez que haya completado un conjunto de fotogramas clave, la animación estará lista. Sin embargo, para que funcione, debe aplicarlo a un elemento de su página. Puede agregar una animación a cualquier estilo para cualquier elemento de una página. Si simplemente agrega la animación a un estilo que se aplica inmediatamente a un elemento, por ejemplo, unh1estilo de etiqueta: la animación se aplicará cuando se cargue la página. Puede usar esta técnica para agregar una animación introductoria a una página que hace que un logotipo se amplíe en su lugar en la parte superior izquierda de la página, o que brille un cuadro de contenido en particular para llamar la atención sobre él. Además, puede aplicar una animación a una de las pseudoclases, incluidas :flotar, :activo, :objetivo,o :enfocar para hacer que se ejecute una animación cuando un visitante pasa el mouse sobre un enlace, por ejemplo, o hace clic en un campo de formulario. Finalmente, puede aplicar la animación a un estilo de clase y usar JavaScript para aplicar dinámicamente esa clase en respuesta a un visitante que hace clic en un botón o en algún otro elemento de la página (consulte el cuadro en la página 351). CSS3 proporciona un puñado de propiedades relacionadas con la animación para controlar cómo y cuándo se reproduce una animación (así como una versión abreviada que abarca todas las propiedades individuales). Como mínimo, para ejecutar una animación, debe proporcionar el nombre que le dio a la animación original (en el @fotogramas clavecomo se describe en la página 355) y una duración para la animación. Aquí hay un ejemplo simple. Digamos que desea que un div con un anuncio importante se desvanezca cuando se cargue la página. Le has dado a ese div un nombre de clase deanuncio: - <div class="anuncio">. 1.Cree la animación de aparición gradual con @fotogramas claveregla: @keyframes se desvanecen { de { opacidad: 0; } a { opacidad: 1; } } Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 359 ANIMACIONES CONSEJOSi solo está animando una sola propiedad, puede ser más fácil de leer si coloca los fotogramas clave en una sola línea: de { opacidad: 0; } Sin embargo, si está animando muchas propiedades, es más fácil de leer (y escribir) si distribuye ese código en varias líneas: de { opacidad: 0; color rojo; ancho: 50%; } 2.Aplique esa animación al estilo para el <div>etiqueta: . anuncio { nombre-animación: fadeIn; animación-duración: 1s; } Elnombre-de-animaciónLa propiedad simplemente le dice al navegador qué animación usar. Es el mismo nombre que proporcionó cuando creó la animación en el Paso 1. El duración de la animaciónLa propiedad establece el tiempo que tarda la animación de principio a fin. En este ejemplo, estas son las únicas dos propiedades de animación enumeradas, pero también puede (y probablemente lo hará) incluir otras propiedades que no sean de animación en el estilo. Por ejemplo, en el mundo real, probablemente agregaría propiedades comoancho, color de fondo, borde,y así sucesivamente a esto.anuncioestilo. NotaPoner el nombre de la animación entre comillas...fundirse'-no es técnicamente necesario y no se hace en este ejemplo, pero hacerlo puede evitar cualquier conflicto que pueda surgir si usa una palabra clave de CSS para el nombre de una animación. Al igual que con el @fotogramas claveregla, cada una de las propiedades de animación requiere prefijos específicos del proveedor, por lo que el anterior.anuncioEl estilo debería escribirse de la siguiente manera para que funcione en tantos navegadores como sea posible: . anuncio { nombre-animación: fadeIn; animación-duración: 1s; - nombre-animación-webkit: fadeIn; - webkit-animation-duration: 1s; - moz-animation-name: fadeIn; - moz-animación-duración: 1s; - o-animation-name: fadeIn; - o-animación-duración: 1s; nombre-animación: fadeIn; animación-duración: 1s; } 360 Css3: el manual perdido www.it-ebooks.info Puede parecer un poco molesto definir la animación en un solo lugar con el @fotogramas clave regla y luego aplicarla en otra (el estilo); sin embargo, una vez que haya definido la animación, puede ANIMACIONES usarla cualquier cantidad de veces en cualquier cantidad de estilos. Por ejemplo, puede crear un tipo de animación de aparición gradual genérica y aplicarla a diferentes elementos. Además, puede controlar la animación de forma independiente para cada estilo; por ejemplo, hacer que el encabezado aparezca gradualmente durante medio segundo, pero que otro elemento de la página aparezca gradualmente durante cinco segundos. Además, puede aplicar más de una animación a un elemento. Digamos que creas una animación llamadafundirsepara hacer que un elemento se desvanezca y otra animación llamadaparpadearpara hacer que el color de fondo parpadee salvajemente. Para aplicar ambas animaciones al elemento, proporcione una lista de nombres separados por comas como esta: nombre de la animación: fundido de entrada, parpadeo; Para dar a las animaciones tiempos separados, proporcione una lista de tiempos separados por comas: nombre de la animación: fundido de entrada, parpadeo; animación-duración: 1s, 3s; El orden en el que coloca los tiempos se aplica al nombre de la animación en el mismo orden. Por ejemplo, la primera animación aparece en la lista por primera vez. En el ejemplo anterior, fundirse tarda un segundo en completarse, mientras queparpadeartarda tres segundos. También puede aplicar varias otras propiedades de animación útiles. sigue leyendo Temporización de la animación Ya has visto que elduración de la animaciónLa propiedad le permite controlar la duración de una animación. Al igual que con las transiciones, puede usar milisegundos (750ms,por ejemplo) o segundos (.75,por ejemplo) para especificar la duración. Al igual que con las transiciones, también puede establecer un tipo específico de función de tiempo para controlar la velocidad de la animación a lo largo de esa duración. Por ejemplo, puede iniciar la animación lentamente y terminarla rápidamente, usando una curva de Bézier cúbica (página 349) o usando uno de los métodos de palabras clave integrados:lineal, facilidad, facilidad de entrada, facilidad de salida, facilidad de entrada y salida.Estos funcionan igual que losfunción de temporización de transiciónpropiedad discutida en la página 348. Puedes usar elfunción de temporización de animaciónpara controlar toda la animación o solo fotogramas clave específicos. Por ejemplo, para aplicar elFacilitarsefunción de temporización para el fundirseanimación presentada anteriormente (Paso 1 en la página 359), agregue la función de temporización al estilo .announcement (Paso 2 en la página 360): . anuncio { nombre-animación: fadeIn; animaciónduración: 1s; función de temporización de animación: salida fácil; } Sin embargo, también puede controlar la función de temporización de la animación entre fotogramas clave. Por ejemplo, imagina que creas una animación que tiene tres fotogramas clave con tres colores de fondo diferentes. El navegador web se animará a partir de un color. Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 361 ANIMACIONES a otro y luego a un tercero. Tal vez desee que se mueva lentamente del primer al segundo color usando una curva Bézier cúbica y luego se mueva en un tiempo uniforme desde el medio hasta el final. Puede hacerlo agregando dos funciones de temporización, una al primer fotograma clave (que controla la animación desde el fotograma clave 1 al 2) y otra en el segundo fotograma clave para controlar la animación desde el fotograma clave 2 al 3: @keyframes crecer y brillar { de { color de fondo: amarillo; función de temporización de animación: cubic-bezier (1, .03, 1, .115); } 50% { transformar: escala (1.5); color de fondo: azul; función de temporización de animación: lineal; } a{ transformar: escala(3); color de fondo: rojo; } } También puede retrasar el comienzo de la animación utilizando la propiedad. Funciona igual que la propiedad Transition-Delay para transiciones (página 351) y simplemente espera una cantidad específica de milisegundos o segundos antes de que comience la animación. Por ejemplo, si desea esperar un segundo antes de que aparezca el div "anuncio", puede reescribirlo.anuncioclase como esta: . anuncio { nombre-animación: fadeIn; animación-duración: 1s; animación-retraso: 1s; } Agregar un retraso a una animación es una excelente manera de captar la atención de las personas y agregar sorpresa a una página. NotaElfunción de temporización de animaciónyanimación-retrasolas propiedades requieren prefijos de proveedores, así que asegúrese de agregar el apropiado:webkit-animation-timing-function, -mozanimationtiming-function,y así sucesivamente a sus estilos animados. 362 Css3: el manual perdido www.it-ebooks.info Terminando la Animación Con CSS, puede controlar algunos aspectos adicionales de una animación, incluido si repetir una animación, en qué dirección se ejecuta la animación si se anima más de una vez y también cómo el navegador debe formatear el elemento cuando se completa la animación. ANIMACIONES Las transiciones son animaciones que solo se ejecutan una vez: pase el mouse sobre un botón y el botón crece, por ejemplo. Las animaciones, sin embargo, pueden ejecutarse una, dos o continuamente, gracias a la recuento de iteraciones de animaciónpropiedad. Si desea que una animación se ejecute 10 veces (quizás, aparezca y desaparezca 10 veces), agregue este código al estilo que está animando: número de iteraciones de animación: 10; Normalmente, un navegador solo reproduce la animación una vez, y si eso es todo lo que busca, omita esta propiedad de conteo de iteraciones. Si desea que la animación se reproduzca continuamente, elrecuento de iteraciones de animaciónpropiedad acepta una palabra clave:infinito. Así que para ejecutar elfundirseanimación un número infinito de veces en el anuncio div, puede crear este estilo: . anuncio { nombre-animación: fadeIn; animaciónduración: .25s; animación-iteraciónrecuento: infinito; } Eso, sin embargo, molestaría muchísimo a sus visitantes, así que por favor no lo haga. Sin embargo, podría usar un estilo como este para un efecto de "pulso" simple donde un botón "regístrese hoy" brille suavemente (al animar elsombra de la cajapropiedad discutida en la página 210). Normalmente, cuando una animación se ejecuta más de una vez, un navegador web literalmente inicia la animación desde el principio. Entonces, si animó un color de fondo de amarillo a azul y lo repitió dos veces, el navegador mostraría un cuadro amarillo que se vuelve azul, y luego, de repente, el cuadro amarillo regresaría y luego se animaría a azul una vez más. Este efecto puede ser bastante discordante. En este caso, se vería mejor si, por segunda vez a través de la animación, el navegador simplemente invirtiera el efecto. Así es como funcionan las transiciones: por ejemplo, cuando pasa el mouse sobre un elemento, el navegador anima la transición del estado normal al estado de rollover. Cuando mueve el mouse fuera del elemento, el navegador simplemente invierte la animación para volver al estado normal. Para hacer que una animación avance en ejecuciones impares y retroceda en ejecuciones pares, utilice elanimación-direcciónpropiedad y laalternopalabra clave. Por ejemplo, para hacer que un elemento desaparezca y luego vuelva a aparecer, puede crear una animación llamada desvanecerse,como esto: @keyframes se desvanecen { de {opacidad: 1; } a { opacidad: 0; } } Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 363 ANIMACIONES Luego, reproduzca esa animación dos veces, invirtiendo su dirección la segunda vez: . desteñir { nombre-animación: fadeOut; animación-duración: 2s; número de iteraciones de animación: 2; animación-dirección: alternativa; } Este código le dice al navegador web que ejecute eldesvanecerseanimación sobre cualquier elemento con la clase dedesteñir.La animación debe ejecutarse durante dos segundos y luego repetirse. debido a laalternovalor poranimación-dirección,la animación se desvanecerá la primera vez (pasará de totalmente opaca, una opacidad de1—a invisible—una opacidad de 0), pero correrá hacia atrás la segunda vez (desde0a1opacidad), lo que hace que se desvanezca de nuevo a la vista. CONSEJOPara que una animación se ejecute varias veces pero termine en el estado inicial, use un número par de iteraciones y configure elanimación-direcciónpropiedad aalterno. No importa cuántas veces haga que un navegador web ejecute una animación, una vez que se completa la animación, el navegador muestra el elemento animado en su estado original anterior a la animación. Por ejemplo, supongamos que anima una imagen para que crezca lentamente hasta el doble de su tamaño. Una vez que se completa la animación, el navegador web vuelve a ajustar la imagen a su tamaño original, creando un efecto visual discordante. Afortunadamente, puede indicarle al navegador que mantenga el elemento animado con el mismo formato que cuando finalizó la animación configurando elmodo de relleno de animaciónpropiedad ahacia adelante. modo de relleno de animación: adelante; Aplique esta propiedad al elemento que está animando, junto con elnombre-animación, duración-animación,y otras propiedades de animación. Taquigrafía de animación Como puede ver, hay muchas propiedades de animación, y escribirlas todas además de todas las versiones prefijadas por el proveedor es una receta para el síndrome del túnel carpiano. Si bien todavía necesita versiones prefijadas por el proveedor, puede simplificar las cosas usando el animaciónpropiedad abreviada. Esta única propiedad combinanombre-de-animación, duración-deanimación, función-de-tiempo-de-animación, número-de-iteraciones-de-animación, dirección-deanimación, retraso-de-animación,ymodo de relleno de animaciónen una sola propiedad. Por ejemplo, puedes tomar este código: . desteñir { nombre-animación: fadeOut; animación-duración: 2s; función de temporización de animación: entrada y salida fácil; 364 Css3: el manual perdido www.it-ebooks.info número de iteraciones de animación: ANIMACIONES 2; animación-dirección: alternativa; animación-retraso: 5s; modo de relleno de animación: adelante; } Y reescribirlo así: . desteñir { animación: desvanecimiento 2 s entrada y salida 2 5 s alternativos hacia adelante; } ¡Esa es una línea de código en lugar de siete! Debe enumerar los valores de propiedad en el orden utilizado anteriormente: nombre, duración, función de tiempo, conteo, dirección, retraso y modo de relleno. Además, asegúrese de que cada valor esté separado por un espacio. Solo se requiere el nombre y la duración. Los otros valores son opcionales. Si desea aplicar más de una animación a un elemento, simplemente use listas de propiedades de animación separadas por comas. Por ejemplo, para aplicar dos animaciones (digamos desvanecerseybrillo)hacia .desteñirestilo, escribe esto: . desteñir { animación: FadeOut 2s Facilidad de entrada y salida 2 Alternar 5s adelante, brillo 5s; } Por supuesto, en el uso real, también necesitaría usar prefijos de proveedores: . desteñir { - animación de webkit: fadeOut 2s facilidad de entrada y salida 2 5s alternativos hacia delante, brillo 5s; - moz-animation: fadeOut 2s facilidad de entrada y salida 2 5s alternativos hacia adelante, brillo 5s; - o-animación: fadeOut 2s facilidad de entrada y salida 2 5s alternativos hacia adelante, brillo 5s; animación: FadeOut 2s Facilidad de entrada y salida 2 Alternar 5s adelante, brillo 5s; } En general, debe optar por usar la abreviatura de animación: es mucho más concisa y más suave con los dedos y el teclado. Pausar una animación CSS3 incluye otra propiedad de animación:estado-de-reproducción-de-animación—para controlar la reproducción de una animación. Acepta solo una de dos palabras clave:correropausadoPara pausar una animación, simplemente aplique esta declaración a un estilo: animación-reproducir-estado: en pausa; Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 365 Tutorial Sin embargo, solo hay una forma de aplicar eso usando CSS: una pseudoclase. Al igual que con las transiciones, necesita algún tipo de disparador para pausar una animación. Una forma de hacer esto es pausar cualquier animación cuando un visitante pasa el mouse sobre la animación. Aquí hay un ejemplo usando el .desteñirestilo de clase: . desteñir { animación: FadeOut 2s Facilidad de entrada y salida 2 Alternar 5s adelante, brillo 5s; } Este código ejecuta dos animaciones:desvanecerseybrillo-en cualquier elemento con la clase de fundido aplicada. Digamos que desea permitir que los visitantes pausen esta animación simplemente pasando el mouse sobre ella. Solo necesitaría agregar un estilo más: . desvanecerse: flotar { animación-reproducir-estado: en pausa; } Por supuesto, también necesitará todas las versiones prefijadas del proveedor. Una forma más poderosa de pausar una animación sería aplicar dinámicamente elestado-de-reproducción-de-animación propiedad al elemento usando JavaScript. De esta forma, puede crear una animación compleja y agregar un botón Pausa que pausa la animación cuando se hace clic. Consulte el cuadro en la página 351 para obtener más información sobre las animaciones JavaScript y CSS. Animación al pasar el mouse Hasta ahora, todas las animaciones que has visto aquí se ejecutan cuando se carga la página. Tiene algunas otras opciones, incluidas varias pseudoclases y el uso de JavaScript, para activar una animación CSS. La pseudoclase más común para la animación es:flotar.Con él, puede ejecutar una animación cuando un visitante pasa el mouse sobre cualquier elemento; por ejemplo, puede hacer que un logotipo haga gimnasia elegante, salga de la página y luego retroceda nuevamente. Para animar un elemento cuando el mouse de un visitante pasa sobre él, comience creando una animación con @fotogramas clave(Paso 1 en la página 359). Luego, crea un:flotar pseudoclase para cualquier elemento que desee animar. En ese estilo, simplemente agrega las propiedades de animación (Paso 2 en la página 360). Ahora la animación se ejecuta solo cuando el visitante se desplaza sobre el elemento. Tutorial En este ejercicio, agregará transformaciones, animaciones y transiciones a un banner. Para comenzar, descargue los archivos del tutorial del sitio web complementario de este libro en www.sawmac.com/css3. Haga clic en el enlace del tutorial y descargue los archivos. Todos los archivos están encerrados en un archivo zip, por lo que primero debe descomprimirlos. (Encontrará instrucciones detalladas en el sitio web). Los archivos de este tutorial se encuentran dentro del10carpeta. 366 Css3: el manual perdido www.it-ebooks.info 1.En un editor de texto, abra10-banner.html. Tutorial La página incluye un banner con un gráfico de logotipo, un título y un conjunto de botones de navegación (consulte la Figura 10-9). Primero, agregará una transformación para que cuando un visitante pase el mouse sobre un botón, aumente su tamaño. Figura 10-9 Un banner normal y estático que espera cobrar vida con animaciones, transformaciones y transiciones. 2.Localiza la apertura y el cierre <estilo>cerca de la parte superior de la página y agregue la siguiente regla a la hoja de estilo: nav a: hover { - webkit-transform:escala(1.2); - transformación moz: escala (1.2); - o-transformada: escala (1.2); - transformada ms: escala (1.2); transformar: escala (1.2); } Los botones de la página están contenidos dentro de un elemento de navegación HTML5. Este selector descendente apunta a enlaces dentro de <navegación>etiqueta en su estado de desplazamiento (es decir, cuando un visitante pasa el mouse sobre el enlace). El estilo aplica la escala(página 338) para agrandar un poco el botón. Desafortunadamente, debe agregar cinco líneas de código para que funcione en Safari, Chrome, Firefox, Opera e Internet Explorer 9, así como en futuros navegadores que no requerirán un prefijo de proveedor. NotaPara que los pasos de este tutorial sean más fáciles de seguir, está colocando los estilos dentro de una hoja de estilo interna en la página web. Sin embargo, si lo prefiere, puede agregar este código a la hoja de estilo externa que ya se aplicó a esta página. (Se llamaestilos.cssy está en la misma carpeta que la página web). 3.Guarde la página y obtenga una vista previa en un navegador web.Pase el mouse sobre los enlaces debajo del título. Cuando pasa el mouse sobre un botón, se hace más grande, casi saliendo de la página (Figura 10-10). Muy bueno, pero se vería aún mejor si agregara una animación al efecto. NotaInternet Explorer 8 y versiones anteriores no entienden las transformaciones, por lo que no verá ningún efecto en esos navegadores. Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 367 Tutorial Figura 10-10 Pop va el botón. Al agregar una transformación de escala al estado de desplazamiento de la parte inferior, puede hacer que casi salte de la página. El botón ampliado no afecta el contenido que lo rodea (por ejemplo, no empuja los otros botones fuera del camino). Este es un aspecto único de todas las transformaciones CSS. 4.Agregue otro estilo antes delnav a: hoverestilo que acaba de crear: navegar un { - transición de webkit: todos los .5; - transición moz: todos los .5s; - o-transición: todos los .5s; transición: todos .5s; } Nuevamente, debe agregar las versiones prefijadas del proveedor. (IE 9 no entiende las transiciones, y dado que IE 10 entiende la versión sin prefijo, no necesita un -mstransiciónpropiedad.) Aquí, está instruyendo al navegador web para animar todos los cambios en las propiedades CSS de <un>etiquetas dentro del <navegación> y hacer que la animación dure.5 s.Para hacer las cosas más interesantes, agregará un color de fondo al estado de desplazamiento. 5.Localiza elnav a: hoverestilo y agregarcolor de fondo: rojo,por lo que el estilo final se ve así: nav a: hover { color de fondo: - webkit-transform:escala(1.2); - transformación moz: escala (1.2); - o-transformada: escala (1.2); - transformada ms: escala (1.2); transformar: escala (1.2); } Si guarda la página y obtiene una vista previa ahora, verá que los botones no solo aumentan de tamaño cuando pasa el cursor sobre ellos, sino que también se vuelven rojos. Pero ahora agregará tiempos separados a estas transiciones, por lo que el botón primero crece y luego se vuelve rojo. 368 Css3: el manual perdido www.it-ebooks.info 6.Cambiar elnav unstyle para incluir dos transiciones, una para la transformación y otra para el color de fondo, así (los cambios están en negrita): Tutorial navegar un { - webkit-transición:-webkit-transformar .5s, color de fondo 1s facilidad de entrada .5s; - moz-transición:-moz-transformar .5s, color de fondo 1s facilidad de entrada .5s; - o-transición:-o-transformar .5s, color de fondo 1s facilidad de entrada .5s; transición:transformar .5s, color de fondo 1s facilidad de entrada .5s; } La primera parte-transformar .5s—informa al navegador que desea animar cualquier cambio en la propiedad de transformación en el transcurso de medio segundo. La segunda parte-fondo-color 1s entrada lenta .5s—indica que desea animar el cambio de color de fondo en el transcurso de un segundo, utilizando el método de temporización gradual (página 361), pero espere medio segundo antes de comenzar. Eso . 5sal final es importante ya que coincide con el .5sde la animación de transformación. En otras palabras, el navegador esperará hasta que eltransformarla transición se completa antes de cambiar el color de fondo. 7.Guarde la página y obtenga una vista previa en un navegador web. Pase el mouse sobre un botón. Primero, el botón se hace más grande. Mantenga el mouse sobre el botón y luego se volverá rojo. Por supuesto, puede ajustar el tiempo, por ejemplo, eliminar el retraso de lacolor de fondotransición, y el cambio de color comenzará al mismo tiempo que el cambio de tamaño. Sin embargo, dado que el cambio de color dura un segundo, continuará después de que el botón haya alcanzado su tamaño final. Agregar una animación Ahora es el momento de probar las animaciones CSS3. Comenzará simplemente girando y escalando la imagen del logotipo. El primer paso para crear una animación CSS es usar @fotogramas clave regla para configurar los fotogramas clave de la animación. Este ejemplo comienza con una animación simple y solo dos fotogramas clave. CONSEJODebido a que las animaciones CSS requieren una buena cantidad de código, es una buena idea comenzar usando solo el prefijo del proveedor para el navegador que usa con más frecuencia. Pruebe la página en ese navegador y, una vez que haya perfeccionado la animación, agregue el código para los otros navegadores. Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 369 Tutorial 1.Agregue el siguiente estilo a la hoja de estilo interna de la página, después delnav a: hoverestilo: @-webkit-keyframes logo { de { - webkit-transform: rotar (0) escala (.5); } a{ - webkit-transform: rotar (-720 grados) escala (1); } } Este ejemplo usa la sintaxis de WebKit, lo que significa que funcionará en Chrome y Safari. Si está utilizando Firefox como su navegador principal, reemplace @-webkit-keyframes con @moz-fotogramas clave. (Usar @-o-fotogramas clavepara ópera; para IE 10, omita los prefijos). Este código le dice al navegador que debe iniciar el elemento sin rotación— rotar(0)—y a la mitad de su tamaño—escala (.5).A continuación, debe animar el cambio de ese estado al estado "a" de la animación, en este caso, rotarlo 720 grados, que son tres rotaciones en sentido contrario a las agujas del reloj, y volver a escalarlo hasta su tamaño normal. En otras palabras, esta animación hará girar un elemento y lo hará crecer. Ahora, debe aplicarlo a cualquier elemento de la página. 2.Cree un nuevo estilo después del que acaba de agregar: . logotipo { - animación webkit: logo 1s; } El logo en el banner tiene una clase delogoaplicado a él, por lo que este selector de clase le agrega una animación. ElanimaciónLa propiedad puede tomar muchos valores, pero solo necesita el nombre y la duración. Aquí, está especificando la animación que creó en el último paso:logo-y decirle a un navegador web que haga que la animación dure un segundo. 3.Guarde el archivo y obtenga una vista previa en Chrome o Safari (o cualquier navegador para el que haya utilizado el prefijo). El logotipo debe girar, aumentar de tamaño y luego detenerse. Si no es así, vuelva a verificar su código y asegúrese de obtener una vista previa de la página en el navegador adecuado. Si todo sale según lo planeado, esta animación debería verse muy bien, pero sería aún mejor si se moviera desde fuera de la página y luego se detuviera en el lugar correcto en el banner. Para hacer eso, simplemente animará la posición del elemento en la página. 370 Css3: el manual perdido www.it-ebooks.info 4.Edita la @fotogramas claveregla para que se vea así (adición en negrita): @-webkit-keyframes logo { Tutorial de { - webkit-transform: rotar (0) escala (.5); izquierda: 120%; } a{ - webkit-transform: rotar (-720 grados) escala (1); izquierda: 0; } } Aquí, comienza la posición del logotipo a la derecha del banner y los botones de navegación en el borde de la pantalla (básicamente, está colocando el borde izquierdo del logotipo 1,2 veces el ancho del banner). Para que esto funcione, debe aprovechar el CSSposiciónpropiedad. Lo aprenderá en profundidad en el Capítulo 15, pero por ahora solo necesita saber que CSS le brinda el poder de colocar cualquier elemento en cualquier lugar de la ventana del navegador, incluso fuera de la ventana del navegador. El fotograma clave final coloca el logotipo en la posición 0, donde normalmente aparecería en la página en el lado izquierdo del banner. 5.Guarde la página y obtenga una vista previa en Chrome o Safari. Luciendo bien. Pero aún puedes hacerlo mejor. Agregue otro fotograma clave para que el logotipo se coloque en su lugar y luego gire en la dirección opuesta a medida que crece. 6.Cambie el código que agregó en el Paso 4 para que se vea así: @-webkit-keyframes logo { de { - webkit-transform: rotar (0) escala (.5); izquierda: 120% } 50% { - webkit-transform: rotar (-720 grados) escala (.5); izquierda: 0; } a{ - webkit-transform: rotar (0) escala (1); } } Ahora tiene tres fotogramas clave: uno al principio, otro justo en el medio y un tercero al final. El navegador animará las propiedades a medida que cambien del cuadro 1 al cuadro 2 al cuadro 3. Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 371 Tutorial El primer fotograma clave es el mismo que el del Paso 4: el logotipo no está rotado, tiene la mitad de su tamaño y está colocado en el lado derecho. El segundo fotograma clave mantiene el logotipo en el mismo tamaño, lo gira tres veces y lo mueve al lado izquierdo del banner. Finalmente, una vez que el logotipo está en su lugar, el navegador lo amplía mientras lo gira hacia atrás desde la posición de -720 grados a la posición de 0 grados; en otras palabras, el logotipo ahora gira tres veces en el sentido de las agujas del reloj. 7.Guarde la página y obtenga una vista previa en Chrome o Safari. El logotipo debe rodar desde el lado derecho de la pancarta hacia la izquierda, detenerse, crecer y girar en el sentido de las agujas del reloj. Si no funciona, verifique dos veces su código con el de arriba. Desafortunadamente, la animación es un poco demasiado rápida. Esa es una solución fácil. 8.Edite el .logostyle para que la animación dure tres segundos en lugar de uno: . logotipo { - animación webkit: logo 3s; } Ahora viene la parte tediosa: hacer que funcione en otros navegadores agregando todos los prefijos de proveedores. Abordarás el @fotogramas claveregla primero. 9.Agregar versiones con prefijo de proveedor para @fotogramas claveregla, por lo que su código se ve así: @-webkit-keyframes logo { de { - webkit-transform: rotar (0) escala (.5); izquierda: 120% } 50% { - webkit-transform: rotar (-720 grados) escala (.5); izquierda: 0; } a{ - webkit-transform: rotar (0) escala (1); } } @-moz-keyframes logotipo { de { - transformación moz: rotar (0) escala (.5); izquierda: 120% } 50% { - moz-transform: rotar (-720 grados) escala (.5); izquierda: 0; 372 Css3: el manual perdido www.it-ebooks.info } Tutorial a{ - transformación moz: rotar (0) escala (1); } } logotipo de @-o-keyframes { de { - o-transformar: rotar (0) escala (.5); izquierda: 120% } 50% { - o-transformar: rotar (-720 grados) escala (.5); izquierda: 0; } a{ - o-transformar: rotar (0) escala (1); } } logotipo de @keyframes { de { transformar: rotar (0) escala (.5); izquierda: 120% } 50% { transformar: rotar (-720 grados) escala (.5); izquierda: 0; } a{ transformar: rotar (0) escala (1); } } Eso es mucho código y, desafortunadamente, eso es lo que tienes que hacer en este punto para usar animaciones CSS. En algún momento, en un hermoso futuro, todos los navegadores utilizarán el @ único sin prefijofotogramas claveregla y un no prefijadotransformar propiedad. Pero, en este punto, estás atascado escribiendo todo este código. Afortunadamente, agregando el @fotogramas claveLa regla es la parte más difícil. Agregando la animación al .logoel estilo no es tanto trabajo. Capítulo 10:TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS www.it-ebooks.info 373 Tutorial 10Edite el .logoestilo agregando tres nuevas líneas: . logotipo { - animación webkit: logo 3s; - animación moz: logo 3s; - o-animación: logo 3s; animación: logotipo 3s; } 11Guarde la página y compruébelo en Firefox, Chrome, Safari y Opera. El logo debe rodar a lo largo de la página y agrandarse en todos esos navegadores. Por supuesto, en Internet Explorer 9 y versiones anteriores, no verá ninguna animación. Sin embargo, el logotipo aún se colocará correctamente y la página se verá bien. Encontrará una versión terminada de este tutorial en el10_terminadocarpeta. Para llevar esto más lejos, agregue una animación que haga que uno de los botones de navegación brille cuando el mouse se coloca sobre él. (Sugerencia: cree una animación que recorra diferentes sombras de cuadro. Use elrecuadrovalor para agregar la sombra dentro del cuadro como se describe en la página 211. Luego agregue esa animación alnav a: hover estilo, por lo que solo se reproduce cuando el mouse pasa sobre un botón). Figura 10-11 Los libros pueden hacer mucho, pero desafortunadamente no pueden mostrarte la increíble animación que acabas de crear. Este es el aspecto que debería tener la página cuando la animación haya seguido su curso y pase el mouse sobre el botón Inicio. 374 Css3: el manual perdido www.it-ebooks.info Capítulo 11 11 Formateo de tablas y Formularios T Los poderes de formato de CSS van mucho más allá del texto, las imágenes y los enlaces. Puede hacer que las tablas de información, como horarios, resultados deportivos y listas de reproducción de música, sean más fáciles de leer agregando bordes, fondos y otras mejoras visuales. De manera similar, puede usar CSS para organizar los elementos de un formulario para ayudar a sus visitantes a través del proceso de pedido de artículos, suscribirse a su boletín informativo o usar su aplicación web más reciente. Este capítulo le muestra cómo mostrar tablas y formularios con HTML y cómo diseñarlos y diseñarlos usando CSS. En dos tutoriales al final del capítulo, creará una tabla y un formulario, usando los trucos que ha aprendido en el camino. Usar tablas de la manera correcta Las tablas HTML han tenido mucho uso en la corta historia de la Web. Originalmente creadas para mostrar datos en un formato similar a una hoja de cálculo, las tablas se convirtieron en una popular herramienta de diseño. Enfrentados a las limitaciones de HTML, los diseñadores se volvieron creativos y utilizaron filas y columnas de tablas para colocar elementos de página como encabezados de banners y barras laterales. Como verá en la Parte Tres de este libro, CSS hace un trabajo mucho mejor en el diseño de páginas web. Puede concentrarse en usar (y formatear) tablas para su propósito original: mostrar datos (Figura 11-1). 375 www.it-ebooks.info USO DE TABLAS La direccion correcta Figura 11-1 Puede hacer todo el diseño y el diseño de su página con CSS y usar tablas para lo que fueron diseñadas: mostrando filas y columnas de información. CSS creó las atractivas fuentes, bordes y colores de fondo en esta tabla sobre cortadoras de césped de interior, pero la estructura subyacente es todo gracias a HTML. HTML (y xHTML) tiene una sorprendente cantidad de etiquetas dedicadas a la creación de tablas. Este fragmento de HTML crea la tabla muy simple que se muestra en la figura 11-2. <tabla> <caption align="bottom"> Tabla 1: Resumen de cortacéspedes de interior de CosmoFarmer.com </título> <grupocol> <col class="marca" /> <col clase="precio" /> <col class="poder" /> </colgroup> <cabeza> <tr> <th alcance="col">Marca</th> 376 Css3: el manual perdido www.it-ebooks.info USO DE TABLAS <th scope="col">Precio</th> <th La direccion correcta scope="col">Fuente de energía</th> </ tr> </thead> <tbody> <tr> <td>Cortacésped para interiores Chinook Push-o-matic</ td> <td>$247.00</td> <td>Mecánica</td> </tr> <tr> <td>Segadora de lujo para apartamentos Sampson</ td> <td>$370.00</td> <td>Mecánica</td> </tr> </tbody> </tabla> Incluso con solo tres filas y tres columnas, la tabla usa nueve etiquetas HTML únicas: <tabla>, <título>, <colgroup>, <col>, <thead>, <tbody>, <tr>, <th>,y <td>.En general, más HTML no es bueno, y no necesita todas estas etiquetas: puede salirse con la suya solo con <tabla>, <tr>,y < td>etiquetas (y generalmente <th>también). Sin embargo, las diversas etiquetas de una tabla le brindan muchos ganchos útiles para colgar estilos CSS. Los encabezados de cada columna: el <th>etiquetas: pueden tener un aspecto diferente al de otras celdas de la tabla si crea un < th>estilo de etiqueta, y puede usar el <colgroup>etiqueta como una manera fácil de establecer el ancho de una columna de tabla. Esto le ahorra la molestia de tener que crear muchas clases, como .encabezado de tabla—y luego aplicarlos a mano a las celdas individuales de la tabla. En la siguiente sección, verá ejemplos de cómo puede usar estas diferentes etiquetas para su beneficio. Figura 11-2 Las tablas de datos, como esta, generalmente tienen encabezados creados con el<th>etiqueta. Las celdas de encabezado anuncian qué tipo de información aparece en una fila o columna. El precio le dice que encontrará el costo de cada cortadora de césped en las celdas a continuación. Los datos reales presentados en una tabla están encerrados en<td>etiquetas Capítulo 11:FORMATO DE TABLAS Y FORMULARIOS www.it-ebooks.info 377 ESTILO Mesas NotaPara obtener un artículo detallado sobre el HTML utilizado para crear tablas, visitewww.456bereastreet.com/ archive/200410/bring_on_the_tables. Mesas de estilo Puede usar muchas de las propiedades CSS sobre las que ha leído para mejorar la apariencia de una tabla y su contenido. Puedes usar elcolorpropiedad, por ejemplo, para establecer el color del texto de una tabla, como en cualquier otro lugar. Sin embargo, encontrará algunas propiedades que son particularmente útiles con las tablas, así como un par dirigido específicamente a formatear tablas. Debido a que las tablas se componen de varias etiquetas HTML, es útil saber a qué etiqueta aplicar una propiedad CSS en particular. Aplicar relleno a un <mesa>la etiqueta, por ejemplo, no tiene ningún efecto. Las siguientes secciones cubren las propiedades de CSS para formatear tablas y con qué etiquetas HTML se llevan bien. Agregar relleno Como leyó en la página 195, el relleno es el espacio entre el borde de un elemento y su contenido. Puede usar el relleno para proporcionar un pequeño espacio entre los bordes del texto de un párrafo y su borde. Cuando se trata de tablas, los bordes son losbordes de una celda, por lo que el relleno agrega espacio alrededor de cualquier contenido que haya colocado dentro de una celda de la tabla (vea la Figura 11-2). Funciona muy parecido al viejo.relleno celularatributo, que ya no es válido en HTML5, con el beneficio adicional de que puede controlar individualmente el espacio entre el contenido de una celda y cada uno de sus cuatro bordes. Aplica relleno a un encabezado de tabla o a una etiqueta de celda de tabla, peronoa la <mesa> etiquetarse a sí mismo. Entonces, para agregar 10 píxeles de espacio al interior de todas las celdas de la tabla, use este estilo: td, th { relleno: 10px; } También puede controlar el espaciado por separado para cada borde. Para agregar 10 píxeles de espacio en la parte superior de cada celda de datos de la tabla, 3 píxeles en la parte inferior de esa celda y 5 píxeles en los lados izquierdo y derecho, cree este estilo: td { acolchado superior: 10px; relleno derecho: 5px; relleno inferior: 3px; relleno-izquierda: 5px; } O bien, utilice elrellenopropiedad de acceso directo: td { relleno: 10px 5px 3px 5px; } 378 Css3: el manual perdido www.it-ebooks.info CONSEJOSi coloca una imagen en una celda de tabla usando el <imagen>etiqueta y observe que hay un espacio no deseado debajo de la imagen, luego configure sumostrarpropiedad (página 202) abloquear.Para más información, verhttp:// ESTILO Mesas desarrollador. mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps. Ajuste de la alineación vertical y horizontal Para controlar dónde se coloca el contenidodentrouna celda de la tabla, use eltexto alineadoy alineación verticalpropiedades. Texto alineadocontrola el posicionamiento horizontal y se puede configurar paraizquierda, derecha, centro, yjustificar (consulte la Figura 11-3). Es una propiedad heredada. (Consulte el Capítulo 4 para obtener más información sobre la herencia). Cuando desee alinear a la derecha el contenido de todas las celdas de la tabla, cree un estilo como este: tabla { texto-alinear: derecha; } Esta propiedad es útil con <th>etiquetas, ya que los navegadores generalmente las alinean al centro. Un estilo simple comoº { texto-alinear: izquierda; }hace que los encabezados de las tablas se alineen con las celdas de la tabla. Figura 11-3 Cuando se aplica a las celdas de una tabla, el CSStexto alineadola propiedad funciona como el<td>atributo de alineación de la etiqueta. Saltar el HTML alinear atributo, sin embargo, ya que ya no es válido en HTML5, y CSS le permite almacenar la información de estilo en una hoja de estilo externa. De esa manera, si decide que necesita cambiar la alineación en las celdas de su tabla de derecha a izquierda, entonces necesita actualizar solo la hoja de estilo externa, no 10,000 individuales.<td> etiquetas Las celdas de la tabla también tienen una altura. Los navegadores web normalmente alinean el contenido verticalmente en el medio de una celda de la tabla (vea el ejemplo del medio en la Figura 11-4). Puede controlar este comportamiento utilizando elalineación verticalpropiedad. Utilice uno de estos cuatro valores: arriba, línea de base, medio,oabajo. Arribaempuja el contenido a la parte superior de la celda,medio contenido de los centros, yabajoempuja la parte inferior del contenido a la parte inferior de la celda.Base funciona igual quearriba,excepto que el navegador alinea la línea de base de la primera línea de texto en cada celda de una fila (Figura 11-4). A menos que sea un verdadero perfeccionista, ni siquiera notará la sutileza de la opción de línea de base. Más importante aún, sus visitantes tampoco lo harán. A diferencia de texto alineado,elalineación verticalLa propiedad no se hereda, por lo que solo puede usarla en estilos que se aplican directamente a <th>y <td>etiquetas Capítulo 11:FORMATO DE TABLAS Y FORMULARIOS www.it-ebooks.info 379 ESTILO Mesas NotaHasta ahora, el formato de tabla que ha aprendido se aplica atodotus mesas Cuando desee diseñar tablas individuales (o celdas de tabla), cambie el selector que utiliza. Para aplicar un diseño especial a una tabla determinada, asígnele un nombre de clase—<clase de tabla="acciones">—y crear selectores descendientes como .las existencias tdolas existenciaspara formatear celdas individuales de forma única. Si desea aplicar un estilo diferente a una celda en particular que a otras celdas de una tabla, luego aplique una clase a la etiqueta—<td class="subtotal">—y cree un estilo de clase para formatear esa celda. Figura 11-4 Elalineación verticalproperty es el equivalente CSS de (ahora obsoleto) <td>etiquetasvaleroso atributo. Cuando se aplica relleno a una celda, el contenido nunca se alinea con las líneas del borde inferior o superior: siempre hay un espacio igual a la configuración del relleno. Puede controlar el tamaño del relleno (consulte la página 195). Creación de bordes el cssbordeproperty (página 202) funciona prácticamente igual con las tablas que con otros elementos, pero debe tener en cuenta un par de cosas. Primero, aplicar un borde a un estilo que formatea el <mesa>etiqueta describe solo la tabla, no ninguna de las celdas individuales. En segundo lugar, aplicar bordes a las celdas (td { borde: 1px negro sólido; })lo deja con un espacio visual entre las celdas, como se muestra en la Figura 11-5, arriba. Para obtener el control de cómo aparecen los bordes, debe comprender cómo los navegadores web normalmente dibujan las celdas de las tablas y el CSS.borde-colapsopropiedad. • Controlar el espacio entre las celdas de la tabla.A menos que se indique lo contrario, los navegadores separan las celdas de la tabla en un par de píxeles. Esta brecha es realmente notable cuando aplica un borde a las celdas de la tabla. CSS te da laespaciado de bordes propiedad para controlar este espacio. Aplique esta propiedad a la tabla en sí, y si desea eliminar el espacio que los navegadores normalmente colocan entre las celdas, configure el espaciado de bordespropiedad a0: mesa { espaciado de borde: 0; } 380 Css3: el manual perdido www.it-ebooks.info Por supuesto, si te gusta el espacio entre las celdas, agrega espacio: mesa { ESTILO Mesas espaciado de borde: 2px; } • Eliminación de bordes dobles.Incluso si elimina el espacio entre celdas de una tabla, los bordes aplicados a las celdas de la tabla se duplican. Es decir, el borde inferior de una celda se suma al borde superior de la celda colgante, creando una línea que es dos veces más gruesa que la configuración del borde (Figura 11-5, centro). La mejor manera de eliminar esto (y eliminar el espacio entre celdas al mismo tiempo) es usar elborde-colapso propiedad. Acepta dos valores—separadoycolapsar.ElseparadoLa opción es normalmente cómo se muestran las tablas, con los espacios de las celdas y los bordes duplicados. Al contraer los bordes de una tabla, se eliminan los espacios y los bordes duplicados (Figura 11-5, abajo). Aplica elcolapsarvalor a un estilo que formatea una tabla, así: tabla { borde-colapso: colapsar; } NotaSi configura elborde-colapsopropiedad acolapso, espaciado de bordesno tiene efecto. • Esquinas redondeadas.Puedes usar elborde-radio(página 207) para agregar esquinas redondeadas a las celdas de la tabla (pero no a las tablas en sí). Por ejemplo, si desea delinear las celdas de la tabla y darles esquinas redondeadas, puede crear este estilo: td { borde: 1px negro sólido; borde-radio: 5px; } Tenga en cuenta que si configura elborde-colapsopropiedad acolapsar,entonces los navegadores ignoran cualquierborde-radioha configurado para las celdas de la tabla; simplemente dibujarán esquinas cuadradas regulares. NotaIncluso puedes aplicar elsombra de la cajapropiedad (página 210) a tablas y celdas. Si lo aplica a una tabla, la sombra aparecerá fuera de toda la tabla, pero si aplica la sombra a celdas individuales, cada celda tendrá su propia sombra paralela. Estilo de filas y columnas Agregar rayas, como las de la Figura 11-6, es una técnica de diseño de mesa común. Al alternar la apariencia de cada fila de datos, facilita que las personas detecten los datos en cada fila. Afortunadamente, CSS ofrece una forma de hacerlo. Utilizando elenésimo de tiposelector, sobre el que leyó en la página 78, puede agregar diferentes fondos a las filas pares e impares: tr: enésimo tipo (impar) { color de fondo: rojo; } tr: enésimo de tipo (par) { color de fondo: azul; } Capítulo 11:FORMATO DE TABLAS Y FORMULARIOS www.it-ebooks.info 381 ESTILO Mesas Si no desea aplicar el mismo fondo a las filas impares de todas sus tablas, simplemente agregue un nombre de clase a la tabla que desea orientar (productos,para una tabla con información de productos, por ejemplo), luego use un selector descendente como este: . productos tr: enésimo de tipo (impar) { color de fondo: rojo; } . productos tr: enésimo de tipo (par) { color de fondo: azul; } Figura 11-5 Los navegadores normalmente insertan espacio entre cada celda de la tabla. (Probablemente no notará este espacio adicional a menos que haya agregado un borde, como se muestra aquí en la parte superior). Si configura el espaciado de bordesa0para eliminar el espacio adicional, le quedan líneas de borde dobles donde se tocan los bordes contiguos (centro). Elborde-colapsoLa propiedad resuelve ambos dilemas (abajo). Tampoco estás limitado a los colores. Puede usar imágenes de fondo (consulte la página 240) o incluso degradados lineales (página 260) para crear apariencias más sofisticadas, como la ligera gradación en la fila del encabezado de la tabla de la Figura 11-6. (Verá un ejemplo similar de esto en el tutorial en la página 393). También puede usar un selector descendente para seleccionar celdas en esa fila. Esta técnica es excelente para diseñar todas las celdas de una columna con su propio aspecto: <td clase="precio">,Por ejemplo. NotaElenésimo de tiposelector no es compatible con Internet Explorer 8 o anterior. 382 Css3: el manual perdido www.it-ebooks.info ESTILO Mesas Formatear columnas es un poco más complicado. HTML proporciona el <colgroup>y <columna> etiquetas para indicar grupos de columnas y columnas individuales, respectivamente. incluyes uno <col>etiqueta para cada columna de la tabla y puede identificarlas con una clase o ID. (Consulte el código HTML en la página 376). Solo funcionan dos conjuntos de propiedades en estas etiquetas: anchoy las propiedades de fondo (color de fondo, imagen de fondo, etcétera). Pero pueden ser muy útiles. Cuando desee establecer el ancho de todas las celdas en una columna, puede omitir cualquier atributo HTML y simplemente diseñar la columna, usando un estilo aplicado a <columna>etiqueta. Por ejemplo, supongamos que tiene este bit de HTML: <col clase="precio">.Puede agregar este estilo a una hoja de estilo para establecer el ancho de cada celda en esa columna en 200 píxeles: . precio { ancho: 200px; } Figura 11-6 Alternando la espaldael color de fondo de una fila a otra en una tabla facilita la identificación rápida de los datos de cada fila. Para resaltar una columna, puede usar las propiedades de fondo. Nuevamente, suponga que tiene un <columna>etiqueta con una clase deprecioaplicado a ella: . precio { color de fondo: #F33; } Sin embargo, tenga en cuenta que los fondos de las columnas aparecen debajo de las celdas de la tabla, por lo que si establece un color de fondo o una imagen para <td>o <th>etiquetas, el fondo de la columna no será visible. Capítulo 11:FORMATO DE TABLAS Y FORMULARIOS www.it-ebooks.info 383 ESTILO FormularioMS NotaPor lo general, los navegadores web muestran el borde y el color de fondo de cualquier celda de tabla vacía. Si desea ocultar esas celdas vacías, CSS se lo permite. Solo agregaceldas vacías: ocultara un estilo aplicado a una tabla: mesa { celdas vacías: ocultar; } Sin embargo, una advertencia: si configura elborde-colapsopropiedad (página 380) acolapsar,los navegadores ignoran elceldas vaciaspropiedad y mostrar los bordes y fondos incluso de las celdas vacías. Formas de estilo Los formularios web son la forma principal en que los visitantes interactúan con un sitio web. Al proporcionar información en un formulario, puede unirse a una lista de correo, buscar en una base de datos de productos, actualizar su perfil personal en Facebook o pedir el juego Star Wars Lego que le ha gustado. No hay ninguna razón por la que sus formularios deban parecerse a todos los demás en Internet. Con un poco de CSS, puede diseñar campos de formulario para compartir el mismo formato que otros elementos del sitio, como fuentes, colores de fondo y márgenes. No hay propiedades CSS específicas para los formularios, pero puede aplicar casi cualquier propiedad de este libro a un elemento de formulario. Los resultados, sin embargo, pueden ser mixtos (ver Figura 11-7). Los navegadores varían en la forma en que manejan el estilo de los elementos del formulario. La siguiente sección le dice qué propiedades funcionan mejor con qué etiquetas de formulario y también enumera qué navegadores las interpretan correctamente. Hasta la velocidad Mantenerse fiel a la forma Aparte de la compatibilidad variable del navegador con los formularios de Agregar un borde punteado a un campo de formulario puede convertir un campo de estilo CSS, existen buenas razones para andar con cuidado al modificar el texto fácilmente reconocible en un cuadro que se omite fácilmente. (Vea los ejemplos en aspecto de los elementos de la interfaz universalmente reconocidos, como los la parte inferior derecha y en la parte inferior central de la Figura 11-7.) Si ese cuadro de botones de envío y los menús desplegables. La mayoría de los internautas ya texto está destinado a capturar direcciones de correo electrónico para su boletín están muy familiarizados con el aspecto y el funcionamiento de los formularios. informativo, puede perder algunos visitantes que lo salten directamente. Como mínimo, El aspecto genérico de un botón de envío es el mismo de un sitio a otro. asegúrese de que las personas puedan reconocer los formularios de sus sitios como Cuando las personas lo ven, saben instantáneamente qué hace ese botón y formularios. cómo usarlo. Si modifica el aspecto de un formulariotambiénmucho, puede dificultar que los visitantes completen su formulario correctamente. 384 Css3: el manual perdido www.it-ebooks.info ESTILO FormularioMS Figura 11-7 Los navegadores varían en la forma en que manejan el estilo de los campos de formulario. Internet Explorer 9 (arriba) no admite esquinas redondeadas ni sombras paralelas en un área de texto (consulte el área de Texto en el panel Bordes a la derecha). Tampoco comprende el degradado lineal aplicado al botón Enviar en el panel de Fondos del medio. Las diferencias entre Chrome (segundo desde arriba), Firefox (segundo desde abajo) y Safari (abajo) no son tan drásticas, pero todavía hay algunas inconsistencias visuales entre ellos. Lo mejor que puede hacer es diseñar sus formularios con cuidado y no esperar que se vean igual en todos los navegadores. Capítulo 11:FORMATO DE TABLAS Y FORMULARIOS www.it-ebooks.info 385 ESTILO FormularioMS Elementos de formulario HTML Una variedad de etiquetas HTML lo ayudan a crear formularios. Puede formatear algunos de ellos (como campos de texto) con más éxito que otros (botones de opción). Aquí hay algunas etiquetas de formulario comunes y los tipos de propiedades con las que se llevan bien: • Conjunto de campos.El <conjunto de campos>preguntas de formulario relacionadas con grupos de etiquetas. La mayoría de los navegadores hacen un buen trabajo al mostrar colores de fondo, imágenes de fondo y bordes para esta etiqueta. Sin embargo, Internet Explorer permite que el fondo fluya hacia arriba y sobre la línea superior del conjunto de campos. (Mire el panel central de la imagen superior en la Figura 11-7.) El relleno coloca espacio desde los bordes del conjunto de campos hasta el contenido dentro de él. Aunque, lamentablemente, Internet Explorer ignora el relleno superior, puede simularlo agregando un relleno superiormargenal primer elemento dentro del fieldset. • Leyenda.El <leyenda>la etiqueta sigue el HTML para el <conjunto de campos>etiqueta y proporciona una etiqueta para el grupo de campos. La leyenda aparece centrada verticalmente en el borde superior de un conjunto de campos. Si los elementos del formulario para recopilar una dirección de envío aparecen dentro del conjunto de campos, puede agregar una leyenda como esta: <leyenda>Dirección de envío</leyenda>.Puedes usar CSS para cambiar el <leyenda>las propiedades de fuente de la etiqueta, agregue colores e imágenes de fondo y agregue sus propios bordes. • Campos de texto.El <tipo de entrada="texto">, <tipo de entrada"contraseña">,y <área de texto> las etiquetas crean cuadros de texto en un formulario. Estas etiquetas le brindan el control CSS de navegador cruzado más consistente. Puede cambiar el tamaño de fuente, la familia de fuentes, el color y otras propiedades de texto para los cuadros de texto, así como agregar bordes, colores de fondo e imágenes. Puede establecer el ancho y alto de estos campos usando el CSSancho yalturapropiedades. • Botones.Botones de formulario, como <tipo de entrada="enviar">—permita que sus visitantes envíen un formulario, restablezcan su contenido o activen alguna otra acción. La mayoría de los navegadores le permiten volverse loco con el formato del texto, los bordes, los fondos, las sombras paralelas y las esquinas redondeadas. También puede alinear el texto del botón a la izquierda, al centro o a la derecha con eltexto alineadopropiedad. Los degradados lineales (página 260) se ven especialmente bien en los botones. • Menús desplegables.Menús desplegables creados por <seleccionar>La etiqueta también le brinda una buena cantidad de control de estilo. La mayoría de los demás navegadores también le permiten configurar la fuente, el tamaño de la fuente, el color de fondo, la imagen y los bordes. Sin embargo, los fondos y las imágenes de fondo no siempre se agregan al menú desplegable cuando se expande para mostrar todas las opciones del menú. • Casillas de verificación y botones de radio.La mayoría de los navegadores no permiten formatear estos elementos. Opera, sin embargo, le permite establecer un color de fondo que apareceadentro la caja o el botón. Internet Explorer agrega un color de fondoalrededorla caja o el botón. Debido a que los navegadores varían mucho en la forma en que tratan estos elementos, es mejor dejarlos solos. 386 Css3: el manual perdido www.it-ebooks.info ESTILO FormularioMS CLÍNICA DE USUARIOS ELÉCTRICOS Atributo: el selector de campo de formulario definitivo Cuando se trata de dar estilo a los formularios, los estilos de etiquetas simplemente no determinar qué tipo de elemento de formulario <entrada>produce la etiqueta. cortan la mostaza. Después de todo, los cuadros de texto, los botones de radio, las El valor de tipo para un campo de texto de formulario estexto.Para crear un casillas de verificación, los campos de contraseña y los botones comparten la misma estilo que haga que el color de fondo de todos los campos de texto de una sola etiqueta HTML: <entrada>.Si bien un ancho de 200 píxeles tiene sentido para un cuadro línea sea azul, debe crear este selector y estilo: de texto, probablemente no desee que sus casillas de verificación sean tan grandes, por entrada[tipo="texto"] { lo que no puede usar el <entrada>etiqueta para dar formato al ancho. Por ahora, la forma más compatible con todos los navegadores de formatear solo campos de texto sería agregar un nombre de clase a cada campo de texto como <tipo de entrada="texto" color de fondo: azul; } clase="campo de texto" nombre="correo electrónico">—y luego cree un estilo de clase Cambiandotextoen el ejemplo anterior paraentregarcrea un estilo solo para formatearlo. para los botones de envío, y así sucesivamente. Sin embargo, puede aprovechar el selector de atributos Todos los navegadores actuales, incluso Internet Explorer 7, entienden los (página 72) para ajustar el estilo de su formulario sin recurrir selectores de atributos, así que siéntete libre de usarlos para diseñar tus a las clases. formularios con precisión. Un selector de atributos apunta a una etiqueta HTML en función de uno de los atributos de la etiqueta. Eltipoatributo es responsable de Diseño de formularios usando CSS Todo lo que se necesita para crear un formulario es agregar un montón de etiquetas y otros elementos de formulario a una página web. Visualmente, sin embargo, puede terminar con un desorden caótico (consulte la Figura 11-8, a la izquierda). Los formularios generalmente se ven mejor cuando las preguntas y los campos del formulario están organizados en columnas (Figura 11-8, derecha). Puede lograr este efecto de un par de maneras. El enfoque más sencillo es con una tabla HTML. Aunque las etiquetas y los campos de los formularios no son estrictamente datos de tabla, se prestan maravillosamente a un formato de fila/columna. Simplemente coloque sus etiquetas ("Nombre", "Número de teléfono", etc.) en una columna y campos de formulario en una segunda columna. Usando CSS, también puede crear un formulario de dos columnas como la Figura 11-8 (con el beneficio adicional de menos código HTML). Aquí está el enfoque básico: 1.Envuelva cada etiqueta en una etiqueta. La opción obvia para una etiqueta es <etiqueta>,ya que está diseñado para identificar etiquetas de formulario. pero no puedessiempreusar <etiqueta>etiquetas para todas las etiquetas. Los botones de radio suelen tener una pregunta como "¿Cuál es tu color favorito?" seguido por separado <etiqueta>etiquetas para cada botón. Entonces, ¿qué etiqueta usas para la pregunta? En este caso, debe recurrir a envolver la pregunta en un <lapso>etiqueta: <span>¿Cuál es tu color favorito?</span>.Luego agregue una clase a cada una de estas etiquetas—<abarcan clase="etiqueta">—y también agregue la clase solo a esos <etiqueta>etiquetas que desea que aparezcan en la columna de la izquierda (en la Figura 11-8, serían las etiquetas para "Nombre", "Apellido", etc., pero no el <etiqueta>etiquetas para los botones de opción). Capítulo 11:FORMATO DE TABLAS Y FORMULARIOS www.it-ebooks.info 387 ESTILO NotaVisitawww.htmldog.com/guides/htmladvanced/formspara obtener una descripción general rápida de <etiqueta>etiqueta. FormularioMS Figura 11-8 Las diferentes formas y tamaños de los cuadros de texto, los botones de opción y otros objetos de formulario no se alinean bien de forma natural con el texto, lo que a menudo provoca un patrón en zigzag poco elegante. Esta forma no es solo fea; es difícil de leer (izquierda). La solución es organizar sus formularios en columnas (derecha), usando ya sea una tabla HTML o estilos CSS. 2.Establezca la propiedad de visualización enbloque en línea,y establecer un ancho. Normalmente el <etiqueta>y <lapso>Las etiquetas son elementos en línea, que normalmente ignoran muchas de las configuraciones disponibles para bloquear elementos, incluyendoancho, alto, ytexto alineado.Sin embargo, si convierte la etiqueta en unbloque en línea,todavía puede sentarse al lado (esa es la parte "en línea") del campo de formulario. ElanchoEl valor debe proporcionar suficiente espacio para acomodar toda la etiqueta en una línea si es posible. Puede crear un estilo de clase que se vea así: . etiqueta { pantalla: bloque en línea; ancho: 20em; } Elanchoybloque en líneaLa configuración convierte las etiquetas en pequeños bloques de tamaño uniforme y proporciona un borde izquierdo limpio con el que se alinean todos los campos del formulario. 3.Ajusta el estilo. Solo un par de mejoras más completan el trabajo. Quiere configurar el alineación verticalpropiedad (página 379) aarriba,para que la parte superior del texto de la etiqueta se alinee con la parte superior del campo de formulario. También debe alinear el texto de la etiqueta a la derecha, de modo que cada etiqueta aparezca junto a cada campo de formulario. Finalmente, al agregar un poco de margen derecho, puede crear un espacio en blanco agradable entre las etiquetas y los campos de formulario. 388 Css3: el manual perdido www.it-ebooks.info Traducido del inglés al español - www.onlinedoctranslator.com ESTILO NotaVisitawww.htmldog.com/guides/htmladvanced/formspara obtener una descripción general rápida de <etiqueta>etiqueta. FormularioMS Figura 11-8 Las diferentes formas y tamaños de los cuadros de texto, los botones de opción y otros objetos de formulario no se alinean bien de forma natural con el texto, lo que a menudo provoca un patrón en zigzag poco elegante. Esta forma no es solo fea; es difícil de leer (izquierda). La solución es organizar sus formularios en columnas (derecha), usando ya sea una tabla HTML o estilos CSS. 2.Establezca la propiedad de visualización enbloque en línea,y establecer un ancho. Normalmente el <etiqueta>y <lapso>Las etiquetas son elementos en línea, que normalmente ignoran muchas de las configuraciones disponibles para bloquear elementos, incluyendoancho, alto, ytexto alineado.Sin embargo, si convierte la etiqueta en unbloque en línea,todavía puede sentarse al lado (esa es la parte "en línea") del campo de formulario. ElanchoEl valor debe proporcionar suficiente espacio para acomodar toda la etiqueta en una línea si es posible. Puede crear un estilo de clase que se vea así: . etiqueta { pantalla: bloque en línea; ancho: 20em; } Elanchoybloque en líneaLa configuración convierte las etiquetas en pequeños bloques de tamaño uniforme y proporciona un borde izquierdo limpio con el que se alinean todos los campos del formulario. 3.Ajusta el estilo. Solo un par de mejoras más completan el trabajo. Quiere configurar el alineación verticalpropiedad (página 379) aarriba,para que la parte superior del texto de la etiqueta se alinee con la parte superior del campo de formulario. También debe alinear el texto de la etiqueta a la derecha, de modo que cada etiqueta aparezca junto a cada campo de formulario. Finalmente, al agregar un poco de margen derecho, puede crear un espacio en blanco agradable entre las etiquetas y los campos de formulario. 388 Css3: el manual perdido www.it-ebooks.info ESTILO . etiqueta { FormularioMS flotador izquierdo; ancho: 20em; alineación vertical: superior; alineación de texto: derecha; margen derecho; 15 píxeles; } En este punto, tienes una forma simple y ordenada. Puede realizar otras mejoras si lo desea, como poner las etiquetas en negrita y de un color diferente. El tutorial que comienza en la página siguiente proporciona un ejemplo paso a paso de esta técnica. CLÍNICA DE USUARIOS ELÉCTRICOS Formar pseudo-clases Hay un puñado de pseudoclases destinadas a diseñar formularios. El : un campo de texto deshabilitado o active una casilla de verificación enfocarpseudo-clase le permite crear un selector que cambia la deshabilitada. Solo puede cambiar el estado de un elemento de formulario (de apariencia de un campo de texto cuando un visitante hace clic o tabula deshabilitado a habilitado, por ejemplo) usando JavaScript, por lo que deberá dentro de él (esto se denomina dar al campoenfocar). Puede usar esto aprender eso para aprovechar realmente:activadoo :desactivadopseudo-clases. para cambiar el tamaño, el color de fondo, la fuente y otras propiedades Sin embargo, pueden ser útiles. Por ejemplo, supongamos que tiene un CSS del campo. Verá un ejemplo en acción en el tutorial de la página formulario de pedido con campos de dirección de "facturación" y "envío". Si 395. agregó una casilla de verificación "igual que la dirección de facturación" junto a El :comprobadopseudo-clase funciona con botones de radio y casillas de verificación. Su objetivo es permitirle diseñar esos elementos, pero los navegadores web generalmente mantienen un estricto control visual sobre estos campos, y la mayoría de las propiedades de CSS no se aplican. Sin embargo, si quiere probarlos, simplemente puede crear un estilo llamado los campos de dirección de envío, un visitante puede hacer clic en esta casilla. Usando JavaScript, puede deshabilitar los campos de dirección de envío para que nadie los escriba accidentalmente. Para dejar en claro que el usuario no puede completarlos, puede cambiar su estilo para que se vean "atenuados" o atenuados, así: :comprobadoy agréguele algunas propiedades CSS. Tenga en cuenta que solo :desactivado { se aplicará a los botones de radio y casillas de verificación de un formulario. Si color de fondo: #333; } desea diseñar una casilla de verificación en particular cuando está marcada, puede crear un estilo de clase: Incluso hay más pseudoclases destinadas a trabajar con algunas de las . especial: marcado funciones de formulario especiales de HTML5, como la validación de formulario integrada u otras propiedades especiales. Para obtener más información sobre Y luego aplique esa clase solo a esa casilla de verificación: <tipo de entrada="casilla de verificación" clase="especial"... Los elementos de formulario también se pueden habilitar o deshabilitar. Cuando está estos, visitehttp://html5doctor.com/css3-pseudo-classes-and-html5-forms/. Sin embargo, tenga en cuenta que muchos navegadores aún no son compatibles con estas funciones de formulario HTML5. deshabilitado, el campo no se puede cambiar: por ejemplo, no se puede escribir en Capítulo 11:FORMATO DE TABLAS Y FORMULARIOS www.it-ebooks.info 389 Tutorial: ESTILIZANDO UN Mesa Tutorial: aplicar estilo a una tabla HTML es excelente para crear tablas, pero necesita CSS para darles estilo. Como puede ver en la página 375, se necesita bastante HTML para construir una tabla simple. Por suerte para ti, este libro viene con una tabla HTML preconstruida para que practiques tu CSS. En este tutorial, dará formato a las filas, columnas y celdas de la tabla y le dará una fuente y un color de fondo atractivos. Para comenzar, descargue los archivos del tutorial que se encuentran en el sitio web complementario de este libro en www.sawmac.com/css3/. Haga clic en el enlace del tutorial y descargue los archivos. Todos los archivos están encerrados en un archivo zip, por lo que primero debe descomprimirlos. (Visite el sitio web para obtener instrucciones detalladas). Los archivos de este tutorial se encuentran en el11→mesacarpeta. 1.Inicie un navegador web y abra el archivo.11→mesa→tabla.html. Esta página contiene una tabla HTML simple. Tiene un título, una fila de encabezados de tabla y nueve filas de datos contenidos en las celdas de la tabla (Figura 11-9). además, el <col>La etiqueta se usa tres veces para identificar las tres columnas de datos. Como verás en un momento, <columna>es una etiqueta útil para diseñar, ya que le permitirá establecer el ancho de todas las celdas en una columna. Figura 11-9 Dar formato a una tabla con bordes, fondo colores y otras propiedades de CSS no solo hacen que una tabla HTML monótona (arriba) se vea genial, sino que también hace que los datos de la tabla sean más fáciles de leer (abajo). 390 Css3: el manual perdido www.it-ebooks.info Tutorial: ESTILIZANDO UN 2.abiertotabla.htmlen un editor de texto. Mesa Comenzará creando un estilo que establezca el ancho de la tabla y la fuente del texto. Esta tabla tiene una clase deinventarioaplicado a él, por lo que puede usar un selector de clase para formatear solo esta tabla. NotaYa hay una hoja de estilo externa adjunta a esta página, pero agregará sus nuevos estilos a una hoja de estilo interna. 3.Haga clic entre la apertura y el cierre <estilo>etiquetas y, a continuación, agregue el siguiente estilo: . inventario { familia de fuentes: "Trebuchet MS", Arial, Helvetica, sans-serif; ancho: 100%; margen superior: 25px; } A menos que establezca el ancho de una tabla, crece y se reduce para ajustarse al tamaño del contenido que contiene. En este caso, ha establecido un ancho del 100 por ciento, por lo que la tabla se estira para ajustarse al ancho completo de su contenedor. (En este caso, es el <cuerpo>etiqueta en sí misma, con un ancho establecido yautomárgenes izquierdo y derecho para centrarlo en la ventana del navegador). Configuración de la familia de fuentes en el <mesa>usa la herencia para dar a todas las etiquetas dentro de la tabla la misma fuente—<título>,encabezados de tabla (<th>),celdas de la tabla (< td>),etcétera. Finalmente, elmargen superiorLa propiedad desliza la tabla hacia abajo desde el título que se encuentra arriba. A continuación, diseñará el título de la tabla. 4.Agregue otro estilo debajo del estilo de tabla que acaba de crear: . título de inventario { text-align: right; tamaño de fuente: 1,3 em; margen inferior: 10px; } Este selector descendente solo afecta a <subtítulo>etiqueta que aparece dentro de otra etiqueta con el ID deinventario (ese es el <mesa>en esta página). un <subtítulo>La etiqueta indica de qué se trata una tabla. En este caso, no debería ser el centro de atención, por lo que mantuvo el texto pequeño y lo movió hacia el borde derecho, fuera del camino. El margen inferior agrega un poco de espacio entre el título y la tabla. Cuando lee información en una fila de la tabla, es fácil perder la noción de qué fila está mirando. Las buenas guías visuales son esenciales. Agregar bordes alrededor de las celdas, lo que hará a continuación, delinea visualmente la información. Capítulo 11:FORMATO DE TABLAS Y FORMULARIOS www.it-ebooks.info 391 Tutorial: ESTILIZANDO UN Mesa 5.Agregue el siguiente estilo de grupo a la hoja de estilo interna: . inventario td, .inventario th { tamaño de fuente: 1.1em; borde: 1px sólido #DDB575; } Este selector de grupo formatea el encabezado de la tabla (<th>)y celda de la tabla (<td>)etiquetas de esta tabla con un tipo más grande y dibuja un borde alrededor de cada encabezado y cada celda. Los navegadores normalmente insertan espacios entre cada celda, por lo que en este punto hay pequeños espacios entre los bordes (Figura 11-10, dentro de un círculo). Entre los huecos y los bordes, toda la mesa parece demasiado cuadrada. Arreglarás eso a continuación. 6.Añade elborde-colapsopropiedad al estilo de tabla que creó en el Paso 3 para que se vea así: . inventario { familia de fuentes: "Trebuchet MS", Arial, Helvetica, sans-serif; ancho: 100%; margen superior: 25px; borde-colapso: colapso; } Elborde-colapsoLa propiedad elimina el espacio entre las celdas. También fusiona bordes que se tocan, lo que evita bordes gruesos y poco atractivos. Sin colapso de fronteras,el borde inferior del encabezado de una tabla y el borde superior de la celda de la tabla se duplicarían para formar un borde de dos píxeles. Si obtiene una vista previa de la tabla ahora, verá que los datos están mejor organizados visualmente, pero la información en cada celda se ve un poco apretada. Agregue algo de relleno para arreglar eso. 7.Agregue relleno al selector de grupo que creó en el Paso 5: . inventario td, .inventario th { tamaño de fuente: 1.1em; borde: 1px sólido #DDB575; relleno: 3px 7px 2px 7px; } Aunque la fila superior del encabezado de la tabla se destaca por su texto en negrita, hay algunas cosas que puede hacer para que se destaque aún más y mejore su apariencia. 8.Cree un nuevo estilo debajo del archivo .inventario td, .inventario thestilo para formatear solo celdas de encabezado de tabla: . inventario th { texttransform:mayúsculas; alineación de texto: izquierda; acolchado superior: 5px; parte inferior del relleno: 4px; } 392 Css3: el manual perdido www.it-ebooks.info Tutorial: Este estilo es un ejemplo perfecto de cascada eficaz. El selector de grupotd, thdefine las propiedades de formato comunes entre los dos tipos de celdas. Al presentar estees-solo estilo, ESTILIZANDO UN Mesa puede modificar aún más el aspecto dejustolos encabezados de la tabla. por ejemplo, el acolchado superioryfondo acolchadolas configuraciones aquí anulan las mismas configuraciones definidas en el selector en el Paso 7. Sin embargo, dado que no anula las configuraciones de relleno izquierda o derecha, el <th>Las etiquetas conservarán los siete píxeles de relleno izquierdo y derecho definidos en el Paso 7. Este estilo también cambia todo el texto a mayúsculas y lo alinea con el borde izquierdo de la celda de la tabla. Los encabezados de la tabla todavía no tienen suficiente empuje y la tabla parece retroceder al fondo de la página. Un gráfico de fondo puede proporcionar el impulso necesario. Figura 11-10 La visualización normal de un navegador de una tabla inserta un espacio entre cada celda (arriba). También permite que los bordes se dupliquen donde se tocan las celdas. Configuración de laborde-colapso propiedad acolapsarresuelve ambos problemas (abajo). 9.Editar elelestilo agregando un degradado lineal al fondo y cambiando el color del texto: . inventario th { texttransform:mayúsculas; alineación de texto: izquierda; acolchado superior: 5px; parte inferior del relleno: 4px; fondo: rgb(229,76,16); fondo: -webkit-linear-gradient(rgb(229,76,16), rgb(173,54,8)); fondo: -mozlinear-gradient(rgb(229,76,16), rgb(173,54,8)); fondo: -o-lineargradient(rgb(229,76,16), rgb(173,54,8)); Capítulo 11:FORMATO DE TABLAS Y FORMULARIOS www.it-ebooks.info 393 Tutorial: fondo: gradiente lineal (rgb (229,76,16), rgb (173,54,8)); color ESTILIZANDO UN Mesa blanco; } Comienza simplemente agregando un color RGB al fondo; de esa forma, Internet Explorer 9 y versiones anteriores (que no entienden de gradientes) al menos tienen un color sólido. Las siguientes tres líneas agregan las versiones del degradado lineal con el prefijo del proveedor, mientras que la penúltima línea es la versión oficial.gradiente linealsintaxis. Finalmente, el color del texto se cambia a blanco. Cuando las tablas tienen muchos datos en muchas filas y columnas, a veces es difícil identificar rápidamente qué datos pertenecen a cada fila. Afortunadamente, puedes usar elenésimo de tipoSelector para apuntar rápidamente a filas alternas. 10Agregue un estilo más a la hoja de estilo interna de la página web: . inventario tr:nth-of-type(even){ backgroundcolor: rgba(255,255,255,.1); } . inventario tr:nth-of-type(odd){ backgroundcolor: rgba(229,76,16,.1); } Como se puede leer en la página 78, elenésimo de tiposelector se utiliza para seleccionar elementos secundarios que siguen un patrón numérico; por ejemplo, cada quinto párrafo. En este caso, el primer estilo selecciona cada par <tr>etiqueta, mientras que el segundo selecciona cada impar <tr>etiqueta. Finalmente, ajustará el ancho de las celdas que se encuentran debajo de las columnas Precio y Calificación. Una técnica es agregar meticulosamente nombres de clase a esas celdas y crear un estilo de clase con un ancho establecido. Sin embargo, un mejor enfoque es aprovechar el < columna>etiqueta, que le permite asignar una clase o ID a las celdas de una columna. Como puede ver en la Figura 11-9, esas dos columnas tienen un ID de precioyclasificación.Puede configurar fácilmente el ancho de estas dos columnas con un selector de grupo. 11Agregue un estilo más a la hoja de estilo interna de la página web: # precio, #calificación { ancho: 15%; } Obtenga una vista previa de la página en un navegador web para ver los resultados. Su página debe parecerse a la imagen inferior de la Figura 11-9. También encontrarás el ejercicio completo en el 11_terminado→mesacarpeta. 394 Css3: el manual perdido www.it-ebooks.info Tutorial: ESTILIZANDO UN Tutorial: aplicar estilo a un formulario Forma Este tutorial le brinda práctica en el uso de CSS para organizar un formulario y hacerlo más atractivo. si abres11→forma→formulario.htmlen un navegador web, verá que contiene un formulario simple para suscribirse al sitio web ficticio, CosmoFarmer.com (Figura 11-11). El formulario hace varias preguntas y utiliza una variedad de elementos de formulario para la entrada, incluidos cuadros de texto, botones de opción y un menú desplegable. En lo que respecta a los formularios de suscripción, se ve bien, pero un poco soso. En los pasos de las siguientes páginas, arreglará las fuentes, alineará mejor las preguntas y los cuadros y agregará algunas otras mejoras. 1.abre el archivoformulario.htmlen un editor de texto. Ya hay una hoja de estilo externa adjunta a esta página, pero agregará sus nuevos estilos a una hoja de estilo interna. Comience por reducir el tamaño del tipo en el formulario. 2.Haga clic entre la apertura y el cierre <estilo>etiquetas y, a continuación, agregue el siguiente estilo: . subformulario { tamaño de fuente: 1,2 em; color blanco; familia tipográfica: Tahoma, Ginebra, sans-serif; } El formulario de suscripción tiene una clase desubformularioaplicado a él, por lo que este estilo establece el tamaño del texto, el color y la fuente para todo el texto entre la apertura y el cierre <formulario>etiquetas Es hora de trabajar en el diseño. Para alinear mejor los elementos del formulario, creará la apariencia de dos columnas: una para las preguntas (etiquetas) y otra para las respuestas (campos de formulario). Figura 11-11 Mientras que el HTML<mesa>La etiqueta es una forma común de organizar las preguntas de un formulario, también puede usar CSS para hacer un revoltijo desorganizado de etiquetas y campos de formulario (como los que se muestran aquí) y hacer que el diseño de un formulario sea más claro y atractivo. Capítulo 11:FORMATO DE TABLAS Y FORMULARIOS www.it-ebooks.info 395 Tutorial: ESTILIZANDO UN Forma 3.Agregue otro estilo a la hoja de estilo interna: . subformulario .label { display: inline-block; ancho: 200px; alineación vertical: superior; } Este selector descendiente identifica cualquier elemento con una clase de .etiquetadentro de este formulario. El estilo cambia las etiquetas de elementos en línea (que no aceptan valores de ancho) abloque en líneaelementos. La configuración de ancho establece el área de la etiqueta en 200 píxeles de ancho, mientras que la configuración de alineación vertical asegura que el texto de la etiqueta se alinee con la parte superior de los campos de formulario junto a ellos. Como resultado, cuando aplica este estilo a cada una de las preguntas del formulario, crea una columna de ancho uniforme. Pero para ver el efecto, primero debe aplicar la clase a los elementos de página apropiados. 4.En el HTML de la página, busque este código <etiqueta para="nombre">y añadirclase= "etiqueta",por lo que la etiqueta se ve así: <etiqueta para="nombre" clase="etiqueta"> Debes hacer lo mismo para cada pregunta del formulario, así que… 5.Repita el Paso 5 para las siguientes piezas de código HTML: <etiqueta para="correo electrónico">, < etiqueta para="referir">, <etiqueta para="comentarios">. Hay una pregunta adicional en el formulario:Califica tus habilidades de cultivo de apartamentos. no está dentro de unetiquetatag, ya que su finalidad es introducir una serie de botones de radio, cada uno de los cuales tiene su propia etiqueta. Necesitas agregar un <lapso>etiqueta a este texto para que pueda aplicar laetiquetaestilo a la misma. 6.Encuentra el textoCalifica tus habilidades de cultivo de apartamentos, y luego envuélvalo en un <lapso> etiqueta con una clase deetiqueta,al igual que: <span clase="etiqueta">Califica tus habilidades de cultivo de apartamentos</span> Ahora las preguntas parecen estar en una sola columna (Figura 11-12, arriba). Pero se verían mejor si destacaran más y se alinearan con los campos de formulario correspondientes. 7.Edite el .subformulario .etiquetaestilo que creó en el Paso 4, por lo que se ve así: . subformulario .label { display: inline-block; ancho: 200px; alineación vertical: superior; alineación de texto: derecha; margen derecho: 10px; fuente-peso: negrita; color: rgba(255,255,255,.5); } 396 Css3: el manual perdido www.it-ebooks.info Tutorial: Obtenga una vista previa de la página en un navegador web. El formulario debe parecerse a la imagen inferior ESTILIZANDO UN de la Figura 11-12. Forma El formulario está tomando forma, pero ese botón Suscribirse parece fuera de lugar en el borde izquierdo. A continuación, lo alineará con los otros elementos del formulario. Figura 11-12 A veces, los cambios pequeños y sutiles pueden hacer que un formulario sea más legible. Poner las preguntas en negrita en el formulario y alinearlas con sus elementos de formulario correspondientes (figura inferior) mejora inmediatamente el aspecto del formulario. 8.Agregue otro estilo a la hoja de estilo interna. . entrada de subformulario [tipo = "enviar"] { margen izquierdo: 220px; } Dado que los botones de envío se crean agregandotipo = "enviar"a un <entrada> etiqueta, simplemente puede usar un selector de atributos (página 72) para orientarlos. Esto lo libera de tener que crear un estilo de clase y aplicarlo al botón de enviar. Capítulo 11:FORMATO DE TABLAS Y FORMULARIOS www.it-ebooks.info 397 Tutorial: ESTILIZANDO UN Forma La mayoría de los navegadores también le permiten diseñar botones de otras maneras, así que... 9.Edite el estilo del botón Enviar agregando algunas propiedades más: . entrada de subformulario [tipo = "enviar"] { margen izquierdo: 220px; relleno: 10px 25px; tamaño de fuente: 1em; color blanco; } El relleno agrega espacio entre el texto dentro del botón y los bordes del botón, mientras que eltamaño de fuenteycolorpropiedades afectan el texto en el botón. Ahora puede ser más creativo y agregar un degradado al botón. 10Edite el estilo del botón Enviar de nuevo: . entrada de subformulario [tipo = "enviar"] { margen izquierdo: 220px; relleno: 10px 25px; tamaño de fuente: 1em; color blanco; fondo: rgb(0,102,153); fondo: -webkit-linear-gradient(rgba(255,255,255,.1) 40%, rgba(255,255,255,.5)); fondo: -moz-linear-gradient(rgba(255,255,255,.1) 40%, rgba(255,255,255,.5)); fondo: -o-linear-gradient(rgba(255,255,255,.1) 40%, rgba(255,255,255,.5)); fondo: gradiente lineal (rgba (255,255,255, .1) 40%, rgba (255,255,255, .5)); } Aquí establece un color de fondo estándar (para IE 9 y versiones anteriores) seguido de un degradado lineal. Hay dos paradas de color. El primer color se extiende desde la parte superior hasta el 40 por ciento del camino hacia el botón, luego comienza el degradado (para obtener un resumen de los degradados y las paradas de color, vaya a la página 262). Finalmente, modificará un poco el aspecto. Eliminará el borde estándar, redondeará las esquinas y agregará un resplandor alrededor del cuadro. 11Edite el estilo del botón Enviar por última vez (cambios en negrita): . entrada de subformulario [tipo = "enviar"] { margen izquierdo: 220px; relleno: 10px 25px; tamaño de fuente: 1em; color blanco; fondo: rgb(0,102,153); fondo: -webkit-linear-gradient(rgba(255,255,255,.1) 40%, 398 Css3: el manual perdido www.it-ebooks.info Tutorial: ESTILIZANDO UN rgba(255,255,255,.5)); fondo: -moz-linear-gradient(rgba(255,255,255,.1) 40%, Forma rgba(255,255,255,.5)); fondo: -o-linear-gradient(rgba(255,255,255,.1) 40%, rgba(255,255,255,.5)); fondo: gradiente lineal (rgba (255,255,255, .1) 40%, rgba (255,255,255, .5)); borde: ninguno; borde-radio: 5px; caja-sombra: 0 0 4px blanco; } Poner el borde enningunoelimina el borde que los navegadores normalmente dibujan alrededor del botón, mientras que elborde-radio(página 207) redondea las esquinas del botón. Finalmente, al agregar una sombra paralela sin compensación horizontal o vertical (esa es la0 0parte), puede agregar un resplandor a un elemento. En este caso, parece un ligero resplandor blanco que sale detrás del botón. NotaPuedes llevar este diseño de botón aún más lejos. Intente crear un estilo de rollover para él—.entrada de subformulario[tipo="enviar"]: pasar el cursor—y cambiar el color de fondo. ¡Incluso puedes animar esa transición usando la información que aprendiste en el capítulo anterior! Tienes las etiquetas de texto y el botón Suscribir que se ven muy bien, pero ¿por qué detenerse ahí? Es hora de animar los campos de formulario. Comience cambiando la fuente y los colores de fondo. 12Agregue un estilo para el menú Seleccionar del formulario: . subformulario seleccione { tamaño de fuente: 1.2em; } Esto solo aumenta un poco el tamaño del texto. Puede elegir una fuente, agregar un color de fondo y realizar otros cambios. Sin embargo, algunos navegadores (como Safari) realmente no le permiten diseñar mucho los menús desplegables, así que asegúrese de probar cualquier cambio de estilo que realice en los menús desplegables. Ahora es el momento de cambiar los campos de texto. 13Cree un nuevo selector de grupo para diseñar los tres cuadros de texto en el formulario: . subformulario entrada[tipo="texto"], .subformulario textarea { border-radius: 5px; borde: ninguno; color de fondo: rgba(255,255,255,.5); color: rgba(255,255,255,1); tamaño de fuente: 1,2 em; box-shadow: inserción 0 0 10px rgba(255,255,255,.75); } Capítulo 11:FORMATO DE TABLAS Y FORMULARIOS www.it-ebooks.info 399 Tutorial: ESTILIZANDO UN Forma Este estilo de grupo selecciona todos los elementos de entrada con el tipo detextoasí como los cuadros de texto multilínea (el <área de texto>etiqueta). Esto agrega varias propiedades con las que ya debería estar familiarizado, comoradio de borde, color de fondo, tamaño de fuente,y sombra de la caja).Los cuadros de texto se ven un poco pequeños, por lo que establecerá sus anchos y agregará un poco de relleno. 14Edite el estilo que acaba de crear estableciendo un ancho y relleno (cambios en negrita): . entrada de subformulario [tipo = "texto"], .subformulario textarea { tamaño de fuente: 1.2em; borde-radio: 5px; borde: ninguno; color de fondo: rgba(255,255,255,.5); color: rgba(255,255,255,1); tamaño de fuente: 1,2 em; box-shadow: inserción 0 0 10px rgba(255,255,255,.75); ancho: 500px; relleno: 5px; } Puede hacer que su formulario sea más fácil de completar para sus visitantes resaltando el elemento de formulario activo con el especial:enfocarpseudo-clase (página 70). Lo agregará en el siguiente paso. 15.Al final de la hoja de estilo interna, agregue un último estilo para el menú desplegable y los tres campos de texto: . entrada de subformulario [tipo = "texto"]: enfoque, .subformulario área de texto: enfoque { color de fondo: blanco; de color negro; } Obtenga una vista previa de la página en un navegador web. Ahora debería verse como la Figura 11-13 Puede encontrar una versión completa de este tutorial en el11_terminado→formacarpeta. 400 Css3: el manual perdido www.it-ebooks.info Tutorial: ESTILIZANDO UN Forma Figura 11-13 Utilizando el:pseudoclase de enfoque, tú puede hacer que sus formularios sean más interactivos resaltando los campos de formulario que utiliza el visitante. Aquí, puede ver que está a punto de escribir en el campo Comentarios debido a su color de fondo blanco. Capítulo 11:FORMATO DE TABLAS Y FORMULARIOS www.it-ebooks.info 401 www.it-ebooks.info PARTE Diseño de página CSS CAPÍTULO 12: Introducción al diseño CSS CAPÍTULO 13: Creación de diseños basados en flotadores CAPITULO 14: Diseño web adaptable CAPÍTULO 15: Posicionamiento de elementos en una página web www.it-ebooks.info 3 www.it-ebooks.info Capítulo 12 12 Introducción al diseño CSS C SS lleva una doble vida. Si bien es excelente para formatear texto, barras de navegación, imágenes y otros fragmentos de una página web, su poder verdaderamente increíble llega cuando está listo para diseñar páginas web completas. Mientras que HTML normalmente muestra el contenido en pantalla de arriba a abajo, con un elemento a nivel de bloque apilado tras otro, CSS le permite crear columnas una al lado de la otra y colocar imágenes o texto en cualquier lugar de la página (incluso en capas sobre otros elementos de la página) , para que pueda crear páginas web mucho más interesantes visualmente. Hay mucho en el diseño de CSS. Los siguientes tres capítulos cubren las técnicas CSS más importantes en detalle. Este capítulo proporciona una breve descripción de los principios detrás del diseño CSS y un puñado de pautas útiles para abordar sus propios desafíos de diseño. Tipos de diseños de página web Ser diseñador web significa lidiar con lo desconocido. ¿Qué tipo de navegadores utilizan sus visitantes? ¿Están viendo su sitio en un teléfono Android o en un iPad? El mayor problema que enfrentan los diseñadores es crear diseños atractivos para diferentes tamaños de pantalla. Los monitores varían en tamaño y resolución: desde pantallas de portátiles de 15 pulgadas y 640 x 480 píxeles hasta monstruosidades de 30 pulgadas que muestran unos 5 000 000 x 4 300 000 píxeles. Sin mencionar las pequeñas pantallas de los teléfonos móviles y las pantallas pequeñas y medianas de las tabletas. Los diseños web ofrecen varios enfoques básicos para este problema. Casi todos los diseños de página que ve pertenecen a uno de dos tipos:ancho fijoolíquido. Los diseños de ancho fijo le brindan el mayor control sobre cómo se ve su diseño, pero pueden incomodar a algunos 405 www.it-ebooks.info TIPOS DE WEB DISEÑOS DE PÁGINA de tus visitantes. Las personas con monitores realmente pequeños tienen que desplazarse hacia la derecha para ver todo, y aquellos con monitores grandes terminan con espacio desperdiciado que podría estar mostrando más de su excelente contenido. Además, los propietarios de teléfonos inteligentes deben pellizcar y hacer zoom para llegar al contenido que buscan. Los diseños líquidos, que crecen o se reducen para ajustarse a las ventanas del navegador, hacen que controlar el diseño sea más desafiante pero ofrecen el uso más eficaz de la ventana del navegador. Una innovación reciente—diseño web adaptable—busca resolver el problema de los anchos de pantalla muy variados, pero a costa de una mayor complejidad. • Ancho fijo.Muchos diseñadores prefieren la consistencia de un ancho establecido, como la página de la Figura 12-1, arriba. Independientemente del ancho de la ventana del navegador, el ancho del contenido de la página sigue siendo el mismo. En algunos casos, el diseño se adhiere al borde izquierdo de la ventana del navegador o, más comúnmente, está centrado en el medio. Con el enfoque de ancho fijo, no tiene que preocuparse por lo que sucede con su diseño en un monitor muy ancho (o pequeño). Muchos diseños de ancho fijo tienen menos de 1000 píxeles de ancho, lo que permite que la ventana y el espacio ocupado por las barras de desplazamiento y otras partes del "cromo" del navegador encajen en un monitor de 1024 x 768 píxeles. Un ancho muy común es de 960 píxeles. Muchos sitios web tienen un ancho fijo, pero eso está cambiando gracias a la adopción generalizada de teléfonos inteligentes y tabletas, que a menudo son mucho más angostos que el diseño de página web promedio de ancho fijo. NotaPara ver ejemplos de diseños de ancho fijo, visitewww.alistapart.com,espn.go.com, owww.nytimes.com. • Líquido.A veces es más fácil seguir la corriente que luchar contra ella. Un diseño líquido se ajusta para adaptarse al ancho del navegador, cualquiera que sea, asignando anchos porcentuales en lugar de valores de píxel absolutos. Su página se vuelve más ancha o más estrecha a medida que su visitante cambia el tamaño de la ventana (Figura 12-1, centro). Si bien este tipo de diseño aprovecha al máximo el espacio disponible de la ventana del navegador, le brinda el desafío adicional de asegurarse de que su diseño se vea bien en diferentes tamaños de ventana. En monitores muy grandes, estos tipos de diseños pueden verse ridículamente anchos, creando líneas de texto muy largas y difíciles de leer. NotaPara ver un ejemplo de un diseño líquido, consultehttp://maps.google.com. • Diseño web responsivo (RWD).Esta nueva técnica, defendida por el diseñador web Ethan Marcotte, ofrece otra forma de abordar el problema que presentan los tamaños de pantalla muy diferentes de los navegadores web de teléfonos inteligentes, tabletas y computadoras de escritorio. En lugar de presentar un diseño único para todos los dispositivos, el diseño web receptivo compensa los diferentes anchos de navegador al cambiar su presentación. Por ejemplo, una página web receptiva puede reducirse de un diseño amplio de varias columnas para monitores de escritorio a un diseño de una sola columna para teléfonos inteligentes. En esto 406 Css3: el manual perdido www.it-ebooks.info TIPOS DE WEB De alguna manera, el diseño web receptivo es muy parecido a los diseños líquidos: el diseño utiliza porcentajes para crecer o reducirse en respuesta al ancho de la ventana del navegador. DISEÑOS DE PÁGINA Sin embargo, va un paso más allá al usar algunos CSS complicados, llamados consultas de medios, para enviar diferentes diseños a navegadores de diferentes anchos, lo que le permite crear diseños de apariencia muy diferentes según el dispositivo que visualiza la página. En los tutoriales al final del próximo capítulo, creará un diseño de ancho fijo y un diseño líquido. En el Capítulo 13, se sumergirá en las técnicas para crear diseños web adaptables. NotaElanchura máximayancho mínimoLas propiedades ofrecen un compromiso entre diseños fijos y líquidos. Consulte la página 219. Figura 12-1 Tiene varias formas de lidiar con los anchos inciertos de las ventanas del navegador web y del navegador. tamaños de fuente Simplemente puede ignorar el hecho de que los visitantes de su sitio tienen monitores de diferentes resoluciones y fuerzan un ancho único e inalterable para su página (arriba), o crean un diseño líquido que fluye para llenar cualquier ventana de ancho encuentra (medio). Un diseño receptivo literalmente se reformatea a sí mismo dependiendo del ancho de la ventana del navegador. El Globo de Boston (www.bostonglobe.com), por ejemplo, el sitio pasa de una columna (izquierda), a dos columnas (centro), a tres columnas (derecha) a medida que se expande la ventana del navegador. Capítulo 12:PRESENTACIÓN DEL DISEÑO CSS www.it-ebooks.info 407 cómo CSS Disposición obras Cómo funciona el diseño CSS Como se discutió en el Capítulo 1, en los primeros días de la Web, las limitaciones de HTML obligaron a los diseñadores a desarrollar formas inteligentes de hacer que los sitios web se vieran bien. La herramienta más común fue el <mesa>etiqueta, que originalmente tenía la intención de crear una pantalla de información similar a una hoja de cálculo compuesta de filas y columnas de datos. Los diseñadores utilizaron tablas HTML para construir una especie de andamiaje para organizar el contenido de una página (consulte la Figura 12-2). Pero porque el <mesa>etiqueta no estaba pensada para el diseño, los diseñadores a menudo tenían que manipular la etiqueta de formas inusuales, como colocar una tabla dentro de la celda deotro mesa, solo para obtener el efecto que querían. Este método requería mucho trabajo, agregaba un montón de código HTML adicional y hacía muy difícil modificar el diseño más adelante. Pero antes de CSS, eso es todo lo que tenían los diseñadores web. Las tablas HTML tienen algo a su favor: proporcionan una cuadrícula bien organizada con una estructura unificada de celdas individuales. Para el diseño de CSS, utiliza etiquetas individuales para contener el contenido que desea colocar en un área de la página. Al agrupar el contenido en muchos contenedores individuales y posicionar esos contenedores, puede crear diseños complejos formados por columnas y filas. Antes de HTML5, tenía una etiqueta en particular para lograr este objetivo: el <div>etiqueta. La etiqueta <div> El diseño de la página web implica colocar fragmentos de contenido en diferentes regiones de la página. Con CSS, un elemento comúnmente utilizado para organizar el contenido es el <div> etiqueta. Como leyó en la página 22, el <div>La etiqueta es un elemento HTML que no tiene propiedades de formato inherentes (además del hecho de que los navegadores tratan la etiqueta como un bloque con un salto de línea antes y después). En su lugar, se utiliza para marcar una agrupación lógica de elementos o unadivisiónen la pagina. Por lo general, envolverá un <div>etiqueta alrededor de un trozo de HTML que va unido. Los elementos que comprenden el logotipo y la barra de navegación en la Figura 12-2 ocupan la parte superior de la página, por lo que tiene sentido envolver un <div>etiqueta alrededor de ellos. Como mínimo, incluiría <div>etiquetas para todas las regiones principales de su página, como el banner, el área de contenido principal, la barra lateral, el pie de página, etc. Pero también es posible envolver un <div>etiqueta alrededor de uno o más divs adicionales. Una técnica común es envolver el HTML dentro del <cuerpo>etiqueta en un <división>.Luego puede establecer algunas propiedades básicas de la página aplicando CSS a esoenvoltura<división>.Puede establecer un ancho general para el contenido de la página, establecer márgenes izquierdo y derecho, centrar todo el contenido de la página en el medio de la pantalla y agregar un color de fondo o una imagen a la columna principal de contenido. Una vez que tenga su <div>etiquetas en su lugar, agregue una clase o ID a cada una, que se convierte en su identificador para diseñar cada <div>por separado. El <div>La etiqueta para el área del banner de una página podría tener este aspecto: <clase div="bandera">.Solo puede usar una ID, pero puede usar la misma ID solo una vez por página, así que cuando tenga un elemento que aparezca varias veces, use una clase. Si tiene varios divs que colocan fotos y sus leyendas, por ejemplo, puede envolver esas etiquetas en un div y agregar una clase como esta: <clase div="foto">. ( Para obtener más información sobre cuándo usar un div, lea el cuadro en la página 60). Además, cuando se trata de la cascada (Capítulo 5), las identificaciones son muy 408 Css3: el manual perdido www.it-ebooks.info cómo CSS poderoso y anula fácilmente otros estilos, lo que a menudo lo obliga a crear selectores extensos como #inicio #banner #navegaciónsolo para anular los selectores creados previamente usando ID. Disposición obras Por esta razón, muchos diseñadores web evitan las identificaciones y se apegan a las clases. Una vez que tenga los divs en su lugar y los haya identificado con precisión con ID o nombres de clase, puede crear estilos CSS para colocar esos divs en la página usando flotantes (Capítulo 13). PALABRA A LOS SABIOS Un delicado acto de equilibrio Aunque los divs son críticos para el diseño de CSS, no te vuelvas loco simplemente use el HTML <cita en bloque>etiqueta. Puede colocar la bombardeando tu página con divs. Una trampa común es creer que etiqueta blockquote usando la propiedad flotante como se explica en la debes envolvertodoen una página web en un <div>etiqueta. Digamos página 220. que su barra de navegación principal es una lista desordenada de enlaces (como la que se describe en la página 304). Debido a que es un elemento importante, puede tener la tentación de envolver un <div>a su alrededor: <div class="mainNav"><ul>…</ul></div>. Dicho esto, tampoco tengas miedo de los divs. Agregar algunos divs adicionales a una página no cambiará sustancialmente el tamaño del archivo ni ralentizará la velocidad de descarga de la página. Si un div lo ayuda a hacer el trabajo, y ninguna otra etiqueta HTML tiene sentido, Pero no hay razón para agregar un <div>cuando el <ul>la etiqueta es entonces, por supuesto, use un div. Además, un div es el único camino a igual de útil. Mientras el <ul>contiene los enlaces de la barra de seguir cuando desea agrupar un montón de etiquetas HTML diferentes navegación principal, simplemente puede agregar su clase a esa en una unidad cohesiva. De hecho, no es nada raro ver un div rodeando etiqueta: <ul class="mainNav">.Un < adicionaldiv>es simplemente un uno o más divs. código innecesario. La regla general básica es que debe tratar de mantener la cantidad de Del mismo modo, no tiene sentido usar un <div>cuando se dispone de HTML en una página al mínimo, pero use tanto HTML como sea otra etiqueta HTML más lógica. Por ejemplo, supongamos que desea necesario. Si agregar algunos divs tiene sentido para el diseño, hágalo. agregar una cita extraída a un pasaje largo de texto: un cuadro alineado O, si está profundizando en HTML5, pruebe los elementos de sección con el borde derecho de la página que muestra una cita emocionante que se describen en la siguiente sección. extraída de la página. En este caso, puede omitir un < extradiv>y Elementos de seccionamiento HTML5 Antes de HTML5, los divs eran la forma principal en que los diseñadores organizaban el contenido. HTML5 presenta muchas etiquetas HTML nuevas destinadas a agrupar ciertos tipos de contenido. Por ejemplo, el <artículo>La etiqueta está pensada para el contenido que constituye una composición única e independiente, por ejemplo, una publicación de blog. Asimismo, el <encabezado>La etiqueta está destinada a proporcionar un título, ayudas de navegación y otro material introductorio para una página o una sección de la página. Luego está el <pie de página>etiqueta que debe contener información final, como un aviso de derechos de autor, el nombre del creador del sitio web, la fecha en que se publicó la página, etc. En pocas palabras, HTML5 proporciona etiquetas que asumen el trabajo de <div>etiqueta para tipos específicos de contenido. (Visitawww.adobe. com/devnet/ dreamweaver/articles/understanding-html5-semantics.htmlpara una introducción rápida a los elementos de seccionamiento de HTML5). NotaSi sigue la ruta de HTML5, no olvide usar la compatibilidad de HTML5 que se describe en el cuadro de la página 24 para asegurarse de que Internet Explorer 8 y versiones anteriores puedan formatear esos nuevos elementos. Capítulo 12:PRESENTACIÓN DEL DISEÑO CSS www.it-ebooks.info 409 cómo CSS Disposición obras Como aprendió en la página 23, los nuevos elementos de HTML5 están destinados a agregar semántica a una página web. Es decir, el nombre de la etiqueta—<encabezado>,por ejemplo, imparte información de identificación sobre lo que hay dentro de esa etiqueta. El <figura>La etiqueta está destinada a encerrar, lo adivinó, una figura. En otras palabras, si desea encerrar un tipo particular de contenido dentro de una etiqueta, vea si una etiqueta HTML5 cumple con los requisitos. Si el contenido es el pie de página de su página, use el <pie de página>etiqueta en lugar de la simple y antigua <división>.En el mundo de HTML5, el < div>la etiqueta todavía existe y es perfectamente válida para usar. Pero en estos días, generalmente se usa para agrupar contenido por razones estilísticas; por ejemplo, si desea agregar un borde alrededor de un grupo de etiquetas o mover esas etiquetas al lado izquierdo de la página usando un flotador, encierre esas etiquetas. en un <división>. (Aprenderá cómo hacer precisamente eso en el Capítulo 13.) Dicho todo esto, más allá de los derechos de fanfarronear en su próxima reunión de diseñadores web, no hay ningún beneficio directo en el uso de HTML5 en este momento. En el futuro, el software podría examinar su HTML e identificar artículos individuales en función de la presencia del <artículo> etiqueta, o use las etiquetas HTML5 de alguna otra manera para analizar mejor su página web. O, si desea preparar sus páginas web para el futuro y estar preparado para el día en que HTML5 gobierne el mundo, puede seguir adelante y usar HTML5 hoy. Sin embargo, si has crecido usando <div> etiquetas y no quiere molestarse en usar JavaScript para hacer que HTML5 funcione en Internet Explorer 8 (vea la nota anterior), es posible que desee quedarse con el <div>etiqueta por ahora. Técnicas para el diseño de CSS La gran mayoría de las páginas web utilizan el CSSflotarpropiedad para el diseño (ver el cuadro en la página 413 para otras opciones de diseño CSS). Ya se encontró con esta propiedad aparentemente simple en el Capítulo 8, donde elflotarLa propiedad se introdujo como una forma de colocar una imagen dentro de una columna de texto, ya sea haciendo flotar la imagen hacia el lado izquierdo o derecho. El mismo concepto se aplica a otras etiquetas: al establecer el ancho de un elemento y hacerlo flotar hacia la izquierda o hacia la derecha, puede crear una columna (el texto que sigue al elemento termina envolviendo el elemento flotante como si fuera otra columna). Al usar elflotar propiedad con varios divs u otras etiquetas, puede lograr diseños de varias columnas. Llevando esta técnica más allá, puede crear rápidamente diseños complejos de varias columnas colocando divs flotantes dentro de divs flotantes. Otra técnica de CSS, el posicionamiento absoluto, le permite colocar un elemento en cualquier lugar de la página con una precisión de nivel de píxel. Puede colocar un elemento a 100 píxeles del borde superior de la ventana del navegador ya 15 píxeles del borde izquierdo, por ejemplo. Los programas de diseño de página como InDesign y Quark xpress funcionan de esta manera. Desafortunadamente, la naturaleza fluida de las páginas web y algunas de las extrañas características del posicionamiento absoluto dificultan el control total del diseño con esta técnica. Como leerá en el Capítulo 14, es posible diseñar una página utilizando el posicionamiento absoluto, pero, en general, esta técnica es más adecuada para tareas más pequeñas, como colocar un logotipo en una ubicación particular de la página. No se preocupe si esto suena bastante abstracto en este momento; verá todas estas técnicas en acción en los próximos tres capítulos. 410 Css3: el manual perdido www.it-ebooks.info cómo CSS Disposición obras Figura 12-2 Reunir correctamente el HTML necesario para convertir una maqueta de Photoshop en una realidad HTML y CSS implica ver la estructura subyacente y envolver grupos relacionados de HTML dentro<div>etiquetas A veces, se pueden necesitar muchos divs para que un diseño cobre vida. Capítulo 12:PRESENTACIÓN DEL DISEÑO CSS www.it-ebooks.info 411 Disposición Estrategias Estrategias de diseño El diseño de páginas web con CSS es más un arte que una ciencia; no hay una fórmula a seguir para marcar su contenido con HTML y crear su CSS. Lo que funciona para un diseño podría no funcionar para otro. Aunque puede que no sea un pensamiento reconfortante: "Oye, compré este libro para aprender estas malditas cosas". sobre diferentes técnicas de diseño, siguiendo tutoriales como los de los próximos dos capítulos y mucha práctica. Sin embargo, definitivamente hay algunas estrategias que puede adoptar a medida que se acerca al diseño CSS. Estas son más pautas que reglas estrictas, pero a medida que comienza a ver sus proyectos a través del diseño visual inicial, comience con estos consejos en mente. Comience con su contenido A muchos diseñadores les gusta pasar directamente a lo bueno: colores, fuentes, íconos e imágenes. Pero comenzar con el diseño visual es poner el carro delante del caballo. Los elementos más importantes de una página web son los contenidos: titulares, párrafos de texto, fotografías impresionantes, enlaces de navegación, videos, y esos son los motivos por los que la gente visitará su sitio. Quieren leer, aprender y experimentar lo que su sitio tiene para ofrecer. El contenido es el rey, así que piensa en lo que quieres decir antes de abordar cómo debería verse. Después de todo, no le servirá de mucho crear un cuadro de barra lateral fantástico con aspecto 3D si no tiene nada significativo que poner en ese cuadro. Además, el mensaje de una página debe dictar su diseño. Si decide que su página de inicio necesita vender los servicios de su empresa y resaltar el excelente servicio al cliente que ofrece, puede decidir que es importante una foto grande de su amable personal, así como una cita de un cliente satisfecho. Dado que ambos elementos son importantes para el mensaje de la página, puede crear el mensaje visual haciendo que tanto la imagen como la cita sean destacadas y convincentes. Móvil primero Del mismo modo, el auge de los teléfonos inteligentes y las tabletas ha llevado a los diseñadores a pensar largo y tendido acerca de reducir su contenido a solo el mensaje y los hechos clave. EsteMóvil primeroEl movimiento se basa en el tamaño de pantalla limitado de los teléfonos inteligentes, así como en la atención limitada de las personas en movimiento. El diseño Mobile First se trata de comenzar con su contenido, pero también se trata de deshacerse del ruido extraño, incluida la información complementaria que se adapta bien a una pantalla de escritorio grande, pero simplemente se interpone en el camino en la pantalla más pequeña y resta valor a la información clave que espera. para entregar. Tenga en cuenta que si su sitio será visitado por una cantidad significativa de personas que usan teléfonos inteligentes o tabletas pequeñas, no todos querrán desplazarse por una página larga de información (o pellizcar y hacer zoom para ver todo lo disponible en una página). En lugar de tratar de llenar hasta el último centímetro cuadrado de un monitor de escritorio de 32", piense en simplificar su contenido para que sea claro, directo y fácil de asimilar. 412 Css3: el manual perdido www.it-ebooks.info NotaEl términoMóvil primerofue acuñado por Luke Wroblewski. De hecho, escribió un fantástico tratado corto sobre el tema que vale la pena leer:www.abookapart.com/products/mobile-first. Disposición Estrategias CLÍNICA DE USUARIOS ELÉCTRICOS Otras opciones de diseño de CSS3 Los diseñadores web inicialmente usaron tablas para crear diseños de varias está bastante bien soportado en muchos navegadores hoy en día. Leerá sobre columnas. Luego, la propiedad flotante de CSS entró en escena y proporcionó la flexión en el recuadro de la página 436. otro método menos intensivo en código para diseñar una página web. Y aunque la mayoría de los diseñadores aún usan la propiedad de flotación para lograr sus diseños, eso puede cambiar en un futuro no muy lejano. Finalmente, elcuadrícula CSSEl módulo de diseño es quizás el intento más ambicioso de cambiar la forma en que los diseñadores diseñan las páginas web. Este método le permite dividir una página en un conjunto de filas y columnas, y luego adjuntar con precisión los elementos de la página a esa El grupo de trabajo de CSS en el W3C está ocupado finalizando planes cuadrícula. Su objetivo es hacer que la creación de aplicaciones web sea más sobre varias otras técnicas para el diseño de CSS. Por ejemplo, el CSS fácil y más parecida a la creación de aplicaciones de escritorio.programas. La multicolumnaEl módulo de diseño proporciona una forma de tomar una cuadrícula CSS es bastante complicada y (en el momento de escribir este columna larga de texto y mostrarla en varias columnas una al lado de la artículo) aún no es compatible con ninguno de los navegadores que se envían otra. Aprenderá sobre esto en el próximo capítulo, en la página 440. actualmente, aunque hay soporte en la versión beta de IE 10. Puede leer más Elcaja flexibleEl módulo de diseño proporciona otra forma de organizar sobre esto enhttp:// blogs .msdn.com/b/ie/archive/2011/04/ 14/ie10-plat cuadros de contenido: vertical, horizontal y en diferentes direcciones y formpreview-and-css-features-for-adaptive-layouts.aspx. órdenes. Y sorprendentemente, este módulo Comience con un boceto Una vez que haya descubierto su contenido, puede pensar en organizarlo visualmente. Algunos diseñadores empiezan codificando a mano el HTML: creando divs, agregando <encabezado>, <artículo>, <pie de página>etiquetas, y así sucesivamente. Este es un buen enfoque, a menudo llamado "diseño en el navegador", ya que le da una ventaja inicial en la construcción de su sitio saltando directamente al HTML. Sin embargo, antes de saltar al código HTML, al menos debe esbozar la ubicación de su contenido. No necesitas nada sofisticado: el papel y el lápiz funcionan bien. Dado que el diseño web se trata de colocar contenido dentro de cuadros (divs y otras etiquetas HTML) y colocarlos en la página, simplemente esbozar un montón de cuadros, dibujar columnas, etc., es una manera rápida y fácil de probar diferentes páginas. diseños Puede tener una idea rápida de dónde debe ir el contenido, qué tan grande debe ser y el tono de color general (claro u oscuro). CONSEJOYahoo ofrece un Stencil Kit gratuito (http://developer.yahoo.com/ypatterns/wireframes) que puede usar en Illustrator, Visio, OmniGraffle y otros programas gráficos para crear maquetas de páginas web. Los elementos de la interfaz de usuario suministrados, como botones, campos de formulario, ventanas y botones de navegación, pueden hacer que esbozar un diseño de página sea tan simple como arrastrar y soltar iconos. Si se siente cómodo con un programa de gráficos como Photoshop, Illustrator o Fireworks, puede usarlo para crear un diseño visual. Si no eres un genio con los gráficos Capítulo 12:PRESENTACIÓN DEL DISEÑO CSS www.it-ebooks.info 413 Disposición Estrategias programas, incluso simplemente dibujar cuadros para indicar la ubicación diferente de los elementos de la página puede ayudarlo a refinar su pensamiento sobre cómo se debe diseñar la página. Es mucho más fácil cambiar un diseño de dos columnas a un diseño de cuatro columnas cambiando el tamaño de los cuadros en Illustrator que reescribiendo HTML y CSS. Sin embargo, si usa un programa de gráficos, no dedique demasiado tiempo a refinar el diseño gráfico. Es mucho trabajo crear la apariencia de muchas propiedades CSS en Photoshop o Illustrator, y solo tendrá que recrear esa apariencia usando código CSS. En otras palabras, intente refinar un aspecto "lo-fi" para su sitio en papel o en un programa de gráficos, y luego salte a su editor de texto para crear el HTML que se ajuste a su contenido y use las propiedades CSS que aprendió en este libro para probar diferentes estilos. identificar las cajas Una vez que haya creado una maqueta visual, es hora de pensar en cómo crear el marcado HTML y CSS para lograr su objetivo de diseño. Este proceso generalmente implica visualizar las diferentes unidades estructurales de una página e identificar elementos que parecen cajas individuales. Por ejemplo, en la Figura 12-2, hay bastantes elementos que parecen recuadros: los más obvios son los tres recuadros de anuncios cerca de la parte inferior (marcados como A en la Figura 12-2). Cada cuadro suele ser un buen candidato para un <div>etiqueta (a menos que haya una etiqueta HTML más apropiada, como se explica en el cuadro de la página 409). A menudo, una pista visual en su maqueta puede ayudarlo a decidir si se necesita un div. Por ejemplo, una línea de borde dibujada alrededor de un título y varios párrafos de texto indica que deberá rodear ese grupo de etiquetas HTML con un <div>etiqueta que tiene un borde aplicado. Además, cada vez que vea fragmentos de texto uno al lado del otro (como los tres fragmentos de contenido en el pie de página en la Figura 12-2), sabrá que necesitará tener cada grupo en su propio <div>etiqueta: las etiquetas HTML generalmente no se ubican una al lado de la otra, por lo que debe usar algo de diseño (como la técnica flotante que se trata en el próximo capítulo) para que eso suceda. También es común agrupar divs (u otras etiquetas) que se encuentran uno al lado del otro en columnas dentro de otro div. Por ejemplo, en la mitad inferior de la Figura 12-2, puede ver el conjunto básico de <div>etiquetas que proporcionan la estructura de la página. La “noticia” <div>y el <pie de página> Las etiquetas son contenedores para su propio conjunto de divs. Si bien esto no siempre es una necesidad, puede proporcionar flexibilidad. Por ejemplo, puede reducir el ancho del área principal (la foto de la mano y el eslogan) y mover el div de noticias hacia el lado derecho para formar su propia columna. Las noticias podrían apilarse una encima de la otra en lugar de sentarse una al lado de la otra. Dejarse llevar Las etiquetas normalmente no se colocan una al lado de la otra ni se apilan una encima de la otra. Normalmente, las etiquetas HTML actúan como texto en un programa de procesamiento de texto: llenan todo el ancho de la página y fluyen de arriba a abajo. Cada etiqueta de nivel de bloque (título, párrafo, lista con viñetas, etc.) se apila sobre la siguiente etiqueta de nivel de bloque. Dado que ese es el enfoque de "negocios como de costumbre" de las etiquetas HTML, por lo general no tiene que hacer ningún tipo de posicionamiento si planea apilar un div sobre el siguiente. 414 Css3: el manual perdido www.it-ebooks.info Por ejemplo, en la figura 12-2, cuatro elementos: el <encabezado>etiqueta, div "principal", el <sección>etiqueta, y el <pie de página>etiqueta: abarcan todo el ancho de su contenedor (el Disposición Estrategias <cuerpo>etiqueta) y sentarse uno encima del otro. Debido a que esta es la forma normal en que funcionan las etiquetas de nivel de bloque, no necesita hacer nada especial con el CSS para que esos cuatro divs se apilen uno encima del otro. Recordar imágenes de fondo Sin duda, ha visto imágenes en mosaico que llenan el fondo de una página web o degradados sutiles que agregan profundidad a un banner. Pero elimagen de fondopropiedad proporciona otra forma de agregar fotos a una página sin recurrir a la <imagen>etiqueta. Poner una imagen en el fondo de una etiqueta HTML existente no solo ahorra los pocos bytes de datos requeridos por <imagen>etiqueta, pero también simplifica algunos desafíos de diseño. Por ejemplo, en la Figura 12-2, la imagen central de las manos que sostienen la Chia Pet (B) es en realidad solo una imagen de fondo. Esto hace que colocar otro div, el que tiene el eslogan "Cuidado compasivo..." (C), sea realmente fácil, ya que simplemente se ubica sobre el fondo de su div principal. Del mismo modo, la imagen del médico en la parte inferior derecha de la página es solo una imagen de fondo colocada en ese div; al agregar un poco de relleno a la derecha, se empuja el texto en ese div fuera del camino de la foto. NotaHay desventajas en el uso de fotos en el fondo de divs (o cualquier etiqueta HTML). En primer lugar, los navegadores web generalmente no imprimen fondos, por lo que si tiene una página con un mapa que contiene indicaciones para llegar a su empresa, inserte el mapa con el <imagen>etiqueta y no como imagen de fondo. Del mismo modo, los motores de búsqueda no buscan CSS, por lo que si cree que la imagen puede ayudar a atraer tráfico a su sitio, use un <imagen>etiquetar e incluir una descripciónalternativa atributo. Piezas de un rompecabezas Este consejo se puede archivar en "resolución creativa de problemas" o "si miro este diseño el tiempo suficiente, se me ocurrirá una solución loca". A menudo, lo que parece un todo único y unificado en realidad está compuesto por varias piezas. Puede ver un ejemplo simple de esto en la Figura 12-2, aunque a primera vista parece una gran caja blanca llena de contenido. En realidad, hay cuatro divs apilados, cada uno con un fondo blanco. Por lo tanto, si tiene problemas para ver cómo combinar un elemento grande en una página (un gráfico muy grande, un arcoíris que abarca varias columnas o simplemente un color de fondo sólido que parece abarcar varias áreas de una página), piense en cómo podría lograr el mismo aspecto dividiendo la unidad grande en piezas más pequeñas que se unen como las piezas de un rompecabezas. Elementos de capas Si es fanático de Photoshop, Illustrator o Fireworks, probablemente esté acostumbrado a la noción de capas. Las capas le permiten crear lienzos separados que flotan uno encima del otro para construir una imagen unificada. En estos programas, es fácil hacer que un logotipo flote sobre un título de texto o colocar una foto sobre otra foto. Si desea una página web que tenga este tipo de efecto, tiene un par de opciones. Capítulo 12:PRESENTACIÓN DEL DISEÑO CSS www.it-ebooks.info 415 Disposición Estrategias A menudo, la forma más fácil de superponer algo sobre una foto es colocar la imagen en el fondo de otra etiqueta (consulte el consejo en la página 415). Debido a que la imagen de fondo está detrás de la etiqueta, cualquier cosa dentro de esa etiqueta (texto, otra foto) se colocará encima de la foto. Pero, ¿qué sucede si desea colocar una foto encima de un texto? En ese caso, recurrirá a la única propiedad de CSS que le permite superponer elementos: laposiciónpropiedad. Aprenderá todo acerca de esa propiedad en el Capítulo 15, ya que colocar algo encima de otra cosa requiere un posicionamiento absoluto. No olvide los márgenes y el relleno Finalmente, a veces la solución más simple es la mejor. No siempre necesita un CSS elegante para mover un elemento de página a su lugar. Recuerde que el relleno y los márgenes (página 195) son solo espacios vacíos y, al usar esas propiedades, puede mover elementos por la página. Por ejemplo, el cuadro del eslogan (C en la Figura 12-2) se coloca simplemente configurando el relleno superior e izquierdo del div principal. Como puede ver en el diagrama de la mitad inferior de la Figura 12-2, el eslogan se coloca dentro de otro div (<div id="principal">). Ese div en realidad no tiene ningún contenido además del eslogan (la foto es solo una imagen de fondo), por lo que agregar relleno mueve el div del eslogan hacia abajo y hacia la derecha. 416 Css3: el manual perdido www.it-ebooks.info Capítulo 13 13 Flotador de construcción- Diseños basados F los diseños basados en lotes aprovechan laflotarpropiedad para colocar elementos uno al lado del otro y crear columnas en una página web. Como se describe en el Capítulo 7 (página 220), puede usar esta propiedad para crear un efecto envolvente para, por ejemplo, una fotografía, pero cuando la aplica a un <div>etiqueta,flotarse convierte en una poderosa herramienta de diseño de páginas. ElflotarLa propiedad mueve un elemento de página a un lado de la página (u otro bloque contenedor). Cualquier código HTML que aparezca debajo del elemento flotante se mueve hacia arriba en la página y se envuelve alrededor del elemento flotante. Elflotarla propiedad acepta uno de tres valores diferentes:izquierda derecha,yninguno.Para mover una imagen al lado derecho de la página, puede crear este estilo de clase y aplicarlo al <imagen>etiqueta: . flotarDerecha { flotar: derecha; } La misma propiedad aplicada a un <div>etiqueta llena de contenido también puede crear una barra lateral: . barra lateral { flotador izquierdo; ancho: 170px; } La figura 13-1 muestra estos dos estilos en acción. NotaElningunoEl valor desactiva cualquier elemento flotante y coloca el elemento como un elemento normal sin flotar. Es útil solo para anular un flotante que ya se aplicó a un elemento. Puede tener un elemento con una clase particular como .barra lateralaplicado a él, con ese elemento flotando a la derecha. Pero en una página puede querer un elemento con esa clase parano float, pero para colocarse dentro del flujo de la página, como este cuadro de nota. Al crear un selector de CSS más específico (consulte la página 480) conflotador: ninguno,puedes evitar que ese elemento flote. 417 www.it-ebooks.info Figura 13-1 Puedes usar elflotarpropiedad para diseñar una página web con varias columnas. En esta página, un bloque de contenido flota hacia el borde izquierdo. La barra lateral tiene un ancho establecido, pero el contenido principal no, lo que hace que este diseño sea fluido. La sección principal de la página simplemente se expande para llenar el ancho de la ventana del navegador. En la esquina superior derecha, la foto de la bañera flota hacia la derecha. Un diseño simple de dos columnas como el de la Figura 13-1 requiere solo unos pocos pasos: 1.Envuelva cada columna en un <div>etiqueta con un ID o atributo de clase. En la Figura 13-1, las noticias enumeradas en la barra lateral izquierda están envueltas en un < div>— <div class="noticias">—y el contenido principal en otro div—<clase div="principal">. 2.Haga flotar la barra lateral <div> a la derecha o a la izquierda. Cuando trabaja con flotantes, el orden de origen (el orden en que agrega HTML a un archivo) es importante. El HTML para el elemento flotante debe aparecerantes el HTML para el elemento que lo envuelve. 418 Css3: el manual perdido www.it-ebooks.info La figura 13-2 muestra tres diseños de dos columnas. Los diagramas del lado izquierdo muestran el orden de origen HTML de la página: A <div>para el banner, seguido de un <div> para la barra lateral y, por último, un <div>para el contenido principal. En el lado derecho, verá el diseño de página real. viene la barra lateralantesel contenido principal en el HTML para que pueda flotar hacia la izquierda (arriba, abajo) o hacia la derecha (centro). 3.Establezca un ancho para la barra lateral flotante. A menos que esté flotando una imagen con un ancho predefinido, siempre debe darle un ancho a sus flotadores. De esta manera, crea un tamaño establecido para el elemento flotante, lo que permite que el navegador deje espacio para que otro contenido se ajuste a su posición. El ancho podría ser un tamaño fijo como170pxo10em.También puede usar porcentajes para un diseño flexible basado en el ancho de la ventana del navegador. (Consulte la página 158 para obtener más información sobre las ventajas y desventajas de las diferentes unidades de medida). Si la barra lateral tiene un 20 por ciento de ancho y la ventana del navegador tiene 700 píxeles de ancho, entonces la barra lateral tendrá 140 píxeles de ancho. Pero si su visitante cambia el tamaño de la ventana a 1000 píxeles, la barra lateral crece a 200 píxeles. Las barras laterales de ancho fijo son más fáciles de diseñar, ya que no tiene que considerar todos los diferentes anchos a los que se puede estirar la barra lateral. Sin embargo, los porcentajes le permiten mantener las mismas proporciones entre las dos columnas, lo que puede ser más agradable a la vista. Además, los porcentajes hacen que sus diseños sean más flexibles, ya que la proporción general de la página se puede ajustar para adaptarse al tamaño de la pantalla, algo que es importante al crear diseños web receptivos, sobre lo que aprenderá en el próximo capítulo. NotaCuando el diseño general de la página tiene un ancho fijo (como se describe en la página 406), los valores de porcentaje de ancho para la barra lateral se basan en el elemento contenedor de ancho fijo. El ancho no se basa en el tamaño de la ventana y no cambiará cuando la ventana del navegador cambie de tamaño. 4.Agregue un margen izquierdo al contenido principal. Si la barra lateral es más corta que el resto del contenido de la página, el texto de la columna principal se envuelve debajo de la barra lateral, lo que arruina la apariencia de dos columnas una al lado de la otra (consulte la Figura 13-16 para ver un ejemplo). Agregar un margen izquierdo que sea igual o mayor que el ancho de la barra lateral sangra el contenido principal de la página, creando la ilusión de una segunda columna: . principal { margen izquierdo: 180px; } Por cierto, suele ser una buena idea hacer que el margen izquierdo sea un poco más grande que el ancho de la barra lateral: esto crea un espacio vacío, un canalón blanco entre los dos elementos. Entonces, cuando use porcentajes para establecer el ancho de la barra lateral, use un valor de porcentaje ligeramente mayor para el margen izquierdo. Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 419 Figura 13-2 Crear un diseño de dos columnas es una simple cuestión de hacer flotar un<div>etiqueta a la izquierda (arriba). Para hacer que una barra lateral se mueva del lado izquierdo al derecho de la página (centro), simplemente cambie el estilo CSS de la barra lateral a flotar derecho. No necesita realizar ningún otro cambio en su CSS o HTML. 420 Css3: el manual perdido www.it-ebooks.info aplicaciónmentiroso Evite establecer un ancho para el div del contenido principal. No es necesario, ya que los navegadores simplemente lo expanden para que se ajuste al espacio disponible. Incluso si desea un diseño de FLOTADORES HACIA Tus DISEÑOS ancho fijo, no necesita establecer un ancho para el div de contenido principal, como verá en la siguiente sección. Aplicar flotantes a sus diseños Ahora que ha aprendido un diseño líquido básico de dos columnas, puede adaptarlo de innumerables maneras. Convertirlo en un diseño de ancho fijo es muy fácil. Simplemente envuelva todas las etiquetas dentro del cuerpo de la página dentrootro<división> (me gusta <clase div="envoltorio">).Luego, cree un estilo para ese nuevo elemento contenedor que tenga un ancho establecido, como 960 píxeles (vea la Figura 13-2, abajo). Esa configuración de ancho restringe todo lo que está dentro de la caja del contenedor. CONSEJOTambién es posible crear una página de ancho fijo sin recurrir al div contenedor adicional: establezca un ancho en <cuerpo>etiqueta. Ya viste un ejemplo de esta técnica en el tutorial de la página 225. Expandirlo a un diseño de tres columnas tampoco es difícil (Figura 13-3). Primero, agregue otro <div>entre las dos columnas y flote hacia la derecha. Luego agregue un margen derecho a la columna del medio, de modo que si el texto en la columna del medio es más largo que la nueva barra lateral derecha, no se ajustará debajo de la barra lateral. El resto de esta sección explora más técnicas de diseño CSS que usan diseños basados en flotantes. Figura 13-3 Un diseño de tres columnas utiliza los mismos conceptos utilizados para crear un diseño de dos columnas. En este caso, haces flotar las barras laterales izquierda y derecha y agregas los márgenes izquierdo y derecho a la columna central. El diagrama de la izquierda muestra el orden del HTML; el lado derecho muestra cómo se ve la página web. Todas las columnas flotantes Es perfectamente posible flotarcadacolumna, no solo las barras laterales izquierda y derecha. Podría hacer flotar la primera barra lateral hacia la izquierda, la columna central hacia la izquierda y la barra lateral derecha hacia la derecha, como se muestra en la Figura 13-4, arriba. Este enfoque le permite poner más Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 421 aplicaciónmentiroso FLOTADORES HACIA Tus DISEÑOS de tres columnas en su diseño. Puede hacer flotar cuatro o más columnas, siempre que haya espacio para que todos los flotadores encajen uno al lado del otro. Cuando flota todas las columnas en un diseño, debe prestar mucha atención a los anchos de cada columna. Si el ancho total de todas las columnas es menor que el espacio disponible, por ejemplo, si la ventana del navegador es más pequeña o las columnas se colocan dentro de otra <div>con un ancho establecido, luego la última columna cae debajo de las demás. (Puedes leer una solución a este problema de caída del flotador en la página 480). Hasta la velocidad No tienes que reinventar la rueda Si términos comodiseño líquidoyelemento contenedorsuena un poco y el CSS que los posiciona. Todo lo que necesita hacer es llenarlos con intimidante, no te rindas. En primer lugar, los tutoriales que comienzan en la sus propios toques de diseño, como estilo de fuente e imágenes. página 440 lo guían paso a paso a través del proceso de diseño de páginas web También hay bastantesgeneradores de diseño—herramientas en línea con CSS. Pero no hay ninguna ley que diga que tienes que crear tus propios que le permiten personalizar los requisitos básicos, como la cantidad de diseños CSS desde cero. En la Web, encontrará muchos diseños preconstruidos columnas que desea, si busca un diseño líquido o fijo, etc. El Gridinador y probados que puede hacer usted mismo. El sitio LayoutGala ofrece 40 diseños (http://gridinator.com) proporciona una herramienta sencilla para crear CSS diferentes que funcionan en todos los navegadores comunes (http:// blog.html.it/layoutgala/). Los diseños son solo esqueletos básicos que consisten en <div>etiquetas un sistema complejo de cuadrícula de varias columnas (consulte el cuadro en la página 430). Luego puede descargar archivos HTML y CSS con el código creado para usted. Además, flotar más que solo las barras laterales le permite cambiar el orden de sus divs en el HTML. Tomemos, por ejemplo, el diagrama de la izquierda en la figura 13-3, que muestra el orden de los < div>etiquetas para esa página. Debido a la forma en que funcionan los elementos flotantes, deben aparecer antes que cualquier contenido que los rodee, por lo que en este ejemplo, el área de contenido principal debe irdespuéslas barras laterales El orden de los <div>las etiquetas en el HTML pueden no parecer un gran problema hasta que intente navegar por la página websinCSS, que es el caso de muchos navegadores alternativos, incluidos los lectores de pantalla que leen el contenido de una página en voz alta a los visitantes con discapacidades visuales. Sin CSS, todo el material de la barra lateral (que a menudo incluye elementos de navegación, anuncios u otra información que no es relevante para el tema principal de la página) aparece antes que el contenido que el visitante llegó a leer en primer lugar. El inconveniente de tener que desplazarse más allá del mismo contenido de la barra lateral en cada página desanimará a algunos visitantes. Además, su página es menos accesible para los visitantes con problemas de visión, que tienen que escuchar a sus lectores de pantalla leer una larga lista de enlaces y anuncios antes de llegar a cualquier información real. Y si eso no te convence, tienes que preocuparte por los motores de búsqueda. La mayoría de los motores de búsqueda limitan la cantidad de HTML que leen cuando buscan en un sitio. En una página web particularmente larga, simplemente se detienen en un punto determinado, posiblemente perdiendo contenido importante quedeberíaser indexado por el motor de búsqueda. Además, la mayoría de los motores de búsqueda dan mayor valor al HTML cerca del comienzo del archivo. Entonces, si le preocupa obtener una buena ubicación en los resultados de los motores de búsqueda, lo mejor es que 422 Css3: el manual perdido www.it-ebooks.info aplicaciónmentiroso interés para asegurarse de que el contenido importante esté lo más cerca posible de la parte superior del código HTML de la página. FLOTADORES HACIA Tus DISEÑOS En el diagrama superior izquierdo de la Figura 13-4, el HTML del contenido principal se encuentra entre las barras laterales izquierda y derecha, lo que es mejor que tenerlo después de ambas barras laterales. Incluso puedes poner el contenido principal antesambosHTML de las barras laterales envolviendo el contenido principal y la barra lateral izquierda en uno <división>,flotando eso <div>izquierda, y luego flotando el contenido principal a la derecha y la barra lateral izquierda a la izquierdadentroeso <división> (Figura 13-4, abajo). Voilà—el HTML de la columna principal cae antes que el otro <div>etiquetas Flotadores dentro de flotadores El diagrama inferior de la figura 13-4 ilustra otra técnica útil: elementos flotantesdentroflota Imagina que el contenido principal (3) y la barra lateral izquierda (4) no existieran, y solo quedaran el contenedor de columna (2) y la barra lateral derecha (5). Tendría solo un diseño básico de dos columnas, con una columna flotando a la izquierda y otra flotando a la derecha. De hecho, sigue siendo un diseño de dos columnas, incluso con los dos divs (3 y 4) colocados dentro del div contenedor de columnas. La diferencia es que la columna de la izquierda está dividida en dos columnas. Figura 13-4 Hay más de una forma de hacer flotar una página. La flexibilidad de CSS proporciona muchas formas de crear un diseño de varias columnas. Utilizando diferentes métodos de flotación, puede cambiar fácilmente el orden de origen del HTML de la página, como puede ver en los diagramas de la izquierda. Los diagramas del lado derecho representan el diseño final de la página web. Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 423 aplicaciónmentiroso FLOTADORES HACIA Tus DISEÑOS Aunque este arreglo es un poco confuso, también es útil en varios casos. Primero, le permite agregar columnas dentro de una columna. El diseño de tres columnas en la parte superior de la Figura 13-5 muestra un pequeño cuadro de Sugerencias en la columna del medio que también tiene dos columnas dentro. Al anidar flotadores dentro de flotadores, puede crear algunos diseños muy complejos. Además, cuando solo tiene un par de elementos flotantes divididos en columnas con elementos flotantes adicionales, es más fácil calcular el ancho de los elementos de la página. Eso es bueno cuando necesita controlar las caídas de flotación (página 480) y otros problemas que ocurren cuando las columnas se vuelven demasiado anchas. Figura 13-5 Arriba: cree columnas dentro de columnas mediante elementos flotantes dentro de otro elemento flotante. En la columna del medio, el cuadro Sugerencias proporciona una nota simple de dos columnas que agrega interés visual a la página. Abajo: no importa en qué dirección flote el contenedor (en este caso, a la derecha), simplemente flote las dos columnas adicionales hacia la izquierda y hacia la derecha. 424 Css3: el manual perdido www.it-ebooks.info superando Flotar problemas CLÍNICA DE USUARIOS ELÉCTRICOS Encontrar orden en la cuadrícula Los diseñadores gráficos utilizaron cuadrículas para proporcionar un orden subyacente a sus diseños mucho antes de que apareciera la Web. Una cuadrícula es simplemente una serie de filas y columnas que ayudan a alinear elementos dentro de un diseño. Por ejemplo, en una cuadrícula de 12 columnas, divide la página en 12 columnas del mismo tamaño, generalmente con una pequeña cantidad de espacio: unacanal—entre cada uno. <div clase="fila"> Y dentro de la fila, coloca etiquetas adicionales, a menudo <div> etiquetas, pero puede usar cualquier etiqueta a nivel de bloque como los elementos de sección de HTML5 (página 409). Cada una de estas etiquetas incluye clases que indican cuántas unidades de cuadrícula deben tener de ancho. Por ejemplo, un diseño de tres columnas puede tener un código como este: Pero la cuadrícula no significa que su página necesite 12 columnas delgadas de <div clase="span3"> </div> contenido. En su lugar, generalmente divide las 12 columnas (a menudo <div clase="span6"> </div> denominadasunidades de cuadrícula)en grupos Por ejemplo, en un diseño de <div clase="span3"> </div> tres columnas, puede tener una barra lateral izquierda de 3 unidades de cuadrícula de ancho, una columna principal de 6 unidades de cuadrícula de ancho y una barra lateral derecha de 3 unidades de cuadrícula de ancho para llenar todo el espacio. Ancho de 12 unidades. Esta cuadrícula de 12 unidades tiene la flexibilidad de permitirle probar también otros diseños, mientras conserva un esquema de medición común y consistente. Por ejemplo, podría tener tres columnas de igual ancho (4 unidades de cuadrícula cada una). El nombre de la clase depende del sistema de cuadrícula. Dos marcos populares basados en cuadrículas—Foundation (http://fundación.zurb. com/docs/grid.php) y Bootstrap de Twitter (http://twitter.github. com/ bootstrap/scaffolding.html#grid)— incluyen soluciones completas basadas en CSS para sistemas grid. Utiliza su CSS básico y sus convenciones de nomenclatura para crear columnas de diferentes anchos. Para un enfoque más simple, lea la publicación de blog de Chris En la mayoría de los sistemas de cuadrícula CSS, divide una página en filas compuestas Coyier en CSS-Tricks.com, donde explica cómo crear su propio sistema de columnas. Por lo general, hay alguna nomenclatura basada en clases para definir de cuadrícula simple:http://css-tricks.com/dont-overthinkit-grids/. una fila usando un <división>,como esto: Superación de problemas de flotación A medida que se aventure más con CSS, probablemente encontrará, como muchos diseñadores web antes que usted, algunas de las extrañas complejidades de trabajar con flotantes. Esta sección describe algunos problemas comunes y sus soluciones. (Y si alguna vez se topa con un problema que no aparece aquí, siempre puede llevarlo a uno de los foros en línea o listas de discusión en el Apéndice A). Limpiando y Conteniendo Flotadores Los flotadores son poderosas herramientas de diseño porque permiten que el contenido fluya a su alrededor. Hacer flotar una foto permite que el texto debajo de ella se mueva hacia arriba y se ajuste alrededor de la imagen (Figura 13-1). Sin embargo, cuando crea diseños de columnas basadas en elementos flotantes, a vecesnodesea que el contenido se mueva hacia arriba y al lado de un elemento flotante. Por ejemplo, con frecuencia desea mantener avisos de derechos de autor, información de contacto u otros detalles de limpieza en la parte inferior de su página web, debajo de todo el resto del contenido. Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 425 superando Flotar problemas En los diseños de dos y tres columnas que ha visto hasta ahora, si la columna principal es más corta que cualquiera de las columnas flotantes de la barra lateral, un pie de página puede moverse hacia arriba y alrededor de la columna flotante izquierda (Figura 13-6, izquierda). Para hacer que el pie de página permanezca debajo de las barras laterales, puede usar elclaropropiedad. Esta propiedad evita que un elemento se envuelva alrededor de flotadores. Puede hacer que un elemento caiga debajo de un objeto flotante a la izquierda (claro: izquierda;)o un objeto flotado a la derecha (claro: correcto;).Para los pies de página y otros elementos que deben aparecer en la parte inferior de la página, debe borrarambosflotadores izquierdo y derecho, así: pie de página {claro: ambos; } Figura 13-6 No siempre desea que un elemento se ajuste a un elemento flotante (izquierda). Avisos de derechos de autor y otro material que pertenece a la parte inferior de una página generalmente necesita borrar cualquier flotante que encuentre. Para lograr esto, utilice el claro propiedad del aviso de derechos de autor para colocarlo en la parte inferior de la página debajo de cualquier elemento flotante. Otro problema ocurre cuando hace flotar uno o más elementos dentro de una etiqueta contenedora no flotante como un <div>etiqueta. Cuando el elemento flotante es más alto que el otro contenido dentro del div, sobresale de la parte inferior del elemento envolvente. Este error es especialmente notable si esa etiqueta tiene un fondo o un borde. La parte superior de la página web en la Figura 13-7 muestra un <div>etiqueta que tiene un <h1>etiqueta y dos columnas creadas al flotar dos divs. El fondo y el borde, que aparecen solo alrededor del <h1> etiqueta, en realidad se aplican a todo el envolvente <división>,incluyendo el área donde están las dos columnas. Sin embargo, dado que las columnas son flotantes, sobresalen de la parte inferior en lugar de expandir los bordes del cuadro. NotaPara obtener una buena explicación de por qué los elementos flotantes pueden romperse fuera de los bloques que los contienen, lea www.complexspiral.com/publications/containing-floats. Un problema similar ocurre en el ejemplo inferior de la figura 13-7. En este caso, cada imagen flota a la izquierda dentro de un contenedor <div>que tiene un borde. Debido a que las imágenes son más altas que sus cajas, salen por la parte inferior. Desafortunadamente, este ejemplo es incluso peor que el anterior, porque cada imagen hace que la imagen debajo de ella se ajuste a la derecha, creando un feo efecto escalonado. 426 Css3: el manual perdido www.it-ebooks.info superando Flotar problemas Figura 13-7 Un elemento flotante puede escapar de su contenido <div>si es más alto que el propio contenedor. Si la etiqueta contenedora incluye un fondo o un borde, los elementos de escape pueden parecer que ni siquiera forman parte del contenedor (parte superior de la página). Además, un elemento flotante puede chocar con otros elementos, incluidos otros flota, creando así un efecto de "escalón" (parte inferior de la página) en lugar de las cajas bien apiladas en la Figura 13-8. Tienes muchas formas de abordar el problema de estos elementos flotantes renegados. Es bueno tener más de una solución al alcance de la mano, así que aquí hay una lista de las más populares: • Agregue un elemento de compensación en la parte inferior del div que lo contiene.Esta solución es la más sencilla. Simplemente agregue una etiqueta, como un salto de línea o una regla horizontal, como el último elemento en el <div>que contiene el elemento flotante (es decir, justo antes del cierre </div>etiqueta). Luego usa elclaropropiedad para forzar esa etiqueta adicional debajo del flotador. Este truco hace que el div que lo encierra se expanda, revelando su fondo y borde. Puede agregar un salto de línea—<br > (HTML) o <br /> (xHTML)— antes el cierre </div>etiquételo y agréguele una clase: <br clase="borrar"/>.Luego crea un estilo para él, como este: br.claro { claro: ambos; } Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 427 superando Flotar problemas El problema con esta técnica es que agrega HTML extra. • Flotar el elemento contenedor.Una forma más fácil es simplemente hacer flotar el <div>que contiene los elementos flotantes también. Un contenedor flotante <div>se expande para contener completamente cualquier elemento flotante en su interior. En la Figura 13-9, arriba, el <div>que contiene el encabezado y dos columnas flotantes se flota a la izquierda de la página. En el proceso, todo el cuadro (fondo y bordes) se expande para adaptarse a todo lo que contiene, incluidos los elementos flotantes. Extraño pero cierto. Si sigue esta ruta, asegúrese de agregar unclaroproperty a cualquier elemento que siga al contenedor flotante para asegurarse de que el siguiente elemento caiga debajo del contenedor. • Usardesbordamiento: oculto.Otra técnica común es agregar las siguientes dos propiedades a un estilo para el bloque contenedor: desbordamiento: oculto; Eldesbordamiento: ocultoLa propiedad es solo otra de esas cosas extrañas de CSS: obliga al bloque contenedor a expandirse y contener los elementos flotantes. En general, esta técnica funciona muy bien. Sin embargo, si tiene elementos absolutamente posicionados (consulte la página 410) dentro del contenedor, es posible que no se muestren. Puede entrar en esta situación si tiene un menú desplegable dentro de otra etiqueta y los menús desplegables, cuando aparecen, se supone que aparecen fuera del elemento contenedor. Si ese es el caso, use uno de los otros métodos descritos en estas páginas. • Utilice el Micro Clear Fix.Con esta técnica, creada por Nicolas Gallagher, agrega solo algunos estilos y un nombre de clase a la etiqueta que contiene el elemento flotante. Esta técnica es la última de una larga evolución de métodos que utilizan:después pseudoclase. Para usarlo, agrega dos estilos diferentes a su hoja de estilo: uno se aplica a todos los navegadores modernos; el otro estilo se aplica a IE 7 y versiones anteriores. Todo el shebang se ve así: . claro:después de { contenido: " "; pantalla: mesa; Limpia los dos; } . claro { acercar: 1; } Los dos últimos estilos hacen que IE 6 y 7 "tengan diseño", como se describe en el cuadro de la página 440. Si no le preocupan esos navegadores, puede dejar ese estilo fuera de su hoja de estilo. 428 Css3: el manual perdido www.it-ebooks.info Una vez que haya agregado estos estilos a una hoja de estilo, simplemente agregue el nombre de la clase al divque contienelos flotadores que escapan: <clase div="borrar">.Si está utilizando superando Flotar problemas elementos de seccionamiento HTML5 como <artículo>o <pie de página>,luego agregue esa clase a ellos: <artículo class="clear">.Vea la parte inferior de la Figura 13-8. Esta técnica es muy confiable; sin embargo, a diferencia de las dos técnicas anteriores, debe agregar HTML adicional (el atributo de clase) a la página. NotaElzoomLa propiedad hace que su página falle la verificación del validador de CSS. Para moverseeso, puede poner esta regla (junto con cualquier otro estilo exclusivo de IE) en una hoja de estilo externa y adjuntarla a sus páginas web, usando cualquiera de los trucos descritos en el Capítulo 17 (página 546). Figura 13-8 ¡No dejes escapar un flotador! Tiene varias formas de hacer que los elementos flotantes permanezcan dentro de los bordes y fondos de la etiqueta que los contiene. Aquí se muestran dos métodos, aunque cualquiera de los cuatro discutidos produciría los mismos resultados. Flotar el contenedor funciona (arriba), al igual que una combinación especial de CSS (abajo). Ambos métodos dan como resultado bordes y fondos que rodean el contenedor y los flotadores en su interior. Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 429 superando Flotar problemas CLÍNICA DE USUARIOS ELÉCTRICOS Columnas Múltiples: La Manera Fácil CSS3 introduce eldiseño de varias columnasmódulo: Te permite dividir entre las columnas. Para establecer el estilo, el tamaño y el color de la regla de un solo elemento (como un div lleno de texto) en tres, cuatro o más columna, use la misma sintaxis que para los bordes (página 205). columnas. Proporciona propiedades CSS para determinar el número de columnas, el espacio entre columnas y para agregar una línea (unregla) entre las columnas. Los aplica a la etiqueta que contiene los elementos que desea dividir en columnas. Por ejemplo, supongamos que tiene varios párrafos de texto dentro de un <div>etiqueta. Aplica estas propiedades a ese div y los Las columnas múltiples están diseñadas para simular el tipo de columnas que párrafos fluyen a través de múltiples columnas. Si, por ejemplo, le da a se encuentran en un periódico o una revista, donde una historia larga fluye esa columna una clase llamadamulticolor, puede crear el siguiente estilo desde la parte superior hasta la parte inferior de una columna, de vuelta a la para un diseño de tres columnas, con un espacio de 1 em y una regla parte superior de la segunda columna, hasta la parte inferior de esa columna y punteada: pronto. En otras palabras, no es para colocar columnas de contenido no . multicolor { relacionado una al lado de la otra (por ejemplo, una barra lateral con enlaces y recuento de columnas: 3; una columna principal que contiene un artículo). Además, no puede establecer espacio entre columnas: 1em; diferentes anchos para cada columna individual; son todos del mismo ancho. columna-regla: 1px punteado negro; } Las columnas múltiples funcionan bien en una revista, donde tiene una altura Tenga en cuenta que Internet Explorer 9 y versiones establecida y puede ver una página completa, lo que facilita la lectura hasta el anteriores no admiten columnas múltiples. Además, debe final de una columna y volver a la parte superior de la siguiente. Sin embargo, usar prefijos de proveedores (página 209) para Chrome y en una página web, no conoce el tamaño de los monitores de sus visitantes, Safari (-webkitcolumn-count, -webkit-column-gap,y - por lo que una columna larga de texto puede obligar a un visitante a webkitcolumn-regla)y para Firefox (-moz-column-count, desplazarse hacia abajo para llegar al final y luego retroceder para leer la - moz-column-gap,y -moz-columna-regla).Opera, sin siguiente columna. En otras palabras, a menos que se asegure de tener embargo, entiende la versión sin prefijo. columnas muy cortas, podría terminar obligando a las personas a desplazarse hacia abajo y hacia arriba para leer una página, lo que no es muy fácil de usar. Sin embargo, las columnas múltiples son ideales para listas largas con viñetas Hay algunas otras propiedades para las columnas múltiples, sobre las cuales puede leer en la página oficial del W3C:www.w3.org/TR/ css3-multicol/. Además, hay una introducción simple a las con elementos cortos. En lugar de una lista realmente larga de viñetas, puede columnas múltiples enht tp://dev.opera.com/ar ticles/view/css3- distribuirlas en una página en varias columnas, ahorrando un valioso espacio multi-column-layout/y una herramienta en línea para crear y vertical. La sintaxis básica es bastante sencilla: puede utilizar elrecuento de obtener una vista previa de varias columnas en columnaspropiedad para establecer el número de columnas, laespacio entre www.aaronlumsden. com/multicol/. columnaspropiedad para establecer el espacio entre columnas, y laregla de columnapropiedad para dibujar una linea Creación de columnas de altura completa Las tablas HTML no son excelentes para el diseño de páginas web por varias razones. Agregan mucho código, son difíciles de actualizar y no funcionan bien en navegadores alternativos como los que usan los teléfonos móviles. Pero las mesas tienen algo a su favor en el departamento de diseño: la capacidad de crear columnas de la misma altura. Las columnas de igual altura le permiten agregar un color de fondo o un gráfico a una columna y hacer que ocupe toda la altura. 430 Css3: el manual perdido www.it-ebooks.info de la pagina Los fondos de las dos barras laterales en la imagen superior de la Figura 13-9 llenan la altura de la pantalla, creando franjas sólidas y en negrita a ambos lados de la página. superando Flotar problemas Los flotadores de CSS, por otro lado, se quedan un poco cortos en este sentido. Las celdas de la tabla en una fila siempre tienen la misma altura, lo que no ocurre con los divs. La altura de un flotador suele estar dictada por el contenido que contiene. Cuando no hay mucho contenido, el flotador no es muy alto. Dado que una imagen de fondo o un color de fondo solo llenan el flotador, puede terminar con columnas de colores sólidos que no lleguen a la parte inferior de la página, como en las áreas rodeadas por círculos en la parte inferior de la Figura 13-9. NotaEl nuevo modelo de caja flexible soluciona el problema de las columnas de diferentes alturas en una fila. Desafortunadamente, el soporte del navegador aún no es tan bueno. Véase el recuadro de la página 436. Como ocurre con la mayoría de los problemas relacionados con CSS, existen varias soluciones. El método más probado y verdadero es elcolumna falsatécnica defendida por primera vez por el gurú de CSS Dan Cederholm. El secreto es agregar imágenes de fondo a una etiqueta queenvuelve alrededorla barra lateral rechoncha y las otras columnas de la página. Digamos que su HTML tiene dos <div>etiquetas que contienen el contenido de una barra lateral izquierda y el contenido principal de la página: <div class="sidebar">Contenido de la barra lateral aquí</div> <div class="main">Contenido principal de la página, esta columna tiene mucho texto y es mucho más alta que la barra lateral.</div> La barra lateral <div>flota en el borde izquierdo de la página y tiene un ancho de 170 píxeles. Debido a que hay menos contenido en la barra lateral, es más corto que el texto principal. Supongamos que envuelve ese HTML en un contenedor <div>etiqueta, así: <div class="envoltorio"> <div class="sidebar">Contenido de la barra lateral aquí</div> <div class="main">Contenido principal de la página, esta columna tiene mucho texto y es mucho más alta que la barra lateral.</div> </div> Ese div exterior crece hasta ser tan alto como el elemento más alto dentro de él, así que incluso si el principal div es muy alto, esoenvolturadiv será igual de alto. Aquí está la magia: crea un estilo para el envoltorio <div>con una imagen de fondo del ancho de la barra lateral, en el color de fondo que quieras para la barra lateral. De esa forma, si la imagen de fondo se muestra verticalmente, forma una barra sólida de la altura del envoltorio <división> (Figura 13-9, arriba). . wrapper { background: url(images/col_bg.gif) repetir-y arriba a la izquierda; } Los navegadores web muestran esa imagen de fondo directamentedebajo de la barra lateral, creando la ilusión de que la barra lateral tiene un color de fondo. Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 431 superando Flotar problemas Figura 13-9 Las columnas de altura completa con colores de fondo en negrita son una técnica de diseño común. Las barras laterales izquierda y derecha (arriba) muestran cómo los fondos sólidos pueden ayudar a definir visualmente las diferentes áreas de una página. Cuando el fondo de una barra lateral se detiene abruptamente (encerrado en un círculo en la parte inferior), obtiene un espacio en blanco adicional que distrae y es poco atractivo. 432 Css3: el manual perdido www.it-ebooks.info NotaTampoco estás limitado a los colores sólidos. Como de todos modos está usando una imagen, puede hacer un patrón decorativo que se coloque en mosaicos sin problemas en el lado izquierdo de la página. superando Flotar problemas Reproducir este resultado para dos columnas es un poco más complicado. Primero, agregue dos divisiones de envoltura: <div class="envoltorio1"> <div class="envoltorio2"> <div class="sidebar1">Contenido de la barra lateral aquí</div> <div class="sidebar2">Segunda barra lateral</div> <div class="main">Contenido principal de la página, esta columna tiene mucho texto y es mucho más alta que las dos barras laterales.</div> </div> </div> NotaSi el envoltorio y cada columna tienen anchos fijos, puede crear esta apariencia de columna falsa para las columnas izquierda y derecha con una sola imagen y div de envoltorio. Simplemente haga que el gráfico sea tan ancho como el envoltorio, siendo el lado izquierdo del gráfico el color y el ancho de la barra lateral izquierda, el lado derecho del gráfico el color y el ancho de la barra lateral derecha, y la parte central del gráfico haciendo juego. el color de fondo de la columna central. Si la primera barra lateral aparece en el lado izquierdo de la página y la segunda barra lateral aparece en el lado derecho, crea dos estilos. Aplicar un estilo al primer envoltorio <div> etiqueta para agregar un fondo a la barra lateral izquierda; aplicar uno a la segunda envoltura <div>para agregar un fondo a la barra lateral derecha (Figura 13-10, abajo). . wrapper1 { background: url(images/col1_bg.gif) repetir-y arriba a la izquierda; } . wrapper2 { fondo: url(images/col2_bg.gif) repetir-ybienarriba; } Al agregar una imagen de fondo a la columna de la derecha, asegúrese de colocar la imagen de fondo en la parte superior derecha del segundo envoltorio, de modo que quede debajo de la segunda barra lateral en el lado derecho de la página. Un problema importante con la técnica de la columna falsa es que es muy difícil hacer que funcione cuando todas las columnas tienen anchos porcentuales. Si los anchos de las barras laterales son un porcentaje de la ventana del navegador, pueden ser más delgados o más anchos según el monitor del visitante. La técnica de la columna falsa requiere colocar un gráfico en el fondo del elemento envolvente. Ese gráfico tiene un ancho específico y no se escalará a medida que cambie el ancho del navegador y, por lo tanto, el ancho de la columna. Una solución inteligente utiliza degradados lineales CSS3 (página 260) para agregar un degradado a un elemento envolvente. El degradado se convierte en los colores de fondo de las columnas dentro del elemento envolvente. Ahora, puede estar pensando: "Me gustan los arcoíris y todo eso, pero quiero que los colores de fondo de cada columna sean sólidos, no un degradado que se transforme de un color al siguiente". Bueno, no temas, puedes conseguir colores sólidos. Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 433 superando Flotar problemas Figura 13-10 A veces es necesario pensar fuera de la etiqueta para encontrar soluciones creativas a los problemas de CSS. Para obtener fondos de altura completa detrás de columnas flotantes, debe recurrir a algunos<div> etiquetas que envuelven todas las columnas principales de texto. Estos divs crecen hasta alcanzar la altura de la columna más alta del grupo. Al agregar imágenes de fondo a estos divs de envoltura, crea la apariencia de columnas de igual altura. Como se describe en la página 262, los degradados lineales le permiten establecer paradas de color, lugares donde se define un nuevo color como parte del degradado. Si la primera parada es blanca, por ejemplo, y la segunda parada es blanca, el degradado va de blanco a blanco. En otras palabras, no hay cambio de color, es solo un color sólido. Además, puede establecer una parada de color en el mismo lugar que otra parada de color, lo que permite que el segundo color comience inmediatamente después del otro sin un efecto degradado sutil. Digamos que tienes un diseño de tres columnas. La primera columna tiene un 25 por ciento de ancho, la columna del medio tiene un 50 por ciento de ancho y la tercera columna tiene un 25 por ciento de ancho. Desea que la primera columna tenga un color de fondo rojo, la del medio blanca y la tercera azul. 1.Envuelva las tres columnas en un elemento envolvente: <div class="envoltorio"> <div class="sidebar1"> … contenido aquí…</div> <div class="main"> … contenido aquí…</div> <div class="sidebar2"> … contenido aquí…</div> </ div> 434 Css3: el manual perdido www.it-ebooks.info El contenedor es el elemento en el que agregará el degradado. Además, si hace flotar las tres columnas dentro del contenedor, deberá usar uno de los métodos descritos en la superando Flotar problemas página 425 para contener esos elementos flotantes. 2.Agregue un degradado lineal, con paradas de color que coincidan con el ancho de las columnas: . envoltorio { imagen de fondo: degradado lineal (izquierda, rojo 0%, rojo 25%, blanco 25%, blanco 75%, azul 75%, azul 100%); } El rojo corre desde0% (extremo izquierdo del envoltorio) a25%.Es del mismo color, así que no hay degradado. Entonces el blanco comienza en25%—el mismo punto en el que terminó el rojo, así que de nuevo no hay gradiente. Las blancas continúan hasta que el75%marca, solo un tramo blanco sólido. Luego, el azul comienza exactamente donde termina el blanco y continúa hasta el100% marca (el lado derecho del envoltorio). En otras palabras, tiene tres columnas de color sólido cuyos anchos cambian con el ancho del navegador. Perfecto. Por supuesto, también debe incluir las versiones con el prefijo del proveedor. 3.Agregue las versiones prefijadas del proveedor: . envoltorio { imagen de fondo: -webkit-linear-gradient(izquierda, rojo 0%, rojo 25%, blanco 25%, blanco 75%, azul 75%, azul 100%); imagen de fondo: -moz-linear-gradient(izquierda, rojo 0%, rojo 25%, blanco 25%, blanco 75%, azul 75%, azul 100%); imagen de fondo: -o-lineal-gradiente (izquierda, rojo 0%, rojo 25%, blanco 25%, blanco 75%, azul 75%, Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 435 superando Flotar problemas azul 100%); imagen de fondo: degradado lineal (izquierda, rojo 0%, rojo 25%, blanco 25%, blanco 75%, azul 75%, azul 100%); } La desventaja de usar un degradado lineal es que solo funciona con colores sólidos (o, por supuesto, degradados, si desea hacerlo), por lo que no puede usar un gráfico en el fondo o bordes alrededor de cada columna. Además, Internet Explorer 9 y versiones anteriores no entienden los gradientes en absoluto. NotaIncluso hay algunas otras formas de hacer que las columnas parezcan tener la misma altura. Consulte esta publicación de blog del experto en CSS Chris Coyier para obtener una descripción general de las diferentes técnicas:http://css-tricks.com/fluid-widthequal-height- columns/. Ignore su discusión sobre el método de caja flexible, ya que escribió este artículo antes de que el W3C publicara la sintaxis de caja flexible finalizada. CLÍNICA DE USUARIOS ELÉCTRICOS Mejores métodos de diseño están en camino CSS3 incluye algunos métodos nuevos muy prometedores para controlar el no se recomienda la sintaxis anterior. Incluso se predice que Internet flujo de contenido de la página web. En la mayoría de los navegadores (pero no Explorer 10, que aún no se lanzó al momento de escribir este artículo, en IE 9 o anterior), ya puede usar el módulo de diseño de varias columnas para admitirá la sintaxis flexbox antigua y desactualizada. En otras palabras, hacer fluir el texto en varias columnas como en el diseño de periódicos y probablemente pasará algún tiempo antes de que pueda usar flexbox revistas (consulte el cuadro en la página 430). de manera confiable en sus sitios web. Para obtener más información Además, el nuevocaja flexibleEl modelo proporciona soluciones a la mayoría de los problemas que los flotadores intentan abordar, como la creación de columnas una al lado de la otra de diferentes anchos. Sin embargo,caja flexible (como suele llamarse) puede hacer mucho más, incluido controlar el orden en que se muestran las columnas independientemente de su orden en el HTML o cambiar su visualización de izquierda a derecha o de derecha a izquierda. La sobre flexbox, vaya a la fuente: http://www.w3.org/TR/css3-flexbox/. Además, evite los tutoriales de flexbox escritos antes de 2012. Todos usan la sintaxis anterior. Para aprender a reconocer la diferencia entre el flexbox antiguo y el flexbox nuevo, lea el artículo enhttp://css- tricks.com/ antiguo-flexbox-y-nuevo-flexbox/). También en el horizonte está elgrilla complejamódulo de diseño ( sintaxis de Flexbox es sencilla y proporciona muchos controles para www . w3.org/TR/css3-grid-layout/). Este módulo simplificará el administrar el diseño. La mayoría de los navegadores incluso lo admiten. proceso de definición de una estructura subyacente de filas y columnas a las que puede alinear los elementos de la página. Desafortunadamente, el grupo de trabajo de CSS ha realizado cambios 436 Aunque se ha trabajado mucho en este módulo, a fines de 2012 aún no está finalizado y ningún navegador lo admite. significativos en la sintaxis de flexbox. Cambiaron los nombres de las propiedades y agregaron otras nuevas, por lo que la implementación en los Finalmente, hay incluso algunas ideas preliminares de Adobe para navegadores a partir de este escrito está totalmente desactualizada y usando refinar el diseño del texto (http://html.adobe.com/webstandards/). Css3: el manual perdido www.it-ebooks.info Prevención de caídas de flotadores De repente, una de sus columnas simplemente cae debajo de las demás (Figura 13-11, arriba). Parece superando Flotar problemas que hay mucho espacio para que todas las columnas coexistan perfectamente una al lado de la otra, pero no es así. Tienes la temida caída del flotador. Una columna flotante cae porque no hay espacio suficiente para colocarla. Así que tenga cuidado si establece anchos paracadacolumna. Si el espacio disponible en la ventana del navegador (o el bloque contenedor en un diseño de ancho fijo) es menor que eltotalanchos de las columnas, entonces estás pidiendo una caída flotante. Además, tenga en cuenta el modelo de cuadro CSS: como se explica en el cuadro de la página 196, el ancho de un elemento que se muestra en la ventana del navegador no es el mismo que suanchopropiedad. El ancho mostrado de cualquier elemento es una combinación de su ancho, los tamaños de los bordes izquierdo y derecho, el relleno izquierdo y derecho y los márgenes izquierdo y derecho. Para que las columnas encajen, la ventana del navegador (o el bloque contenedor) debe acomodar el total combinado de todos esos anchos. Tomemos, por ejemplo, el diseño simple de tres columnas en la figura 13-11. Como puede ver en el ejemplo superior, las tres columnas no encajan. Aquí hay un desglose de las matemáticas detrás del problema: • división de envolturaUn envoltorio de ancho fijo <div>etiqueta encierra todo el diseño. Es anchoLa propiedad se establece en 760 píxeles, por lo que las tres columnas no pueden sumar más que eso. • Barra lateral 1 (lado izquierdo).Su ancho es de 150 píxeles, pero también tiene 10 píxeles de relleno, lo que hace que su ancho total en pantalla sea de 170 píxeles. (150 + 10 píxeles de relleno izquierdo + 10 píxeles de relleno derecho). • Contenido principal.El contenido principal <div>tiene 390 píxeles de ancho, con un borde de 1 píxel y 15 píxeles de margen izquierdo y derecho para un ancho total de 422 píxeles. (Es posible que necesite una calculadora para este: 390 + 1 [borde izquierdo] +1 [borde derecho] + 15 [margen izquierdo] + 15 [margen derecho]). • Barra lateral 2 (lado derecho).Este elemento tiene unanchopropiedad establecida en 150 píxeles, con 10 píxeles de relleno a la izquierda y 10 píxeles a la derecha: 170 píxeles, al igual que la barra lateral 1. Los anchos reales de cada elemento suman un total de 762 píxeles. Eso es dos píxeles más que el ancho de la envoltura <división>.La imagen central de la Figura 13-11 muestra un contorno alrededor del contenido principal <div>indicando su ancho total más los márgenes. Solo esos dos miserables píxeles adicionales de ancho (en un círculo) son suficientes para hacer que una columna se despliegue. La solución: Eliminar 2 píxeles de espacio de cualquiera de los elementos. Al cambiar los márgenes izquierdo y derecho del div de contenido principal de 15 a 14 píxeles, obtiene el espacio adicional necesario para que las tres columnas encajen una al lado de la otra (abajo). En pocas palabras: las caídas de flotación siempre se deben a que no hay suficiente espacio para sostener todas las columnas. Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 437 superando Flotar problemas Figura 13-11 Solo se necesitan uno o dos píxeles para arruinar un diseño. Cuando el ancho de los elementos flotantes es solo un cabello más ancho que el bloque que los contiene (como un <div>con un ancho establecido, o incluso la propia ventana del navegador), el último elemento flotante cae debajo de los demás (arriba). El ancho real de un elemento combina muchas propiedades CSS. En la imagen central, el contorno alrededor del área de contenido principal muestra que es un poco demasiado ancho para permitir que la barra lateral derecha quepa (encerrada en un círculo). Ajustar cualquiera de los elementos eliminando un poco de ancho, relleno o márgenes puede resolver el problema (abajo). Otra forma de facilitar las matemáticas es nunca configurar el borde o el relleno en elementos o divs de columna. De esta manera, si establece tres columnas para20%, 60%,y20%anchos, respectivamente, sabrá que encajan uno al lado del otro ya que suman100%,y no hay relleno ni bordes que lo arruinen. Si desea relleno, simplemente puede agregar relleno a los elementos dentro de la columna: por ejemplo, proporcione el mismo relleno izquierdo y derecho a los títulos, párrafos y otros elementos dentro del div. Esto requiere más trabajo, pero evita posibles caídas de flotación causadas por anchos de columna que suman más de 100%. Si también desea bordes, otra técnica es anidar divs como este: <div clase="columna1"> <div class="columnainterna"> …el contenido va aquí… </div> </div> 438 Css3: el manual perdido www.it-ebooks.info Traducido del inglés al español - www.onlinedoctranslator.com Luego establece el ancho en el div exterior:columna1en este caso, y agregue el relleno y los bordes al div interno,columnainterna—en el código anterior. No establezca un ancho en el div superando Flotar problemas interno; automáticamente llenará el ancho de la columna exterior. Prevención de caídas de flotación con tamaño de caja El principal culpable de las caídas flotantes es la forma extraña en que los navegadores calculan el ancho de pantalla real de un elemento. Establece el ancho en 100 píxeles, por ejemplo, pero el navegador lo dibuja como 122 píxeles, porque también agregó 10 píxeles de relleno izquierdo y derecho y un borde de 1 píxel alrededor de todo. Afortunadamente, una propiedad de CSS le permite eludir estos cálculos que provocan dolores de cabeza. el csstamaño de cajaLa propiedad le permite decirle a un navegador web que use un modelo diferente para calcular el ancho de pantalla real de un elemento. Puedes darle uno de tres valores: • Elcuadro de contenidoEl valor es cómo funcionan normalmente los navegadores: el ancho de un elemento es el total de los grosores de los bordes izquierdo y derecho, el relleno izquierdo y derecho y el CSS.anchopropiedad. tamaño de caja: caja de contenido; • Elcaja de rellenovalue le dice a un navegador que incluya el relleno izquierdo y derecho. En otras palabras, el ancho de visualización de un elemento es el total del ancho de CSS y el relleno izquierdo y derecho. No incluye ningún borde alrededor del elemento. tamaño de caja: caja de relleno; • Finalmente, elcuadro de bordeLa propiedad incluye relleno, bordes y ancho CSS. En general, este es el que desea utilizar. Mantiene la matemática simple y ayuda a evitar caídas de flotación, especialmente cuando usa anchos basados en porcentajes junto con unidades basadas en píxeles para el ancho del borde y el relleno: tamaño de caja: cuadro de borde; La muy buena noticia es que casi todos los navegadores admiten este esquema, incluido Internet Explorer 8. Para Firefox, necesita un prefijo de proveedor:moz-box-tamaño—pero todos los demás navegadores pueden aceptar la versión simple, sin prefijo. Es seguro de usar para la gran mayoría del público que navega por la web. Solo IE 7 y versiones anteriores no seguirán estas instrucciones; recurrirán a definir el ancho visual como siempre lo han hecho los navegadores, por lo que terminará con elementos más anchos en IE 7 y probablemente gotas flotantes en diseños basados en flotantes. Consulte el cuadro en la página 24 para ayudarlo a determinar si realmente le interesa IE 7. Algunos diseñadores web sugieren configurar todos los elementos alcuadro de bordeconfiguración, de modo que cada etiqueta se medirá de la misma manera. Para hacerlo, use el selector *, que selecciona cada elemento en la página, en la parte superior de su hoja de estilo junto con su restablecimiento de CSS: *{ - tamaño de cuadro de moz: cuadro de borde; tamaño de caja: cuadro de borde; } Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 439 Tutorial: MúltipleColumna DISEÑOS CLÍNICA DE USUARIOS ELÉCTRICOS ¿Tienes diseño? Como probablemente ya se haya dado cuenta, Internet Explorer 6 y 7 Luego, agregue esa clase a cualquier elemento que contenga un tienen un largo historial de errores de navegación. Algunos CSS básicos elemento flotante. El objetivo de ese estilo no es realmente hacer que se ven bien en Internet Explorer 8, Firefox o Safari se desmoronan zoom en los enlaces. Aunque solo IEzoomle permite hacer zoom en Internet Explorer 6 o 7. Afortunadamente, IE 6 y 7 están perdiendo en un elemento de la página (usando JavaScript), también activa popularidad (consulte el cuadro en la página 24) y rápidamente están disposición en IE 6 y 7. Por razones que solo Microsoft (y los cayendo en el olvido. Pero si aún necesita admitir esos navegadores, extraterrestres conocen), encenderdisposiciónobliga a IE 6 y 7 a aquí hay un truco que será útil. Resulta que puede corregir muchos contener elementos flotantes dentro de una etiqueta errores de IE activando una propiedad especial exclusiva de IE conocida contenedora. El zoompropiedad no es la única que se enciende comodisposición.Este no es un concepto CSS, ni tiene nada que ver con disposición en IE. Varias otras propiedades CSS (reales) también las reglas de HTML. Es solo un concepto integrado en Internet Explorer dan un diseño de elementos:posición: absoluta; flotador (versiones 7 y anteriores) por los ingenieros que crearon IE. En lo que izquierdo; flotar derecho; pantalla: tabla en línea;cualquierancho respecta a IE, cada elemento de la página tiene un diseño o no. valor; y cualquieraalturavalor. Elzoomproperty es una buena opción porque no significa nada para En Internet Explorer, los elementos flotantes, los elementos de lista y los otros navegadores (a diferencia de las propiedades CSS reales como elementos con posiciones absolutas se muestran de manera diferente anchoyaltura),así que Safari, Firefox, etc. felizmente lo ignoran. Eso dependiendo de si tienen o no diseño. Por ejemplo, para asegurarse de que un significa que puedes usarzoomen cualquier lugar donde necesite elemento contenga elementos flotantes en su interior, puede agregar este corregir un error de IE "agregando diseño" a un elemento sin temor a estilo a su CSS: estropear la página en otros navegadores. La desventaja de usar esta propiedad es que no es un CSS válido, por lo que no pasará la validación . borrar {zoom: 1; } W3C (consulte el cuadro en la página 27). Tutorial: diseños de varias columnas En este tutorial, creará un diseño flotante de varias columnas. En el proceso, creará un diseño líquido de tres columnas, así como un diseño de ancho fijo. Además, aprenderá un par de técnicas diferentes para hacerlo. Para comenzar, descargue los archivos del tutorial que se encuentran en el sitio web complementario de este libro enwww.sawmac.com/css3/. Haga clic en el enlace del tutorial y descargue los archivos. Todos los archivos están en un archivo zip, por lo que debe descomprimirlos primero, como se detalla en el sitio web. Los archivos para este tutorial están en el13carpeta. Estructurando el HTML El primer paso para crear un diseño basado en CSS es identificar los diferentes elementos de diseño en la página. Para ello, envuelve fragmentos de HTML dentro de <div>etiquetas, cada una de las cuales representa una parte diferente de la página. 440 Css3: el manual perdido www.it-ebooks.info 1.abre elinicio.htmlarchivo en un editor de texto y haga clic en la línea vacía que sigue al comentario HTML: <!—la primera barra lateral va aquí-->. Tutorial: MúltipleColumna DISEÑOS Como puede ver, parte del trabajo HTML ya está hecho: Actualmente, hay un banner y un pie de página. Antes de crear cualquier estilo, debe agregar la estructura y el contenido de la página. A continuación, agregará el <div>etiqueta para la barra lateral izquierda. 2.Añadir una apertura <aparte>para la barra lateral: <aparte class="sidebar1">.Luego presione Enter (Return) para crear una nueva línea vacía. Estás usando HTML5 <aparte>etiqueta, pero podría usar fácilmente un <div>etiqueta para crear esta columna. (La página incluye un enlace a un archivo JavaScript que permite que IE 8 y versiones anteriores apliquen CSS a elementos HTML5; consulte la página 24 para obtener una explicación completa). Si estuviera creando una página web desde cero, en este punto agregaría el HTML para la barra lateral de la página, tal vez una lista de artículos en el sitio, enlaces a sitios web relacionados, etc. En este caso, el HTML ya está solucionado. El código de una lista desordenada de enlaces te está esperando en otro archivo. Solo tienes que copiarlo y pegarlo en esta página. 3.abre el archivobarra lateral1.txt, copie todo el contenido y luego regrese a la inicio.htmlarchivo.Pegue el HTML después de <aparte>etiqueta que creó en el Paso 2 (o su <div>etiqueta, si seguiste esa ruta). El HTML de la barra lateral está casi completo. Solo tienes que cerrar el <aparte> etiqueta. 4.Inmediatamente después del código que acaba de pegar, escriba </aparte>. Acaba de agregar el primer elemento de diseño en la página. Dentro de poco, diseñará este HTML para que se vea como una columna. Pero primero, debe agregar más contenido. 5.Coloque el cursor en la línea vacía después de este comentario HTML: ,y luego escriba<clase de artículo = "principal">. Este div contiene el contenido principal de la página. También obtendrá ese HTML de otro archivo. 6.abre el archivoprincipal.txt, copiar todo el contenido, volver a lainicio.htmly luego pegue el código después de <artículo>etiqueta que acaba de crear.Añadir el cierre </artículo>etiqueta exactamente como en el paso 4. Guarde el archivo HTML. Ese es todo el HTML que necesita para crear su diseño por ahora. A continuación, es hora de centrar su atención en la creación del CSS. Crear los estilos de diseño Si obtiene una vista previa de la página ahora, verá que el banner, los botones de navegación y el texto ya tienen estilo. Esto se debe a que esta página tiene una hoja de estilo externa adjunta con un formato básico. A continuación, creará estilos para dar formato a las columnas de la página: Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 441 Tutorial: MúltipleColumna DISEÑOS 1.En un editor de texto, abra elestilos.cssarchivo. Dado que la página web utiliza una hoja de estilo externa, le agregará todos los estilos nuevos. Ahora está administrando dos archivos, el archivo HTML y el archivo CSS, así que asegúrese de guardar ambos antes de obtener una vista previa de su trabajo en un navegador web. 2.Desplácese hasta la parte inferior del archivo CSS.Verás un comentario CSS que dice /*agregue estilos de tutorial a continuación aquí */.Debajo de eso, agregue este estilo: . barra lateral1 { flotador izquierdo; ancho: 20%; } Este estilo de clase hace flotar el div de la barra lateral a la izquierda de la página y le da un ancho del 20%. ElanchoLa propiedad es importante en este estilo: a menos que esté flotando una imagen que tiene un ancho establecido, siempre debe establecer un ancho para un elemento flotante. De lo contrario, el navegador establece el ancho en función del contenido dentro del flotante, lo que genera resultados inconsistentes. Aquí, el ancho se basa en porcentajes, lo que significa que está determinado por el ancho de su contenedor. En este caso, el contenedor es el <cuerpo>y ocupa todo el ancho de la ventana del navegador. Por lo tanto, el ancho en pantalla de la barra lateral dependerá del ancho de la ventana del navegador del visitante. 3.Guarde los archivos HTML y CSS y obtenga una vista previa delinicio.htmlarchivo en un navegador web. La barra lateral ahora forma una columna a la izquierda... más o menos. Cuando el texto de la columna principal llega a la parte inferior de la barra lateral, se envuelve alrededor de la parte inferior de la barra lateral, como se muestra en la Figura 13-12. Si bien normalmente así es como funcionan los flotadores, no es lo que desea en este caso. Para que el texto del cuerpo principal aparezca como una columna propia, debe agregar suficiente margen izquierdo para sangrar el texto principal más allá del borde derecho de la barra lateral. 4.Crea un estilo para la segunda columna: . principal { margen izquierdo: 22%; } Dado que la barra lateral tiene un 20 por ciento de ancho, un margen del 22 por ciento sangra el contenido principal un 2 por ciento adicional, creando un margen entre las dos columnas. Este espacio en blanco adicional no solo hace que el texto sea más fácil de leer, sino que también hace que la página se vea mejor. Obtenga una vista previa de la página ahora y verá que tiene un diseño de dos columnas. 442 Css3: el manual perdido www.it-ebooks.info Tutorial: MúltipleColumna DISEÑOS Figura 13-12 Un elemento flotante en realidad no crea una columna en la página. Simplemente desplaza cualquier contenido que lo envuelve, hasta el punto donde termina el flotador (encerrado en un círculo). Después de eso, el contenido vuelve a su posición normal debajo del flotador. Agregar otra columna Como puede ver, un diseño de dos columnas no es difícil. Agregar una tercera columna para que pueda tratar a sus visitantes con aún más información no es más difícil. De hecho, los pasos son bastante similares a la parte anterior de este tutorial. 1.abre el archivobarra lateral2.txt.Copie todo el HTML de ese archivo y luego regrese a la inicio.htmlarchivo. El código HTML de la siguiente columna va después del texto principal dentro de <artículo>etiqueta. 2.Busque el comentario HTML cerca de la parte inferior del archivo.Haga clic en la línea vacía debajo de ella. Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 443 Tutorial: MúltipleColumna DISEÑOS A menudo es difícil encontrar el cierre correcto </div>cuando usa muchos divs para estructurar una página. Es por eso que los comentarios HTML, como este, realmente pueden ayudarlo a identificar y realizar un seguimiento del HTML en su página. 3.Tipo <aparte class="sidebar2">,presione Entrar y luego pegue el HTML que copió en el Paso 1.Pulse Intro de nuevo y luego escriba </aparte>.Guarde el archivo HTML. Cuando cierras el <aparte>etiqueta, ha completado el código HTML para la tercera columna de la página. Comienza a peinarlo a continuación. 4.En su editor de texto, abra elestilos.cssarchivo.Bajo el .principalestilo que creó en el Paso 4 en la página anterior, agregue un nuevo estilo a la hoja de estilo interna: . barra lateral2 { flotar derecho; ancho: 20%; } Estás haciendo flotar esta columna hacia el lado derecho de la página para flanquear el contenido principal con barras laterales a cada lado. 5.Guarde todos los archivos y obtenga una vista previa delinicio.htmlarchivo en un navegador web. De inmediato, notarás algo extraño. La segunda barra lateral aparece debajo del contenido principal e incluso se extiende sobre el pie de página. El problema tiene que ver con el orden de origen del HTML. Cuando flota un elemento, solo el HTML que viene después de ese elemento se ajusta y aparece junto al elemento flotante. En otras palabras, dado que el HTML de la segunda barra lateral está después del contenido principal, no aparecepróximoal contenido principal, sólo después de él. Hay un par de maneras de sortear esta situación. Puede mover el HTML de la segunda barra lateral (el segundo <aparte>elemento) antes del HTML del contenido principal (el < artículo>elemento). Entonces la primera barra lateral flotaría hacia la izquierda y la segunda hacia la derecha; el contenido principal simplemente se deslizaría entre ellos. Alternativamente, también podría simplemente hacer flotar la columna principal. Si configura su ancho para que las tres columnas sumen no más del 100 por ciento, entonces las tres columnas se ubicarán una al lado de la otra. Para este ejemplo, probará ese enfoque. 6.Edite el .principalestilo para que se vea así: . principal { flotador izquierdo; ancho: 60%; } Si guarda el archivo CSS y obtiene una vista previa delinicio.htmlarchivo en un navegador, notará otro problema: de repente, ¡todo se vuelve negro! Mantenga la calma: ese es el pie de página que intenta envolver todos los flotadores y está causando un lío. Como leyó anteriormente, cuando hace flotar un elemento y otro elemento lo envuelve, el color de fondo y los bordes de ese elemento en realidad se extienden por debajo 444 Css3: el manual perdido www.it-ebooks.info el elemento flotante. Extraño, cierto... y frustrante. Para arreglarlo, simplemente necesita hacer que el pie de página caiga debajo, es decir,claro—los flotadores. Tutorial: MúltipleColumna DISEÑOS 7.Agregue un estilo más después del .barra lateral2estilo: pie de página { Limpia los dos; } Como se describe en la página 425, elclaroLa propiedad obliga a un elemento a caer debajo de los elementos flotantes. En este caso, empuja el pie de página hacia abajo debajo de las columnas como se muestra en la Figura 13-13. Figura 13-13 Usando flotadores puedes hacer que aparezcan tres elementos como tres uno al lado del otro columnas Agregar algo de espacio para respirar Tienes tres columnas, pero el texto está un poco atascado. Las tres columnas prácticamente se tocan y el texto de la barra lateral derecha se pega demasiado al borde de la ventana del navegador. Un poco de relleno puede ayudar a solucionar esto. Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 445 Tutorial: MúltipleColumna DISEÑOS 1.Agregue relleno al .barra lateral1, .principal,y .barra lateral2estilos, por lo que los estilos se ven así: . barra lateral1 { flotador izquierdo; ancho: 20%; relleno: 0 20px 0 10px; } . principal { flotador izquierdo; ancho: 60%; relleno: 0 20px 0 20px; } . barra lateral2 { flotar derecho; ancho: 20%; relleno: 0 10px 0 20px; } Aquí, estás usando elrellenopropiedad abreviada (página 231). Los números representan el relleno superior, derecho, izquierdo e inferior. Entonces en el .barra lateral1estilo, está agregando 0 relleno superior, 20 píxeles de relleno derecho, 0 relleno inferior y 10 píxeles de relleno izquierdo. Si guardas elestilos.cssarchivar y previsualizar elinicio.htmlen un navegador, notará un problema: la temida caída flotante (página 437). Al agregar relleno, esencialmente ha aumentado el ancho de cada columna, y dado que los anchos totales de las columnas (20 % + 60 % + 20 %) ya totalizaron el 100 %, ese relleno adicional obliga a la tercera columna a colocarse debajo de las otras dos . ¡Simplemente no puede caber! Hay un par de maneras de manejar este problema. En primer lugar, puede eliminar el relleno de estos estilos y agregarlo a todos los elementos del interior. En otras palabras, agregue 10 píxeles de relleno izquierdo y derecho al <h2>, <h3>, <p>,y <ul>etiquetas Eso es mucho trabajo. En segundo lugar, puede eliminar el relleno de los estilos en el archivo CSS y luego, en el inicio.htmlarchivo, agregue un <div>dentro de cada una de las columnas, algo como esto: <aparte clase="barralateral1"> <div class="innerColumn">... el contenido va aquí... </ div> </aparte> Entonces, en elestilos.cssarchivo, simplemente cree un estilo para agregar el relleno: . columnainterna { relleno: 0 20px 0 10px; } 446 Css3: el manual perdido www.it-ebooks.info Debido a que no hay un ancho establecido en el archivo .columnainternaestilo, simplemente crece para llenar la columna, mientras que el relleno desplaza todo lo que Tutorial: MúltipleColumna DISEÑOS contiene (los encabezados, párrafos, etc.) en 10 píxeles. La desventaja de este enfoque es que necesita agregar HTML adicional. Hay otra manera, que es mucho más fácil, más flexible y ampliamente compatible con los navegadores web. 2.Agregue otro estilo a la hoja de estilo: *{ - tamaño de cuadro de moz: cuadro de borde; tamaño de caja: cuadro de borde; }} Este estilo aprovecha el selector universal (página 63). aplica el tamaño de cajapropiedad a cada elemento de la página. Al establecer esta propiedad en cuadro de borde,está instruyendo a los navegadores web para que utilicen el tamaño de larellenoy bordepropiedades como parte del CSSanchovalor. En otras palabras, el relleno no se suma a los anchos de CSS que configuró anteriormente. Esto evita cualquier caída flotante, ya que las columnas ahora solo suman el 100 por ciento del ancho de la ventana del navegador. El único inconveniente de esta técnica es que Internet Explorer 7 y anteriores no entienden el tamaño de cajapropiedad, por lo que obtiene una caída flotante en esos navegadores. Consulte el recuadro en la página 24 para ayudarlo a determinar si le preocupa la disminución y casi extinción de la base de seguidores de esos navegadores. Si necesita diseñar para ellos, use la técnica de div adicional que se describe en el Paso 1 en la página 448. Finalmente, agregará una línea de borde para separar las columnas. 3.Edite el .principalestilo agregando un borde izquierdo y derecho para que se vea así: . principal { flotador izquierdo; ancho: 60%; relleno: 0 20px; borde izquierdo: discontinuo 1px rgb (153,153,153); borde derecho: discontinuo 1px rgb (153,153,153); } Estas propiedades agregan dos líneas, una a cada lado de la sección de contenido principal. Si obtiene una vista previa de la página en un navegador web ahora, debería verse como la Figura 13-14. Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 447 Tutorial: MúltipleColumna DISEÑOS Figura 13-14 Agregar algo de relleno a las columnas y líneas de borde entre ellas separa claramente las columnas. Fijando el ancho Actualmente, la página tiene un diseño líquido, lo que significa que se expande para ocupar todo el ancho de la ventana del navegador. Pero supongamos que prefiere que la página mantenga el mismo ancho todo el tiempo, porque odia cómo se ve en los monitores de pantalla de cine o no le gusta lo que sucede con el diseño cuando la ventana del navegador se reduce demasiado. Cambiar un diseño líquido a un diseño de ancho fijo es fácil. Comience agregando un poco más de HTML. 1.Regrese a su editor de texto y elinicio.htmlarchivo.Directamente después de la apertura <cuerpo> etiqueta, agregue un nuevo <div>etiqueta: <cuerpo> <div class="pageWrapper"> 448 Css3: el manual perdido www.it-ebooks.info Estás envolviendo toda la página dentro de un div, que usarás para controlar el ancho de la página. Debe asegurarse de que la etiqueta esté cerrada. Tutorial: MúltipleColumna DISEÑOS 2.Añadir el cierre </div>justo antes del cierre </cuerpo>etiqueta: </div> </cuerpo> Ahora que hay un div que rodea todo el contenido de esta página, puede controlar el ancho de la página configurando un ancho para esta etiqueta. 3.Guarde el archivo HTML y cambie a laestilos.cssarchivo.Añade otro estilo: . envoltorio de página { ancho: 960px; } Si guarda los archivos CSS y HTML y obtiene una vista previa delinicio.htmlarchivo en un navegador, verá que la página está bloqueada en 960 píxeles. Si hace que la ventana del navegador sea más delgada que 960 píxeles, obtendrá barras de desplazamiento. Sin embargo, no tiene que establecer un ancho exacto. Si desea que la página se ajuste a una ventana del navegador más delgada, digamos 760 píxeles, es mejor que evite un ancho exacto. El verdadero problema es que la página se vuelve difícil de leer cuando el navegador es muy amplio. Otro enfoque es utilizar elanchura máximapropiedad, que evita que el div se vuelva más grande que un valor particular, pero no evita que se vuelva más delgado para adaptarse a pantallas más pequeñas. Mientras lo hace, también centrará el div dentro de la ventana del navegador. 4.En el archivo styles.css, cambie el .envoltorio de páginaestilo que acaba de crear para que se vea así: . envoltorio de página { ancho máximo: 1200px; margen: 0 automático; } Elanchura máximaLa propiedad (que incluso funciona en Internet Explorer 7) proporciona un diseño líquido, pero solo hasta cierto punto. En este caso, cuando la ventana del navegador tiene más de 1200 píxeles de ancho, el div no será más ancho. La configuración del margen aquí—0 automático— proporciona margen 0 para la parte superior e inferior, y márgenes automáticos para la izquierda y la derecha. Esa configuración automática le dice al navegador que calcule automáticamente el margen, dividiendo el espacio uniformemente entre izquierda y derecha y centrando el div en la ventana del navegador. La página ahora debería verse como la Figura 13-15. Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 449 Tutorial: MúltipleColumna DISEÑOS Figura 13-15 Usando el CSSanchura máxima propiedad en su lugar deanchole permite proporcionar un diseño flexible que se adapta a varias ventanas del navegador anchos, pero no se volverá ilegible en un monitor ultra ancho. Mezcla de líquido y diseño fijo La página se ve bastante bien, pero podría verse mejor si el fondo negro de la barra de navegación en la parte superior, el pie de página en la parte inferior y el degradado morado oscuro en el banner se extendieran por toda la página (consulte la Figura 13-16). ). Debido a que la navegación, el banner y el pie de página están dentro delenvoltorio de páginadiv, esos fondos se detienen cuando la ventana del navegador tiene más de 1200 píxeles. En cambio, desea mantener algunas partes de la página, las etiquetas con los colores de fondo, líquidas, mientras limita el ancho de las etiquetas que contienen cualquier contenido. El color de fondo para la navegación se aplica a un <navegación>elemento en el HTML; el degradado morado se aplica a un <encabezado>elemento; y el fondo negro en el pie de página se aplica al <pie de página>elemento. Para que sus fondos amplíen el ancho de la página, no pueden estar limitados por elenvoltorio de páginadivisión Así que el primer paso es eliminar ese estilo. 1.En elestilos.cssarchivo, elimine el .envoltorio de páginaestilo que acaba de crear. Puedes dejar elenvoltorio de páginadiv en el HTML. No estará de más tener ese poco de HTML adicional, y es posible que desee usarlo más tarde para agregar estilos. La página ha vuelto a su forma totalmente líquida. Ahora desea restringir solo la navegación, el texto del banner, el texto del pie de página y el contenido principal para que no superen los 1200 píxeles. Para hacerlo, debe profundizar un poco en el HTML y ver con qué elementos tiene que jugar. 450 Css3: el manual perdido www.it-ebooks.info Busque en el HTML elinicio.htmlarchivo y busque el <navegación>etiqueta. En su interior, verá que los botones de navegación se crean con una lista desordenada simple. Bingo. Puede Tutorial: MúltipleColumna DISEÑOS establecer el ancho máximo de esa lista en 1200 píxeles y centrarla en la página, dejando el < navegación>(y su fondo negro) para extender todo el ancho de la ventana del navegador. Del mismo modo, el texto dentro del banner—CSS3: El manual perdido—está dentro de un <h1> etiqueta. También puede establecer su ancho y margen máximos. En el pie de página, tienes un <p>etiqueta que puede controlar. 2.En elestilos.cssarchivo, agregue un estilo más: navegación ul, encabezado h1, pie de página p { ancho máximo: 1200px; margen: 0 automático; } Este selector de grupo apunta a la barra de navegación, el banner y el texto del pie de página, pero no a los elementos que los contienen. Si guarda el archivo CSS y obtiene una vista previa inicio.htmlahora, verá que la navegación, el título y el texto del pie de página no superan los 1200 píxeles. Sin embargo, la región de contenido principal aún ocupa toda la ventana del navegador. Para solucionarlo, debe envolver las tres columnas en otro div para crear un grupo que pueda dimensionar y centrar. NotaOtro enfoque es insertar otro <div>dentro del <encabezado>etiqueta y envuelto alrededor de la <navegación>y etiquetas <h1>, y otra <div>dentro del <pie de página>etiqueta. Puedes dejar que el <encabezado>y <pie de página> permanezca en todo el ancho mientras restringe el ancho de esos divs anidados. 3.abre elinicio.htmlarchivo en su editor de texto.Justo antes del comentario que introduce la primera barra lateral——añadir <clase div = "contenedor de contenido">: <div class="contentWrapper">  Ahora, necesitas cerrar ese div. 4.Desplácese hacia abajo cerca de la parte inferior del archivo HTML.Entre el cierre </aparte> etiqueta y apertura <pie de página>etiqueta, agregue un cierre </div>entonces el HTML se ve así: </aparte> </div> <pie de página> Finalmente, puede agregar este nuevo nombre de clase al estilo que creó en el Paso 2. 5.Agregue la nueva clase al selector de grupo, así: nav ul, encabezado h1, pie de página p, .contentWrapper { ancho máximo: 1200px; margen: 0 automático; } Una versión completa de este tutorial está en el13_terminadocarpeta. Capítulo 13:CONSTRUCCIÓN DE DISEÑOS BASADOS EN FLOTADORES www.it-ebooks.info 451 Tutorial: MúltipleColumna DISEÑOS Figura 13-16 Crear una multicolumna el diseño no es más difícil que las etiquetas HTML flotantes: tres columnas, tres elementos flotantes. Puede agregar más columnas simplemente agregando más contenedores HTML (<div>,<artículo>, <aparte>, y así sucesivamente) y haciéndolos flotar hacia la izquierda y hacia la derecha. Solo asegúrese de recordar ajustar sus anchos para que haya suficiente espacio para que quepan uno al lado del otro. 452 Css3: el manual perdido www.it-ebooks.info Capítulo 14 14 Diseño web adaptable W Los diseñadores de eb siempre han tenido que lidiar con el diseño para varios tamaños de pantalla, desde portátiles de 760 píxeles de ancho hasta gigantescas pantallas panorámicas. Sin embargo, el auge de los teléfonos inteligentes y las tabletas ahora lo ha hecho aún más Imprescindible diseñar para una amplia gama de anchos y alturas de pantalla. Algunas empresas van tan lejos como para crear sitios web separados solo para dispositivos móviles (vea las imágenes superiores en la Figura 14-1). Sin embargo, a menos que tenga el tiempo, el dinero y la experiencia técnica para desarrollar dos sitios y programar su servidor web para proporcionar el sitio adecuado para el dispositivo adecuado, un sitio web solo para dispositivos móviles probablemente esté fuera de su alcance. Afortunadamente, existe otro enfoque más simple que le permite crear un solo sitio que se adapta a diferentes anchos de dispositivos (vea las imágenes inferiores en la Figura 14-1). Llamadodiseño web adaptable, esta técnica utiliza varios trucos diferentes para hacer que una página cambie su diseño según el ancho de la pantalla del navegador. En un teléfono inteligente, por ejemplo, puede diseñar una página en una sola columna fácil de leer para que se ajuste al ancho angosto de la pantalla (imagen inferior izquierda en la Figura 14-1), mientras mantiene un diseño de varias columnas en un ancho más ancho. monitores (imagen inferior derecha en la Figura 14-1). 453 www.it-ebooks.info sensible diseño web Lo esencial Figura 14-1 Muchas grandes empresas, como Amazon y Target, crean versiones móviles de sus sitios, optimizadas para mostrarse en dispositivos portátiles como el iPhone (arriba). Afortunadamente, utilizando técnicas de diseño web receptivo, puede crear un archivo HTML que se muestre de manera diferente en dispositivos de diferente ancho (abajo). En un teléfono, la página puede aparecer como una columna larga, mientras que en un navegador de escritorio, la misma página aprovecha la pantalla más ancha para incluir varias columnas y fotos más grandes. Conceptos básicos del diseño web receptivo Es muy difícil leer una página web de cuatro columnas en un teléfono cuya pantalla tiene solo 320 píxeles de ancho. Es igual de difícil leer una sola columna de texto distribuida en los 2560 píxeles de un monitor de escritorio grande. El diseño web receptivo, un término acuñado por el pionero del diseño web Ethan Marcotte, es un intento de resolver ese problema. El diseño web receptivo, o RWD para abreviar, le permite cambiar el diseño completo de una página 454 Css3: el manual perdido www.it-ebooks.info según el ancho de la ventana del navegador (entre otros factores), para que pueda crear la presentación más legible para cada dispositivo, sin tener que crear varias versiones del mismo sitio web. RWD no es una sola tecnología o técnica. En cambio, reúne varios métodos CSS y HTML para crear páginas web cuyos diseños se adaptan a diferentes pantallas. NotaEthan Marcotte expone sus pasos para RWD en su libroDiseño CONFIGURAR un PÁGINA WEB PARA rwD web adaptable(un libro aparte). (No hay nada mejor que un título sencillo). También puede leer el artículo original de Ethan sobre RWD en http:// www.alistapart.com/articles/responsive-web-design. RWD combina tres ideas principales: cuadrículas flexibles para el diseño, medios flexibles para imágenes y videos, y consultas de medios CSS para crear diferentes estilos para diferentes anchos de pantalla. Con cuadrículas flexibles, se salta los diseños de ancho fijo. Dado que las pantallas de los teléfonos inteligentes vienen en una amplia variedad de anchos, no tiene sentido crear una página con un ancho fijo; en cambio, desea que la página crezca o se reduzca para adaptarse al dispositivo en particular (este es el concepto de diseño líquido que se analiza en la página 450). La creación de medios flexibles permite que sus imágenes y videos se escalen para adaptarse al espacio de pantalla adecuado... fotos grandes para monitores grandes, fotos más pequeñas para pantallas pequeñas, etc. Finalmente, las consultas de medios son una tecnología CSS que le permite enviar diferentes estilos a un navegador según las condiciones actuales. Por ejemplo, puede enviar un conjunto de estilos cuando la pantalla tiene menos de 480 píxeles de ancho y otro conjunto cuando la ventana tiene más de 760 píxeles de ancho. No solo está limitado por el ancho: puede crear estilos que solo se aplican a tabletas en vista horizontal o a dispositivos con alta densidad de píxeles (como la pantalla Retina en iPhone y iPad). Configuración de una página web para RWD Si tienes un teléfono inteligente, como un iPhone o un teléfono Android, échale un vistazo. Abra un navegador web y visitewww.nytimes.com. Deberías ver (a menos que elNew York Timesdesde entonces ha hecho que su sitio responda) algo como la Figura 14-2. Es un gran diseño de varias columnas encajado en el diminuto espacio de la pantalla del teléfono. Debido a que los fabricantes de teléfonos saben que la mayoría de los sitios web están diseñados para pantallas de escritorio, han hecho que sus navegadores se comporten de manera un poco diferente a lo que usted puede estar acostumbrado. Los navegadores móviles no solo muestran la página al 100 por ciento; si lo hicieran, entonces una página de 960 píxeles de ancho fijo no encajaría en la pantalla y solo vería una parte de la página a la vez. Luego tendría que deslizar el dedo para ver toda la página. En cambio, los navegadores de los teléfonos se alejan para ajustar la página en la pantalla. La cantidad exacta que alejan varía de un teléfono a otro. Safari en el iPhone, por ejemplo, actúa como si la pantalla tuviera realmente 980 píxeles de ancho, por lo que reduce la página para que quepa en 980 píxeles. Capítulo 14:diseño web adaptable www.it-ebooks.info 455 CONFIGURAR un PÁGINA WEB PARA rwD Figura 14-2 Sitios web diseñados para navegadores de escritorio, como elNew York Timessitio que se muestra aquí, tienden a parecerse a pequeños sellos postales en los teléfonos. Los visitantes se ven obligados a acercar y arrastrar la pantalla para leer todo. En general, este comportamiento de los navegadores móviles funciona bien para la mayoría de los sitios, pero no tan bien con un diseño web receptivo. Debido a que los sitios receptivos están diseñados para verse bien en los teléfonos, no desea que la pantalla se aleje, lo que haría que el texto fuera demasiado pequeño para leer. Afortunadamente, hay una forma sencilla de anular este comportamiento de los navegadores móviles. Simplemente agregue el siguiente código al <cabeza>sección de su página web (directamente encima de <título>la etiqueta es un buen lugar para ello): <meta name="viewport" content="width=dispositivo-ancho"> Las metaetiquetas HTML brindan información adicional sobre el contenido de la página y pueden brindar a los navegadores instrucciones adicionales sobre cómo mostrar la página. En este caso, el mirador se refiere a la pantalla del navegador, y elcontenidoEl atributo establece el ancho del navegador al ancho del teléfono. En otras palabras, en los navegadores móviles que tienden a alejarse, les está diciendo que no lo hagan, sino que simplemente hagan que el ancho de la pantalla coincida con la pantalla real del teléfono. 456 Css3: el manual perdido www.it-ebooks.info NotaAdemás de la etiqueta meta de la ventana gráfica, hay otra manera de asegurarse de que un teléfono no intente reducir su página, sino que la muestre al 100 por ciento del tamaño. El Grupo de Trabajo de CSS ha agregado una @mirador regla para CSS. Preguntas de los medios Le permite hacer todo lo que hace la etiqueta meta viewport, pero dentro de su hoja de estilo. De esta manera, puede omitir agregar el <meta>etiqueta a cada archivo HTML en su sitio, y simplemente agregue una @miradorregla a su hoja de estilo principal, así: @viewport { ancho: ancho del dispositivo; } Debe agregar esto en la parte superior de su hoja de estilo, antes que cualquier otro estilo. Desafortunadamente, en este momento, el @viewportLa regla no está disponible en todos los navegadores y requiere prefijos de proveedores para aquellos navegadores que la entiendan. Puedes aprender más sobre @miradordehttp://dev.opera.com/articles/view/an-introduction- tometa-viewport-and-viewport/yhttp://dev.w3.org/csswg/css-device-adapt/. Preguntas de los medios CSS3 incluye un concepto llamadopreguntas de los medios, que le permite asignar estilos a una página en función del ancho y el alto del navegador de destino. Con este método, puede crear estilos personalizados para teléfonos móviles, tabletas y navegadores de escritorio y, a su vez, personalizar la presentación de su sitio para que se vea mejor en cada tipo de dispositivo. El objetivo del diseño receptivo es brindar a los visitantes de su sitio la presentación más legible y atractiva posible. Esto generalmente significa personalizar el diseño para que se vea mejor en diferentes anchos de navegador. Muchos diseñadores piensan en tres pantallas de destino relacionadas con los tres dispositivos de navegación web más comunes: teléfonos inteligentes, tabletas y computadoras de escritorio. De acuerdo, hay una gran variedad de anchos para estos dispositivos... puede tener teléfonos pequeños, teléfonos grandes, tabletas de 7", tabletas de 10", etc., por lo que no hay un ancho para todos estos dispositivos. Solo tenga en cuenta que el objetivo es hacer que una página se vea bien en diferentes anchos; simplemente puede probar diferentes diseños y diferentes anchos de ventana para ver cuándo un diseño de cuatro columnas debe convertirse en un diseño de dos columnas o de una columna. Estrategias para el uso de consultas de medios Si bien recomendamos realizar pruebas y errores para determinar qué cambios debe realizar en un diseño para que se vea mejor en diferentes dispositivos, hay algunos cambios de diseño comunes que suelen ser el objetivo de las consultas de los medios: • Ajustar columnas.Varias columnas una al lado de la otra se ven muy bien en un monitor grande (e incluso en una tableta en modo horizontal), pero no tanto en un teléfono. Además, cuatro columnas probablemente sean demasiadas para la mayoría de las tabletas en modo vertical, por lo que reducir la página a 2 o 3 columnas probablemente sea una buena idea para consultas de medios dirigidas a tabletas. Evitar los flotantes en los estilos de consulta de medios orientados a dispositivos móviles le permite apilar los contenedores de contenido de una página uno encima del otro. Probarás esta técnica en el tutorial de la página 474. • Anchos flexibles.Puede usar un diseño de ancho fijo para un navegador de escritorio, así es como lo han hecho los diseñadores durante años, pero para pantallas más estrechas como las de las tabletas y los teléfonos, un diseño fijo no encajará en la ventana. Una página de 960 píxeles de ancho Capítulo 14:diseño web adaptable www.it-ebooks.info 457 es demasiado para los 320 o 480 píxeles de un teléfono. Para teléfonos y tabletas, un buen enfoque es Preguntas de los medios establecer los anchos de sus divs de contenido paraAutoo100%.Esta configuración convierte su página de un diseño de ancho fijo a un diseño líquido o flexible. En otras palabras, no importa cuán ancha sea la pantalla de un teléfono, los divs se ajustarán al 100 por ciento. Si una persona sostiene un iPhone en modo vertical (por lo que el ancho de la pantalla es de 320 píxeles) y de repente gira el teléfono horizontalmente (cambiando el ancho de la pantalla a 480 píxeles), divs se establece enAutoo100% simplemente cambie el tamaño para adaptarse al nuevo espacio. • Apriete el espacio en blanco.Un amplio espacio entre titulares, gráficos y otros elementos de la página agrega espacio para respirar a un diseño en un monitor de 23 pulgadas, pero crea un diseño disperso y desperdicia espacio en la pantalla pequeña de un teléfono, lo que obliga a los visitantes a desplazarse demasiado. ContracciónmargenyrellenoLos valores le permiten caber más en esas pantallas pequeñas. • Ajuste los tamaños de fuente.El contraste entre titulares grandes y llamativos y un cuerpo pequeño se ve muy bien en un monitor de escritorio, pero los titulares demasiado grandes desperdician espacio en la pantalla y son difíciles de leer en un dispositivo portátil. Del mismo modo, hacer que el tipo de cuerpo sea un poco más grande en los teléfonos a menudo puede facilitar la lectura. En otras palabras, preste atención a los tamaños de fuente cuando cree estilos de consulta de medios. • Cambio de menús de navegación.Es posible que tenga una barra de navegación horizontal bellamente diseñada que abarque la parte superior de su página web, con una docena de botones para llevar a los visitantes a diferentes secciones de su sitio. Desafortunadamente, a medida que la ventana del navegador se vuelve más delgada, es posible que esos botones ya no quepan en la pantalla. En cambio, se dividirán en dos, tres o más líneas en la pantalla. Verá un ejemplo de esto en el tutorial en la página 474. Puede estar bien si la barra de navegación se convierte en unas pocas líneas en lugar de una sola, o puede ocupar demasiado de la parte superior de la pantalla, obligando a los espectadores a desplácese hacia abajo solo para llegar al primer fragmento de contenido real. Desafortunadamente, no existe una solución CSS sencilla. Muchos sitios usan Java-Script para cambiar dinámicamente el menú de navegación a un menú desplegable HTML, por lo que solo ocupa un poco de espacio (para aprender cómo hacerlo, visitehttp://css- tricks.com/convert-menu-to-dropdown/). Hay otras soluciones también. Para obtener una descripción general de los diferentes enfoques que algunos sitios adoptan para este problema, leahttp://bradfrostweb.com/blog/web/responsive-nav-patterns/yhttp:// bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsivedesign/. • Ocultar contenido en dispositivos portátiles.Muchos diseñadores eliminan el contenido de las versiones móviles de los sitios. Si bien es fácil escanear varias columnas y cientos de líneas de texto en un monitor de escritorio, demasiada información en un teléfono puede ser abrumadora. Puede usar CSS para simplemente ocultar el contenido que cree que es superfluo para los usuarios móviles configurando el CSSmostrarpropiedad aninguno. Sin embargo, tenga en cuenta que cada vez que oculta contenido, está manteniendo a un visitante alejado de la información que proporciona su sitio. Esto puede ser particularmente impactante si alguien visita su sitio usando su computadora de escritorio, luego visita el sitio en su teléfono solo para encontrar la información importante que estaba buscando. 458 Css3: el manual perdido www.it-ebooks.info ahora se ha ido Además, aunque ocultas ese contenido con CSS, el HTML sigue ahí, obligando al teléfono móvil a perder tiempo y ancho de banda descargando HTML que no utiliza. • Preguntas de los medios Usa imágenes de fondo.Si coloca un banner de 960 píxeles en una página, ningún teléfono lo mostrará sin alejarse. Un enfoque es asegurarse de que sus imágenes sean lo suficientemente pequeñas como para caber dentro de la pantalla de un teléfono, o usar imágenes de fondo CSS en su lugar. Por ejemplo, puede crear un div y agregarle una clase de esta manera: <clase div="logotipo">.Luego, en la hoja de estilo para el navegador de escritorio, configure el ancho y alto del div para que coincida con el tamaño del logotipo grande, usando elimagen de fondo propiedad para insertar la imagen en el fondo. Por ejemplo: . logotipo { ancho: 960px; altura: 120px; imagen de fondo: url(images/large_logo.png) } Luego podría poner otro estilo dentro de la hoja de estilo utilizada para teléfonos móviles que cambia el tamaño de ese div y usa una imagen de fondo diferente: . logotipo { ancho: 320px; altura: 60px; imagen de fondo: url(images/small_logo.png) } En la página 472, aprenderá cómo escalar imágenes que ha insertado en el HTML usando el <imagen> etiqueta, por lo que se ajustan a diferentes anchos de navegador. NotaPuede encontrar una descripción general de las diferentes estrategias que puede usar para modificar el diseño de una página para diferentes dispositivos enwww.lukew.com/ff/entry.asp?1514. Creación de puntos de interrupción Las consultas de medios le permiten enviar diferentes estilos a los navegadores según el ancho de su pantalla. Por ejemplo, puede decirle a un navegador "Si su pantalla no tiene más de 480 píxeles, aplique estos estilos" o "Si su pantalla tiene más de 480 píxeles pero menos de 769 píxeles, entonces use estos estilos". Los diferentes valores de ancho que especifique (480, 769, etc.) a menudo se denominanpuntos de interrupciónen diseño responsivo. Básicamente, ¿a partir de qué valor comienza a descomponerse el diseño? Una manera fácil de determinar esto es tomar un diseño de escritorio completo y abrirlo en un navegador web. Tome el controlador de tamaño de la ventana del navegador y haga que la ventana sea más estrecha lentamente. En cierto punto, el diseño probablemente comenzará a verse terrible. Esas cuatro columnas, por ejemplo, se volverán muy estrechas. El punto en el que el diseño empieza a verse mal es un buen candidato para un punto de ruptura; en otras palabras, es Capítulo 14:diseño web adaptable www.it-ebooks.info 459 Preguntas de los medios un buen tamaño para definir una nueva consulta de medios y cargar algunos estilos nuevos para eliminar una columna o dos. Es común crear tres conjuntos de consultas de medios para tres puntos de interrupción diferentes: uno para teléfonos inteligentes, uno para tabletas y otro para monitores de escritorio. El punto de interrupción exacto que use variará de un diseño a otro (así como de un dispositivo a otro), pero un punto de partida común es que una pantalla de menos de 480 píxeles obtiene un conjunto de estilos, una pantalla entre 481 y 768 obtiene otro conjunto de estilos. estilos, y cualquier cosa por encima de 768 obtiene el diseño de escritorio. Sin embargo, depende de ti. Algunos diseñadores hacen que el diseño de la tableta suba a 1024 píxeles y envían estilos de escritorio a navegadores más anchos que 1024. Algunos diseñadores llegan incluso a diseñar cuatro o cinco puntos de interrupción diferentes para que sus diseños se vean mejor en una amplia gama de anchos de pantalla. Los detalles exactos sobre cómo crear estos puntos de interrupción mediante consultas de medios se encuentran en la página 461. ¿Escritorio primero o móvil primero? Otra cosa a considerar es ¿para qué dispositivo estás diseñando primero? No necesita crear tres conjuntos separados de estilos, uno para cada dispositivo de ancho al que se dirige. Puede, y debe, comenzar con unpor defectodiseño; es decir, un diseño que funciona sin media queries. Luego puede crear estilos de consulta de medios para anular los estilos predeterminados y reformatear la página para el ancho de pantalla particular. Hay dos enfoques principales: • Escritorio primero.Puede diseñar su sitio teniendo en cuenta el escritorio. Agrega todas las columnas que quieras. Pula y finalice el diseño para que se vea genial en un monitor grande. Esto se convierte en su diseño base, y puede colocar todos estos estilos en una hoja de estilo externa y vincularla a las páginas de su sitio como lo haría normalmente. Luego, agrega consultas de medios para tabletas y teléfonos. Esos estilos de consulta de medios modificarán el diseño básico del escritorio: eliminarán columnas, reducirán el tamaño del texto del título, etc. Una ventaja de este enfoque es que los navegadores que no entienden las consultas de medios obtendrán los estilos de escritorio básicos. La mayoría de los teléfonos entienden las consultas de medios, pero los navegadores de escritorio más antiguos, como Internet Explorer 8 y versiones anteriores, no. Por lo tanto, el primer enfoque de escritorio significa que IE 8 obtendrá los estilos que necesita para crear una gran presentación de escritorio. • Móvil primero.Puede darle la vuelta a ese enfoque diseñando primero para navegadores móviles. Esta vez, coloca los estilos básicos de pantalla pequeña en una hoja de estilo externa regular y luego refina el diseño para tabletas y computadoras de escritorio agregando columnas y otros ajustes para pantallas más grandes en las consultas de medios. Cualquiera que sea el método que elija, debe usar una hoja de estilo externa regular vinculada a la página web como lo haría normalmente. En esa hoja de estilo, incluya todos los estilos que son comunesal otro lado delos diferentes dispositivos. Por ejemplo, aún querrá la misma paleta de colores y las mismas fuentes en todas las versiones del sitio. También puede mantener el mismo estilo para enlaces, imágenes y otros elementos HTML consistentes. En otras palabras, no necesita crear tres conjuntos de estilos completamente separados para cada dispositivo; Comience con un conjunto que se aplique a teléfonos, tabletas y navegadores de escritorio, luego perfeccione el diseño para los dispositivos de destino de la consulta de medios. 460 Css3: el manual perdido www.it-ebooks.info Creación de consultas de medios Aconsultaes solo una pregunta que se le hace a un navegador web: "¿Tiene su pantalla 480 píxeles de Preguntas de los medios ancho?" Si la respuesta es Sí, el navegador inicia una hoja de estilo solo para ese tamaño de dispositivo (una hoja de estilo proporcionada por usted, como se explica en la página anterior). El código que hace que esto suceda se parece mucho al de cualquier hoja de estilo externa: <enlace href="css/pequeño.css" rel="hoja de estilo" media="(ancho: 480px)"> La única adición a este enlace de hoja de estilo estándar es elmedios de comunicaciónatributo, que establece las condiciones bajo las cuales un navegador utiliza una hoja en particular. En el ejemplo anterior, un navegador carga elpequeño.csshoja de estilo externa cuando alguien ve su sitio con un navegador cuyo ancho mide 480 píxeles. Los paréntesis alrededor de la consulta—(ancho: 480px)—son requeridos. Si los deja fuera, el navegador ignorará la consulta. NotaMientras que los navegadores móviles y la mayoría de los navegadores de escritorio entienden las consultas de medios, Internet Explorer 8 y versiones anteriores no lo hacen. Puede hacer que las versiones anteriores de IE entiendan sus consultas de medios agregando un poco de JavaScript al <cabeza>de su documento. Tendrás que descargar elresponder.jsarchivo dehttp://tinyurl.com/7w49a6z. Coloque el archivo en su sitio y luego vincúlelo a su página usando el <guion>etiqueta. Por ejemplo:  Esta pequeña maniobra obliga a IE 8, 7 y 6 a comprender las consultas de los medios. Debido a que 480 píxeles es muy preciso, ¿qué pasa si alguien usa un teléfono con una pantalla más pequeña, digamos uno que solo tiene 300 píxeles de ancho? Es mejor usar un rango de valores en su consulta de medios. Por ejemplo, es posible que desee aplicar un estilo particular para las pantallas que sonMenos que o igual a480 píxeles de ancho. Lo haces así: <link href="css/small.css" rel="stylesheet" media="(max-width:480px)"> La notación "(ancho máximo: 480px)"es lo mismo que decir "para pantallas que tienen como máximo 480 píxeles de ancho". Así que los estilos dentro delpequeño.cssEl archivo se aplica a pantallas de 480 píxeles de ancho, 320 píxeles de ancho y 200 píxeles de ancho, por ejemplo. Así mismo, hay unancho mínimoopción que determina si un navegador estáal menos un cierto ancho. Esto es útil cuando se dirige a un dispositivo que es más grande que un teléfono móvil o una tableta. Por ejemplo, puede escribir este enlace para aplicar estilos a pantallas más anchas que los 768 píxeles de muchas tabletas: <link href="css/large.css" rel="stylesheet" media="(min-width:769px)"> Para usar esta hoja de estilo, la ventana del navegador debe tener al menos 769 píxeles de ancho, es decir, 1 píxel más ancho que 768, el ancho de algunas tabletas. Capítulo 14:diseño web adaptable www.it-ebooks.info 461 Preguntas de los medios Y finalmente, puede establecerambosanchos máximos y anchos mínimos para dispositivos de destino que caer entreteléfonos y navegadores de escritorio. Por ejemplo, para crear un conjunto de estilos para una tableta de 768 píxeles de ancho, podría usar este código CSS: <link href="css/medium.css" rel="stylesheet" media="(min-width:481px) and (maxwidth:768px)"> En otras palabras, la pantalla del navegador debe tener al menos 481 píxeles de ancho, pero no más de 768 píxeles de ancho. Estemedio.cssEl archivo no se aplicaría a un teléfono inteligente de 320 píxeles de ancho, ni se aplicaría a un navegador de escritorio con un ancho de pantalla de 1024 píxeles. NotaLas consultas de medios CSS3 pueden hacer más que solo verificar el ancho de un navegador. El estándar de consulta de medios actual establece que puede verificar la altura, la orientación (si un visitante sostiene un teléfono móvil en modo vertical u horizontal) e incluso si un dispositivo usa una pantalla a color o monocromática. Hay algunas otras características del navegador que puede consultar con las consultas de medios, pero no todos los navegadores admiten las consultas. Puede obtener más información sobre consultas de medios en el sitio web d

CSS3 The missing manual 3th edition spanish

Related documents

Products

Support

CSS3 The missing manual 3th edition spanish

Related documents

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib