Sei sulla pagina 1di 17

1.-Problema: Definir reglas para los elementos HTML: h1,h2,h3,h4,h5 y h6.

Inicia
lizar la propiedad font-size con valores
decrecientes para cada uno de los elementos (40,30,25,20,15 y 10 pxeles).
Inicializar la propiedad font-family para las tres primeros elementos con los va
lores: Arial, Arial Black y Arial Narrow.
<!DOCTYPE html>
<html>
<head>
<title>Problema 1</title>
<style>
h1 {
font-size:40px;
font-family:Arial,Arial Black,"Arial Narrow";
}
h2 {
font-size:30px;
font-family:Arial,Arial Black,"Arial Narrow";
}
h3 {
font-size:25px;
font-family:Arial,Arial Black,"Arial Narrow";
}
h4 {
font-size:20px;
}
h5 {
font-size:15px;
}
h6 {
font-size:10px;
}
</style>
</head>
<body>
<h1>nivel
<h2>nivel
<h3>nivel
<h4>nivel
<h5>binel
<h6>nivel
</body>
</html>

1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>

2.-Problema:Definir la misma fuente, color y tamao de fuente para los elementos p


(prrafo) y h6
(tener en cuenta que cuando vea la pgina el texto que se encuentra en el elemento
h6 difiere del texto que se encuentra
dentro del prrafo por la propiedad font-weight (ya que el elemento h6 es de tipo
bold por defecto y el elemento p tiene por defecto normal)
<!DOCTYPE html>
<html>
<head>
<title>Problema 2</title>
<style>

p,h6{
font-family:Arial;
color:#0000ff;
font-size:14px;
}
</style>
</head>
<body>
<h6>nivel 6</h6>
<p>linea con un estilo</p>
</body>
</html>
3.-Problema:Definir para el elemento <h6> el mismo tamao de fuente (12px) que el
elemento <p> (prrafo) pero color azul para el ttulo y gris claro
(color:#aaaaaa) para el prrafo. Agrupar las dos elementos para la definicin de la
fuente y posteriormente agregar a cada elemento el valor respectivo
para el color del texto.
<!DOCTYPE html>
<html>
<head>
<title>Problema 3</title>
<style>
h6,p {
font-size:12;
}
h6 {
color:#0000ff;
}
p {
color:#aaaaaa;
}
</style>
</head>
<body>
<h6>nivel 6</h6>
<p> linea de prueba</p>
</body>
</html>
4.-Problema:Definir para el elemento prrafo (p) el color verde puro, texto centra
do.
Imprimir varios prrafos para ver los resultados segn la regla de estilo definida. Q
u valor debemos definir para que el texto
aparezca con color rojo oscuro
<!DOCTYPE html>
<html>
<head>
<title>Problema 4</title>
<style>
p {
color:#005500;
text-align:center;

}
</style>
</head>
<body>
<p> Esto es un parrafo de prueba blah, blah, blah</p>
<p> blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah
, blah, bla</p>
<p> blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah
, blah, bla</p>
</body>
</html>
5.-Problema: Definir los elementos de cabecera h1, h2 y h3 con valores decrecien
tes para las propiedades:
letter-spacing
word-spacing
Luego inicializar la propiedad text-transform para que el texto siempre salga en
maysculas.
<!DOCTYPE html>
<html>
<head>
<title>Problema 5</title>
<style>
h1 {
letter-spacing:8px;
word-spacing:12px;
}
h2 {
letter-spacing:4px;
word-spacing:8px;
}
h3 {
letter-spacing:2px;
word-spacing:4px;
}
</style>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
</body>
</html>

6.-Problema: Confeccione una pgina que define una regla para el elemento body e i
nicialice las propiedades color
y font-family. Luego defina reglas de estilo para los elementos h1,h2 y h3 que r
edefinan la fuente con los valores:
Times New Roman, Courier y Arial respectivamente. Imprima tres ttulos, cada uno c
on los elementos h1,h2 y h3. Por ltimo imprima un prrafo.
<!DOCTYPE html>
<html>

<head>
<title>Problema 6</title>
<style>
body {
color:#0000ff;
font-family:Verdana;
}
h1 {
font-family:"Times New Roman";
}
h2 {
font-family:Courier;
}
h3 {
font-family:Arial;
}
</style>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>Prueba de un prrafo en Verdana</p>
</body>
</html>

7.-Problema: Definir distintas escalas de grises para los textos contenidos por
el elemento "em" que se
encuentren contenidos por los elementos h1,h2,h3,h4,h5 y h6.
La escala de grises que podemos utilizar es:
color:#dddddd; si est contenido en un h1
color:#cccccc; si est contenido en un h2
color:#bbbbbb; etc.
color:#aaaaaa;
color:#999999;
color:#888888;
Aparecen los bloques de ms claro a ms oscuro (cuando los tres valores son iguales
(rojo,verde,azul) estamos en presencia de un gris
(salvo el #000000 y el #ffffff))
<!DOCTYPE html>
<html>
<head>
<title>Problema 7</title>
<style>
h1 em {
color:#dddddd;
}
h2 em {
color:#cccccc;
}
h3 em {
color:#bbbbbb;
}
h4 em {
color:#aaaaaa;

}
h5 em {
color:#999999;
}
h5 em {
color:#888888;
}
</style>
</head>
<body>
<h1>h1h1>
<h2>h2h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5h5>
<h6>h6</h6>
</body>
</html>
8.-Problema: Crear una pgina web que contenga una cabecera de nivel 1 (h1), luego
una cabecera de nivel 2 (h2) y un conjunto de prrafos.
Definir reglas de estilo para los tres elementos h1, h2 y p. Inicializar propied
ades vistas en conceptos anteriores.
Intentar el planteo de una pgina que muestre el contenido de la forma ms clara pos
ible.
Definir en la hoja de estilo estas dos clases:
.subrayado {
color:#00aa00;
text-decoration:underline;
}
.tachado {
color:#00aa00;
text-decoration:line-through;
}
ESTILOS.CSS
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
______________________________________
h1 {
font-family:Helvetica;
color:#0000aa;
text-align:center;
}
h2 {
font-family:Helvetica;
color:#0000bb;
}
p {
text-indent:10px;
color:#444444;

word-spacing:4px;
letter-spacing:2px;
}
DOCUMENTO.HTML
________________________________________________________________________________
_____________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>Problema 8</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>h1</h1>
<h2>Conceptos bsicos</h2>
<p>Parrafo 1p>
<p> Parrafo 2</p>
<p>blah,blah,blah,blah</p>
<p>blah,blah,blah,blah</p>
</body>
</html>

9.-Problema : Definir estas dos reglas en la hoja de estilo externa. Luego crear
una pgina HTML que contenga 3 preguntas y 3 respuestas.
A cada pregunta y respuesta disponerla en un prrafo distinto. Asignar los estilos
.pregunta y .respueta
pregunta {
font-family:verdana;
font-size:14px;
font-style:italic;
color:#0000aa;
}
.respuesta {
font-family:verdana;
font-size:12px;
font-style:normal;
text-align:justify;
color:#555555;
}
________________________________________________________________________________
_____________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>Problema 9</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p class="pregunta">Que lenguaje te gusta mas?</p>
<p class="respuesta">Java</p>
<p class="respuesta">C</p>
<p class="respuesta">C++</p>
<p
<p
<p
<p

class="pregunta">Qu nivel tienes en C#?</p>


class="respuesta">4</p>
class="respuesta">5</p>
class="respuesta">10</p>

<p class="pregunta">cada cuando usas Java?</p>


<p class="respuesta">7 veces al ano</p>
<p class="respuesta">10 7 veces al ano</p>
<p class="respuesta">20 o mas veces al ano</p>
</body>
</html>
css ____________________________________________________________________________
_________________________________________________________________________
.pregunta {
font-family:verdana;
font-size:14px;
font-style:italic;
color:#0000aa;
}
.respuesta {
font-family:verdana;
font-size:12px;
font-style:normal;
text-align:justify;
color:#555555;
}

10.-Problema:Definir tres estilos de tipo id (cabecera, cuerpo y pie), luego def


inir en el archivo HTML tres areas (div)
inicializando el atributo id con los nombres de reglas de estilo creados.
Problema:Inicializar los elementos HTML h1,h2 y h3 con bordes de 2 pixeles, colo
r azul y diferentes estilos
para cada una. Crear una pgina HTML que los utilice.
Ej:
h1 {
border-width:2px;
border-style:solid;
border-color:#0000ff;
}
<!DOCTYPE html>
<html>
<head>
<title>Problema 10</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="cabecera">
<h1>Gestor de base de datos MySQL</h1>
</div>
<div id="cuerpo">
<p> blah,blah,blah,blah</p>
<p> blah,blah,blah,blah</p>
<p> blah,blah,blah,blah</p>
</div>

<div id="pie">
<p> parafillo <p>
</div>
</body>
</html>
CSS ____________________________________________________________________________
_________________________________________________________________________
#cabecera {
background-color:#888;
color:#ffffff;
font-family:Courier;
}
#cuerpo {
background-color:#eee;
font-family:Arial;
text-indent:20px;
}
#pie {
background-color:#888;
text-align:center;
11.-Problema: Crear una clase .titulosecundario que inicialice el borde superior
e inferior con ancho de 2 pixeles
y los bordes laterales con cero pixel. A su eleccin queda el estilo y color.
<!DOCTYPE html>
<html>
<head>
<title>Problema 11</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1 class="titulosecundario">Prueba de estilos de bordes en css.</h1>
</body>
</html>
css ____________________________________________________________________________
_________________________________________________________________________
.titulosecundario{
background-color:#ffffcc;
text-align:center;
font-family:verdana;
font-size:40px;
border-top-width:2px;
border-bottom-width:2px;
border-right-width:0px;
border-left-width:0px;
border-top-style:dotted;
border-bottom-style:dotted;
border-top-color:#ff0000;
border-bottom-color:#ff0000;
}

12.-Problema: Definir una clase titulo que fije los padding de izquierda y derec
ha con 20 pixeles y el superior
e inferior en 10. Escribir un texto dentro del elemento h1.
<!DOCTYPE html>
<html>
<head>
<title>Problema 12</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1 class="titulo">Ttitulo h1</h1>
</body>
</html>
CSS ____________________________________________________________________________
_________________________________________________________________________
.titulo {
padding-top:10px;
padding-bottom:10px;
padding-right:20px;
padding-left:20px;
background-color:#aaaaaa;
}
13.-Problema: Disponer ttulos de primer y segundo nivel con un margen de 5 pixele
s en la parte superior e inferior del elemento HTML.
<!DOCTYPE html>
<html>
<head>
<title>Problema 13</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
</body>
</html>
css ____________________________________________________________________________
_________________________________________________________________________
h1 {
margin:5px;
background-color:#eeeeee;
}
h2 {
margin:5px;
background-color:#eeeeee;
}
14.-Problema:
Problema 1 Confeccionar dos lista de lenguajes de programacin. Agrupar los lengua
jes estructurados (Pascal, C) y los lenguajes orientados a objetos

(C++, Java, C#) Aplicar estilos distintos a cada lista.


<!DOCTYPE html>
<html>
<head>
<title>Problema 14</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<ul class="estilo1">
<li>li1</li>
<li>li2</li>
</ul>
<ul class="estilo2">
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
</body>
</html>
CSS ____________________________________________________________________________
_________________________________________________________________________
.estilo1 {
list-style-type:decimal;
}
.estilo2 {
list-style-type:lower-roman;
}
Problema 2 Crear dos listas y e inicializar la propiedad list-style-position con
los valores inside y outside respectivamente y analizar en que difieren.
<!DOCTYPE html>
<html>
<head>
<title>Problema 14</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<ul class="estilo1">
<li>Pascal</li>
<li>C</li>
</ul>
<ul class="estilo2">
<li>lista 1</li>
<li>lista 2</li>
<li>lista 3</li>
</ul>
</body>
</html>
CSS ____________________________________________________________________________
_________________________________________________________________________
.estilo1 {
list-style-position:inside;

}
.estilo2 {
list-style-position:outsite;
}

15.-Problema:Definir la imagen fondo.jpg como fondo de la pgina, luego inicializa


r y probar la propiedad background-attachment
con los dos valores posibles (scroll/fixed)
body {
background-image:url(fondo.jpg);
background-repeat:no-repeat;
background-attachment:scroll;/*luego probar con fixed*/
}
Para probar el efecto que produce esta propiedad debe ingresar en el body de la
pgina un texto muy grande que llene
toda la pgina y permita hacer scroll (de no hacer esto no ver la diferencia entre
un valor y otro del background-attachemnt)
<!DOCTYPE html>
<html>
<head>
<title>Problema 15</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>

blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,

blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,

blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,

blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,

blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,

blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,

blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah

</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>

<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>

blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,

blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,

blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,

blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,

blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,

blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,
blah,

blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah

</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>

</body>
</html>
CSS ____________________________________________________________________________
_________________________________________________________________________
body {
background-image:url(fondo.jpg);
background-repeat:no-repeat;
background-attachment:scroll;/*luego probar con fixed*/
}
16.-Problema:Definir formatos reducidos para la propiedad font de los elementos
h1,h2 y h3. Luego probar con tres ttulos los resultados obtenidos.
<!DOCTYPE html>

<html>
<head>
<title>Problema 16 </title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
</body>
</html>
CSS ____________________________________________________________________________
_________________________________________________________________________
h1 {
font:30px Helvetica;
}
h2 {
font:25px Arial;
}
h3 {
font:20px Courier;
}
17.-Problema: Defina cuatro propiedades para el selector universal y luego imple
mente una pgina HTML que pruebe su funcionamiento.
<!DOCTYPE html>
<html>
<head>
<title>Problema 17</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<p>prrafo</p>
</body>
</html>
CSS ____________________________________________________________________________
_________________________________________________________________________
{
color:#666666;
font-family:Helvetica;
margin:10px;
padding:2px;
}
18.- Problema: Definir la propiedad font-size con un valor distinto cuando la fl
echa del mouse est sobre el link
y pintar al mismo tiempo el fondo de color amarillo.
<!DOCTYPE html>
<html>
<head>
<title>Problema 18</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">

</head>
<body>
<a href="http://www.facebook.com">Google</a>
<a href="http://www.twitter.com">Yahoo</a>
<a href="http://www.instagram.com">Bing</a>
</body>
</html>
css ____________________________________________________________________________
_________________________________________________________________________
a {
font-size:30px;
}
a:hover{
font-size:40px;
background-color:#ffff00;
}

19.-Problema: Configurar los enlaces que aparezcan con una lnea tachada en lugar
de subrayado.
<!DOCTYPE html>
<html>
<head>
<title>Problema 19</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<a href="http://www.facebook.com">FB</a>
<a href="http://www.instagram.com">TW</a>
<a href="http://www.twitter.com">INS</a>
</body>
</html>
CSS ____________________________________________________________________________
_________________________________________________________________________
a:link {
text-decoration: line-through;
}
a:visited {
text-decoration: line-through;
}

20.-Problema: Modificar la hoja de estilo del men desarrollado anteriormente para


que cada opcin aparezca una lnea de color negro que la recuadre.
<!DOCTYPE html>
<html>
<head>
<title>Problema 20</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>

<div id="menu">
<p><a href="http://www.facebook.com">Facebook</a></p>
<p><a href="http://www.twitter.com">Twitter/a></p>
<p><a href="http://www.instagram.com">Instagram</a></p>
</div>
</body>
</html>
css ____________________________________________________________________________
_________________________________________________________________________
#menu {
font-family: Arial;
}
#menu p {
margin:0px;
padding:0px;
}
#menu a {
display: block;
padding: 3px;
width: 160px;
background-color: #f7f8e8;
border-bottom: 1px solid #eeeeee;
text-align:center;
border:1px solid #000000;
}
#menu a:link, #menu a:visited {
color: #ff0000;
text-decoration: none;
}
#menu a:hover {
background-color: #336699;
color: #ffffff;
}

