TALLER |
|
Referenciando con cualquier atributo Hasta ahora hemos visto distintos sistemas de referenciar código que cubren un amplio espectro de las posibilidades a nuestro alcance, pero aún hay más caminos, la versión de CSS3 ha conseguido aumentar las posibilidades de encontrar el elemento exacto que necesitamos, incorporando nuevas formas de referenciar los elementos HTML. Para comenzar, una de las nuevas maneras de referenciar con CSS3 es el selector de atributo. Con ello podemos referenciar no solo con los atributos id y class sino que podremos usar cualquier atributo: Imagen 1 En la imagen 1 se muestra como le indicamos al navegador que modifique solo los elementos <p> que tienen el atributo [name]. Se puede ser más específico aún sin usar lo que hemos empleado anteriormente, es decir: id y class, por ejemplo asignándole un valor al atributo [name], por ejemplo pepito: Imagen 2 La sintaxis en CSS3 permite combinar “=” con otros símbolos para hacer una selección más especifica al igual que en otros lenguajes como Javascript o PHP que usan estos selectores, así pues, en CSS3 producen resultados parecidos. Veamos cuales son: Imagen 3 Veamos de que forman afectan los distintos símbolos de la imagen 3 al código: ^= Asigna a todos los elementos <p> que contienen un atributo [name] con un valor que comience por “pepito” como por ejemplo “pepitoart1”. $= Asigna a todos los elementos <p> que contienen un atributo [name] con un valor que sea terminado por “pepito” como por ejemplo “art1pepito” *= Asigna a todos los elementos <p> que contienen un atributo [name] con un valor que incluya el valor “pepito” como por ejemplo “artpepito1”. IMPORTANTE: Debemos resaltar que aunque usemos <p> y a su vez, como atributo [name] el valor pepito, con estas técnicas podemos utilizar cualquier atributo y valor que necesitemos, solo deberemos aplicar bien la sintaxis. Referenciación con pseudo clases Desde la implantación de CSS3 se han añadido a las versiones anteriores nuevas pseudo clases que hacen que nuestras selecciones lleguen a ser más específicas que nunca. Imagen 4 Observemos la imagen 4, si nos fijamos en el código HTML que esta resaltado en gris, veremos que este contiene 5 bloques de texto delimitados con las etiquetas <p> y </p>. Analizando bien el documento, podemos decir que son hermanos entre sí e hijos del elemento <div>. Con las nuevas pseudo clases podemos aprovechar la estructura que le hemos dado al texto para referenciar elementos de manera específica sin importar sus atributos ni sus valores, como vamos a poder ver a continuación. Imagen 5 En la imagen 5 observamos como la pseudo clase es agregada usando los dos puntos después de la referencia p que a su vez, hace referencia al elemento <p> que con la pseudo clase nth-child() nos permitirá referenciar a un hijo especifico (child), por ejemplo en la imagen 4 con el código de la imagen 5. -¿A qué etiqueta p estaríamos haciendo referencia? Si has pensado en la segunda comenzando desde arriba has acertado, el número de dentro del paréntesis hace referencia a la posición de la etiquetas p que son hermanas entre sí, comenzando de arriba hacia abajo serían1, 2…,5. En la imagen 6 tendríamos una muestra de cómo se vería afectada y el resultado del atributo background-color y ver el color #f5b7b1, el cual está en hexadecimal, si tenéis alguna duda con algún color hay numerosas páginas que os pueden ayudar en esta tarea de conversión. Imagen 6 La pseudo clase nth-child() dice algo así como “el hijo en la posición ()”. Entendiendo lo que significa es fácil intuir que se puede asignar estilos a cuantos hijos de <div> queramos, veamos pues, otro ejemplo de su uso… Imagen 7. Podemos observar el código y ver que la en primera regla usamos un selector universal * con el cual asignaremos a todos los elementos del cuerpo, ciertas reglas generales. Como en este caso, el cual asignamos un margen de 2px a todos los elementos, aunque después al usar un selector más especifico tendría preferencia. De todos los selectores que podríamos utilizar este sería el menos específico. También podemos observar como asignamos valores a los hijos de <div> que están en las posiciones 1, 2, 3, 4, 5. Imagen 8, aquí tendríamos una muestra práctica de cómo nos lo mostraría el navegador. Recordemos que entre la imagen 6 y la 8 el código HTML5 no se ha modificado. En la imagen 4 lo único que se ha modificado es el archivo de estilos. Si en nuestra página aún tuviéramos más elementos <p> y añadiéramos nuevas reglas con las pseudo clase nth-child() usando su número adecuado (como dijimos antes, según su posición) solucionaríamos el referenciar los nuevos elementos, pero de esta forma generaríamos mucho código y resultaría complicado de aplicar en sitios web de contenido dinámico. Así que tenemos otra opción para conseguir lo mismo con menos código, usando las palabras clave odd y even las cuales podemos utilizar con estas pseudo clases. Imagen 9 odd - even Veamos qué función tiene estas dos nuevas palabras: En primer lugar tendríamos odd, que usada con la pseudo clase nth-child() afectando a los elementos p, pero de posición impar (odd – impar; even – par) y con even sería lo mismo pero al revés solo afectaría a los pares. Veamos el resultado: Imagen 10 Sería lo mismo, bueno casi, porque en la primera regla usamos * y esta vez pusimos un margen para todos los elementos de la página de 0px. Pero lo que más nos interesa es el código de la pseudo clase, con odd y even hemos conseguido lo mismo pero con la mitad de código que en la imagen 17. A parte de estas pseudo clases existen otras relacionadas con las últimas que hemos visto, como son: first-child, last-child y only-child. Entonces ¿qué función realmente tiene first-child? Pues esta haría referencia al primer hijo y last-child referenciaría al último y only-child se usaría para referenciar al hijo cuando solo tuviera uno. Imagen 11 Imagen 12 :not() Antes vimos el selector universal * y de qué manera funcionaba, not() a diferencia de * nos permite realizar una negación, seamos más claros: realizar una excepción. Por lo tanto al usar la pseudo clase not() la regla afectará a todos los elementos que no coloquemos entre los paréntesis. Imagen 13 :checked Selecciona elementos que están marcados, tipos, checkboxes. :empty Serviría para seleccionar elementos vacios. Selectores adicionales >, + y ~ Imagen 14 El selector > indica que el elemento de la izquierda del signo es el padre del elemento de la derecha y que este debe afectarle la regla, en la imagen 14 indicamos que la regla afecta a los elementos <p> que son hijos de <div>, que a su vez a su vez ha sido referenciado con el atributo class con el valor pie4. Imagen 15. Aquí podemos ver cómo interpreta el código de la imagen 14 nuestro navegador Imagen 16 El selector + referencia al elemento de su derecha cuando es precedido por el elemento que está a la izquierda, cuando estos son hermanos. El elemento <p> referenciado con el atributo class con el valor pie4, en la imagen 14 es el que indica “Esta obra está bajo una licencia de Creative Commons”, si nos fijamos en el código HTML de la imagen 4, que es el que estamos modificando, veremos que el siguiente elemento <p> es “Síguenos en:” por lo tanto este será el que modifique la regla de la imagen 16, como podemos observar en la imagen 17. Imagen 17 Imagen 18 El selector ~ referencia al elemento de su derecha, pero en esta ocasión no necesita que vaya precedido por el elemento que esta a la izquierda, además como observamos en la imagen 19, puede afectar a más de un elemento <p>, ademas sin importar que tenga elementos intercalados (siempre que sean hermanos). Imagen 19 Vamos a darle forma Ahora que ya hemos repasado los selectores por encima y ya tenemos nociones de cómo emplearlos, vamos a darle ya forma a la estructura que es lo que más estamos todos esperando, este curso no va de crear los mejores programadores del mundo aunque no estaría mal, pero aunque no lo “captéis” todo, que os permita seguir aprendiendo con una base que os capacite para comprender y discernir los contenidos útiles de los no tan útiles. Al principio del artículo anterior, vimos lo que eran los modelos de cajas y su importancia a la hora de la representación gráfica de nuestra página. Continuando, como hasta ahora, con los conceptos básicos CSS, vamos a usar el modelo de caja tradicional, el cual nos acompaña desde la primera versión de CSS lo que conlleva, que ya haya podido ser implementado en todos los navegadores actuales, convirtiéndolo en un estándar a la hora de diseñar páginas web. Existen más modelos de caja, aparte del modelo de caja tradicional, incluso modelos en fase experimental. Todos los modelos se pueden aplicar a una misma estructura HTML, solo tenemos que preparar esta estructura para que le afecten los estilos de la forma que queramos. Con todo lo dicho no debemos olvidar que cuando en el futuro escojamos un modelo de caja distinto, nuestro código HTML deberá ser adaptado al modelo de caja escogido. Modelo de caja tradicional Primero un poco de historia… conforme las páginas web fueron evolucionando las necesidades en su estructuración aumentaron, y las tablas se convirtieron y digo convirtieron porque inicialmente no eran su cometido, en la herramienta ideal utilizada por todos los desarrolladores para la creación y organización de las cajas de contenidos, en nuestras pantallas. Por lo que se podría decir que este sería el primer modelo de caja usado en la web. Así dichas tablas se empleaban expandiendo las celdas y realizando combinaciones de filas de celdas, columnas de celdas y claro, tablas enteras, colocando unas sobre otras o inclusive anidadas, pero conforme los sitios web fueron evolucionando a una complejidad, mayor estas prácticas comenzaron a convertirse en un problema, al aumentar el tamaño y dificultar el mantenimiento del código necesario para desarrollarlos. Todo lo anterior desemboco poco a poco en una determinada práctica, la cual hoy vemos como normal, hablamos de la separación de lo que sería la estructura de la presentación. Esto fue posible gracias a las etiquetas <div> y los estilos CSS reemplazando la función de las tablas y separando realmente la estructura de HTML de lo que sería la representación en nuestra pantalla. Gracias a los elementos <div> y CSS podemos crear cajas, las cuales podremos posicionar donde queramos, pudiendo elegir su tamaño, color y muchas más características que queramos que se plasmen en nuestras pantallas haciendo más agradable la interacción. El propio CSS tiene propiedades específicas para facilitarnos la labor de crear y organizar estas cajas conforme a nuestra imaginación. Con estas propiedades, las cuales son lo suficientemente potentes como para ofrecernos la creación del modelo de caja tradicional, un modelo que a pesar de tener, ciertas deficiencias, mantuvieron a las tablas vivas algo más de tiempo, hasta que los desarrolladores obligados a implementar nuevas tecnologías como Ajax y numerosas aplicaciones interactivas, volvieron a las etiquetas <div> y los estilos CSS se terminaron de convertir en el estándar que hoy conocemos e instauraron el modelo de caja tradicional de forma generalizada. Nuestra práctica Hasta ahora llevamos construida una plantilla de HTML5, en esta plantilla vamos a agregar cierto código para poder aplicar estilos CSS y el modelo de caja tradicional. Imagen 20 Como podemos ver en la imagen 20 hemos añadido el atributo “id” a las etiquetas estructurales: <header>, <nav>, <section>, <aside> y <footer>. Para identificarlas y aplicar los estilos en nuestro archivo “estilosdenegocioscontra.css”. Mirando detenidamente el código, nos damos cuenta que también añadimos el elemento <div>, con el que identificaremos con el atributo y valor id=”estructura”, y que será cerrado al final del cuerpo (<body>) como vemos en la imagen 20, con la etiqueta </div>. Con este sistema, hemos agrupado todos los elementos estructurales permitiéndonos aplicar cambios que queramos fácilmente. Los márgenes Al comenzar a diseñar nuestra hoja de estilos hay ciertos detalles, que sino los dejamos previstos a lo largo del documento nos puede provocar a la larga crear muchas líneas de código innecesarias. Este es por ejemplo el caso de los márgenes en un documento, los márgenes entre elementos es algo que en la mayoría de los diseños, se juntan unos elementos con otros necesitando normalmente márgenes (margin) a 0 pixeles. Los elementos por defecto, cada uno pueden tener márgenes distintos asignados y suelen ser diferentes a su vez de los que realmente queremos. Por esta razón una buena solución es la de asignar un mismo margen a todos los elementos del documento, ¿Y cómo hacemos eso? -Muy fácil… Recordad que se usa el selector universal * para evitar tener que repetir estilos puesto que afecta a todos los elementos, por ejemplo, usándolo como primera regla en el futuro, como en la imagen 21 donde solo tendremos que modificar los márgenes distintos de 0 pixeles. Imagen 21 Las cabeceras Los estilos por defecto en las cabeceras y demás etiquetas rara vez coinciden con lo que querríamos mostrar, además con HTML5, en las etiquetas <hn> podemos crear una jerarquía distinta por secciones como vimos en artículos anteriores. El elemento <h1> por ejemplo, es el que se usaría para el título principal en la página, pero en cada artículo delimitado por las etiquetas <article> y </article> el elemento <h1> podríamos volver a usarlo para el título del artículo, aunque queramos que su tamaño sea inferior al del título general de la página. Esto lo haremos dándole los estilos adecuados. Imagen 22
Por ejemplo: font Esta propiedad actuando sobre <hn>, nos permitirá declarar todos los estilos en una línea. Las distintas propiedades que se pueden declarar usando font serían:
Con esto acabamos el presente artículo, hemos comenzado a preparar nuestra hoja de estilos para organizar de forma visual los elementos estructurales de HTML5 que vimos al principio y aunque ya hemos empezado su creación, terminarla alargaría ya demasiado el presente artículo, así que nos despedimos hasta la semana que viene en el que ya le daremos un estilo visual correcto. Manuel Castelló (kasmangou) Temas relacionados: Programación, Redacción independiente, kasmangou Reconocimientos y más información sobre la obra gráfica ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.
0 Comentarios
Deja una respuesta. |