Clases de Cajas de TEXTO 13 de Nov

CAJAS CONTENEDORAS
Padding o relleno
El padding es el margen interno de un elemento, también se le llama relleno y es la cantidad de espacio
entre el borde y el contenido del elemento. Veamos una tabla con las propiedades para dar un margen
interno a un elemento.
Propiedad Descripción Valores
padding-top padding-right padding- Tamaño del relleno superior, longitud |

bottom padding-left derecho, inferior e izquierdo porcentaje
longitud |
padding Tamaño del relleno
porcentaje {1,4}
Tabla 12.1: Padding
Valores del padding (también aplicables a la propiedad margin):
• Un valor: se aplica el estilo a los 4 lados.

• Dos valores: el primer valor se aplica a arriba y abajo, el segundo valor se aplica a derecha
e izquierda.
• Tres valores: el primer valor se aplica a arriba, el segundo valor a derecha e izquierda y el
tercer valor se aplica a abajo del elemento.
• Cuatro valores: el primer valor se aplica a arriba, el segundo valor se aplica a la derecha, el
tercer valor se aplica a abajo y el cuarto valor se aplica a la izquierda.
• <html> div.a {
• <head> padding-top: 30px;
• <meta charset="utf-8"> padding-bottom: 80px;
• <title>Propiedad padding</title> padding-right: 50px;
• <link rel="stylesheet" href="style.css"> padding-left: 40px;
• </head> background-color: azure;
• <body> }
• <h3>Propiedad padding</h3> div.b { /*Propiedad corta*/
• <div class="a" border="1"> padding: 30px 50px 80px 40px;
background-color: darkseagreen;
• <p>Contenedor con padding-top:
}
30px; padding-bottom: 80px; padding:
50px; padding: 40px;</p>
• </div></br>
• <div class="b" border="1">
• <p>Contenedor con padding: 30px
50px 80px 40px</p>
• </div>
• </body>
• </html>
12.2. Margin
El margin es el margen externo de un elemento, fuera de cualquier borde definido. Veamos las distintas
propiedades para dar estilo a los márgenes de un elemento.
margin-top margin-right margin- Tamaño del margen superior, longitud | porcentaje

bottom margin-left derecho, inferior e izquierdo | auto
longitud | porcentaje
margin Ancho de los márgenes
| auto {1,4}
<html> div.a {
<head> margin-top: 30px;
<meta charset="utf-8"> margin-bottom: 80px;
<title>Propiedad margin</title> margin-right: 50px;
<link rel="stylesheet" href="style.css"> margin-left: 40px;
</head> background-color: azure;
<body> }
<h3>Propiedad margin</h3> div.b { /*Propiedad corta*/
margin: 30px 80px 50px 40px;
<div class="a" border="1"> background-color: darkseagreen;
<p>Contenedor con margin-top: 30px; margin- }
bottom: 80px; margin-right: 50px; margin-left:
40px;</p>
</div>
<div class="b" border="1">
<p>Contenedor con margin: 30px 80px 50px
40px</p>
</div>
</body>
</html>
Bordes
La propiedad border en CSS permite especificar el estilo, el ancho y el color de los bordes de un elemento.
Puedes usar diferentes valores para crear distintos tipos de bordes, como líneas lisas, de puntos,
redondeados, etc. Veamos las propiedades para dar estilo a los bordes de un elemento.
border-top-width border-right-
Anchura del borde superior,
width border-bottom- thin | medium | thick | longitud
derecho, inferior o izquierdo
width border-left-width
thin | medium | thick | longitud

border-width Anchura del borde (reducida)
{1,4}
border-top-color border-right-
Color del borde superior,
color border-bottom-color border- color | transparent
derecho, inferior e izquierdo
left-color
border-color Color del borde (reducida) color | transparent {1,4}
border-top-style border-right-
none | hidden | dotted | dashed |
Estilo del borde superior,
style border-bottom-style border- solid | double | groove | ridge |
derecho, inferior e izquierdo
inset | outset
left-style
none | hidden | dotted | dashed |

border-style Estilo del borde (reducida) solid | double | groove | ridge |
inset | outset {1,4}
border-top border-right border- Ancho, estilo y color para el

border-top-width | border-top-style
borde superior, derecho,
bottom border-left | border-top-color
inferior e izquierdo
Ancho, estilo y color para los border-width | border-style |

border
bordes (reducida) border-color
border-radius
<h3>Propiedad border</h3> .a { border: 4px solid blue; }

<p class="a">Párrafo con un borde sólido de color .b { border: 6px dotted green; }
azul</p> .c { border: 3px dashed purple; }
<p class="b">Párrafo con borde verde .d {
punteado</p> border-top: 3px double orange;
<p class="c">Párrafo con borde violeta a border-right: 3px double brown;
rayas</p> border-bottom: 3px double brown;
<p class="d">Párrafo con borde mixto</p> border-left: 3px double brown;
}
Ejercicios - Modelo caja 2
Enunciado
A partir de la página web que se te proporciona, debes escribir las reglas CSS necesarias para lograr una
página web que tenga el mismo aspecto que la siguiente imagen:
Los bordes que debes definir son:

