1.Definir DIV
Analice un ejemplo típico de definición de div:
#muestra{ MARGEN: 10px 10px 10px 10px;
RELLENO:20px 10px 10px 20px;
BORDE SUPERIOR: #CCC 2px sólido;
BORDE DERECHO: #CCC 2px sólido;
BORDE INFERIOR: #CCC 2px sólido;
FRONTERA IZQUIERDA: #CCC 2px sólido;
ANTECEDENTES: url(images/bg_poem.jpg) #FEFEFE no repetir abajo derecho;
COLOR: #666;
ALINEAR TEXTO: centro;
ALTURA DE LÍNEA: 150%; ANCHO:60%;
Las instrucciones son las siguientes:
El nombre de la capa es muestra. Puede llamar a este estilo usando <div id="sample"> en la página.
MARGEN se refiere al espacio en blanco que queda fuera del borde de la capa, que se utiliza para los márgenes de la página o para crear un espacio con otras capas. "10px 10px 10px 10px" representa respectivamente los cuatro márgenes de "superior, derecho, inferior e izquierdo" (en el sentido de las agujas del reloj). Si son todos iguales, se pueden abreviar como "MARGEN: 10px;". Si el margen es cero, escriba "MARGEN: 0px;". Nota: Cuando el valor es cero, excepto el valor de color RGB 0% que debe ir seguido de un signo de porcentaje, en otros casos no es necesario seguir la unidad "px". MARGIN es un elemento transparente y no puede definir un color.
PADDING se refiere al espacio entre el borde de la capa y el contenido de la capa. Al igual que el margen, especifique la distancia desde los bordes superior, derecho, inferior e izquierdo al contenido respectivamente. Si son todos iguales, puedes acortarlo a "PADDING:0px". Para especificar el lado izquierdo individualmente, puede escribir "PADDING-LEFT: 0px;". PADDING es un elemento transparente y no puede definir el color.
BORDE se refiere al borde de la capa. "BORDE-RIGHT: #CCC 2px solid;" define el color del borde derecho de la capa como "#CCC", el ancho como "2px" y el estilo como línea recta "sólida". .
Si desea un estilo de línea de puntos, puede utilizar "puntos".
FONDO define el fondo de la capa. Se define en dos niveles. Primero defina el fondo de la imagen y use "url(../images/bg_logo.gif)" para especificar la ruta de la imagen de fondo; en segundo lugar, defina el color de fondo "#FEFEFE". "no repetir" significa que no es necesario repetir la imagen de fondo. Si necesita repetirla horizontalmente, use "repetir-x", para repetirla verticalmente, use "repetir-y" y repetirla para cubrir. todo el fondo, utilice "repetir". El siguiente "inferior derecho" significa que la imagen de fondo comienza desde la esquina inferior derecha. Si no hay imagen de fondo, solo puedes definir el color de fondo FONDO: #FEFEFE
COLOR se utiliza para definir el color de fuente, que se introdujo en la sección anterior.
TEXT-ALIGN se utiliza para definir la disposición del contenido en la capa, el centro está en el medio, la izquierda está a la izquierda y la derecha está a la derecha.
LINE-HEIGHT define la altura de la línea 150% significa que la altura es el 150% de la altura estándar. También se puede escribir como: LINE-HEIGHT:1.5 o LINE-HEIGHT:1.5em, que tienen el mismo significado.
ANCHO es el ancho de la capa definida, que puede ser un valor fijo, como 500 px, o un porcentaje, como "60%" aquí. Cabe señalar que este ancho solo se refiere al ancho de su contenido y no incluye margen, borde ni relleno. Pero no está definido de esta manera en algunos navegadores, por lo que debes probar más.
2.Modelo de caja CSS2
Desde el lanzamiento de CSS1 en 1996, la organización W3C ha recomendado que todos los objetos de la página web se coloquen en un cuadro. Los diseñadores pueden controlar las propiedades de este cuadro creando definiciones. Estos objetos incluyen párrafos, listas e imágenes. y capa <div>. El modelo de caja define principalmente cuatro áreas: contenido, relleno, borde y margen. La capa de muestra de la que hablamos anteriormente es una caja típica. Los principiantes a menudo se sienten confundidos acerca de los niveles, las relaciones y las influencias mutuas entre el margen, el color de fondo, la imagen de fondo, el relleno, el contenido y el borde. Aquí hay un diagrama esquemático 3D del modelo de caja, espero que le resulte más fácil de entender y recordar.
Al utilizar el diseño XHTML + CSS, existe una tecnología a la que quizás no estés acostumbrado al principio. Cabe decir que es una forma de pensar diferente al diseño de tabla tradicional, es decir: todas las imágenes auxiliares se implementan con. antecedentes. Algo como esto:
ANTECEDENTES: url(images/bg_poem.jpg) #FEFEFE no repetir abajo derecho;
Aunque es posible insertar <img> directamente en el contenido, no se recomienda. Las "imágenes auxiliares" aquí se refieren a imágenes que no forman parte del contenido que se expresará en la página, sino que solo se utilizan como decoración, intervalo y recordatorio. Por ejemplo: las imágenes en los álbumes de fotos, las imágenes en las noticias en imágenes y las imágenes del modelo de caja 3D de arriba son parte del contenido. Se pueden insertar directamente en la página usando el elemento <img>, mientras que otras son similares a logotipos y títulos. imágenes e imágenes de prefijo de lista, todas deben mostrarse usando el modo de fondo u otros métodos CSS.
Hay 2 razones para esto:
Separe completamente el rendimiento de la estructura (consulte la lectura de otro artículo: "Comprensión de la separación del rendimiento de la estructura") y utilice CSS para controlar toda la apariencia y el rendimiento para una fácil revisión.
Hacer la página más usable y amigable. Por ejemplo, si una persona ciega utiliza un lector de pantalla, las imágenes implementadas con tecnología de fondo no se leerán en voz alta.