Cómo Se Define La Presentación de Una Página Web [PDF]

Zitiervorschau

CURSO DE INTRODUCCIÓN AL DESARROLLO WEB: HTML  Y CSS (2/2): MÓDULO ¼

Cómo se define la presentación de una página web 1. CSS: conceptos básicos En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a ayudar con tus primeros pasos con CSS, las hojas de estilo en cascada. Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo y dos formas de contactar conmigo a través de mi correo electrónico [email protected] y a través de mi cuenta en Twitter @sergiolujanmora. Gracias a vídeos anteriores, ya sabrás escribir y leer el código HTML, que se emplea para crear las páginas web. Recuerda que, con HTML, solo definimos la estructura y el contenido de las páginas web. Ahora queremos lograr que las páginas web tengan la presentación visual que nosotros queramos, es decir, que las páginas web se muestren con los colores, los tamaños y tipos de letra, los bordes y los fondos, que nosotros deseamos. Para lograr que una página web en vez de verse así, se vea de esa otra forma o que, en vez de verse así, se vea con esta otra presentación, es necesario utilizar una tecnología adicional. Esa tecnología es CSS, Cascading Style Sheets, las hojas de estilo en cascada. Existen diferentes versiones de CSS, que no se llaman versiones, sino niveles. Cada nivel de CSS se construye sobre el anterior, añadiendo funciones al nivel previo. Yo te aconsejo que te centres en aprender CSS 2.1, ya que es el que aceptan la mayoría de los navegadores actuales. CSS3 incorpora novedades muy interesantes, pero en la actualidad, está en desarrollo y no todos los navegadores lo aceptan. CSS es un lenguaje muy sencillo que se compone de reglas. Cada regla está formada por uno o más selectores y una declaración formada por un bloque de estilos, que define los estilos a aplicar para los elementos del documento que cumplan con el selector. En este ejemplo el selector, es el elemento de HTML, h1, por lo que esta regla se aplicará a todos los encabezados de nivel 1 de la página web. Cada declaración de estilos se define entre llaves y está formada por parejas, propiedad, valor. Desde que el lenguaje de CSS se lanzó en el año 1996, el número de propiedades que posee ha ido aumentando y aumentando y en la actualidad en la versión CSS3, está formado por casi 200 propiedades. Al igual que pasa con el lenguaje HTML, el lenguaje CSS también está desarrollado por el World Wide Web Consortium, el W3C, el organismo internacional que vela por el correcto desarrollo de la web. En la página del W3C puedes encontrar mucha información sobre CSS, pero para empezar no te lo recomiendo, porque te puede abrumar y asustar, ya que es un sitio web dirigido a profesionales y expertos, no para principiantes. En el sitio web del W3C, puedes consultar la especificación oficial del CSS, pero para empezar a aprender lo encontrarás muy difícil. Yo te aconsejo que utilices, como en otras ocasiones el w3schools, por un lado, tienes el tutorial sobre CSS y, por otro lado, tienes la guía de referencia en la que encontrarás todas las propiedades de CSS, agrupadas en diferentes grupos, como, por ejemplo, background, border and outline, color, font o margin. Además, también te recomiendo, que consultes el artículo dedicado al lenguaje CSS, que puedes encontrar en la Wikipedia y también te recomiendo, que leas el CSS training, un curso de aprendizaje de CSS, preparado por el W3C, que organiza el aprendizaje en cuatro semanas, empezando por los selectores en la semana 1 y acabando con temas avanzados en la semana 4.  OCULTAR

Aspectos clave En el vídeo CSS: conceptos básicos se explica qué es CSS, las versiones que existen de CSS y el esquema de una regla de CSS.

Comprueba tus conocimientos Ángel trabaja desarrollando webs en HTML. Hasta ahora solo trabajaba en la definición de las estructuras y contenidos de las páginas web, pero para avanzar en su carrera, quiere complementar su formación aprendiendo a utilizar la tecnología CSS. Ayuda a Ángel indicándole cuáles son los elementos que componen una regla de CSS y en qué orden se escriben. Haz clic con el ratón y mantenlo pulsado para arrastrar los elementos hasta colocarlos en el orden correcto. A continuación, haz clic en ENVIAR.

1. 2. 3. 4.

Separador : (3) Valor (4) Selector (1) Propiedad(2)

LECCIÓN COMPLETA

¡Enhorabuena, has completado la actividad! Con HTML solo se define la estructura y el contenido de las páginas web. Para lograr que las páginas web tengan la presentación visual que nosotros queramos, es decir, colores, tipo y tamaños de letra, etc., es necesario utilizar una tecnología adicional. Esa tecnología es CSS, Cascading Style Sheets. CSS es un lenguaje que se compone de reglas. Cada regla está formada por uno o más selectores, y una declaración formada por un bloque de estilos que define los estilos a aplicar para los elementos del documento que cumplan con el selector. Cada declaración de estilos se define entre llaves y está formada por parejas Propiedad, Valor. Las parejas se presentan de la forma Propiedad: Valor.

2. CSS: cómo se usa en HTML (parte 1) En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a ayudar con tus primeros pasos con CSS, las hojas de estilo en cascada. En este vídeo, formado por tres partes, te voy a explicar cómo se usa CSS en HTML. Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo y dos formas de contactar conmigo a través de mi correo electrónico [email protected] y a través de mi cuenta en twitter @sergiolujanmora. CSS, Cascading Style Sheets, las hojas de estilo en cascada, es la tecnología que se emplea para definir la presentación visual de las páginas web. Antes de ver cómo se usa CSS en una página web, vamos a aprender un término muy importante en los sistemas informáticos, el acoplamiento, un factor que incide en la calidad de los sistemas informáticos. Según la Wikipedia, el acoplamiento informático indica el nivel de dependencia entre las unidades de software de un sistema informático, es decir, el grado en que una unidad puede funcionar sin recurrir a otras. Dos funciones son absolutamente independientes entre sí, el nivel más bajo de acoplamiento, cuando una puede hacer su trabajo completamente sin recurrir a la otra. En este caso, se dice que ambas están desacopladas. Evidentemente, lo mejor sería un desacoplamiento total, es decir, que no hubiese ninguna dependencia entre las partes que constituyen un sistema informático, pero esa situación es más bien imposible de lograr. Por lo tanto, al

