Prctica 13 (CSS Hojas de estilo)

Materia: Programacin Web

Prof: Roco Mrquez
Introduccin
Las hojas de estilos en cascada C !Cascading t"le heet# son un conjunto de reglas de formato que
determinan el as$ecto del contenido de una $gina Web% u utilizacin $ermite se$arar el contenido de los
formatos de la $resentacin& lo que hace ms fcil mantener el as$ecto de un sitio sin necesidad de cambiar
$gina $or $gina& "a que el contenido de la $gina !el cdigo '(ML# reside en el archi)o '(ML& mientras que las
reglas C que definen la $resentacin del cdigo residen en otro archi)o !una hoja de estilos e*terna# o en otra
$arte del documento '(ML !normalmente& en la seccin head#% Con ello tambi+n se sim$lifica el cdigo '(ML& lo
que disminu"e el tiem$o de carga en los na)egadores%
,ota: (ener cuidado en no mo)er la ruta de los archi)os& es igual a las rutas de imgenes& se mue)en " no
a$arecen% i se mue)e el archi)o& el sitio se )er desconfigurado%
Crea una carpeta o genera un sitio, en dicha carpeta se guardar todo lo correspondiente a esta prctica.
-%. /ntra a 0ream1ea)er crea un nue)o documento '(ML " da $or nombre formatos
2%. Coloca el (e*to /jem$los de /stilos& abajo agrega el te*to de introduccin que tienes al inicio de esta $rctica%
Luego abajo crea una tabla de 2 * 2 que quede como lo siguiente:
'ojas C '(ML
formatos contenidos
3%. Crea un estilo $ara el ttulo que lle)e $or nombre: 4ormato(itulos& que contenga lo siguiente:
(i$o: 4ont.famil": Comic ans5
4ont.ize:26
4ont.t"le: oblique
(e*to decoration: o)erlin
Color: rojo
7loque: (e*t.aling: center
R8 Para ingresar a la )entana de estilos men9 :entana ; /stilos C hift < 4--
=$arecer una )entana similar a la siguiente& luego crea una nue)a regla css%
0ar botn derecho en la seccin de Pro$iedades "
tomar la o$cin de ,ue)o
> con el botn de ,ue)a regla C
=l crear la nue)a regla a$arece una )entana similar a la siguiente& en donde en ti$o de selector dejar la o$cin de:
Clase !$uede ser a$licable a cualquier elemento '(ML#& luego dar el nombre del selector& en este caso $oner
4ormato(itulos? " en definicin de regla dejar acti)o: !lo este documento# ; =ce$tar%
Luego a$arecer otra $antalla similar a la siguiente en donde tendrs que indicar los formatos que se te indicaron%
@a creado el estilo& selecciona el ttulo " a$lica dicho estilo dando botn derecho sobre el nombre del estilo ;
a$licar%
6%. Crea debajo de tu tabla 2 lneas de te*to ms& con lo que gustes " luego a$lica el mismo formato%
A%. Crea otro estilo $ara el $rrafo que lle)e $or nombre: 4ormatoParrafo& que contenga lo siguiente:
=$lica al $rrafo corres$ondiente a la introduccin%
(i$o: 4ont.famil" : =rial&%%
4ont.ize:-B
Color: )erde oscuro
C%. Crea otro estilo $ara la tabla que lle)e $or nombre: 4ormato(abla& que contenga lo siguiente:
(i$o: 4ont.ize:-2
4ont.t"le: Dtalic
Color: rojo
4ondo: 7acEground: azul claro
7loque: (e*t.aling: center
7orde: (o$: solid& color azul re"
=$lica a la tabla de tu documento " guarda los cambios%
F%. =hora edita el estilo 4ormato(itulos& de manera que cambie el color " ti$o de letra% e $uede realizar con 2 clic
sobre el estilo botn derecho sobre el estilo ; /ditar% :erifica que todos los ttulos cambiaron%
B%. Guarda los cambios " cierra el documento%
H%. =bre otro documento '(ML " da $or nombre Dnicio%
-I%. =bre otro documento '(ML " da $or nombre Contenido
--%. =bre otro documento '(ML " da $or nombre Contacto%
-2%. Regresa al documento Dnicio " crea una nue)a regla css& en donde:
(i$o de selector: Clase !$uede ser a$licable a cualquier elemento '(ML#
/l nombre del selector: 4ormato4ondo
0efinicin de regla: ,ue)o archi)o de hoja de estilos?
(e $edir el nombre del archi)o dar: Propiedades& luego $ara definir las reglas coloca como fondo la imagen fondo
!ladrillos#%
-3%. =$lica al documento inicio el estilo 4ormato4ondo con botn derecho sobre el estilo%
0ebe de quedar de fondo los ladrillos& si no te queda de ese modo )erifica en la )ista cdigo al inicio del bod" que
contenga lo siguiente:
Jbod" class8K4ormato4ondoKL
-6%. =hora a$lica el mismo estilo: 4ormato4ondo a los documentos Contenido " Contacto& $ero como el estilo se
cre en el documento Dnicio se tendr que )incular? $ara ello utiliza el icono de =djuntar hoja de estilos & en la
)entana que a$arece cargar el archi)o $ro$iedades generado con anterioridad " dejar acti)a la o$cin de :incular%
Con esto a$arecer la hoja de estilo $ro$iedades " el estilo 4ormato4ondo al cul dar botn derecho ; =$licar%
0ebern quedar los 3 documentos con el fondo de ladrillos%
-A%. =hora en la misma hoja de estilos agrega otro estilo que lle)e $or nombre 4ormatoContenidos !$ara nue)o
archi)o de hoja de estilos& con el nombre que gustes#& en donde la letra sea de color negro& tamaMo 26 " centrado%
-C%. Coloca en los 3 documentos los siguientes te*tos:
-%. Contenido de la $gina -
2%. Contenido de la $gina 2
3%. Contenido de la $gina 3
Luego a$lica a los 3 te*tos el estilo de 4ormatoContenidos creado con anterioridad !en los 3 docs% 0ebe a$arecer#
-F%. =hora edita el mismo estilo cambiando el color de la letra& " obser)a que se cambi en todos%
-B%. Guarda los cambios
-H%. =hora crea otro documento '(ML& da $or nombre $aginae*terna%
2I%. /n esta $gina crea una hoja de estilo !,ue)o archi)o de hoja de estilos#& con el nombre !del archi)o# fondo2
" un estilo con el nombre de fondonegro que contenga color de letra blanco& tamaMo 26 " color de fondo negro%
Luego colcate en la $gina contacto con el botn de =djuntar hoja de estilos im$orta el archi)o fondo2 "
luego a$lica el estilo fondonegro& al terminar debe quedar en fondo negro " si se escribe algo ser de color blanco%
/s$era re)isin%