Haga clic aquí para volver a la columna del tutorial Wulin.com HTML. Si desea explorar el tutorial CSS, haga clic aquí.
Arriba: Idioma de marcado - Etiquetas Lite . Capítulo 10 Aplicar CSS
En la primera parte, el enfoque principal está en el ejemplo de la sintaxis de la etiqueta, y también exploramos cómo aplicar CSS en la etiqueta para el diseño y especificar los detalles del estilo. En el segundo capítulo, discutiremos varias formas de aplicar CSS a un documento, sitio web o incluso una sola etiqueta. Además, también discutiremos cómo ocultar el contenido de CSS de las versiones anteriores de los navegadores para que podamos usar técnicas avanzadas sin afectar la estructura de etiquetas que pueden leer todos los navegadores y dispositivos.
En la unidad de extensión de la última punta del capítulo, presentaremos la práctica de cambiar las fuentes, los colores y hacer múltiples temas sin tener que escribir scripts, reemplazar las hojas de estilo. ¿Cómo aplicar CSS a los archivos?
Ahora discutiremos cuatro formas diferentes de aplicar CSS a los documentos. Cada método tiene sus propias ventajas y desventajas. Dependiendo de la situación, los cuatro métodos pueden ser la mejor opción. Cada método demostrado aquí utiliza la estructura de sintaxis de transición XHTML 1.0 legal, la etiqueta <html> y la configuración <Head>.
Comencemos con el método A. Método A: <style> Etiqueta
<! Doctype html público -// w3c // dtd xhtml 1.0 transición // es
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<Evista>
<meta http-oquiv = content-type content = text/html; charset = utf-8 />
<title> Aplicando CSS </title>
<estilo type = text/css> <! [Cdata [... La declaración de CSS se pone aquí ...
]]> </style></ablo>
Este enfoque también se convierte en una hoja de estilo incrustada, lo que le permite escribir todas las declaraciones de CSS directamente en el archivo (x) HTML, y la etiqueta <Syle> se encuentra en la página <BEAD> y se puede colocar en cualquier estilo que necesite.
El texto/CSS especificado para el atributo de tipo asegura que el navegador comprenda el lenguaje de estilo que usamos y no se puede omitir. También utilizamos la sintaxis de anotación CDATA recomendada por W3C para ocultar estos contenidos de los navegadores que no pueden manejar las reglas de estilo (http://www.w3.org/tr/xhtml1/#h-4.8).
Una de las principales desventajas del uso del método A es que algunos navegadores antiguos (especialmente Internet Explorer 4.x y Netscape 4.x) harán todo lo posible para mostrar el efecto CSS especificado en la etiqueta <Syle>. Si utiliza reglas avanzadas de diseño y posicionamiento de CSS que solo admiten el último navegador, puede causar problemas. Si coloca reglas CSS complejas en la etiqueta <Syle>, puede causar resultados confusos y difíciles de leer para usuarios de navegadores antiguos. No se puede almacenar en caché.
Otra desventaja de las hojas de estilo incrustadas es: si se coloca en la página, debe descargarlo juntos cada vez que lea la página. En contraste, otros métodos proporcionados más tarde pueden permitir que la hoja de estilo se descargue solo una vez, y luego usar el caché del navegador directamente. Modifíquelo varias veces.
Dado que la hoja de estilo incrustada se almacena en páginas XHTML, si se usa el mismo estilo en muchas páginas del sitio web, significa que estos estilos tendrán muchas copias idénticas. Si necesita cambiar estos estilos, debe modificar todas las páginas que usan el mismo estilo. ¡Recordar! Modificar muchos documentos a la vez será una tarea. Es conveniente desarrollar
Hablando de los beneficios, descubrí que cuando comencé a escribir y probar CSS, era muy conveniente escribir todas las reglas en la página que utilicé para probar el método A. Esto me permitió poner las marcas y los estilos en el mismo documento, lo que era conveniente para una modificación frecuente. Una vez completado la prueba, aplicaré CSS a la versión pública de diferentes maneras. Echemos un vistazo a varios métodos. Método B: Hoja de estilo externo
<! Doctype html público -// w3c // dtd xhtml 1.0 transición // es
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transicional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<Evista>
<meta http-oquiv = content-type content = text/html; charset = utf-8 />
<title> Aplicando CSS </title>
<link rel = stylesheet type = text /css href = styles.css _fcksavedurl = styles.css /></ablo>
El método B demuestra la práctica de conectar hojas de estilo externo: coloque todo el contenido de la declaración de CSS en un documento separado y luego haga referencia a su contenido usando la etiqueta <link> en el (x) html <fead>.
Utilizamos el atributo HREF para especificar la ubicación del documento. Este atributo puede ser una ruta relativa (como el ejemplo anterior), o una ruta absoluta (llena en la posición completa http: // de la hoja de estilo). Al mismo tiempo, tenga en cuenta que <ink> es una sola etiqueta o una etiqueta vacía, y debe cerrarse en / al final. Separar el documento = conveniente para el mantenimiento
Existe una clara ventaja de colocar todas las reglas de CSS en documentos que son diferentes del contenido etiquetado: es decir, cualquier cambio de estilo realizado en todo el sitio web puede modificarse para completar el archivo sin tener que modificar repetidamente la instrucción CSS para cada página web, como usar el método A.
Por supuesto, esto es muy crítico para los sitios web a gran escala. Cientos o incluso miles de páginas pueden compartir el mismo estilo en un solo documento. Descargar una vez
Una de las ventajas adicionales de vincular hojas de estilo externo es que este documento generalmente se descarga solo una vez, y el navegador usará caché, lo que puede guardar el tiempo de descarga requerido al navegar repetidamente la misma página u otras páginas que hacen referencia a la misma hoja de estilo. Todavía no puede estar completamente oculto.
Al igual que el método A, el método B todavía puede ser antiguo y solo admite algunas funciones CSS para interpretar los navegadores. Cualquier estilo diseñado para los últimos navegadores puede causar una gran confusión en los navegadores no compatibles.
Bueno ... esta es la segunda vez que mencioné este problema, el siguiente método debe resolverlo, ¿verdad? Método C: @import
<! Doctype html público -// w3c // dtd xhtml 1.0 transición // es
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transicional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<Evista>
<meta http-oquiv = content-type content = text/html; charset = utf-8 />
<title> Aplicando CSS </title>
<estilo type = text/css> <! [Cdata [ @import styles.css; ]]> </style></ablo>
Similar al método B, el uso de @import puede importar definiciones CSS de archivos externos con rutas relativas (como el ejemplo anterior) o rutas absolutas.
El método C tiene las mismas ventajas que usar la etiqueta <link>. Dado que la hoja de estilo se coloca en un documento externo, modificar y actualizar un solo documento puede cambiar todo el sitio web y se puede completar de manera fácil y rápida. La hoja de estilo externa será almacenada en caché por el navegador, ahorrando el tiempo de descarga para importar todas las páginas de la misma hoja de estilo.
El principal beneficio de usar el método C es que las siguientes versiones de Netscape 4.x no admiten la sintaxis @import, por lo que ocultará el contenido CSS referenciado. Este es definitivamente un truco útil, porque podemos escribir sintaxis CSS avanzada para manejar detalles de diseño, como diseños, para que los últimos navegadores que puedan manejarlos muestren, y también hacer que los navegadores antiguos ignoren estas sintaxis.
El problema con Netscape 4.x es que cree que sus capacidades de soporte de CSS son tan buenas como las que realmente son compatibles. Por lo tanto, a excepción de Netscape 4.x, podemos dejar que el navegador decida si debe mostrar el efecto correcto por sí mismo.
Este es el punto clave al diseñar sitios web basados en el diseño estándar. Intente separar el código de etiqueta estructurado del modo de visualización y proporcionar detalles de diseño y otros estilos para los navegadores compatibles. Los navegadores antiguos usan contenido estructurado que pueden leer y mostrar fácilmente, pero no tratarán con las reglas CSS avanzadas ocultas para ellos. Estilos abiertos y estilos cerrados.
Mire las Figuras 10-1 y 10-2, y compárelo. Este es mi sitio web personal utilizando el CSS completo y luego apagar el efecto de visualización del CSS (debería estar muy cerca del efecto de visualización de los navegadores antiguos). La estructura cuando no usa CSS sigue siendo muy obvia, y todavía es fácil de leer y usar para todos. Si no ocultamos el CSS requerido para el diseño de la pantalla, los usuarios de navegadores antiguos pueden obtener un montón de contenido difícil de leer.
Figura 10-1 Mi sitio web personal, usando CSS
Figura 10-2: Elimine CSS en la misma página, y el navegador antiguo puede mostrarlo como una combinación del método B y el método C para aplicar una hoja de estilo múltiple.
A veces puede ser útil introducir muchas hojas de estilo en un documento, por ejemplo, puede poner todas las reglas de diseño en un documento y configuración de fuentes en otro documento, lo que puede facilitar el mantenimiento de una gran cantidad de reglas para diseños grandes y complejos. Efectos de camaleón
Cuando estaba creando un sitio web para la revista Fast Company, quería cambiar el esquema de color del sitio web cada mes para que pudiera coincidir con la imagen de portada de la revista actual. Para simplificar el trabajo de modificación regular, pongo todas las reglas CSS relacionadas con el color en un documento y pongo otras reglas que no se modificarían cada mes en otro documento.
Puede ser más fácil y rápido cubrir todos los colores cada mes, sin tener que encontrar lentamente el contenido que debe cambiarse en los cientos de otras reglas que componen el diseño. Mientras se modifique este documento, el color de todo el sitio web se cambiará de inmediato. Cómo hacerlo
Para introducir múltiples hojas de estilo en combinación con el método B y el método C, el método es usar la etiqueta <link> en la página para hacer referencia al documento principal de CSS, lo mismo que la demostración del método B y el enlace a styles.css.
El contenido de styles.css solo contiene algunas reglas @import e introduce los otros archivos CSS requeridos.
Por ejemplo, si desea introducir tres hojas de estilo, una para procesar el diseño, una para definir las fuentes y otra para definir el color, entonces el contenido de Styles.css podría verse así:
/*Los navegadores antiguos no interpretarán estas reglas de importación*/
@Import URL (Layout.css);
@Import URL (Fonts.css);
@Import URL (Colors.css);
De esta manera, la misma etiqueta <ink> se puede usar en todo el sitio web, y solo se hace referencia al archivo styles.css. Este documento puede continuar importando otras hojas de estilo con la regla @import. Mientras se agregue la nueva hoja de estilo a este documento, puede desempeñar un papel en todo el sitio web.
Esto hace que sea muy fácil actualizar y reemplazar CSS. Por ejemplo, si de repente desea cortar CSS en 4 archivos en la carretera, solo necesita cambiar las reglas @import de este documento sin modificar todos los estilos fuente de etiqueta XHTML.
Hay otro truco para ocultar CSS de navegadores antiguos utilizando la regla de @import del método C. es decir, usar el efecto en cascada de CSS y usar el Método A o el Método B para proporcionar navegadores antiguos y más nuevos para admitir efectos de LO-Fi, y luego use @Import para proporcionar efectos avanzados para otros navegadores admitidos.
Los navegadores más antiguos solo obtendrán contenido que puedan admitir, mientras que los navegadores más nuevos obtendrán todos los estilos que desean usar.
Veamos cómo se ve el código de esta técnica:
<! Doctype html público -// w3c // dtd xhtml 1.0 transición // es
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transicional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<Evista>
<meta http-oquiv = content-type content = text/html; charset = utf-8 />
<title> Aplicando CSS </title>
<link rel = stylesheet type = text /css href = lofi.css _fcksavedurl = lofi.css /> <estilo type = text/css> @import hifi.css; </style></ablo>
Aquí lofi.css debe contener reglas básicas de CSS, como el color del enlace y el tamaño de la fuente; mientras que HIFI.CSS contiene reglas avanzadas, como diseño, posicionamiento, imágenes de fondo, etc.
Podemos transmitir estilos de versión de LO-Fi y Hi-Fi sin tener que escribir scripts o identificar versiones del navegador de cualquier manera en el lado del servidor. El pedido es importante
Es importante especificar el orden de las etiquetas <link> y <style> en el código fuente de la etiqueta. La cascada de CSS se refiere a la prioridad de las reglas, que se determina en función del orden de ocurrencia.
Por ejemplo, dado que la mayoría de los últimos navegadores admiten ambos métodos, se descargarán todas las hojas de estilo y se aplicarán todos los estilos. En este momento, las reglas de estilo en HIFI.CSS anularán los estilos especificados por lofi.css para la misma etiqueta. ¿Cuál es la razón? Porque en el código fuente de la etiqueta, HIFI.CSS aparece después de lofi.css.
Los navegadores más antiguos ignoran HIFI.CSS porque la regla @import no es compatible, por lo que solo usan el estilo definido por lofi.css. Abrazar la característica de cascada
Los beneficios de la cascededidad de CSS se producen de varias maneras. Por ejemplo, suponga que todo su sitio web comparte un CSS externo para el diseño, el posicionamiento, la configuración de las fuentes, los colores, etc., entonces debe usar la hoja de estilo del método @import en cada página para ocultar estas reglas para navegadores antiguos.
Si hay una página en el sitio web que desea compartir la configuración de diseño y posicionamiento, pero necesita ajustar la fuente o el color. En esta página (diferente de otras páginas en el sitio web), aún se puede introducir el documento principal de CSS. Después de completar la referencia, nos referiremos al segundo documento CSS que define un estilo especial para esta página. Se preferirán cualquier regla en el segundo archivo CSS, sobrescribiendo las reglas de estilo especificadas por el primer archivo CSS para la misma etiqueta.
Veamos el ejemplo. Master.css contiene toda la estructura del sitio web, fuentes y otras reglas CSS, mientras que en Custom.CSS solo se hace referencia en una página específica, que cubre la configuración de estilo de varias etiquetas especiales.
<! Doctype html público -// w3c // dtd xhtml 1.0 transición // es
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transicional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<Evista>
<meta http-oquiv = content-type content = text/html; charset = utf-8 />
<title> Aplicando CSS </title>
<estilo type = text/css> @import Master.css; @import Custom.css; </style></ablo>
Dado que Custom.css es el segundo en el código fuente de la etiqueta, el estilo que especifica para la misma etiqueta anulará lo que se formula dentro de Master.css.
Por ejemplo, suponga que dentro de Main.css requerimos la etiqueta <h1> para usar la fuente Red Serif y <h2> para usar la fuente de serif azul.
H1 {
Font-Family: Georgia, serif;
Color: rojo;
}
H2 {
Font-Family: Georgia, serif;
Color: azul;
}
En una página específica, solo queremos cambiar la configuración de estilo de la etiqueta <h1> y seguir el estilo de <h2>. Luego, en Custom.css, solo necesitamos declarar el nuevo estilo para <h1>.
H1 {
Font-Family: Verdana, Sans-Serif;
Color: naranja;
}
Esta declaración anulará la declaración en Master.CSS (porque Custom.CSS se introduce más adelante). Si la página primero presenta master.css y luego custom.css, la etiqueta <h1> usará la fuente de verdana naranja, mientras que <h2> sigue siendo una fuente de serif azul. Porque la declaración posterior en Master.CSS no es anulada por Custom.CSS.
La función en cascada de CSS es una gran herramienta para compartir estilos comunes, lo que le permite cubrir solo reglas que deben modificarse.
<h1 style = Font-Family: Georgia, serif; color: naranja;> este es un título </h1>
Este es el cuarto método de aplicación CSS con el que hemos entrado en contacto: estilos en línea. Casi cualquier etiqueta se puede agregar con atributos de estilo, lo que le permite aplicar directamente las reglas de estilo CSS a las etiquetas, al igual que el ejemplo anterior.
Dado que los estilos en línea son la capa más baja de apilamiento, anulan todas las declaraciones y reglas de estilo externo declaradas dentro de la etiqueta <Syle> de <Bead>.
Esta es una forma simple de agregar estilos en toda la página, pero debe pagarse por usarlo. El estilo está vinculado a la etiqueta
Si confía demasiado en el método D al hacer estilos para la página, no separará los métodos de contenido y visualización. Cuando regrese y modifique, debe marcar el código fuente en profundidad y colocar CSS en el archivo separado, lo que será mucho más fácil de mantener.
El método de abuso D no es diferente del uso de etiquetas de efectos de visualización como <font> para contaminar el código fuente. Estos detalles de diseño siempre deben colocarse en otro lugar. Tenga cuidado de usar
En realidad, por supuesto, a veces la oportunidad de usar estilos en línea es salvar su vida cuando necesita agregar estilos a la página, pero no puede acceder a archivos externos, o no puede modificar <head>, o puede usar el estilo temporalmente y también lo usará cuando no tenga la intención de compartirlo con otras etiquetas.
Por ejemplo, si hay una página en el sitio web que previse una venta de caridad que se eliminará más adelante y desea diseñar un estilo único para esta página, entonces tal vez incruste estas reglas de estilo en la etiqueta sin agregarlas a la hoja de estilo permanente.
Hagámoslo ahora, pero ten en cuenta que estos estilos no se pueden cambiar fácilmente o se usan en la página para todo el sitio web.
Página anterior 1 2 3 Página siguiente Lea el texto completo