final, lo que se intenta lograr es reducir el acoplamiento al mínimo posible. Cuanto menos dependientes sean las partes que constituyen un sistema informático, mejor será el resultado final. Cuando usamos CSS para definir la presentación de una página web escrita en HTML, se crea un acoplamiento entre HTML y CSS. Como acabamos de ver, debemos de intentar reducir este acoplamiento entre estas dos tecnologías. En HTML se puede indicar que queremos aplicar unas reglas CSS de tres formas. Mediante el atributo style, mediante la etiqueta style y mediante la etiqueta link. En este vídeo vamos a ver el uso del atributo style, que es la peor opción, ya que lleva aparejado un acoplamiento máximo entre HTML y CSS, como veremos a continuación con un ejemplo. El atributo style, es uno de los pocos atributos de HTML, que se puede aplicar a casi cualquier elemento de HTML. En HTML 4.01 y XHTML 1.0, el atributo style se puede aplicar a casi todos los elementos o etiquetas, excepto base, basefont, head, html, meta, param, script, style y title. Sin embargo, en HTML5 se ha cambiado y ahora se indica que todos los elementos pueden tener el atributo style. A continuación, te voy a mostrar cómo utilizar este atributo, pero antes, vamos a ver las propiedades de CSS que voy a utilizar. Voy a utilizar color, para definir el color del texto, background-color, para definir el color de fondo del texto, font-family, para definir el tipo de letra o fuente y font-size, para definir el tamaño del texto. Esta es la página web que voy a usar como base para enseñarte a utilizar el atributo style. Vamos a ver primero, cómo se visualiza esta página web en un navegador, en Google Chrome, este es el aspecto que tiene la página cuando se visualiza sin CSS. Ahora voy a empezar a añadirle propiedades visuales con el atributo style. En primer lugar, me voy a la etiqueta body, ya que al cambiar el color del texto y el color del fondo de la etiqueta o elemento body, voy a cambiar todo el color del fondo y todo el color de la página. Así que, le añado el atributo style y primero voy a cambiar el color del texto, le voy a indicar este color #333 y, a continuación, voy a cambiar el color del fondo y le voy a poner el color CCC. La forma de indicar los colores, la tienes explicada en otro vídeo, donde se explican las distintas formas que existen en CSS para indicar un color. Fíjate que estas dos propiedades de CSS, color y background-color, la ha separado con un punto y coma y al final de la última propiedad también le ha puesto un punto y coma. Este punto y coma no es obligatorio, pero es una buena costumbre ponerlo, ya que, ahora, rápidamente, podría añadir otra propiedad de CSS y no me tendría que preocupar en ver si tengo que poner o no poner el punto y coma. Si me acostumbro a ponerlo siempre, podré añadir una nueva propiedad rápidamente. Bien, hemos cambiado el color del texto, le hemos puesto 333, que es un gris muy oscuro, cercano al negro y el color del fondo de la página, le he puesto CCC, que es un gris claro, no muy claro. Vamos a guardar la página y la visualizamos en Google Chrome y podemos ver el resultado, vemos como el color del texto ahora no es un negro completo, sino negro un poco apagado, porque es un gris oscuro, y el color del fondo ha cambiado a gris. Vamos a añadir más propiedades. Ahora voy a cambiar los encabezados, etiqueta h1 y h2. Primero me voy a la etiqueta h1, le añado el atributo style y voy a cambiar lo siguiente: Primero voy a cambiar el tipo de letra o fuente y le voy a poner Georgia. Y también, le voy a cambiar el tamaño del texto y le voy a poner 3 em, 3em, que indica que quiero que el h1 tenga un tamaño de del texto tres veces el tamaño base actual. Voy a copiar esta propiedad, esta propiedad de style, porque en el h2, la voy a reutilizar. Voy a usar el mismo tipo de letra Georgia, Georgia, pero ahora voy a indicar un tamaño del texto 2 em, el doble. Y ahora copio esta propiedad y la aplico al otro h2, lo guardo, lo ejecutó otra vez en Chrome y vemos el resultado. Vemos que ha aumentado el tamaño de los encabezados del h1, del h2 y, además, ha cambiado su tipo de letra, su fuente. Si lo comparo con la visualización anterior, podemos ver que el cambio es evidente. Vuelvo al código HTML y ahora lo que voy a cambiar son los párrafos y lo que voy a indicar, es que, en mis párrafos de texto, quiero usar un tipo de letra Arial y, por si no está disponible el tipo de letra Arial, indicó un segundo tipo de letra Helvética y finalmente, un tipo de letra Sans Serif, que es un tipo de letra genérico. Indica la familia de tipos de letra Sans Serif. Voy a copiar ahora, este atributo style, para aplicárselo a los otros párrafos de texto que hay en mi página web. Lo guardo, lo visualizo otra vez en Google Chrome y podemos ver el cambio, como ahora el tipo de letra de mis párrafos es Arial, si lo comparo con la versión anterior, vemos que hay un cambio significativo.

Así de fácil, es usar el atributo style para indicar las propiedades de un elemento o etiqueta de una página web, pero vemos que hay un problema importante. El problema importante, sobre todo lo hemos visto aquí en el párrafo que me ha tocado copiar una, dos, tres, cuatro veces, la misma propiedad style, porque quería aplicar las mismas propiedades visuales a mis cuatro párrafos de texto. ¿Qué ocurre si ahora añado más párrafos de texto? Tendré que volver a copiar esta propiedad style a cada uno de los párrafos de texto, y ¿qué ocurre si yo ahora quiero cambiar y, por ejemplo, ponerle un tipo de letra distinto? Pues tendría que ir párrafo a párrafo cambiándolo. Vemos que hay un alto acoplamiento entre el CSS y el HTML, ¿esto lo podemos resolver?, ¿podemos reducir el acoplamiento? Sí, eso lo veremos en el siguiente vídeo, donde te explicaré cómo usar la etiqueta style para indicar los estilos de una página. No te confundas, aquí estamos viendo el uso del atributo style y en el siguiente vídeo te voy a explicar el uso de la etiqueta style. Atributo, etiqueta, son dos cosas distintas.  OCULTAR

Aspectos clave Debes ver el vídeo CSS: cómo se usa en HTML (parte 1) en el que se explica el acoplamiento en un sistema informático, las tres formas de usar CSS en HTML, el atributo style y se muestra una demostración de uso en una página web.

Comprueba tus conocimientos Claudia está desarrollando su propia página web para su tienda de venta de electrodomésticos, siguiendo un manual de HTML y CSS. Su amigo Andrés, que le está ayudando, le ha comentado que hay varias formas de aplicar reglas CSS en HTML, pero que tiene que intentar que el acoplamiento sea el mínimo. Selecciona, de entre las siguientes opciones, la que Claudia no debería utilizar a la hora de aplicar CSS a su web HTML. Elige la imagen correcta y haz clic en ENVIAR.

1.

La etiqueta .

2. El atributo style.

3. La etiqueta .

Pagina base para utilizar el atributo style

Se le coloca el atributo para cambiar el color

asi se ve la pag.

asi se ve la pag con el fondo gris

3. CSS: cómo se usa en HTML (parte 2) En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a ayudar con tus primeros pasos con CSS, las hojas de estilo en cascada. En esta segunda parte del vídeo, CSS cómo se usa en HTML, te voy a explicar cómo se usa la etiqueta style para definir los estilos de una página web, Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo y dos formas de contactar conmigo a través de mi correo electrónico [email protected] y a través de mi cuenta en twitter @sergiolujanmora. En el vídeo anterior vimos el uso del atributo style para definir los estilos de los elementos de una página web. En este vídeo vamos a ver el uso de la etiqueta style.