21.-Problema: Implemente un men horizontal y un men vertical a la izquierda.


<!DOCTYPE html>
<html>
<head>
<title>Problema 21</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<ul id="menuhorizontal">
<li><a href="http://www.facebook.com">FB</a></li>
<li><a href="http://www.twitter.com">TW</a></li>
<li><a href="http://www.instagram.com">INS</a></li>
</li>
</ul>

<div id="menuvertical">
<li><a href="http://www.facebook.com">FB</a></li>
<li><a href="http://www.twitter.com">TW</a></li>
<li><a href="http://www.instagram.com">INS</a></li>
</li>
</div>
</body>
</html>
css ____________________________________________________________________________
_________________________________________________________________________
#menuhorizontal, #menuvertical {
margin:5px;
padding:15px;
list-style-type:none;
}
#menuhorizontal a {
width:100px;
text-decoration:none;
text-align:center;
color:#ff0000;
background-color:#f7f8e8;
padding:3px 5px;
border-right:1px solid blue;
display:block;
}
#menuhorizontal li {
float:left;
}
#menuhorizontal a:hover,#menuvertical a:hover {
background-color:#336699;
}
#menuvertical a {
width:100px;
text-decoration:none;
text-align:center;
color:#ff0000;
background-color:#f7f8e8;
padding:3px 5px;
border-right:1px solid blue;
display:block;
}

22.-Problema: Crear una pgina HTML que muestre dos prrafos, a uno de ellos aplicar
le el siguiente estilo:
.parrafoestrecho {
width:200px; 0
text-align:justify;
}
Recordar que para aplicar esta clase a un prrafo debemos inicializar la propiedad
class del elemento p (ej. <p class="margenestrecho">bla bla</p>)

<!DOCTYPE html>
<html>
<head>
<title>Problema 22</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p> blah, blah, blah </p>
<p> blah, blah, blah </p>
<p> blah, blah, blah </p>
</body>
</html>
css ____________________________________________________________________________
_________________________________________________________________________
.parrafoestrecho {
width:200px;
text-align:justify;
}

Potrebbero piacerti anche