Haga clic aquí para volver a la columna del tutorial Wulin.com HTML.
Arriba: Idioma de marcado - Hable sobre la lista nuevamente
Fuente original Capítulo 9 Etiquetas Lite
Anteriormente, seguimos mencionando que el contenido estructurado puede clasificar la estructura y el diseño de detalles y optimizar etiquetas. ¿Qué debemos hacer? Podemos usar XHTML y CSS que cumplan con los estándares en lugar de tablas e imágenes para crear el diseño que necesitamos.
Al usar tecnología estándar para crear sitios web (especialmente sitios web que dependen en gran medida de CSS), a menudo desarrollamos un mal hábito, que es agregar etiquetas adicionales y atributos de clase, y la tecnología no los necesita en absoluto.
Mediante el uso de selectores descendientes en CSS, podemos eliminar las propiedades innecesarias de <div>, <span> y clasificación. Las etiquetas simplificadas significan que las páginas se leerán más rápido y más fáciles de mantener. En este capítulo, discutiremos varias formas simples de realizar esta tarea. ¿Cómo racionalizar las etiquetas al crear un sitio web con tecnología estándar?
Las etiquetas simplificadas son un tema importante que vale la pena discutir. Al crear un sitio web, uno de los enormes beneficios que se puede obtener escribiendo en XHTML legítimo y estableciendo efectos de visualización con CSS se simplifica las etiquetas. El código corto representa una velocidad de descarga más rápida, que definitivamente es la clave para los usuarios que usan el acceso telefónico 56K para acceder a Internet. El código corto también representa los requisitos de espacio del servidor y reduce el consumo de ancho de banda, lo que puede hacer felices al jefe y el administrador del sistema.
El problema es que simplemente confirmar que la página cumple con la especificación estándar W3C no significa que el código utilizado en el contenido se acortará. Por supuesto, puede agregar varias etiquetas no deseadas al contenido de la etiqueta que cumpla con los estándares. Sí, cumple con los estándares, pero puede haber agregado mucho código innecesario para que sea más fácil diseñar CSS.
¡No tengas miedo! Aquí hay algunos consejos que le permiten diseñar conciso y tener contenido de marcado estándar, pero también conservan suficientes capacidades de control de estilo CSS. Luego aprendamos algunos consejos simples para racionalizar las etiquetas. Selector de herencia
Aquí veremos dos formas de marcar la barra lateral (incluida la información, los enlaces y otras cosas) en un sitio web personal. Las cosas buenas en un <div> con una ID es una barra lateral para que se pueda colocar en una ventana del navegador más adelante (la segunda parte discutirá la funcionalidad de diseño/tipo de CSS). Método A: Clasificación feliz
<div ID = barra lateral>
<H3 class = Sideheading> Acerca de este sitio </h3>
<p> Este es mi sitio. </p>
<H3 class = Sideheading> Mis enlaces </h3>
<ul class = sidelinks>
<li class = link> <a href = Archives.html> Archivos </a> </li>
<li class = link> <a href = About.html> Acerca de mí </a> </li>
</ul>
</div>
He visto contenido etiquetado similar al método A en muchos sitios web. Cuando el diseñador descubrió por primera vez el poder de CSS, es fácil ser abrumado y especificar una clase para cada etiqueta que quiere crear un estilo especial.
En el ejemplo anterior, tal vez creemos que <h3> especifica class = Sideheading para ayudarlos a especificar estilos diferentes de otros títulos dentro de la página; Especificar clase para <ul> y <li> también es por la misma razón. Clasificación CSS
Al especificar el estilo, supongamos que queremos que el título se vuelva naranja, use la fuente Serif, con un borde gris claro en la parte inferior, y la lista desordenada de enlaces laterales debe eliminar el símbolo de punto pequeño y cambiar el elemento de la lista a Bold.
El contenido CSS requerido por el método A se verá así:
.side Heading {
Font-Family: Georgia, serif;
Color: #C63;
Border-Bottom: 1px Solid #CCC;
}
.sidelinks {
Tipo de estilo de lista: Ninguno;
}
.enlace {
Font-Weight: Bold;
}
Podemos referirnos a los nombres de clases (clases) establecidos en las etiquetas para especificar estilos especiales para estas etiquetas, e incluso puede imaginar que otras partes de la página están organizadas de esta manera: barras de navegación, final de la página y área de contenido, cada etiqueta está desordenada para tener el control total sobre ellas.
Sí, funciona, pero hay una manera simple de guardar estos atributos de clase, al tiempo que hace que su CSS sea más fácil de leer y más organizado. Luego mire el método B. Método B: elección natural
<div ID = barra lateral>
<h3> Acerca de este sitio </h3>
<p> Este es mi sitio. </p>
<h3> mis enlaces </h3>
<ul>
<li> <a href = Archives.html> Archivos </a> </li>
<li> <a href = About.html> Acerca de mí </a> </li>
</ul>
</div>
¡El método B es corto y conciso! Pero espera, ¿a dónde van las categorías? Bueno ... pronto encontrarás que realmente no los necesitamos, principalmente porque metemos estas etiquetas en una relación <div> con un nombre único (en este caso, barra lateral).
Aquí es donde se usa el selector de herencia. Solo necesitamos especificar directamente las etiquetas ubicadas dentro de la barra lateral con el nombre de la etiqueta para eliminar estas propiedades de clasificación innecesaria. Especifique CSS con el contenido antes y después de la relación.
Veamos el mismo estilo que el método A, pero esta vez usamos el selector de herencia para especificar la etiqueta ubicada en la barra lateral.
#sidebar H3 {Font-Family: Georgia, serif;
Color: #C63;
Border-Bottom: 1px Solid #CCC;
}
#sidebar ul {Tipo de estilo de lista: Ninguno;
}
#sidebar li {Font-Weight: Bold;
}
Al referirse a la ID #SideBar, puede especificar un estilo especial para las etiquetas contenidas en el mismo. Por ejemplo, solo las etiquetas <h3> ubicadas dentro de <Div id = barra lateral> establecerán las reglas CSS anteriores.
Este método para especificar estilos basados en la relación entre el contenido antes y después es la clave para acortar el contenido. Por lo general, después de diseñar la estructura semántica para el contenido, no hay necesidad de agregar atributos de clasificación a la etiqueta. No solo se usa en la barra lateral
Solo mostramos un párrafo de la página (es decir, la barra lateral), pero este enfoque se puede aplicar a toda la estructura de la página. Simplemente divida el contenido de la etiqueta en varios párrafos de acuerdo con la lógica (quizás #NAV, #content, #sidebar, #footer), y luego use el selector de herencia para crear estilos especiales para las etiquetas en este párrafo.
Por ejemplo, supongamos que los párrafos #Content y #sidebar dentro de la página usan la etiqueta <H3>, y desea que usen la fuente Serif, sin embargo, desea que el <h3> de un párrafo se muestre en púrpura y el otro para ser naranja.
Esto no requiere ninguna modificación de la etiqueta, más propiedades de clasificación. Podemos especificar reglas para que todas las etiquetas <h3> se compartan por un estilo global, y luego usar el selector de herencia para establecer el color de acuerdo con la posición de la etiqueta.
H3 {
Font-Family: Georgia, serif; / * Todos los H3 para ser serif */
}
#content h3 {
Color: morado;
}
#sidebar H3 {
Color: naranja;
}
Especifique que todas las etiquetas <h3> usen fuentes senif, y los colores deben seleccionarse para usar púrpura o naranja de acuerdo con el contexto de contenido. En este momento, no necesitamos repetir las reglas de intercambio (en este ejemplo, la familia de fuentes), por lo que el contenido del CSS puede acortarse y las reglas duplicadas pueden evitarse en múltiples declaraciones.
No solo podemos reducir el espacio de marcado adicional requerido por el atributo de clase, sino que la estructura CSS también se vuelve más significativa, lo que nos facilita leer su contenido y organizarlo de acuerdo con los segmentos de la página. También se vuelve muy simple modificar reglas específicas, lo cual es particularmente obvio para los tipos de escritura grandes y complejos, porque en este momento puede tener cientos de reglas CSS al mismo tiempo.
Por ejemplo, en este ejemplo, si agrega las reglas de intercambio a cada declaración y desea reemplazar todas las fuentes Sans Serif más tarde, debe modificar tres lugares, y no hay forma de hacerlo a la vez. Las menos clasificaciones, el mejor mantenimiento
Además de reducir el espacio del código fuente que debe usarse, reemplazar las categorías redundantes con selectores de herencia también representa la facilidad futura de marcar el contenido que se ampliará.
Por ejemplo, supongamos que desea que los enlaces dentro de la barra lateral se pongan rojo en lugar de usar azul como el resto de la página, para que cree una clase roja que se suma a la etiqueta de anclaje como esta:
<div ID = barra lateral>
<h3> Acerca de este sitio </h3>
<p> Este es mi sitio. </p>
<h3> mis enlaces </h3>
<ul>
<li> <a href = Archives.html class = Red> Archives </a> </li>
<li> <a href = acerca.html class = rojo> sobre mí </a> </li>
</ul>
</div>
Para convertir estos enlaces en rojo (suponiendo que el color del enlace preestablecido no sea rojo) requiere un CSS como este:
A: Link.Red {
Color: rojo;
}
Estas acciones están bien y pueden funcionar normalmente. Pero, ¿qué pasa si cambia de opinión en el futuro y quieres cambiar estos enlaces a Green? O más práctico, su jefe ocasionalmente dice que el rojo este año está desactualizado, ¡así que cambie estos enlaces de la barra lateral a Green! No hay problema, solo necesita modificar la clase roja en CSS y hacerlo, pero el atributo de clase en el contenido de marcado sigue siendo rojo. Obviamente, esto no está completamente en línea con la semántica, al igual que usar otros colores como nombre de clasificación.
Este no es un buen lugar para usar los efectos de visualización como nombre de clasificación, pero si no especificamos una clasificación, podemos ahorrar mucho esfuerzo (y código) en el manejo de la clasificación y hacer que la semántica de contenido sea más razonable. También podríamos seleccionar enlaces a estas barras laterales con selectores de herencia y especificar estilos según sea necesario.
El contenido de la etiqueta es exactamente el mismo que el método B, y el CSS requerido para establecer el enlace en la barra lateral será así:
#sidebar li a: enlace {Color: rojo;
}
Básicamente, esto significa que solo las etiquetas de anclaje que usan el atributo HREF en la etiqueta <li> dentro de <div id = barra lateral> también deben mostrarse en rojo.
Ahora, mantenemos contenido de etiquetado corto y flexible, y las actualizaciones futuras solo requieren CSS, sin importar si queremos que el enlace se vuelva rojo, verde, audaz o cursiva.
A continuación, echemos un vistazo a otra forma de optimizar las etiquetas: eliminar etiquetas innecesarias <iv> y usar directamente las etiquetas de nivel de bloque existentes.
Página anterior 1 2 3 Página siguiente Lea el texto completo