Al usar la etiqueta style reducimos un poco el acoplamiento que existe entre HTML y CSS. Es mucho mejor que usar el atributo style, pero no es la mejor solución, porque el código CSS sigue estando en el mismo fichero que el código HTML. La etiqueta style la debemos escribir en el head de la página web. En las versiones antiguas de HTML, era necesario incluir el atributo type y la etiqueta style, para indicar el tipo de lenguaje de estilos que se usaba. La idea era permitir el uso de distintos lenguajes de estilo, pero al final solo quedó uno, CSS. Por ello, en HTML5 se ha simplificado y podemos escribir la etiqueta style sin el atributo type, ya que tiene definido como valor por defecto, CSS. A continuación, te voy a mostrar cómo utilizar este atributo, pero antes vamos a ver las propiedades de CSS que voy a utilizar. Voy a utilizar color para definir el color del texto; background-color, para definir el color de fondo del texto; font-family, para definir el tipo de letra o fuente y font-size para definir el tamaño del texto. Esta es la página web que voy a usar como base para mostrarte el uso de la etiqueta style. Vamos a ver primero, cómo se visualiza en el navegador Google Chrome. Este es el aspecto que tiene esta página web. Ahora volvemos al código fuente, al código HTML y voy a añadir en el head de la página, la etiqueta o elemento style. Como estoy haciendo la página web con HTML5, no le pongo el atributo type, no es necesario, aunque sí quiero, se lo puedo indicar, type, text, barra, css. Este es el tipo mime, que identifica los ficheros de tipo CSS. La etiqueta style la tengo que escribir el head, pero la podría haber puesto detrás del title, como la he puesto o la podría poner delante. Siempre que esté en el head, puede estar en cualquier parte. Yo le voy a indicar mi primera regla de CSS. Mi primera regla, es para modificar el color del fondo de la página y el color del texto, es decir, quiero modificar la etiqueta body. Así que tengo que indicar body, y entre llaves, escribiré la regla de CSS, que voy a poner background-color y voy a indicar este gris y el color del texto, le pongo este otro gris, que es un poco más oscuro. Grabo la página y la visualizo en Google Chrome y compruebo que, efectivamente, me aparece con el color del fondo gris y con el color del texto un gris muy oscuro, cercano al negro. Vuelvo al código fuente y voy a añadir otra regla de CSS. En este caso lo que voy a cambiar es el tipo de letra de mis encabezados, de h1y h2, y voy a usar esta sintaxis de CSS, que me permite agrupar varios elementos y aplicarles la misma regla de CSS. Cuando escribo h1, h2, significa que la regla de CSS que voy a escribir a continuación, se la quiero aplicar a estos dos tipos de elementos o etiquetas. Y lo que voy a indicar es el tipo de letra de letra, la fuente, Font-family y le pongo Georgia, Georgia. A continuación, voy a cambiar el tamaño del texto de h1 y le pongo font-size 3 em, tres veces el tamaño base y h2 le pongo el tamaño Font-size 2 em, dos veces el tamaño base. Lo comprobamos en Google Chrome y podemos ver cómo, efectivamente, ha cambiado el tipo de letra de los encabezados, es distinto y, efectivamente, también ha aumentado el tamaño de los encabezados del h1 y del h2, ha cambiado su tamaño. Vuelvo al código fuente de mi página web y voy a realizar el último cambio, que es, a los párrafos de texto le voy a aplicar otro tipo de letra, font-family, y le pongo una lista de tipos de letra, Arial, Helvética y, por último, el tipo genérico, Sans Serif. Lo guardo, lo ejecutó, lo visualizo en Google Chrome y comprobamos, si comparamos con la versión anterior, aquí el tipo de letra, el que se usa por defecto, es Times New Roman y aquí, vemos que ahora el texto aparece con el tipo de letra Arial. Como vemos, hemos separado ahora el código CSS, lo hemos separado del código HTML. Antes, con el atributo style, el código CSS, las propiedades de CSS, estaban escritas junto con el código HTML. Ahora, aunque esté en el mismo fichero, lo hemos podido separar. Hemos reducido el acoplamiento entre el código HTML y el código CSS. Y además fijaos, que hemos obtenido una ventaja adicional, antes, para los distintos párrafos que tenía mi página web, debía de copiar el atributo style en cada una de ellas. Ahora simplemente, escribo la regla una vez y ya se va a aplicar, con este selector p, se aplicará a todos los párrafos de mi página web. Si ahora quiero cambiar el tipo de letra y que afecte a todos mis párrafos, no tengo que ir uno a uno, como ocurría antes con el atributo style. Ahora simplemente, vengo aquí, a esta regla de CSS y, al cambiar aquí el valor del tipo de letra, se cambiará en todos los párrafos de mi página web. En el próximo vídeo veremos cómo podemos usar la etiqueta link para reducir, aún más, el acoplamiento entre el código HTML y el código CSS. La etiqueta link es la solución que debes de usar en todas tus páginas web.  OCULTAR

Aspectos clave En el siguiente vídeo, CSS: cómo se usa en HTML (parte 2), se explica la etiqueta style y se muestra una demostración de uso en una página web.

Comprueba tus conocimientos Julia está impartiendo un curso sobre los usos y herramientas de HTML. Los nuevos usos de las etiquetas han permitido reducir el acoplamiento que existe entre HTML y CSS, además de facilitar herramientas de cambio para los contenidos de las páginas web. Aparte de reducir el acoplamiento que existe entre HTML y CSS, teniendo en cuenta la etiqueta style (que es la que marca el estilo de la página web): ¿qué otras cosas que pueden ayudarnos crees nos dirá Julia sobre los nuevos usos a la hora de diseñar nuestra página web? Selecciona la opción o las opciones correctas y haz clic en ENVIAR.

1. Cambiar el color de letra.

2. Cambiar el tamaño de letra.

3.

Cambiar el color de fondo.

4. Cambiar de idioma.

4. CSS: cómo se usa en HTML (parte 3) En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a ayudar con tus primeros pasos con CSS, las hojas de estilo en cascada. En esta tercera parte del vídeo, CSS cómo se usa en HTML, te voy a explicar cómo se usa la etiqueta link para definir los estilos de una página web. Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo y dos formas de contactar conmigo a través de mi correo electrónico [email protected] y a través de mi cuenta en twitter @sergiolujanmora. En el vídeo anterior vimos el uso del atributo style y de la etiqueta style para definir los estilos de los elementos de una página web. En este vídeo vamos a ver el uso de la etiqueta link. Al usar la etiqueta link, reducimos el acoplamiento que existe entre HTML y CSS al máximo, ya que el código HTML y CSS no se encuentran en el mismo fichero, sino que los almacenamos en ficheros distintos. Además, al estar el código CSS en un fichero separado, podemos hacer que diferentes páginas web, diferentes ficheros HTML, utilicen el mismo fichero CSS. La etiqueta link, la debemos escribir en el head, de la página web. En las versiones antiguas de HTML, era necesario incluir el atributo type en la etiqueta link para indicar el tipo de lenguaje de estilos que se usaba. La idea era permitir el uso de distintos lenguajes de estilo, pero al final solo quedó uno, CSS. Por ello, en HTML5 se ha simplificado y podemos escribir la etiqueta link sin el atributo type, ya que tiene definido como valor por defecto CSS, además, la etiqueta link debe llevar el atributo href, en el que se indica la ruta al fichero que contiene la hoja de estilo y el atributo rel stylesheet, que indica que es una hoja de estilo. La etiqueta link también puede incluir otros atributos como media o title, pero no lo vamos a ver en este vídeo. A continuación, te voy a mostrar cómo utilizar esta etiqueta, pero antes vamos a ver las propiedades de CSS que voy a utilizar. Voy a utilizar color, para definir el color del texto, background-color, para definir el color de fondo del texto, font-family, para definir el tipo de letra, la fuente, y font-size, para definir el tamaño del texto. Partimos del ejemplo que hicimos en el vídeo anterior, en el que explicaba el uso de la etiqueta style. En este ejemplo teníamos esta página web sencilla y en el código HTML añadíamos la etiqueta style para incluir la hoja de estilo en cascada, las propiedades para definir la presentación visual.

