Guia 3 HTML CSS CCC
Cargado por
Daniel ReyesGuia 3 HTML CSS CCC
Cargado por
Daniel ReyesGuia Noveno Grado A-B
I. Objetivos
Que el estudiante sea capaz de:
1. Utilizar y combinar selectores CSS avanzados
2. Conocer la utilidad de las pseudo-clases y pseudo-elementos CSS
II. Introducción Teórica
Selectores CSS avanzados
Utilizando solamente los selectores básicos vistos en la clase anterior, es posible
diseñar prácticamente cualquier página web. No obstante, CSS3 define otros
selectores más avanzados que permiten simplificar las hojas de estilos y crear
auténticas maravillas en el diseño de sitios web.
Selector descendiente
Selecciona los elementos que se encuentran dentro de otros elementos. Un
elemento es descendiente de otro cuando se encuentra entre las etiquetas de
apertura y de cierre del otro elemento.
Lo entenderemos mejor con un ejemplo, donde un elemento de párrafo p es
descendiente de una caja div:
La manera de escribir una regla en la que se diga, por ejemplo, que todos los
párrafos que sean descendientes de una caja tengan textos de color azul seria esta:
En el selector descendiente, un elemento no tiene que ser "hijo directo" de otro. La
única condición es que un elemento debe estar dentro de otro elemento, sin
importar lo profundo que se encuentre.
1
No debe confundirse el selector descendente con la combinación de selectores:
Selector de hijos
Se trata de un selector similar al selector descendente, pero muy diferente en su
funcionamiento. Se utiliza para seleccionar un elemento que es hijo directo de otro
elemento y se indica mediante el "signo de mayor que" (>):
En el ejemplo anterior, el selector p > span se interpreta como "cualquier elemento
<span> que sea hijo directo de un elemento <p>", por lo que el primer elemento
<span> cumple la condición del selector. Sin embargo, el segundo elemento
<span> no la cumple porque es descendiente pero no es hijo directo de un
elemento <p>.
Combinación de selectores
CSS permite la combinación de uno o más tipos de selectores para restringir el alcance
de las reglas CSS.
A continuación se muestran algunos ejemplos habituales de combinación de
selectores.
El anterior selector solamente selecciona aquellos elementos con un
class="especial" que se encuentren dentro de cualquier elemento con un
class="aviso".
Si se modifica el anterior selector:
Ahora, el selector solamente selecciona aquellos elementos de tipo <span> con un
atributo class="especial" que estén dentro de cualquier elemento de tipo <div>
que tenga un atributo class="aviso".
2
Selector adyacente
El selector adyacente utiliza el signo + y su sintaxis es:
elemento1 + elemento2 { ... }
La explicación del comportamiento de este selector no es sencilla, ya que
selecciona todos los elementos de tipo elemento2 que cumplan las dos siguientes
condiciones:
elemento1 y elemento2 deben ser hermanos, por lo que su elemento padre
debe ser el mismo.
elemento2 debe aparecer inmediatamente después de elemento1 en el código
HTML de la página.
En el ejemplo anterior los estilos del selector h1 + h2 se aplican al primer elemento
<h2> de la página, pero no al segundo <h2>, ya que:
El elemento padre de <h1> es <body>, el mismo padre que el de los dos
elementos <h2>. Así, los dos elementos <h2> cumplen la primera condición del
selector adyacente.
El primer elemento <h2> aparece en el código HTML justo después del elemento
<h1>, por lo que este elemento <h2> también cumple la segunda condición del
selector adyacente.
Por el contrario, el segundo elemento <h2> no aparece justo después del
elemento <h1>, por lo que no cumple la segunda condición del selector
adyacente y por tanto no se le aplican los estilos de h1 + h2.
Selector de atributos
Los selectores de atributos tienen la cualidad de poder seleccionar elementos en
función de una propiedad determinada o de un valor concreto de sus propiedades.
Los dos tipos de selectores de atributos usados habitualmente son los siguientes:
[nombre_atributo], selecciona los elementos que tienen establecido el atributo
llamado nombre_atributo, independientemente de su valor.
[nombre_atributo=valor], selecciona los elementos que tienen establecido un
atributo llamado nombre_atributo con un valor igual a valor.
3
A continuación se muestran algunos ejemplos de estos tipos de selectores:
Tabla 1. Resumen de selectores css
Selector Afectará a:
* Cualquier elemento
E Un elemento (etiqueta HTML) especifico, como por ejemplo
div o article.
E1 E2 Un elemento (E2) dentro de otro elemento (E1), anidado.
Funciona en
toda la estructura hereditaria.
E1 > E2 Un elemento (E2) que sea hijo de otro (E1).
E1 + E2 Un elemento (E2) que va detrás y es adyacente a otro
elemento (E1)
.clase Afectará a todo los elementos a los que se le haya asignado
esa clase.
Ejemplo, <div class=“caja_lateral”>
E.clase Únicamente al elemento E al que se le haya especificado esa
clase.
#ID Al elemento con el identificador #ID
E#ID Al elemento E con el identificador ID
E[attr=“valor”] A todos los elementos E cuando el atributo attr sea igual al
valor
especificado
Uso de pseudo-elementos
Es difícil explicar algo tan abstracto como un pseudo-elemento, sin embargo
podríamos definirlo como una parte de un elemento que, aunque actúa como éste,
no tiene naturaleza de elemento en sí. Un ejemplo, podría ser la primera letra de un
párrafo o la primera línea de un texto.
Hay 5 pseudo-elementos: e:first-letter, e:first-line, e:first-child, e:before y e:after.
En esta guía estudiaremos el uso de los primeros tres pseudo-elementos.
4
El pseudo-elemento :first-letter
El pseudo-elemento :first-letter permite seleccionar la primera letra de la primera
línea de texto de un elemento. De esta forma, la siguiente regla CSS muestra la
primera letra de cada párrafo con el doble del tamaño.
El pseudo-elemento :first-line
El pseudo-elemento :first-line permite seleccionar la primera línea de texto de un
elemento. Así, la siguiente regla CSS muestra en mayúsculas la primera línea de
cada párrafo:
El pseudo-elemento :first-child
La pseudo-clase :first-child selecciona el primer elemento hijo de un elemento. El
ejemplo siguiente muestra cómo identificar al primer párrafo dentro de un div sin
necesidad de asignar ninguna clase al párrafo.
Uso de pseudo-clases
Con las pseudo-clases es posible aplicar efectos especiales a ciertos elementos de
un documento, como los vínculos o las imágenes, cuando se realizan algunas
acciones específicas con el raton, como pasar sobre una imagen o un enlace o
hacer click en ellos.
Las pseudo-clases :link y :visited
Las pseudo-clases :link y :visited se pueden utilizar para aplicar diferentes estilos a
los enlaces de una misma página:
La pseudo-clase :link se aplica a todos los enlaces que todavía no han sido
visitados por el usuario.
5
La pseudo-clase :visited se aplica a todos los enlaces que han sido visitados
al menos una vez por el usuario.
Por su propia definición, las pseudo-clases :link y :visited son mutuamente
excluyentes, de forma que un mismo enlace no puede estar en los dos estados de
forma simultánea.
Como los navegadores muestran por defecto los enlaces de color azul y los enlaces
visitados de color morado, es habitual modificar los estilos para adaptarlos sus
necesidades particulares.
Las pseudo-clases :hover y :active
Las pseudo-clases :hover y :active permiten al diseñador web variar los estilos de
un elemento en respuesta a las acciones del usuario. Al contrario que las pseudo-
clases :link y :visited que sólo se pueden aplicar a los enlaces, estas pseudo-clases
se pueden aplicar a cualquier elemento.
A continuación se indican las acciones del usuario que activan cada pseudo-clase:
:hover, se activa cuando el usuario pasa el ratón o cualquier otro elemento
apuntador por encima de un elemento.
:active, se activa cuando el usuario activa un elemento, por ejemplo cuando
pulsa con el ratón sobre un elemento. El estilo se aplica durante un espacio
de tiempo prácticamente imperceptible, ya que sólo dura desde que el
usuario pulsa el botón del ratón hasta que lo suelta.
La pseudo-clase :nth-child(numero)
La sintaxis de esta pseudo-clase es:
elemento:nth-child(numero)
Esta pseudo-clase selecciona el elemento indicado pero con la condición de que sea
el hijo enésimo de su padre. Este selector es útil para seleccionar el segundo
párrafo de un elemento, el quinto elemento de una lista, etc.
Esta pseudo-clase permite el uso de expresiones complejas para realizar selecciones
avanzadas.
6
A continuación se muestran ejemplos de uso de esta pseudo-clase:
III. Requerimientos
Nº Cantidad Descripción
1 1 PC con uno de los editores de páginas Web: Sublime Text, Brackets,
Notepad ++,
BlueFish y HTML Kit y cualquiera de los navegadores siguiente:
Internet Explorer 7
u 8, Firefox (última versión disponible), Google Chrome (última
versión disponible),
Opera (última versión disponible), Safari (última versión disponible).
2 1 Guía de Laboratorio #3 de Lenguajes de Marcado y Estilo Web
3 1 Memoria USB
IV. Procedimiento
Ejercicio 1. Usando selectores CSS avanzados
1. Cuando cargue el sistema operativo, crear una carpeta en Mis Documentos
con el nombre: NºCarnet_Guia3.
2. Dentro de la carpeta creada en el paso anterior, crear una carpeta llamada
“css”.
3. Dar clic en el botón inicio.
4. Ir a todos los programas y hacer clic en Bluefish.
5. Abrir en Bluefish la carpeta creada en el paso 1 mediante la opción
“File>Open Folder” del menú ubicado en la parte superior de la ventana.
6. Crear un nuevo archivo dando click derecho sobre el nombre de la carpeta y
seleccionando la opción “New File”.
7
7. Dar clic en la opción “File>Save” (o Ctrl+s) para guardar el archivo. Guarde
el archivo con el nombre “pelicula.html”.
8. Escribir la estructura básica de un documento HTML en el archivo creado en el
paso anterior.
9. Colocar como título de la página (etiqueta <title>) el texto “El discurso del
rey”.
10.Descargar los recursos de la guia de la pagina web
http://www.elespectadorimaginario.com/pages/febrero-2011/criticas/el-
discurso-del-rey.php
11. Digitar el siguiente código HTML dentro del cuerpo (body) de la página web.
8
12. Dentro de los recursos de la guía encontrará un archivo denominado
“texto_ejemplo1.doc”, ese archivo contiene todo el texto que deberá colocar
dentro la página. Coloque el texto correspondiente en cada uno de los
párrafos de los artículos.
13. Después de colocado el texto correspondiente, visualice los resultados de
la página en el navegador de su preferencia.
14.Crear un nuevo archivo y guardarlo en la carpeta css con el nombre style.css
15. Vincule la hoja de estilo creada en el paso anterior con su pagina web
agregando el siguiente código dentro del head de su documento HTML.
9
16.Proceda a escribir las siguientes reglas de estilo básicas dentro de su archivo
style.css y visualice los cambios en el navegador de su preferencia.
17.Con sus conocimientos de la unidad de medida “rem”, responda ¿Qué tamaño
en pixeles tienen los h1, h2, h3 y el texto del footer? ¿No sabe? Consulte con
su docente.
18.A continuación procederemos a estilizar el div con la clase wrapper que
envuelve a todo el contenido de la página. Con la siguiente regla de estilo
conseguiremos que ese div se muestre centrado y cubriendo un ancho del
80% del tamaño de la ventana del navegador. Digite la siguiente regla de
estilo y visualice los cambios en su navegador.
10
19.Ahora procedemos a estilizar cada uno de los artículos que están dentro de la
sección. Digite la siguiente regla de estilo y visualice los cambios en su
navegador.
Note que la regla de estilo anterior se aplica a los artículos que están dentro de una
sección. Dicha regla de estilo les proporciona un color de fondo y una separación de
20 pixeles entre cada artículo.
20.La siguiente regla de estilo se aplica a los párrafos que están dentro de los
artículos que a su vez forman parte de una sección. Digite la regla de estilo y
visualice los cambios en su navegador.
21.A continuación procederemos a estilizar los vínculos que están dentro del nav
mediante la siguiente regla de estilo.
22.Ahora procederemos a estilizar los vínculos del nav de forma tal que cuando
el usuario pase el cursor sobre el vínculo este cambie su color de fondo.
Dicho comportamiento lo conseguimos mediante el uso de la pseudo-clase
:hover. Digite la siguiente regla de estilo y revise los cambios en su
navegador.
11
23.Consiga que el enlace que nos lleva al sitio web externo (la opción “elenco”
del menú) se muestre con un color de fondo #9E9E9E. Para esto debe hacer
uso del selector de atributos y no puede modificar ningún elemento en el
código HTML.
24.Consiga que la primera letra de cada uno de los párrafos de los artículos se
muestre en color gold y con un tamaño de fuente de 1.5 rem. Para ello
deberá hacer uso del pseudo-elemento
:first-letter.
25.Consiga que la primera línea de cada uno de los párrafos del primer
artículo se muestre subrayado. Para esto debe usar los pseudo-elementos
:first-line y :first-child. No está permitido realizar ningún cambio en el
código HTML.
Ejercicio 2. Diseñando un tablero para damas con la pseudo-clase :nth-child()
1. Crear un nuevo archivo dentro de su carpeta de trabajo y nombrarlo
“tablero.html”
2. Escribir la estructura básica HTML dentro del archivo creado en el paso anterior.
3. Colocar como título de la página (etiqueta <title>) el texto “Tablero de
damas”.
4. Agregar el siguiente código dentro del cuerpo (body) de la pagina web.
12
13
5. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre
estilo_tablero.css
6. Vincule la hoja de estilo creada en el paso anterior con su pagina web
agregando el siguiente código dentro del head de su documento HTML.
7. Digite las siguientes reglas de estilo básicas y visualice los cambios en el
navegador de su preferencia.
14
8. Ahora procederemos a estilizar el div con el id tablero, el cual funciona como
el contenedor de cada una de las “celdas” del tablero.
Visualice los cambios en el navegador y notará que la caja se muestra centrada,
con un fondo blanco y con una dimensión de 400px X 400px. No se asuste si las
ultimas “fichas” del juego desbordan el contenedor.
9. A continuación vamos a estilizar cada uno de los párrafos que están dentro
del div. Esos párrafos serán las celdas o cuadros del tablero.
Visualice los cambios en el navegador y notará que todos los cuadros se muestran
con color de fondo negro y con el color de las fichas blanco. Por tanto solo resta
colocar los cuadros blancos de forma alterna para conseguir el efecto de tablero de
damas. Dicho comportamiento lo conseguiremos con la pseudo-clase nth-child().
10.A continuación procederemos a estilizar los párrafos que están dentro de los
div con clase filaImpar. Para este caso queremos que las celdas impares (la
primera, la tercera, la quinta y la séptima) se muestren con color de fondo
blanco. Digite la siguiente regla de estilo y visualice los cambios en el
navegador.
11.Proceda a escribir la regla de estilo necesaria para conseguir que los párrafos
que están dentro de los div con clase filaPar se muestren de forma correcta.
Para esto debe hacer que las celdas pares (la segunda, cuarta, sexta y
octava) se muestren con color de fondo blanco.
15
V. Análisis de resultados
1. A partir del código HTML proporcionado (buscar archivo “análisis.html” dentro
de los recursos de la guía) , añadir las reglas CSS necesarias para que la
página resultante tenga el mismo aspecto que el de la siguiente imagen:
NOTA: En este ejercicio solamente es preciso utilizar la propiedad color
(color del texto). En este ejercicio, se deben utilizar los colores: teal, red,
blue, orange, purple, olive, fuchsia y green. Debe usarse una hoja de estilo
externa.
El instructor evaluará el desempeño de su trabajo dentro la clase. Estos
ejercicios se evaluaran en la misma hora de clase.
VI. Ejercicios complementarios
1. Crear una página web con su biografía. Dicha página debe tener texto,
imágenes y vínculos. Debe hacerse uso de las etiquetas semánticas (header,
nav, section, footer, etc). Los estilos deben referenciarse mediante una hoja
de estilo externa en la que se ocupen la mayoría de selectores y propiedades
CSS vistas hasta el momento. Use su imaginación y consiga el resultado más
estético posible.
2. Investigue como insertar y usar una fuente desde “google fonts” y aplique lo
aprendido en su investigación para insertar una fuente en el ejercicio
anterior.
Fecha de entrega: Próxima semana
16
