IES Palomeras Vallecas

Herramientas de usuario

Herramientas del sitio

Traza:
aula:programacion:progamacion_html:ejemplo_div_y_span

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anteriorRevisión previa
Próxima revisión		Revisión previa
aula:programacion:progamacion_html:ejemplo_div_y_span [2020/12/17 22:07] – [Hojas de estilo] adminaula:programacion:progamacion_html:ejemplo_div_y_span [2025/01/22 02:02] (actual) – editor externo 127.0.0.1
Línea 1: Línea 1:
 +====== Ejemplo de div y span ======
 +
 +<html>
 +  <style> 
 +.caja-roja{border:2px solid #f00;width:200px;height:200px;}
 +.espacio{width:200px;height:10px;}
 +.espacio2{width:200px;height:25px;}
 +.caja1{border:2px solid #000;width:250px;height:150px;}
 +.caja2-verde{border:2px solid #0f0;width:150px;height:150px;}
 +.caja3-azul{border:2px solid #00f;width:100px;height:100px;}
 +.redondea { border-radius: 100px;} 
 +.redondea1 { border-radius: 15px;} 
 +  </style> 
 +
 +
 +    <div class="caja-roja redondea">
 +
 +<div class="espacio2 ">
 +</div>
 +
 +  <div class="caja2-verde redondea">
 +
 +<div class="espacio2 ">
 +</div>
 +
 +<div class="caja3-azul redondea">
 +
 +</div>
 +  </div>
 +    </div>
 +
 +<div class="espacio ">
 +</div>
 +
 +<div style="color: blue;">
 + <h2> Ejemplo de div y span </h2>
 +  <p>
 +    Esto es un párrafo dentro de un div,
 +    <span style="color: red;"> y esto un span dentro de un párrafo.</span>
 +  </p>
 +</div>
 +
 +<head>
 + <style type="text/css">
 +   H1.miclase {border-width: 1px; border: solid; text-align: center}
 + </style>
 +</head>
 +<body>
 + <H1 class="miclase"> Este H1 está afectado por nuestro estilo </H1>
 + <H1> Este no está afectado por nuestro estilo </H1>
 +</body>
 +</html>
 +
 +
 +
 +  <html>
 +    <style> 
 +  .caja-roja{border:2px solid #f00;width:200px;height:200px;}
 +  .espacio{width:200px;height:10px;}
 +  .espacio2{width:200px;height:25px;}
 +  .caja1{border:2px solid #000;width:250px;height:150px;}
 +  .caja2-verde{border:2px solid #0f0;width:150px;height:150px;}
 +  .caja3-azul{border:2px solid #00f;width:100px;height:100px;}
 +  .redondea { border-radius: 100px;} 
 +  .redondea1 { border-radius: 15px;} 
 +    </style> 
 +  
 +  
 +      <div class="caja-roja redondea">
 +  
 +  <div class="espacio2 ">
 +  </div>
 +  
 +     <div class="caja2-verde redondea">
 +  
 +  <div class="espacio2 ">
 +  </div>
 +  
 +  <div class="caja3-azul redondea">
 +  
 +  </div>
 +    </div>
 +      </div>
 +  
 +  <div class="espacio ">
 +  </div>
 +  
 +  <div style="color: blue;">
 +   <h2> Ejemplo de div y span </h2>
 +    <p>
 +      Esto es un párrafo dentro de un div,
 +      <span style="color: red;"> y esto un span dentro de un párrafo.</span>
 +    </p>
 +  </div>
 +  </html>
 +
 +
 +====== Hojas de estilo ======
 +<html>
 +<head>
 + <style type="text/css">
 +   H1.miclase {border-width: 1px; border: solid; text-align: center}
 + </style>
 +</head>
 +<body>
 + <H1 class="miclase"> Este H1 está afectado por nuestro estilo </H1>
 + <H1> Este no está afectado por nuestro estilo </H1>
 +</body>
 +
 +<head>
 + <style type="text/css">
 +   #miid {border-width: 1px; border: solid; text-align: center}
 + </style>
 +</head>
 +<body>
 + <H1 class="miclase"> Este H1 no está afectado </H1>
 + <H1 id="miid"> Este H1 está afectado por el estilo </H1>
 + <H1> Este H1 no está afectado </H1>
 +</body>
 +
 +<HEAD>
 + <STYLE type="text/css">
 +  SPAN.ver-ex { font-variant: small-caps }
 + </STYLE>
 +</HEAD>
 +<BODY>
 +  <P><SPAN class="ver-ex">Las primeras</SPAN> palabras
 +  de este párrafo van en versalitas.
 +</BODY>
 +
 +<HEAD>
 + <STYLE type="text/css">
 +   DIV.Abstracto { text-align: justify }
 + </STYLE>
 +</HEAD>
 +<BODY>
 + <DIV class="Abstracto">
 +   <P>La gama de productos Gran Jefe es nuestra apuesta
 +     para el año que viene. Este informe sienta las bases
 +     para confrontar a Gran Jefe con los productos de la
 +     competencia.
 +
 +   <P>Gran Jefe reemplaza a nuestra gama "Commander",
 +     si bien ésta seguirá de momento en catálogo.
 + </DIV>
 +</BODY>
 +
 +<HEAD>
 + <TITLE>Cómo Tallar la Madera</TITLE>
 + <STYLE type="text/css">
 +  H1 { text-align: center}
 + </STYLE>
 +<BODY>
 + <H1> Cómo Tallar la Madera </H1>
 +
 +<HEAD>
 + <TITLE>Cómo Tallar la Madera</TITLE>
 + <STYLE type="text/css">
 +  H1.madera {text-align: center}
 + </STYLE>
 +<BODY>
 + <H1 class="madera"> Cómo Tallar la Madera </H1>
 +
 +<HEAD>
 + <TITLE>Cómo Tallar la Madera</TITLE>
 + <STYLE type="text/css">
 +  DIV.parrafos {text-align: right}
 + </STYLE>
 +<BODY>
 + <DIV class="parrafos">
 +  <P>...texto del primer párrafo...
 +  <P>...texto del segundo párrafo...
 +  <P>...texto del tercer párrafo...
 + </DIV>
 +
 +<HEAD>
 + <TITLE>Como Tallar la Madera</TITLE>
 + <STYLE type="text/css">
 +  BODY {text-align: center}
 + </STYLE>
 +<BODY>
 + ...el cuerpo está centrado...
 +</BODY>
 +
 +<html>
 +<head>
 + <style type="text/css">
 +   H1.miclase {border-width: 1px; border: solid; text-align: center}
 + </style>
 +</head>
 +<body>
 + <H1 class="miclase"> Este H1 está afectado por nuestro estilo </H1>
 + <H1> Este no está afectado por nuestro estilo </H1>
 +</body>
 +
 +
 +</html>