Lo que vamos a hacer, en este vídeo, es transformar esto en un fichero externo, vamos a almacenar la hoja de estilo en un fichero aparte. Así que primero, lo que hago es, cortar este código, creo un fichero nuevo y pego el código CSS. En el fichero CSS que vamos a almacenar de forma separada, no necesito la etiqueta style, porque este fichero CSS va a ser exclusivo de CSS. Lo almaceno en el mismo directorio donde tengo almacenado el código HTML y, por ejemplo, lo voy a llamar miestilo.css. fijaos como para almacenarlo con la extensión .css, el editor, Notepad++, me detecta la sintaxis del lenguaje y me lo colorea. Ahora vuelvo al fichero HTML y donde antes tenía la etiqueta style, añado la etiqueta link, primero le pongo el atributo href y pongo la ruta de acceso al fichero CSS, como esta en el mismo directorio no hace falta que ponga una ruta, simplemente pongo el nombre del fichero, miestilo.css. A continuación, voy a poner el atributo rel stylesheet y el atributo type, que he indicado en el vídeo, que sí estamos trabajando en HTML5, como es en este ejemplo, no hace falta que lo pongamos, pero lo podemos poner si queremos, text barra css y cierro la etiqueta, lo guardo y, ahora mismo, tengo dos ficheros el fichero HTML y el fichero CSS. Con esta estrategia logro reducir el acoplamiento al máximo, por supuesto, no podemos hacer que haya un total desacoplamiento, tiene que haber algún punto de conexión entre el código HTML y el código CSS y, ese punto de conexión, lo hemos reducido a la mínima expresión, a esta etiqueta link. Vamos a probar esta página. Me voy al menú ejecutar, launch in Chrome y vemos que, efectivamente, aparece la página web con los estilos que habíamos definido previamente. Para convencernos de que realmente se está cargando esta hoja de estilos, vamos a hacer un cambio, por ejemplo, voy a cambiar el color de fondo y lo voy a poner a rojo, f 00. Almaceno el fichero CSS, me vuelvo al navegador y recargo la página y, efectivamente, ha cambiado el color al rojo. Por tanto, sí que esta página HTML está interpretando correctamente esta etiqueta link y está cargando el CSS que tenemos en un fichero aparte. Ahora, yo podría hacer 5, 10, 50 o 1000 páginas y todas podrían usar el mismo CSS, lo único que tendría que hacer es, en cada una de mis páginas, poner la etiqueta link, que cargue el mismo fichero CSS y si quiero hacer un cambio en todas las páginas de mi sitio web, lo único que tengo que hacer es cambiar, introducir ese cambio, en este fichero, en un único fichero. Y con esto termina la tercera parte de este vídeo. En estos tres vídeos, hemos visto las tres formas que existen de usar un CSS en HTML y hemos visto que la mejor forma es utilizar la etiqueta link.  OCULTAR

Aspectos clave Debes ver el vídeo CSS: cómo se usa en HTML (parte 3) en el que se explica la etiqueta  y se muestra una demostración de uso en una página web.

Comprueba tus conocimientos Guillermo trabaja en el departamento de atención al cliente de una gran empresa de software. En los últimos meses ha recibido un gran volumen de preguntas sobre el uso de HTML y cuál de las tres etiquetas es más recomendable utilizar para reducir el acoplamiento entre HTML y CSS, por lo que ha decidido escribir la respuesta en Twitter para resolver todas las dudas que se planteen. Indica cuál es el mensaje que va a poner Guillermo. Arrastra la mejor respuesta dentro del cuadro. A continuación, haz clic en ENVIAR.

HTMLCorp. Arrástrala aquí

Con la etiqueta “style” reducimos al máximo el acoplamiento que existe entre HTML y CSS.

Con la etiqueta “link” reducimos al máximo el acoplamiento que existe entre HTML y CSS.

Con el atributo “style” reducimos al máximo el acoplamiento que existe entre HTML y CSS.

5. CSS: selectores básicos (1) En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a explicar los selectores básicos de CSS. CSS es un lenguaje muy sencillo, que se compone de reglas, cada regla está formada por uno o más selectores y una declaración formada por un bloque de estilos, que define los estilos a aplicar para los elementos del documento que cumplan con el selector, en este ejemplo, el selector es el elemento de HTML, h1, por lo que esta regla se aplicará a todos los encabezados de nivel 1 de la página web. Cada declaración de estilos se define entre llaves y está formada por parejas propiedad valor, en este ejemplo, a los elementos de tipo a h1, se le aplican dos propiedades. En la primera propiedad, se indica que el color del texto debe ser rojo, en la segunda propiedad, se indica que el color de fondo debe ser verde. ¿Qué tipos de selectores existen en CSS? Los selectores de CSS3 están definidos en el documento Selectors Level Three, una recomendación del W3C de septiembre de 2011. La lista de selectores definidos en CSS3 es enorme. Como podemos ver, CSS3 incluye los selectores definidos en CSS1 y CSS2. En este vídeo vamos a ver los selectores básicos definidos en CSS1 y CSS2. En los siguientes vídeos, veremos los selectores avanzados y las novedades que incorpora CSS3. En este vídeo voy a utilizar el siguiente fragmento de código HTML para explicarte el uso de los selectores de CSS. A la derecha del código HTML te mostraré el código CSS y el resultado final, la visualización del código HTML y del código CSS en un navegador web. Existen tres selectores básicos fundamentales, de tipo, de clase y de identificador. Veamos el primer selector, el selector de tipo. El selector de tipo, también es conocido como selector de elemento o selector de etiqueta. Este selector hace referencia a todos los elementos o etiquetas de un mismo tipo. Para seleccionar una etiqueta, hacemos referencia a esa etiqueta en nuestro código CSS. En este ejemplo, se han definido dos reglas de CSS. En la primera el selector es h1 y se aplica al único encabezado de nivel 1 que hay en el código HTML. En la segunda regla, el selector es span y se aplica a todos los span que hay en el código HTML. Como puedes observar, es un selector poco específico y se aplicará a todas las etiquetas de ese tipo en el documento en el que se incluya este código CSS. El segundo, es el selector de clase. El atributo class es un atributo global común a todas las etiquetas HTML. Permite especificar las clases que se aplicarán a un determinado elemento. En CSS los nombres de las clases vienen precedidos por el carácter punto. Es imprescindible que recuerdes incluir este carácter en CSS y no lo incluyas en el atributo class de las etiquetas en HTML. Un error muy común en los primeros desarrollos de cualquier persona. En el ejemplo, puedes ver cómo se aplica la clase punto box a la etiqueta div. Este tipo de selector se aplicará a todas las etiquetas cuyo atributo class lo incluya. Esto se ilustra en el ejemplo, mediante la clase punto bold, aplicada a varios elementos distintos, dos etiquetas span y un enlace. Como puede que ya sepas, el atributo class permite múltiples valores separados por espacio, de forma que podemos aplicar multitud de clases a una misma etiqueta. Esto favorece la reutilización de reglas, en lugar de tener

