-
¿Cómo los márgenes afecten páginas web?
-
páginas web muestran el contenido dentro de los elementos HTML. La mayoría de los sitios web también utilizan código CSS (Cascading Style Sheet) para determinar el diseño y la apariencia de estos elementos. declaraciones CSS determinar las dimensiones de los elementos, así como las áreas de acolchado y los márgenes alrededor de ellos. El relleno es un área adicional dentro de un elemento, en torno a su contenido, mientras que un margen encuentra fuera de los límites del elemento. Márgenes aparecen en la mayoría de sitios web, lo que permite a los desarrolladores crear diseños claros con el espacio entre los elementos visibles.Instrucciones
1 Crear una página Web HTML. Al igual que con la mayoría de los temas técnicos, la forma más fácil de entender los conceptos de desarrollo web no es de ellos tratando de usted mismo. Para ello, cree un esquema de la página HTML de ejemplo utilizando la siguiente sintaxis:
<Html>
<Head>
</ Head>
<Body>
</ Body>
</ Html>
Esta es la estructura básica de una página Web en el formato HTML. Copiar el código en un nuevo archivo en un editor de texto y guardarlo con la extensión ".html".
2 Añadir un poco de contenido a su página. El uso de elementos HTML, añadir un poco de contenido de la página entre la apertura y cierre de etiquetas del cuerpo en su archivo. El siguiente código de ejemplo muestra el agregado de dos elementos con un poco de texto en ellos:
<Div id = "primera"> Aquí está algo de contenido. </ Div>
<Div class = "otro"> Aquí es un poco más. </ Div>
El primer elemento tiene un atributo ID, mientras que el segundo tiene un atributo de clase. Esto permitirá que el código CSS para identificar los elementos, proporcionando reglas de estilo específicas para cada uno de ellos.
3 Crear una sección para el código CSS. Agregue el siguiente esquema para un área de CSS entre la apertura y cierre de etiquetas de la cabeza en su página:
<Style type = "text / css">
</ Style>
Su código CSS irá entre estas etiquetas de estilo. Declarar las propiedades de estilo de un elemento utilizando su atributo ID, puede utilizar la siguiente sintaxis:
primero{
/Estilos para el elemento de "primera" aquí /
}
Declarar estilo para un elemento con un atributo de clase, puede utilizar el siguiente código:
div.other {
/ Estilos de "otros" elementos aquí /
}
4 Añadir propiedades de los márgenes de sus elementos. Inserte el siguiente código CSS dentro de la sección correspondiente a su elemento de "primera":
margen: 10px;background-color: # FFFF00;
El ajuste de color de fondo no es necesario, pero le permitirá ver el efecto de su declaración de propiedad margen de un vistazo. Añadir lo siguiente dentro de la sección de su "otra" clase:
Anchura: 200px;
altura: 400px;
margen: 10%;
background-color: # 0000FF;
Este código se aplica una anchura fija y la altura para el elemento, con una propiedad margen relativo. El margen se expresa con un valor porcentual, lo que representa un porcentaje de las dimensiones del elemento. Guarde el archivo y abrirlo en un navegador Web para ver el efecto de las propiedades de los márgenes.
5 Alterar el código para aplicar diferentes propiedades de margen a cada lado de un elemento. En lugar de aplicar las mismas propiedades de margen a los cuatro lados de un elemento, se puede aplicar de forma individual. El siguiente ejemplo de código CSS demuestra la aplicación de los cuatro lados en una sola línea:
margen: 5px 10px 15px 20px;
Como alternativa, el código puede especificar dos valores, uno para los lados, y uno para la parte superior e inferior:
margen: 10px 20px;
También puede especificar cada línea individual de la siguiente manera:
margin-top: 10px;
Experimentar con su página cambiando los valores en el código CSS, y la visualización de los resultados en su navegador.
Consejos y advertencias
- La propiedad margen de un elemento HTML trabaja en conjunto con las propiedades de relleno y de frontera como parte del modelo de caja CSS.
- Los valores fijos para los elementos CSS pueden reducir la capacidad de una página para hacer frente así a los diferentes tamaños de pantalla de usuario.
