La estructura de div+css
¿Estás aprendiendo el diseño de CSS? ¿No puedes dominar completamente el diseño CSS puro? Por lo general, hay dos situaciones que obstaculizan su estudio:
La primera posibilidad es que aún no haya entendido el principio de las páginas de procesamiento de 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 está indefenso acerca de esos atributos de capa de presentación muy familiares (como Cellpadding, HSpace, Aline = Izquierda, etc.) y no sabe a qué declaración CSS se convierte. Cuando resuelva el primer problema y sepa cómo estructurar su HTML, daré una lista de los atributos de rendimiento originales en detalle qué CSS se utiliza.
HTML estructurado
Cuando aprendimos por primera vez la producción de la página web, siempre consideramos cómo diseñar y considerar las imágenes, las fuentes, los colores y los planes de diseño. Luego usamos Photoshop o fuegos artificiales para dibujar y cortar en pequeñas imágenes. Finalmente, todos los diseños se restauran y se muestran en la página editando HTML.
Si desea que su página HTML se diseñe con CSS (que es amigable con CSS), debe comenzar de nuevo, no considerar la apariencia primero, y primero pensar 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 expresar en cualquier apariencia, CSS Zen Garden es un ejemplo clásico. CSS Zen Garden nos ayuda a finalmente reconocer el poder de CSS.
HTML no solo se lee en pantallas de computadora. Es posible que las imágenes que diseñó cuidadosamente con Photoshop no se muestre en PDA, teléfonos móviles y lectores de pantalla. Pero una página HTML bien estructurada se puede mostrar en cualquier lugar, en cualquier dispositivo de red a través de diferentes definiciones de CSS.
Empezar a pensar
En primer lugar, necesitamos aprender qué estructura es, que algunos escritores también llaman semántica. El término significa que debe analizar sus bloques de contenido y el propósito de cada servicio de contenido, y luego establecer una estructura HTML correspondiente basada en estos fines de contenido.
Si se sienta y analiza y planifica cuidadosamente la estructura de su página, puede obtener algunas piezas como esta:
Nombre del logotipo y el sitio
Contenido de la página principal
Navegación del sitio (menú principal)
Submenú
Caja de búsqueda
Área funcional (como carrito de compras, cajero)
Pie de página (derechos de autor y declaraciones legales relevantes)
Por lo general, usamos elementos Div para definir estas estructuras, como esta:
＜ Div ID = Encabezado ＞＜/div ＞
＜ Div ID = Contenido ＞＜/Div ＞
＜ Div ID = GlobalNav ＞＜/Div ＞
＜ Div ID = Subnav ＞＜/Div ＞
＜ Div ID = Buscar ＞＜/div ＞
＜ Div ID = Tienda ＞＜/Div ＞
＜ Div ID = pie de página ＞＜/div ＞
Este no es un diseño, es una estructura. Esta es una descripción semántica de bloques de contenido. Cuando comprenda su estructura, puede agregar la identificación correspondiente al DIV. El contenedor Div puede contener cualquier bloque de contenido o anidar otro Div. El bloque de contenido puede contener cualquier elemento HTML: título, párrafo, imagen, tabla, lista, etc.
Según lo que se dijo anteriormente, ya sabe cómo estructurar HTML, y ahora puede hacer definiciones de diseño y estilo. Cada bloque de contenido se puede colocar en cualquier lugar de la página, y luego se especifica el color, la fuente, el borde, el fondo, los atributos de alineación, etc. del bloque.
Usar un selector es algo maravilloso
El nombre de una ID es un medio para controlar un determinado bloque de contenido. Al colocar un división en este bloque de contenido y agregar una ID única, puede usar el selector CSS para definir con precisión la apariencia de cada elemento de página, incluidas las reglas de título, lista, imagen, enlace o párrafo, etc., por ejemplo, si escribe una regla CSS para #Header, puede ser completamente diferente de las reglas de imagen en #content.
Otro ejemplo es: puede definir estilos de enlace en diferentes bloques de contenido a través de diferentes reglas. Similar a esto: #Globalnav A: Link o #Subnava: Link o #Content A: Link. También puede definir los mismos elementos en diferentes bloques de contenido con diferentes estilos. Por ejemplo, los estilos de P en #content y #footer están definidos por #content P y #footerp, respectivamente. Estructuralmente hablando, su página está compuesta de imágenes, enlaces, listas, párrafos, etc. Estos elementos en sí mismos no tienen ningún efecto en qué dispositivo de red (PDA o teléfono móvil o televisor de red) se muestran. Se pueden definir como cualquier apariencia.
Una página HTML cuidadosamente estructurada es muy simple, y cada elemento se usa para 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, el margen es un atributo de representación, el primero pertenece a HTML, y el segundo pertenece a CSS. (Esta es la separación de fases de la estructura y la expresión).
Casi no hay etiquetas que representen atributos en una página HTML bien estructurada. El código es muy limpio y conciso. Por ejemplo, el código original <tableWidth = 80% CellPadding = 3 border = 2Align = Left> ahora solo puede escribir <Able> en el HTML, y todas las cosas que controlan el rendimiento se escriben en el CSS. En el HTML estructurado, la tabla es una tabla, no algo más (como se usa para el diseño y el posicionamiento).
Practica estructura tú mismo
Lo que se mencionó anteriormente es solo la estructura más básica. En la aplicación real, puede ajustar los bloques de contenido según sea necesario. A menudo hay situaciones de anidación de div, y verá que hay otras capas en la capa de contenedor, con una estructura similar a esta:
＜ Div ID = NavContainer ＞
＜ Div ID = GlobalNav ＞
＜ ul ＞ una lista ＜/ul ＞
＜/div ＞
＜ Div ID = Subnav ＞
＜ ul ＞ otra lista ＜/ul ＞
＜/div ＞
＜/div ＞
Los elementos DIV anidados le permiten definir más reglas de CSS para controlar el rendimiento, por ejemplo: puede darle a #NavContainer una regla para hacer la lista correcta, luego darle a #Globalnav una regla para hacer que la lista a la izquierda, y dar a #Subnav una lista de otro rendimiento completamente diferente.
Reemplace los métodos tradicionales con CSS
La siguiente lista lo ayudará a reemplazar los métodos tradicionales con CSS:
Atributo HTML y método CSS correspondiente
atributo HTML
Descripción del método CSS
alinearse = izquierda
alinearse = flotante derecho: izquierda;
flotante: correcto; Use CSS para flotar cualquier elemento: imagen, párrafo, div, título, tabla, lista, etc.
Cuando usa el atributo flotante, debe definir un ancho para el elemento flotante.
marginwidth = 0leftMargin = 0 marginheight = 0 topmargin = 0 margen: 0; Use CSS, el margen se puede establecer en cualquier elemento, no solo en un elemento corporal, sino lo más importante, puede especificar los valores de margen de la parte superior, derecha, abajo e izquierda del elemento respectivamente.
vlink =#333399 Link =#000000 Link =#3333ff a: enlace#3ff;
A: Visitado: #339;
A: Hover: #999;
A: Activo: #00F;
En HTML, el color del enlace se define como un valor de atributo del cuerpo. Los estilos de enlace de toda la página son los mismos. Usando el selector CSS, los estilos de enlace de diferentes partes de la página pueden ser diferentes.
bgcolor = #ffffff de fondo de fondo: #fff; En CSS, cualquier elemento puede definir el color de fondo, no solo los elementos del cuerpo y la mesa.
borderColor = #ffffff border-color: #fff; Cualquier elemento puede establecer bordes (Boeder). Puede definir la parte superior, derecha, abajo y izquierda respectivamente.
borde = 3CellSpacing = 3 Border-ancho: 3px; Usando CSS, puede definir el borde de la mesa como un estilo unificado, o puede definir el color, el tamaño y el estilo de los bordes superior, derecha, inferior e izquierda, respectivamente.
Puede usar selectores de tabla, TD o TH.
Si necesita establecer un efecto sin frontera, puede usar la definición de CSS: border-colapso: colapso;
＜ br claro = izquierda ＞
＜ Br claro = correcto ＞
＜ br claro = todos ＞
claro: izquierda;
claro: correcto;
claro: ambos;
Muchos diseños de 2 columnas o 3 columnas usan el atributo flotante para ubicar. Si define el color de fondo o la imagen de fondo en la capa flotante, puede usar el atributo Clear.
Cellpadding = 3
vspace = 3
hspace = 3 relleno: 3px; Con CSS, cualquier elemento puede establecer atributos de relleno. Del mismo modo, el relleno puede colocar la parte superior, derecha, abajo y izquierda respectivamente. El relleno es transparente.
align = Center Text-Align: Center;
margen-derecha: auto; margen-izquierda: auto;
Text-Align solo se aplica al texto.
Los niveles de bloque como Div y P se pueden centrar horizontalmente a través del margen-derecha: Auto; y margen-izquierda: auto;
Algunos consejos y entornos de trabajo lamentables
Debido al soporte incompleto de CSS por parte de los navegadores, a veces tenemos que tomar algunos hacks o crear un entorno (soluciones) para permitir que CSS logre el mismo efecto que los métodos tradicionales. Por ejemplo, los elementos a nivel de bloque a veces requieren el uso de técnicas de centrado horizontal, técnicas de errores de modelos de caja, etc. Todos estos consejos se detallan en el artículo de Mollyholzschlag "Diseño web integrado: estrategias para el hack de piratería CSS a largo plazo".
Otro sitio de recursos para los trucos de CSS es la posición de Big John y Holly Bergevin es todo.
Comprender el comportamiento flotante
"Contener flotadores" de Eric Meyer te ayudará a dominar cómo usar el diseño de atributos flotantes. El elemento flotante a veces debe limpiarse, y leer "cómo despejar los flotadores sin marcado estructural" será muy útil.