que repetir ciertas reglas una y otra vez. Por ejemplo, puedes ver como la última etiqueta span, aplica a dos clases, una para el estilo de fuente y otra para el color. Los selectores se pueden combinar entre sí, veamos un ejemplo sencillo. En este ejemplo, la regla CSS combina span, un selector de tipo, con punto bold, un selector de clase. Esta combinación se aplica solo a las etiquetas span que tengan la clase punto bold. El tercer selector, más específico y no por ello menos importante, es el selector de identificador. Se diferencia del selector de clase en dos aspectos fundamentales, primero el carácter inicial en el código CSS es la almohadilla en vez del punto, segundo, se aplica a aquellas etiquetas cuyo atributo id coincida con el texto tras la almohadilla. Recuerda que el atributo id se supone único en el documento HTML, por tanto, una regla de identificador solo se aplicaría una vez en toda una página web. Sin embargo, el valor de un id, se puede repetir entre diferentes páginas web. Es posible utilizar la combinación de selectores para seleccionar etiquetas anidadas. Para aplicarles una regla exclusivamente a las etiquetas span, anidadas a la etiqueta div del ejemplo, con todo lo aprendido hasta ahora, no nos quedaría más remedio que modificar el código HTML. Sin embargo, si utilizamos combinaciones de selectores, podemos aplicar la regla solo a las etiquetas span que estén anidadas en etiquetas div, mediante la regla div, espacio en blanco, span o a todos los hipervínculos que estén en el interior de una etiqueta span, mediante spam, espacio en blanco, a. Como ves, para anidar selectores, se especifican uno tras otro separados por espacios en blanco, siempre empezando por el elemento con menor nivel de anidamiento en el documento HTML. En este otro ejemplo, te muestro cómo aplicar estilos a todas las etiquetas span que estén anidadas en etiquetas con la clase punto box. Del mismo modo que en el ejemplo anterior, especificamos, en primera instancia, el selector de clase punto box y después, separado por el espacio en blanco, el selector de etiquetas span. El resultado final del ejemplo anterior, también se puede lograr, si se usa el selector de identificador myDiv, en vez de la clase punto box. Y ahora, al ejemplo anterior, le añado otra regla de CSS. El ejemplo, muestra cómo aplicar un estilo a las etiquetas span dentro de una etiqueta identificada como myDiv y aplicar una regla a todos los enlaces que estén anidados en una etiqueta con el identificador mySpan, fácil, ¿no? Como ya sabes, la reutilización y la reducción de códigos, son primordiales para asegurar un fácil mantenimiento del código. Para aplicar el mismo estilo a diferentes reglas, no es necesario repetir código, puedes separar las reglas por comas y especificar el estilo una sola vez. En este ejemplo, se indica que los elementos con el identificador myDiv y mySpan se deben presentar con el color verde. Estas dos reglas, se pueden agrupar en una sola. Los dos selectores se separan con una coma, por supuesto, puedes agrupar reglas de cualquier tipo de selector. Ahora te invito a que veas la segunda parte de este vídeo. Este vídeo está basado en los vídeos CSS selectores y CSS selectores avanzados, de Guzmán Fernández, que puedes encontrar en estas direcciones de YouTube. Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo y dos formas de contactar conmigo a través de mi correo electrónico [email protected] y a través de mi cuenta en Twitter @sergiolujanmora. Muchas gracias por tu atención.  OCULTAR

Aspectos clave Debes ver el vídeo CSS: selectores básicos (1) en el que se muestran diferentes tipos de selectores de CSS, como el selector de tipo (elemento o etiqueta), el selector de clase y el selector de identificador, se explica la selección de etiquetas anidadas y la agrupación de reglas.

Comprueba tus conocimientos

David acaba de empezar a trabajar en una empresa de creación y diseño de páginas web. Aún está aprendiendo cómo utilizar las herramientas que ofrece HTML. Ahora mismo está aprendiendo a utilizar los selectores básicos fundamentales. Ayuda a David a identificar cuál es la finalidad de cada uno de estos selectores. Selecciona cada una de las preguntas para ver sus posibles respuestas. Responde a cada pregunta y haz clic en ENVIAR. 1 Hace referencia a todos los elementos de un mismo tipo.

A clase B Identificador C CSS D tipo 2 Atributo global común a todas las etiquetas HTML.

A clase B Identificador C CSS D tipo 3 No es un selector básico.

A clase B Identificador C CSS D tipo 4 Se aplica a aquellas etiquetas cuyo atributo ID coincida con el texto tras #.

A clase B Identificador C CSS D tipo

6. CSS: selectores básicos (2) En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a explicar los selectores básicos de CSS. En este vídeo, vamos a seguir viendo diferentes tipos de selectores que existen en CSS. El selector universal se representa mediante un asterisco. Cuando se incluye en una regla, el selector universal selecciona todos los elementos. ¿Cuándo lo utilizarás? Probablemente nunca, al menos, yo desaconsejó su uso. Es difícil tenerlo bajo control y puedes estar aplicando estilos sin darte cuenta. En muchas situaciones el selector universal se puede omitir. El selector universal se aplica a veces, para inicializar todos los elementos de una página web a un mismo estado. En este ejemplo, el margen y el relleno de todos los elementos, se establece en 0 píxeles.

Habrás comprobado, que algunos enlaces cambian de color cuando ya estuviste en esa página, cuando los mantienes pulsados o incluso se modifica su estilo, cuando pasas el ratón por encima de ellos. Gracias al carácter :, vamos a ver cómo hacer todo esto. Para ver el funcionamiento de estos selectores, vamos a utilizar un ejemplo nuevo. El estado :link, solo aplicable a enlaces, modifica el estilo por defecto de aquellos hipervínculos no visitados a los que se aplique la regla. En este caso, suponemos que tanto índice, como visitado, son enlaces visitados. El segundo, porque se navegó a la página visit.html, en algún momento y el primero, porque la página en la que nos encontramos es index.html. Puede ser una buena idea que hagas unas pruebas si no te quedó claro. El estado :visited, se aplicará a los hipervínculos visitados. Es el selector complementario a : link. Por tanto, en este ejemplo, esta regla de CSS, se aplica a los dos primeros enlaces. El estado : hover, modifica el estilo cuando el puntero del ratón, está sobre un elemento al que se le aplica la regla. Como puedes ver en el ejemplo, todos los enlaces tienen el estilo aplicado, pero solo lo muestra el enlace visitado, puesto que tiene el puntero sobre él. Es posible utilizar : hover, en todos los elementos, no solo en los hipervínculos. En caso de enlaces, es muy importante declarar :hover, después de : link y : visited. En caso de que existan, para que : hover funcione correctamente. Ten en cuenta, que los dispositivos táctiles como tabletas o teléfonos inteligentes, smartphones, no tienen la capacidad de situar el puntero sobre un elemento, sin pulsarlo. Utiliza con cabeza todo esto, por ejemplo, a la hora de mostrar u ocultar menús o tu página no será accesible a multitud de usuarios. El estado :active, se aplica a enlaces que están siendo pulsados, normalmente no mantenemos pulsado un hipervínculo, puesto que su principal utilidad es la navegación, pero es posible definir enlaces sin destino para casos particulares como pueden ser los menús desplegables. Al pulsar, se activa el estilo definido por esta regla de CSS y al dejar de pulsar se deja de aplicar la regla. De nuevo, es necesario declarar : active después de : hover, para que tenga efecto. Que : active y : hover, tengan los mismos estilos puede ser una solución elegante al problema de accesibilidad desde tabletas y teléfonos inteligentes, que te comentaba hace un momento. El único inconveniente es que solo servirá para hipervínculos, puesto que : active, solo se aplica a este tipo de elementos. Puedes utilizar : link, :visited y : active solos, para aplicarlos a todos los enlaces de la página, aunque es más común verlos acompañados del selector a. También, es posible utilizarlos en combinación con clases e identificadores, así como en anidamientos, del mismo modo que con los selectores básicos. Así como los enlaces tienen selectores particulares, los elementos de formulario, que aceptan entradas por parte del usuario, campos de texto, listas desplegables, etcétera, también tienen un selector que puede resultar interesante, para destacar el elemento que está activo, o siendo rigurosos, el elemento que tiene el foco. Este selector también se puede aplicar a los enlaces, ya que pueden recibir el foco desde el teclado. Como habrás podido comprobar, he vuelto a cambiar el código HTML para este ejemplo. Puesto que necesito campos de formularios. Para mejorar la experiencia del usuario, puede ser una buena práctica resaltar los campos de formulario que están siendo utilizados en cada momento. Para ello utilizamos el selector : focus, como en el ejemplo. Puedes ver, cómo se destaca el campo que está activo. Ahora te invito a que veas el vídeo CSS selectores avanzados, en el que se explican algunos de los selectores avanzados que puedes emplear para crear reglas de CSS más complejas. Este vídeo, está basado en los vídeos CSS selectores y CSS selectores avanzados, de Guzmán Fernández, que puedes encontrar en estas direcciones de YouTube. Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo y dos formas de contactar conmigo a través de mi correo electrónico [email protected] y a través de mi cuenta en twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso Introducción al desarrollo web que está disponible en la dirección idesweb.es. Muchas gracias por tu atención.  OCULTAR