• Encabezado nivel 1: borde completo con una anchura de 2px, sólido y de color azul (#00F).
• Encabezado nivel 2: borde completo con una anchura de 2px, sólido y de color gris (#AAA).
• Listas: borde completo con una anchura de 2px, solido y de color verde (#0F0).
En la siguiente imagen se indican las dimensiones que deben tener ciertas partes de la página:
• A: relleno izquierdo y derecho de 10px.

• B: relleno de 10 px.
• C: margen superior e inferior de 30px.
• D: relleno de 5 px.
• E: margen superior e inferior de 15px.
• F: margen entre los elementos de la lista de 15 px.
Puedes modificar el código HTML proporcionado para añadir los identificadores y clases que necesites.
Código base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML & CSS: Curso práctico avanzado</title>
</head>
<body>
<h1>HTML & CSS: Curso práctico avanzado</h1>
<h2>Datos del libro</h2>

<ul>
<li>Título: HTML & CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>
<h2>Descripción del libro</h2>
<p>
Aunque los inicios de Internet se remontan a los años sesenta, no ha sido hasta los años noventa cuando,
gracias a la Web, se ha extendido su uso por todo el mundo. En pocos años, la Web ha evolucionado
enormemente: se ha pasado de páginas sencillas, con pocas imágenes y contenidos estáticos que eran
visitadas por unos pocos usuarios a páginas complejas, con contenidos dinámicos que provienen de bases
de datos y que son visitadas por miles de usuarios al mismo tiempo.
</p>
<p>
Todas las páginas están internamente construidas con la misma tecnología, con el Lenguaje de marcas de
hipertexto (Hypertext Markup Language, HTML) y con las Hojas de estilo en cascada (Cascading Style
Sheets, CSS).
</p>
<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas
web. No son necesarios conocimientos previos para aprender con este libro, lo único que es necesario es
saber utilizar un ordenador y saber navegar por la Web.
</p>
<h2>Contenido del libro</h2>
<p>
El contenido de este libro se estructura en tres apartados bien diferenciados:
</p>
<ul>
<li>En la primera parte del libro se trabajan conceptos generales que son necesarios para poder
desarrollar páginas web; se explican conceptos de estructura física y estructura lógica (o estructura de
navegación) de un sitio web. Se detalla cómo influye la estructura física en las URL o direcciones que se
emplean a la hora de crear los enlaces de un sitio web. Pasando por el concepto de "estándar web", un
término general que se emplea para refererirse a los estándares que define su funcionamiento como
HTML y CSS, empleados para el desarrollo de las páginas web en el lado del cliente.</li>
<li>En la segunda parte se trabaja HTML. Partiendo de la estructura básica de una página web, se explican
las etiquetas de HTML que se utilizan para definir el texto, los enlaces, las listas, las tablas, los formularios
y los elementos multimedia.</li>
<li>En la tercera y última parte se explica CSS, el lenguaje que se emplea para definir el formato y la
presentación de una página web. Se explica cómo utilizar el color, cómo definir la presentación del texto,
de las tablas y de los formularios; cómo realizar transformaciones y transiciones con el fin de diseñar una
página web.</li>
</ul>
</body>
</html>
Solución
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML & CSS: Curso práctico avanzado</title>
<style>
body {
padding-left: 10px;
padding-right: 10px;
h1 {
border: 2px solid #00F;
padding: 10px;
margin-top: 30px;
margin-bottom: 30px;
h2 {
border: 2px solid #AAA;
padding: 5px;
margin-top: 15px;
ul {
border: 2px solid #0F0;
li {
margin-bottom: 0;
li + li {
margin-top: 15px;
</style>
</head>
<body>
<h1>HTML & CSS: Curso práctico avanzado</h1>
<h2>Datos del libro</h2>
<ul id="datos">
<li>Título: HTML & CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>
<h2>Descripción del libro</h2>

<p>
Aunque los inicios de Internet se remontan a los años sesenta, no ha sido hasta los años noventa cuando,
gracias a la Web, se ha extendido su uso por todo el mundo. En pocos años, la Web ha evolucionado
enormemente: se ha pasado de páginas sencillas, con pocas imágenes y contenidos estáticos que eran
visitadas por unos pocos usuarios a páginas complejas, con contenidos dinámicos que provienen de bases
de datos y que son visitadas por miles de usuarios al mismo tiempo.
</p>
<p>
Todas las páginas están internamente construidas con la misma tecnología, con el Lenguaje de marcas de
hipertexto (Hypertext Markup Language, HTML) y con las Hojas de estilo en cascada (Cascading Style
Sheets, CSS).
</p>
<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas
web. No son necesarios conocimientos previos para aprender con este libro, lo único que es necesario es
saber utilizar un ordenador y saber navegar por la Web.
</p>
<h2>Contenido del libro</h2>
<p>
El contenido de este libro se estructura en tres apartados bien diferenciados:
<ul id="contenido">
<li>En la primera parte del libro se trabajan conceptos generales que son necesarios para poder
desarrollar páginas web; se explican conceptos de estructura física y estructura lógica (o estructura de
navegación) de un sitio web. Se detalla cómo influye la estructura física en las URL o direcciones que se
emplean a la hora de crear los enlaces de un sitio web. Pasando por el concepto de "estándar web", un
término general que se emplea para refererirse a los estándares que define su funcionamiento como
HTML y CSS, empleados para el desarrollo de las páginas web en el lado del cliente.</li>
<li>En la segunda parte se trabaja HTML. Partiendo de la estructura básica de una página web, se explican
las etiquetas de HTML que se utilizan para definir el texto, los enlaces, las listas, las tablas, los formularios
y los elementos multimedia.</li>
<li>En la tercera y última parte se explica CSS, el lenguaje que se emplea para definir el formato y la
presentación de una página web. Se explica cómo utilizar el color, cómo definir la presentación del texto,
de las tablas y de los formularios; cómo realizar transformaciones y transiciones con el fin de diseñar una
página web.</li>
</ul>
</body>
</html>
EJERCICIOS
HTML-CSS
<!DOCTYPE html>
<html>
<head>
<title>Modelo de cajas y textos</title>
<meta charset="UTF-8" />
<style>
.primero{
color: #2d6921;
border: 3px dotted #d66f0f;
width: 500px;
font-weight: bold;
padding: 20px;
text-align: right;
}
.segundo{
border: 3px solid blue;
width: 500px;
margin: auto;
padding: 50px;
font-style: italic;
}
.tercero{
width: 30%;
border: 6px outset #666;
padding: 10px;
text-align: justify;
line-height: 30px;
}
.cuarto{
width: 75%;
border-top: 3px solid #f0377b;
}
</style>
</head>
<body>
<p class="primero">TEXTO.</p>
<p class="segundo">TEXTO.</p>
<p class="tercero">TEXTO.</p>
<p class="cuarto">TEXTO.</p>
</body>
</html>

Clases de Cajas de TEXTO 13 de Nov

Cargado por

Copyright:

Formatos disponibles

Clases de Cajas de TEXTO 13 de Nov

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Clases de Cajas de TEXTO 13 de Nov

Cargado por

Copyright:

Formatos disponibles

CAJAS CONTENEDORAS

Propiedad Descripción Valores

padding-top padding-right padding- Tamaño del relleno superior, longitud |

Tabla 12.1: Padding

Valores del padding (también aplicables a la propiedad margin):

• Un valor: se aplica el estilo a los 4 lados.

margin-top margin-right margin- Tamaño del margen superior, longitud | porcentaje

thin | medium | thick | longitud

border-color Color del borde (reducida) color | transparent {1,4}

none | hidden | dotted | dashed |

border-top border-right border- Ancho, estilo y color para el

Ancho, estilo y color para los border-width | border-style |

<h3>Propiedad border</h3> .a { border: 4px solid blue; }

Ejercicios - Modelo caja 2

Los bordes que debes definir son:

• A: relleno izquierdo y derecho de 10px.

<meta charset="utf-8" />

<title>HTML &amp; CSS: Curso práctico avanzado</title>

<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<li>Título: HTML &amp; CSS: Curso práctico avanzado</li>

<li>Autor: Sergio Luján Mora</li>

<li>Editorial: Publicaciones Altaria</li>

<li>Año de publicación: 2015</li>

<h2>Descripción del libro</h2>

<h2>Contenido del libro</h2>

El contenido de este libro se estructura en tres apartados bien diferenciados:

<meta charset="utf-8" />

<title>HTML &amp; CSS: Curso práctico avanzado</title>

border: 2px solid #00F;

border: 2px solid #AAA;

border: 2px solid #0F0;

<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<li>Título: HTML &amp; CSS: Curso práctico avanzado</li>

<li>Autor: Sergio Luján Mora</li>

<li>Editorial: Publicaciones Altaria</li>

<li>Año de publicación: 2015</li>

<h2>Descripción del libro</h2>

<h2>Contenido del libro</h2>

El contenido de este libro se estructura en tres apartados bien diferenciados:

También podría gustarte

<title>HTML & CSS: Curso práctico avanzado</title>

<h1>HTML & CSS: Curso práctico avanzado</h1>

<li>Título: HTML & CSS: Curso práctico avanzado</li>

<title>HTML & CSS: Curso práctico avanzado</title>

<h1>HTML & CSS: Curso práctico avanzado</h1>

<li>Título: HTML & CSS: Curso práctico avanzado</li>