Cómo escribir tablas en html. Incrustar estilos en un documento HTML. puede especificar un estilo específico usando la CLASE: atributo de encabezado rojo
A medida que aumenta el número de documentos ubicados en su servidor WWW, le resultará cada vez más difícil mantenerlo. Esto es especialmente cierto para el diseño de documentos HTML. Imagine que necesita, por ejemplo, cambiar el diseño de los títulos de primer nivel en todos los documentos y también cambiar el diseño de fuente del texto insertado en el documento utilizando el operador.
Procesar manualmente varios documentos HTML para adaptar su apariencia a algún estándar puede llevar mucho tiempo.
Un problema similar surge al preparar documentos de texto normales. Por ejemplo, al crear un documento, especificó la sangría y la fuente del párrafo para los párrafos normales, y también diseñó los títulos de cierta manera. A continuación, es posible que necesite cambiar los parámetros de diseño, por ejemplo, el valor del mismo sangría de párrafo. en lo mas simple editores de texto para depositar cambios necesarios Tendrás que procesar manualmente cada párrafo de texto.
Para simplificar el papeleo, moderno procesadores de palabras, como por ejemplo, Microsoft Word, utilice el diseño según la muestra. Las muestras contienen descripciones de parámetros de diseño y se denominan estilos. Por ejemplo, el estilo podría especificar que el encabezado de segundo nivel aparezca en rojo y deba estar centrado.
Creando Documento de texto, asignas un estilo específico a cada párrafo de texto, eligiéndolo por su nombre de una lista o creando uno nuevo. En este caso, para cambiar los parámetros de formato de párrafo con estilo dado no es necesario editar manualmente todos esos párrafos; simplemente edite el estilo apropiado, lo cual es mucho más fácil.
Volvamos al problema de formatear una gran cantidad de documentos HTML. Para solucionar este problema, puedes utilizar las llamadas Hojas de Estilo en Cascada (CSS), desarrolladas por el Consorcio Mundial Banda ancha Consorcio (W3C).
Puede encontrar una descripción completa de la edición actual de Cascading Style Sheets en el servidor del W3C en http://www.w3.org/pub/WWW/TR/WD-css1.html. Además, le recomendamos que se familiarice con la descripción de las hojas de estilo. Guía del usuario de hojas de estilo, ubicada en el servidor http://www.microsoft.com. Solo le informaremos sobre la mayoría. oportunidades importantes hojas de estilo implementadas en Microsoft Navigator explorador de Internet versión 3.0.
En cuanto a Netscape Navigator versión 3.0, no funciona con estilos. Sin embargo, Netscape planea añadir esta función a su navegador en un futuro próximo.
Formas de utilizar estilos
Hay tres diferentes caminos usando estilos. Dependiendo de tus necesidades, podrás utilizar todos o sólo algunos de ellos.
Hojas de estilo comunes para múltiples documentos HTML
Mayoría interesante aplicación Las hojas de estilo se utilizan para diseñar muchos, tal vez incluso todos, los documentos HTML ubicados en su servidor. Esto implica vincular archivos de hojas de estilo a documentos HTML. El nombre del archivo de la hoja de estilos debe ser *.css.
Al cambiar el contenido de los archivos de hojas de estilo, puede cambiar la apariencia de todos los documentos HTML a los que se adjuntan estos archivos, sin necesidad de editarlos directamente.
Tenga en cuenta que las hojas de estilo comunes se pueden usar simultáneamente no solo en uno, sino también en varios servidores WWW, ya que puede conectar archivos de hojas de estilo especificando su estándar. dirección URL. Esto le permite crear y editar hojas de estilo corporativas de forma centralizada.
Incrustar hojas de estilo en documentos HTML
Si es necesario aplicar un estilo específico a documentos HTML individuales que difieran de lo especificado en las hojas de estilo generales, puede incrustar hojas de estilo directamente en el cuerpo del documento HTML. Estas tablas se denominan hojas de estilos integradas.
La desventaja de las hojas de estilos en línea es que hay que editar el contenido de todos los documentos HTML que utilizan esos estilos y al mismo tiempo cambiar los estilos de todo el servidor. Por lo tanto, su uso se justifica sólo en los casos en que el servidor no tenga muy un gran número de Documentos HTML con estilos en línea.
Puede suceder que los estilos incrustados en un documento HTML entren en conflicto con tablas generales estilos. En este caso, el navegador dará preferencia a las hojas de estilo integradas.
Insertar estilos en declaraciones HTML
Último método Implica incrustar estilos directamente en declaraciones. lenguaje HTML y aplicar estilos para diseñar fragmentos individuales de un documento HTML. Este método tiene el mismo inconveniente que el anterior: al cambiar el estilo, debe editar manualmente todos los documentos HTML en los que se utiliza este estilo.
En caso de conflicto con las hojas de estilo integradas en un documento HTML, el navegador da preferencia a los estilos integrados en Operadores HTML. Entonces puedes anular el estilo local de esta manera.
Crear archivos de hojas de estilo
Como ya hemos comentado, los archivos de hojas de estilo contienen definiciones de estilo que se pueden utilizar para aplicar estilo a muchos documentos HTML ubicados en uno o más servidores WWW.
Apariencia Es mejor estudiar el archivo de hoja de estilo usando un ejemplo específico (Listado 2.17).
Listado 2.17. Archivo cap2\styles\styles.css
H1 (tamaño de fuente: 24; peso de fuente: negrita; color: rojo; margen izquierdo: 10%) H2 (tamaño de fuente: 20; peso de fuente: negrita; color: negro; familia de fuente: Courier) P .italic (estilo de fuente: cursiva) P.red (color: rojo)Aquí hemos definido los estilos H1, H2, P.italic y P.red.
Una definición de estilo comienza con un nombre de clase (por ejemplo, H1), seguido de una lista de parámetros de estilo entre llaves. Para el estilo H1, especificamos un tamaño de fuente de 24 puntos, engrosamiento, color rojo y un margen izquierdo del 10 por ciento del ancho de la pantalla.
Los parámetros de estilo individuales se especifican por sus nombres, seguidos del valor del parámetro, separados por dos puntos. Los parámetros están separados por un punto y coma.
Enlace al archivo de hoja de estilo
Para que un documento HTML tenga estilo utilizando un archivo de hoja de estilo, debe colocar la declaración en la sección principal del documento. . En el Listado 2.18 se puede encontrar un ejemplo de un enlace a un archivo de hoja de estilo.
Listado 2.18. Archivo cap2\styles\cssdemo.htm
encabezado de primer nivel
título de segundo nivel
Texto en cursiva
texto rojo
Opciones del operador debe configurarse como se indica en este ejemplo. El parámetro HREF debe ser la URL del archivo de hoja de estilo. Este archivo se puede ubicar en cualquier servidor WWW, no solo en el que está alojado. este documento HTML.
¿Cómo utilizar estilos de un archivo de hoja de estilos?
Muy simple.
Si el archivo define parámetros para operadores de lenguaje HTML destinados al formato de texto (por ejemplo, para operadores
o , como en nuestro ejemplo), simplemente especifica estos operadores sin modificaciones:
encabezado de primer nivel
Texto sin formato
título de segundo nivel
encabezado de primer nivel
Texto sin formato
título de segundo nivel
Sin embargo, al definir un estilo, no sólo puede anular las opciones de formato de las declaraciones, sino también crear nuevas clases para esas declaraciones. Por ejemplo, las clases cursiva y roja para el operador se definen a continuación P.italic (estilo de fuente: cursiva) P.red (color: rojo)
Para utilizar las clases creadas, debe especificar el nombre de la clase deseada en el parámetro CLASS del operador.
(u otro operador de formato de texto) como se muestra a continuación:
Texto en cursiva
texto rojo
La apariencia de un documento diseñado utilizando nuestro archivo de hoja de estilo se muestra en la Fig. 2.18.
Arroz. 2.18. Aspecto de un documento diseñado utilizando un archivo de hoja de estilo
Es fácil notar que el encabezado del primer nivel se muestra con sangría desde el borde izquierdo, como se indica en el estilo H1.
El título de segundo nivel se representa utilizando una fuente de ancho fijo porque la familia de fuentes Courier se especificó en el estilo correspondiente.
Los dos últimos párrafos del documento se muestran, respectivamente, inclinados y resaltados en rojo.
Estilos en un documento HTML
Puede incrustar una hoja de estilo directamente en un documento HTML utilizando el operador. Entre operadores hay una hoja de estilo.
En el Listado 2.19 mostramos un ejemplo de un documento HTML que tiene una hoja de estilos incorporada.
Listado 2.19. Archivo cap2\styles\embed.htm
encabezado de primer nivel
Texto sin formato
título de segundo nivel
Texto en cursiva
texto rojo
Aspecto de este documento cuando se ve en el navegador Internet de Microsoft Explorer es similar al que se muestra en la Fig. 2.18. Netscape Navigator, como en el caso anterior, ignora el estilo.
Tenga en cuenta el uso del operador de comentario.. Cuando un navegador ve un documento que no reconoce el estilo, dicho navegador lo ignorará como operador., que debe colocarse en la sección
documento:
Etiqueta
Como se indicó anteriormente, las hojas de estilo se almacenan en archivos de texto, conveniente para editar. No son difíciles de crear manualmente, pero existen editores de hojas de estilo especiales, por ejemplo, programa popular FrontPage de Microsoft.
Las hojas de estilo le permiten definir un estilo para una o más etiquetas. Por ejemplo, puede crear una hoja de estilos que defina estilos para etiquetas.
,
,
Y
. Cada definición se llama regla
(gobernar mi). La regla contiene selector(etiqueta HTML) seguida de declaración(definición de estilo). El selector es el vínculo entre la definición y la etiqueta. A continuación se muestra un ejemplo de una regla que especifica el estilo de cada una de las etiquetas de título.
:
H1 (color: azul)
La declaración está encerrada entre llaves. Cada declaración tiene dos partes: el nombre de la propiedad y el valor asignado a la misma, separados por dos puntos. HTML incluye docenas de propiedades (tamaño de fuente, estilo de fuente, color, margen derecho, etc.), que se analizarán a continuación. Cada propiedad puede tomar varios valores, uno de los cuales se le asigna de forma predeterminada.
En el ejemplo anterior, solo se especificó uno propiedad de color. Sin embargo, nada impide definir toda una serie de propiedades en una etiqueta, separándolas entre sí con un punto y coma:
HI (color: azul; tamaño de fuente: 12 puntos; línea de texto: centro)
En este ejemplo, el visor mostrará cada título de primer nivel en fuente azul de 12 puntos y los alineará con el centro de la ventana. Todas las demás propiedades utilizarán sus valores predeterminados (por ejemplo, la propiedad de estilo de fuente se establecerá en normal).
Si necesita definir el mismo estilo para varias etiquetas, puede enumerarlas en una lista separada:
P (tamaño de fuente: 12 puntos)
UL (tamaño de fuente: 12 puntos)
LI (tamaño de fuente: 12 puntos)
HTML le permite hacer lo mismo en una forma más compacta, en una línea:
P, UL, LI (tamaño de fuente: 12 puntos)
La coma es un elemento obligatorio aquí. Si se omite, el significado de la regla cambia (consulte la sección " " más adelante en este capítulo).
A medida que su hoja de estilo se vuelve más compleja, es probable que necesite incluir más información sobre el propósito de una regla. Los comentarios aparecen entre los caracteres /* y */ y los navegadores los ignoran, por ejemplo:
CUERPO (margen izquierdo: lin) /* Sangría de 1 pulgada */
H1 (margen izquierdo: -lin) /* Desplazamiento a la izquierda 1 pulgada */
H2 (margen izquierdo: -lin) /* Desplazamiento a la izquierda 1 pulgada */
HTML le permite definir una amplia gama de propiedades de hojas de estilo. Los nombres de las propiedades constan de una, o más a menudo dos o tres palabras, separadas por un guión. En nombres complejos, la primera palabra suele representar la categoría y también es una abreviatura del nombre de la propiedad (consulte la sección " ").
La tabla proporciona una descripción general de las propiedades de las hojas de estilo HTML. La columna Categoría muestra si una propiedad se puede agrupar con otras propiedades. La tercera columna proporciona información sobre si la propiedad es heredada o no por etiquetas subordinadas (para herencia de propiedad, consulte la sección " ").
Herencia |
||||
|
Las hojas de estilo HTML le permiten decorar el fondo de un elemento de página con un color o una imagen. Cabe señalar que en adelante hablaremos sobre el uso de propiedades no para toda la página, sino para elemento individual. Por ejemplo, si define un fondo para una etiqueta
Ud. L (imagen de fondo: URL (http://www.myserver.com/images/watermark.gif)) Las recomendaciones del W3C brindan la capacidad de definir bordes, márgenes y espacios en blanco para los elementos de la página. Puede, por ejemplo, encerrar un título en un marco o cambiar los márgenes en una etiqueta de párrafo.<Р>para organizar una sangría para todos los párrafos del texto. Para estos fines, puede utilizar los siguientes grupos de propiedades: Estas propiedades se utilizan para especificar cómo se muestran las listas. Con su ayuda, puede cambiar la posición del marcador (propiedad list-style-position), el estilo o la imagen del marcador (propiedades list-style-type y list-style-image). Las propiedades de la lista se heredan, es decir, si la propiedad está definida en la etiqueta
|