Aspectos clave Debes ver el vídeo CSS: selectores básicos (2) en el que se muestran diferentes tipos de selectores de CSS: el selector universal (*) y las pseudoclases de estado (link, visited, hover, active, focus).

Comprueba tus conocimientos Patricia quiere utilizar de forma independiente el pseudo-selector de CSS :link en todos los enlaces de su página. No obstante, Patricia quiere saber más sobre las características de este selector y tiene las siguientes dudas. Ayúdale a resolverlas seleccionando la opción correcta. Responde a todas las preguntas y haz clic en ENVIAR. 1. 1 / 4 Este selector no puede utilizarse sólo. SÍ

NO 2. 2 / 4

Suele ir acompañado del selector a de la forma a :link. SÍ

NO 3. 3 / 4

Nunca se utiliza acompañado de clases e identificadores. SÍ

NO

4. 4 / 4 Puede usarse en anidamientos y con selectores básicos. SÍ

NO

7. CSS: colores Hola, soy Guzmán Fernández García, desarrollador web, y en este vídeo que forma parte del curso Introducción al desarrollo web, voy a explicar los colores en HTML y CSS. Puedes encontrarme en mi web guzmanfernandez.com y en twitter como pie izquierdo. También puedes contactar conmigo a través de mi correo electrónico [email protected]. ¿Cómo definimos el color? No divagaré sobre la definición de color, hablaré sobre el método que utilizamos en HTML y CSS para definir colores. En arte, diseño y otras especialidades, se utilizan varios métodos para describir el color. Algunos de los más conocidos son CMYK, HSV o HSB y el que utilizaremos para HTML y CSS, RGB. Cada uno tiene sus ventajas y desventajas, pero el análisis se escapa al objetivo de este vídeo. Según Wikipedia, la descripción RGB de un color, hace referencia a la composición del color según la intensidad de los colores primarios con que se forma rojo, verde y azul, en inglés, red, green, blue. Es un modelo con el que es posible representar un color, mediante la mezcla por adición, de los tres colores luz primarios. El modelo de color RGB no define por sí mismo lo que significa exactamente rojo, verde o azul, por lo que los mismos valores RGB, pueden mostrar colores notablemente diferentes en distintos dispositivos que usen este modelo de color. Aunque utilicen un mismo modelo de color, sus espacios de color pueden variar considerablemente. Los colores son importantes, pero no pierdas mucho tiempo en buscar un color concreto, porque cada usuario verá uno distinto al que tú ves. La idea es buscar una paleta o combinación de colores armoniosa y con buenos contrastes. Por paleta o combinación de colores, me refiero a dos, tres o cuatro colores. No necesitarás más para definir el esquema de color de tus diseños. En HTML y CSS tenemos tres formas básicas de representar colores en RGB, por nombre de color, color name, algo tan sencillo como elegir uno de los 147 nombres de colores en inglés que es capaz de interpretar un navegador. 16 básicos y 130 variantes. Especificando los valores de cada canal, rojo, verde y azul, con valores entre 0 y 255 y en el estricto orden que marcan las siglas rojo, verde y azul. En el ejemplo te muestro como un valor cero para los tres canales, da como resultado el negro y un valor de 255 para todos los canales, especifica el color blanco. Puede que al principio te resulte extraño, que la suma de todos los colores sea blanco y la ausencia de color negro, pero estamos trabajando con un modelo aditivo, luz directa, que funciona de forma contraria al sustractivo, luz reflejada, al que podemos estar acostumbrados a observar en tintas o pinturas. O en hexadecimal, probablemente la forma más utilizada, que funciona de forma parecida a RGB. Las dos diferencias fundamentales con el primer esquema, son que, en lugar de encerrar entre RGB y paréntesis, los valores separados por comas dichos valores se especifican tras el símbolo #, uno tras otro, sin espacios ni caracteres separadores y que en lugar de ser un número en base decimal entre 0 y 255, están en base hexadecimal. No te preocupes, no es necesario dominar la base hexadecimal, aunque terminarás por acostumbrarte. De nuevo, en el ejemplo, te muestro cómo codificar el blanco, #, seis efes y el negro, # seis ceros. Puedes observar que existe una versión reducida con solo tres dígitos, en este caso, cada dígito representa una pareja cuando ambos dígitos son iguales, como es el caso del blanco, # tres efes y el negro, # tres ceros. Los colores que hemos visto, se pueden aplicar a distintas partes de nuestro modelo de caja. A la fuente, texto, dándole valor al atributo color. Al fondo, especificando el código de color en el atributo background-color o modificando el valor del atributo border-color, al borde. En este ejemplo puedes ver el uso de los tres simultáneamente. Puedes ver más sobre colores en el vídeo: colores, novedades en CSS3, disponible en la quinta semana del curso idesweb.

En resumen, hemos visto cómo utilizar los color names y RGB, tanto en decimal como en hexadecimal, para darle un poco de color a la web. Tienes la posibilidad de cambiar los colores de fuente, mediante el atributo color, de fondo con background-color y el de los bordes gracias al atributo border-color. Para terminar, te dejo dos consejos que espero te resulten útiles. Aprende utilizar el modelo RGB aunque no lo utilices en tu codificación. Puede que no sea el más intuitivo, pero te encontrarás con multitud de diseños que hacen uso del modelo y siempre es interesante saber utilizarlo. Con esto, no pretendo decirte que aprendas la codificación de los colores de memoria, ni mucho menos, solo que te familiarices con ella. Utiliza la notación decimal o la hexadecimal, pero intenta evitar, en la medida de lo posible, mezclarlas en el mismo desarrollo, lo agradecerás cuando quieras realizar modificaciones sobre el código más adelante. Recuerda que el poder de la web reside en la accesibilidad universal de la misma. Haz uso de alguna utilidad, como el Planning Colors Checker para Firefox, para validar el contraste de colores de frente y fondo y asegurar un mínimo de accesibilidad en tus páginas. Puedes consultar los nombres de los colores en la página de la w3schools. También puedes obtener los códigos de color en RGB y hexadecimal, en colorpicker.com. Tienes disponible Color Contrast Checker, una utilidad muy fácil de usar, para comprobar el contraste de color de frente y fondo. Y como no todo va a ser trabajo, ¿qué tal si jugamos un poco? Te presento color.method.ac. Yo obtuve un siete y medio y estoy medio cegato. Te invito a que superes mi marca. Puedes hacerme llegar cualquier duda a través de mi correo electrónico o de mi cuenta en twitter. Recuerda que este vídeo forma parte del curso Introducción al desarrollo web, disponible en la dirección idesweb.es.  OCULTAR

