¿Estás aprendiendo diseño CSS? ¿Aún no puedes dominar completamente el diseño CSS puro? Suelen existir dos situaciones que dificultan tu aprendizaje:
La primera posibilidad es que no hayas comprendido el principio del procesamiento de páginas CSS. Antes de considerar el rendimiento general de su página, primero debe considerar la semántica y la estructura del contenido, y luego agregar CSS para la semántica y la estructura. Este artículo le dirá cómo estructurar HTML.
Otra razón es que no conoce esas propiedades de capa de presentación tan familiares (como cellpadding, hspace, align=left, etc.) y no sabe en qué declaraciones CSS convertirlas. Una vez que hayas resuelto el primer problema y sepas cómo estructurar tu HTML, te daré una lista detallando qué CSS usar para reemplazar los atributos de presentación originales.
HTML estructurado
Cuando aprendemos por primera vez a producir una página web, siempre consideramos primero cómo diseñarla, considerando las imágenes, las fuentes, los colores y los planos de diseño. Luego usamos Photoshop o Fireworks para dibujarlo y cortarlo en imágenes pequeñas. Finalmente, edite el HTML para restaurar todos los diseños en la página.
Si desea que su página HTML esté diseñada con CSS (compatible con CSS), debe regresar y comenzar de nuevo. No piense primero en la "apariencia", sino primero en la semántica y la estructura del contenido de su página.
La apariencia no es lo más importante. Una página HTML bien estructurada se puede presentar con cualquier apariencia y CSS Zen Garden es un ejemplo clásico. CSS Zen Garden nos ayuda a darnos cuenta finalmente del poder de CSS.
HTML no es sólo para leer en la pantalla de una computadora. Es posible que sus imágenes cuidadosamente diseñadas en Photoshop no se muestren en PDA, teléfonos móviles ni lectores de pantalla. Pero una página HTML bien estructurada se puede mostrar en cualquier lugar y en cualquier dispositivo de red mediante diferentes definiciones de CSS.
empieza a pensar
Empiece por aprender qué es la estructura, lo que algunos escritores también llaman semántica. Lo que este término significa es que necesita analizar sus bloques de contenido y el propósito de cada contenido, y luego construir la estructura HTML correspondiente basada en estos propósitos de contenido.
Si se sienta y analiza y planifica cuidadosamente la estructura de su página, podría terminar con algo como esto:
Logotipo y nombre del sitio
Contenido de la página principal
Navegación del sitio (Menú principal)
submenú
cuadro de búsqueda
Áreas funcionales (por ejemplo, carrito de compras, caja)
Pie de página (derechos de autor y avisos legales relacionados)
Generalmente usamos elementos DIV para definir estas estructuras, similar a esto:
<div id=encabezado></div>
<div id=contenido></div>
<div id=globalnav></div>
<div id=subnav></div>
<div id=búsqueda></div>
<div id=tienda></div>
<div id=pie de página></div>
No es el diseño, es la estructura. Esta es una descripción semántica de bloques de contenido. Cuando comprenda su estructura, puede agregar la ID correspondiente al DIV. Cualquier bloque de contenido puede estar contenido dentro de un contenedor DIV y se puede anidar otro DIV dentro de él. Los bloques de contenido pueden contener cualquier elemento HTML: títulos, párrafos, imágenes, tablas, listas, etc.
Según lo anterior, ya sabe cómo estructurar HTML y ahora puede definir el diseño y los estilos. Cada bloque de contenido se puede colocar en cualquier lugar de la página y se pueden especificar el color, fuente, borde, fondo, propiedades de alineación, etc. del bloque.
Usar selectores es algo maravilloso.
El nombre de la identificación es un medio para controlar un determinado bloque de contenido. Al envolver este bloque de contenido con un DIV y agregar una identificación única, puede usar selectores CSS para definir con precisión la apariencia de cada elemento de la página, incluidos títulos, listas e imágenes. , enlaces o párrafos, etc. Por ejemplo, si escribe una regla CSS para #encabezado, puede ser completamente diferente de la regla de imagen en #contenido.
Otro ejemplo: puedes usar diferentes reglas para definir estilos de enlace en diferentes bloques de contenido. Algo como esto: #globalnav a:link o #subnav a:link o #content a:link. También puedes definir diferentes estilos para el mismo elemento en diferentes bloques de contenido. Por ejemplo, defina los estilos de p en #content y #footer respectivamente a través de #content p y #footer p. Estructuralmente hablando, su página se compone de imágenes, enlaces, listas, párrafos, etc. Estos elementos en sí no afectan en qué dispositivo de red se muestran (PDA, teléfono móvil o TV por Internet). Se pueden definir como cualquier apariencia de rendimiento.
Una página HTML cuidadosamente estructurada es muy simple y cada elemento se utiliza con fines estructurales. Cuando desee sangrar un párrafo, no necesita usar la etiqueta blockquote. Simplemente use la etiqueta p y agregue una regla de margen CSS a p para lograr el propósito de sangría. p es una etiqueta estructurada y el margen es un atributo de presentación. La primera pertenece a HTML y el segundo pertenece a CSS. (Esta es la separación de estructura y expresión).
Las páginas HTML bien estructuradas casi no tienen etiquetas de atributos. El código es muy limpio y conciso. Por ejemplo, el código original <table width=80% cellpadding=3 border=2 align=left> ahora solo puede escribir <table> en HTML, y todo lo que controla el rendimiento se escribe en CSS. En HTML estructurado, la tabla es. una tabla, nada más (como ser usado para diseño y posicionamiento).
Practica estructurarte
Lo anterior es solo la estructura más básica. En la aplicación real, puede ajustar los bloques de contenido según sus necesidades. El anidamiento DIV ocurre a menudo y verá que hay otras capas en la capa contenedora, con una estructura similar a esta:
<div id=contenedor de navegación>
<div id=navegación global>
<ul>una lista</ul>
</div>
<div id=subnavegación>
<ul>otra lista</ul>
</div>
</div>
Los elementos div anidados le permiten definir más reglas CSS para controlar la presentación. Por ejemplo, puede darle a #navcontainer una regla para centrar la lista a la derecha, darle a #globalnav una regla para centrar la lista a la izquierda y darle otra a #subnav. regla para centrar la lista por completo.
Reemplazar los métodos tradicionales con CSS
La siguiente lista le ayudará a reemplazar los métodos tradicionales con CSS:
Atributos HTML y métodos CSS correspondientes
Descripción del método CSS del atributo HTML
alinear = izquierda
align=flotante derecho: izquierdo;
float: right; usa CSS para hacer flotar cualquier elemento: imágenes, párrafos, divs, títulos, tablas, listas, etc.
Cuando utiliza el atributo flotante, debe definir un ancho para el elemento flotante.
marginwidth=0 leftmargin=0 marginheight=0 topmargin=0 margin: 0; usando CSS, el margen se puede establecer en cualquier elemento, no solo en el elemento del cuerpo. Más importante aún, puede especificar la parte superior, derecha, inferior e izquierda del elemento. valor del margen por separado.
vlink=#333399 alink=#000000 enlace=#3333FF a:enlace #3ff;
a:visitado: #339;
a: flotar: #999;
a:activo: #00f;
En HTML, el color de un enlace se define como un valor de atributo del cuerpo. El estilo del enlace es el mismo en toda la página. Al utilizar selectores CSS, los estilos de enlace pueden ser diferentes en diferentes partes de la página.
bgcolor=#FFFFFF background-color: #fff; En CSS, el color de fondo se puede definir para cualquier elemento, no solo para los elementos del cuerpo y de la tabla.
bordercolor=#FFFFFF border-color: #fff; Cualquier elemento puede establecer un borde (boeder). Puede definir arriba, derecha, abajo e izquierda respectivamente.
borde=3
cellpacing=3 border-width: 3px; Usando CSS, puedes definir los bordes de la tabla como un estilo unificado, o puedes definir el color, tamaño y estilo de los bordes superior, derecho, inferior e izquierdo respectivamente.
Puede utilizar selectores de tabla, td o th.
Si necesita establecer un efecto sin bordes, puede usar la definición CSS: border-collapse: colapso;
<br claro=izquierda>
<br claro=derecho>
<br claro=todo>
claro: izquierda;
claro: correcto;
claro: ambos;
Muchos diseños de 2 o 3 columnas utilizan el atributo flotante para el posicionamiento. Si define un color de fondo o una imagen de fondo en la capa flotante, puede usar el atributo claro.
relleno de celda = 3
vespacio=3
hspace=3 padding: 3px; usando CSS, el atributo de relleno se puede configurar en cualquier elemento. De manera similar, el relleno se puede configurar en la parte superior, derecha, inferior e izquierda respectivamente. El acolchado es transparente.
align=centro texto-align: centro;
margen derecho: automático; margen izquierdo: automático;
La alineación de texto solo funciona con texto.
Los elementos a nivel de bloque como div y p se pueden centrar horizontalmente usando margin-right: auto y margin-left: auto;
Algunas técnicas y ambiente de trabajo lamentables.
Debido al soporte imperfecto de CSS por parte de los navegadores, a veces tenemos que adoptar algunos trucos (hacks) o establecer un entorno (Soluciones alternativas) para permitir que CSS logre el mismo efecto que los métodos tradicionales. Por ejemplo, los elementos a nivel de bloque a veces necesitan utilizar técnicas de centrado horizontal, técnicas de error de modelo de caja, etc. Todas estas técnicas se detallan en el artículo de Molly Holzschlag Diseño web integrado: estrategias para la gestión de piratería CSS a largo plazo.
Otro recurso sobre técnicas CSS es "La posición lo es todo" de Big John y Holly Bergevin.
Comprender el comportamiento flotante
"Contener flotadores" de Eric Meyer le ayudará a dominar cómo utilizar los atributos flotantes para el diseño. A veces es necesario borrar los elementos flotantes. Leer "Cómo borrar los flotadores sin marcas estructurales" será muy útil.