Aspectos clave Debes ver el vídeo CSS: colores en el que se explican los métodos para definir colores, los nombres de los colores, el método RGB (Red, Green, Blue), la notación de los colores en decimal, porcentaje y hexadecimal y el uso de los colores en CSS mediante las propiedades color, background-color y border-color.

Comprueba tus conocimientos Marta contrató un servicio de diseño web hace un par de años, ahora que se ha formado y puede hacerlo ella misma quiere cambiar su web a colores más actuales. Está pensando en su público, quiere hacerla más atractiva pero sin perder su esencia, ya que podría ser contraproducente realizar un cambio radical y que perder su identidad. Está analizando cómo realizar estos cambios en CSS. Indica, de las siguientes afirmaciones cuáles son verdaderas a la hora de realizar estos cambios. Activa los interruptores de las opciones correctas y haz clic en ENVIAR.

1. 2. 3. 4.

Los espacios de color pueden variar según el dispositivo. Se pueden representar en caracteres decimal y hexadecimal a la vez. Debes utilizar, cuantos más colores mejor. En CSS los colores se representan mediante "color name".

8. CSS: selectores avanzados En este vídeo que forma parte del curso Introducción al desarrollo web, voy a explicar los selectores CSS avanzados. Puedes encontrarme en mi web guzmanfernandez.com y en twitter como pie izquierdo. También puedes contactar conmigo a través de mi correo electrónico [email protected]. En el vídeo selectores CSS, vimos los selectores básicos, otros selectores, como los selectores de enlace o su estado, la combinación de selectores y la agrupación de reglas.

CSS2 incluyó algunas mejoras para realizar selecciones, como las que veremos a continuación. A menudo pretendemos seleccionar cierto nivel de anidamiento, pero las reglas se nos van de las manos. En el ejemplo, vemos cómo seleccionar los elementos de una lista desordenada, pero, ¿por qué se seleccionan todos? Como verás, todos los elementos cumplen la regla, están dentro de una etiqueta ul y son etiquetas li. En un primer momento se nos ocurriría, que la lista anidada cumple con el esquema y que dándole un identificador a la principal, se soluciona el problema. La idea es buena, pero observa que sigue cumpliéndose la regla. Dentro de la lista desordenada con identificador lista, hay cinco ítems, lo cambio de color para que se vea mejor, puedo parecer pesado, pero no te imaginas la cantidad de veces que he visto casos como éste. ¡Vale, vale! ya lo solucionamos. Si entre el selector de la etiqueta superior, en este caso, a la lista con identificador lista y el de las etiquetas anidadas, incluimos el carácter mayor que, solo se seleccionarán los elementos li, que sean descendientes directos. Desafortunadamente, ni siquiera en CSS3, existe el carácter menor que, para seleccionar etiquetas padre. Seguro que te encontrarás con casos en los que quieras aplicar estilos a ciertos elementos, dependiendo de si tienen otro elemento junto a ellos o no. En el ejemplo, puedes ver cómo funciona el selector +, entre dos elementos. En este caso, se aplicarán los estilos a todos los elementos span, que estén tras una imagen con clase new. ¡Ojo! Solo los inmediatamente contiguos. En este caso, no se aplicaría el estilo a la palabra php, ya que no sucede inmediatamente a una imagen con clase new. Puede que quieras destacar el primer elemento de una lista y ya que nos ponemos, por qué no poder darle estilos a la primera línea de un párrafo o a la primera letra de un texto. El selector :first-child, de forma conjunta a un elemento, en el ejemplo li, aplica la regla al primer elemento de ese tipo, que además sea el primero anidado, en este caso en la etiqueta ul. En este otro, como el primer li con clase letra, no es el primero de su grupo, no se aplicará el estilo. Sí, hay un selector last-child, pero solo a partir de CSS3 y entrar ahí sería salirnos de tema. Siguiendo con los primeros de la fila, el selector : first-letter, es bastante más intuitivo. Se aplica a la primera letra del texto, del elemento seleccionado. Puede servirte, por ejemplo, para simular letras capitales. Por último, el selector : first-line, se aplica a la primera línea del texto del elemento seleccionado. En el ejemplo, he forzado el salto de línea, puesto que no tengo espacio para más, sin embargo, en los códigos de ejemplo disponibles, he incluido un párrafo lo suficientemente largo, como para que tenga más de una línea. Efectivamente con : first-line, solo se aplicará a la primera línea de este párrafo, no es necesario insertar saltos de línea. Y, ¿por qué no utilizar otros atributos, propios de ciertas etiquetas, para darles estilos? Vamos a verlo. El código HTML que utilizaré en esta parte, muestra tres párrafos con un enlace cada uno, cuyos diferentes atributos espero ya te sean familiares. Si especificamos entre corchetes el nombre de un atributo, en este caso title, los estilos se aplicarán a todos los elementos que tengan un atributo title, no importa cuál sea su valor. Si quieres especificar más, puedes igualar el atributo a una cadena de texto. En este caso escribimos title=Buscador. ¡Ojo! Distingue mayúsculas de minúsculas, si escribiésemos buscador con b minúscula, no se aplicarían los estilos al enlace, además, si en la cadena que vas a especificar, aparecen caracteres no alfanuméricos, es muy posible que necesites entrecomillarla, por ejemplo, si quisiéramos hacer referencia a todos los enlaces vacíos, a aquellos cuyo atributo href, es igual la tablilla, o a los enlaces cuyo atributo title, fuera igual a la cadena, página del curso. Necesitaríamos especificar, tanto la tablilla, como la frase entre comillas. Las comillas no molestan, por lo que te recomiendo utilizarlas siempre. Para seleccionar elementos cuyo atributo empieza por una palabra, como puede ser top, en el caso de los identificadores de los enlaces del ejemplo, añadimos la barra vertical, precediendo al símbolo igual. En la distribución del teclado en español, puedes encontrar este carácter en la tecla 1. El valor del atributo del elemento debe ser la palabra completa, como en el caso que vimos anteriormente sin la barra vertical, o seguida del guion, como en el ejemplo.

Y uno más, mediante la virgilla o tilde de la ñ, en la tecla 4 para teclados con distribución en español, o atl+126 de tu teclado numérico, podemos especificar que el atributo contenga una palabra, esta vez el valor del elemento sí puede estar separado por espacios. En el ejemplo, destacamos todos los enlaces cuyo atributo title contenga la palabra curso. Para que los selectores de tipo atributo funcionen correctamente en Internet Explorer 8, es necesario que declares doctype. No sé si te resultará interesante destacar las palabras o textos en otro idioma, pero también es posible centralizar este comportamiento, sin necesidad de trabajar con clases. :lang y entre paréntesis el código del idioma según la ISO 639, selecciona todas las etiquetas cuyo valor del atributo lang, coincida con la especificada entre paréntesis, como en el ejemplo. Ten cuidado, ya que algunos desarrolladores incluimos el idioma principal de la página en la etiqueta HTML, Si le das estilos a este idioma, se aplicará a todos los elementos de tu documento HTML. ¿Cómo?, ¿no conoces la ISO 639? No te preocupes, te dejo un enlace al final del documento. Mediante CSS, también es posible incluir contenido antes o después de la etiqueta seleccionada. Algo no muy recomendado, ya que el contenido y el estilo, deberían separarse, pero bien utilizado, ese contenido tiene más que ver con estilos que con contenido en sí y consigue que esta regla tenga sentido. Por ejemplo, voy a incluir el texto nuevo detrás de todos los enlaces cuya clase sea new y dep delante del enlace cuya clase sea old. Te presento el selector universal. Sí, algo tan sencillo como un asterisco, puede arruinar tu hoja de estilos. Cuando se incluye en una regla, el selector universal selecciona todos los elementos, sin mirar caras. ¿Cuándo lo utilizarás? Probablemente nunca, al menos yo desaconsejó su uso, es difícil tenerlo bajo control y puedes estar aplicando estilos sin darte cuenta. Algunos autores lo utilizan para que todos los navegadores empiecen sin estilos o para forzarle unos. A esta técnica se le denomina CSS reset y existen otras formas menos agresivas de llevarla a cabo, te dejo un enlace al final del vídeo. En resumen, hemos visto cómo seleccionar descendientes directos mediante el símbolo mayor que. Elementos contiguos, gracias al carácter +. Como seleccionar el primer elemento de un grupo o la primera letra o la primera línea de un texto utilizando dos puntos. La selección de elementos con atributos especificándolos entre corchetes. Cómo aplicar estilos a etiquetas en otros idiomas, con :lang. Y a insertar contenido mediante CSS, utilizando :before y :after. Y sí, también intenté convencerte de que no utilices el selector universal, asterisco. Para terminar, te dejo unos consejos que espero te sean de utilidad. Reinicia la hoja de estilos, para que todos los navegadores empiecen con los mismos estilos por defecto. En la medida de lo posible, no utilices el selector universal para esta tarea, en su lugar busca un CSS reset que te guste. Cuidado con las reglas a partir de selectores del nuevo estándar CSS3, seguramente no se apliquen a navegadores antiguos. Simplifica los documentos HTML, de esta forma no tendrás que utilizar reglas complejas en CSS, y usa clases para centralizar y estandarizar estilos, sobre todo en lo que a colores y tipografías se refiere. Puedes consultar el uso de los selectores vistos en este vídeo y los de CSS3 en la página de la w3schools. Te dejo el enlace a la ISO 639-1 como te dije. la ISO 639, tiene más de una parte en la que se especifican más idiomas, pero incluir enlaces a todas las partes de la ISO me pareció un poco friki y no creo que llegues a necesitarlos. Para reiniciar estilos, en lugar de utilizar el selector universal, puedes utilizar el CSS reset, de Eric Meyer, uno de los mejores que encontrarás en la web. Te recuerdo que puedes hacerme llegar cualquier duda a través de mi correo electrónico o de mi cuenta en twitter y que este vídeo forma parte del curso Introducción al desarrollo web, disponible en la dirección idesweb.es. Muchas gracias por tu atención.  OCULTAR

Aspectos clave Debes ver el vÃdeo CSS: selectores avanzados en el que se te muestran algunos selectores avanzados, como descendientes directos, elementos contiguos, :first-child, :first-letter, :first-line, valores de atributos, :lang, :after, :before y content.

Comprueba tus conocimientos Jaime está trabajando en un proyecto web de notable envergadura. Quiere evitar que con el tiempo se acumulen gran cantidad de formatos específicos para diversos documentos. Esto puede ser un problema a futuro ya que, al hacer modificaciones al código, se le pueden escapar detalles, por lo que va a utilizar selectores avanzados en las anotaciones de estilo. ¿Cuáles de las siguientes opciones atienden a este criterio? Selecciona la opción o las opciones correctas y haz clic en ENVIAR.

1. 2. 3. 4. 5. 6.

(>) (-) (+) ( ([ ]) (~)

9. CSS: selectores CSS3 En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a presentar algunos de los nuevos selectores que existen en CSS3. Los selectores de CSS3 están definidos en el documento Selectors Level Three, una recomendación del W3C, de septiembre de 2011. La lista de selectores definidos en CSS3 es enorme. CSS3 incluye los selectores definidos en CSS1 y CSS2. En este vídeo vamos a ver algunos de los nuevos selectores de CSS3. En CSS2 se definió la pseudoclase first-child, que permite definir una regla que se aplica al primer hijo del selector indicado. En este ejemplo, se selecciona el primer elemento de la lista y se le aplica al estilo de texto en negrita. En CSS3 se han añadido estos selectores que complementan a first-child de CSS2. Last-child selecciona el último elemento de la lista. Las otras dos pseudoclases seleccionan el hijo enésimo, empezando desde el principio o desde el final de la lista de hijos. Por tanto, existe una equivalencia con first- child y last-child, cuando ambos selectores, ambas pseudoclases, toman el valor 1. En este ejemplo, se selecciona el segundo elemento de la lista y se le aplica el estilo de texto negrita. Estos selectores son similares a los anteriores, pero seleccionan un hijo entre todos los que son del mismo tipo y que ocupe la posición indicada. El funcionamiento de estas pseudoclases puede ser un poco confuso, así que vamos a ver un ejemplo para entenderlo mejor. P:first-child selecciona un párrafo cuando sea el primer hijo de su padre, en este caso, ningún párrafo es el primer hijo, así que la regla CSS no se aplica. Sin embargo, p:first-of-type, sí selecciona el primer párrafo HTML, aunque sea el segundo hijo de su padre section, porque este párrafo es el primer hijo, entre todos los hijos de tipo párrafo. ¿Se entiende? ¿está claro? Por último, en CSS3 se ha añadido este operador, la tilde o virguilla, para seleccionar un elemento en función de sus hermanos. Este operador es el complemento al operador + definido en CSS2. Vamos a recordar primero el funcionamiento de este operador, en este ejemplo, puedes ver cómo funciona el selector + entre dos elementos. En este caso se aplica el estilo a todos los elementos p que estén justo detrás de un elemento h1. Solo se aplica a los inmediatamente contiguos, así que solo se aplica al primer párrafo. Sin embargo, al aplicar este otro operador, los

elementos p, no tienen que ser inmediatamente contiguos a h1, solo tienen que ser hermanos de h1. Así que en este ejemplo la regla CSS, se aplica a todos los párrafos del fragmento de código HTML. Muchas gracias por tu atención.  OCULTAR

Aspectos clave Debes ver el vÃdeo CSS: selectores CSS3 en el que se presentan los nuevos selectores que incorpora CSS3: :last-child, :nth-child(n), :nth-last-child(n), :first-of-type, :last-of-type, :nthof-type(n), :nth-last-of-type(n) y ~.

Comprueba tus conocimientos Antonio y Pablo están discutiendo sobre las funcionalidades de CSS3. Antonio dice que con las “pseudo clases” de CSS3 se facilita el aplicar estilos a los elementos a través de los selectores con la misma condición se facilita. Identifica del siguiente listado cuál o cuáles de las “pseudo clases” se han mantenido de la versión CSS2. Selecciona la opción o las opciones que quieras tachar y haz clic en ENVIAR.    

first-child last-child nth-child nth-last-child

Examen final modulo I Pregunta 1 Las actualizaciones de CSS se llaman:



AVersiones.



BNiveles.



CEdiciones.



DLas anteriores respuestas no son correctas.

Pregunta 2 En CSS, ¿qué pseudo clase se emplea para definir una propiedad cuando el cursor del ratón se sitúa sobre un elemento?



A:active.



B:hover.



C:over.



D:on.

Pregunta 3 En CSS, para definir el color del borde de un elemento se emplea la propiedad:



Abackground-color.



Bborder-color.



Cmargin-color.



Dpadding-color.

Pregunta 4 En CSS, la expresión ".elemento" es un selector.



ADe clase.



BDe elemento.



CDe identificador.



DLas anteriores respuestas no son correctas.