Este tema sirve para aprender los conceptos básicos de CSS, como las reglas CSS, los selectores, la herencia y mucho más. Además, aprenda cómo asociar CSS con sus páginas web en Dreamweaver.
Acerca de las hojas de estilos en cascada
Las hojas de estilo en cascada (CSS) son una colección de reglas de formato que controlan la apariencia del contenido en una página web. El uso de estilos CSS para dar formato a una página separa el contenido de la presentación. El contenido de tu página (el código HTML) reside en el archivo HTML, y las reglas CSS que definen la presentación del código residen en otro archivo (una hoja de estilo externa) o en otra parte del documento HTML (normalmente la sección head). Separar el contenido de la presentación hace que sea mucho más fácil mantener la apariencia de tu sitio desde una ubicación central porque no necesitas actualizar cada propiedad en cada página cada vez que quieras hacer un cambio. Separar el contenido de la presentación también resulta en un código HTML más simple y limpio, lo que proporciona tiempos de carga más rápidos en el explorador y simplifica la navegación para personas con problemas de accesibilidad (por ejemplo, aquellas que usan lectores de pantalla).
CSS te ofrece gran flexibilidad y control sobre la apariencia exacta de tu página. Con CSS puedes controlar muchas propiedades de texto incluyendo fuentes específicas y tamaños de fuente; negrita, cursiva, subrayado y sombras de texto; color de texto y color de fondo; color de enlace y subrayado de enlace; y mucho más.Al usar CSS para controlar tus fuentes, también puedes asegurar un tratamiento más consistente del diseño y la apariencia de tu página en múltiples exploradores.
Además del formato de texto, puedes usar CSS para controlar el formato y posicionamiento de elementos de nivel de bloque en una página web. Un elemento de nivel de bloque es una pieza independiente de contenido, normalmente separada por una nueva línea en el HTML, y se muestra visualmente como un bloque.Por ejemplo, las etiquetas h1, las etiquetas p y las etiquetas div producen elementos de nivel de bloque en una página web.Puedes establecer márgenes y bordes para elementos de nivel de bloque, posicionarlos en una ubicación específica, añadir color de fondo, hacer que el texto flote alrededor de ellos, y así sucesivamente. Manipular elementos de nivel de bloque es en esencia la forma en que diseñas páginas con CSS.
Acerca de las reglas CSS
Una regla de formato CSS consta de dos partes: el selector y la declaración (o en la mayoría de casos, un bloque de declaraciones). El selector es un término (como p, h1, un nombre de clase o un identificador) que identifica el elemento formateado, y el bloque de declaración define cuáles son las propiedades del estilo.En el siguiente ejemplo, h1 es el selector, y todo lo que queda entre las llaves ({}) es el bloque de declaración:
h1 {
font-size: 16 píxeles;
font-family: Helvetica;
font-weight:bold;
}
Una declaración individual consta de dos partes, la propiedad (como font-family) y el valor (como Helvetica).En la regla CSS anterior, se ha creado un estilo particular para las etiquetas h1: el texto para todas las etiquetas h1 vinculadas a este estilo será de 16 píxeles de tamaño, fuente Helvetica y negrita.
El estilo (que proviene de una regla, o una colección de reglas) reside en un lugar separado del texto real que está formateando, normalmente en una hoja de estilo externa, o en la sección head de un documento HTML.Así, una regla para etiquetas h1 puede aplicarse a muchas etiquetas a la vez (y en el caso de hojas de estilo externas, la regla puede aplicarse a muchas etiquetas a la vez en muchas páginas diferentes). De esta manera, CSS proporciona una capacidad de actualización extremadamente fácil. Cuando actualizas una regla CSS en un lugar, el formato de todos los elementos que usan el estilo definido se actualiza automáticamente al nuevo estilo.
En Dreamweaver, pueden definirse los siguientes tipos de estilos:
Los estilos de clase te permiten aplicar propiedades de estilo a cualquier elemento o elementos de la página.
Los estilos de etiqueta HTML redefinen el formato para una etiqueta particular, como h1.Cuando creas o cambias un estilo CSS para la etiqueta h1, todo el texto formateado con la etiqueta h1 se actualiza inmediatamente.
Los estilos avanzados redefinen el formato para una combinación particular de elementos, o para otras formas de selector como permite CSS (por ejemplo, el selector td h2 se aplica cuando un encabezado h2 aparece dentro de una celda de tabla.)Los estilos avanzados también pueden redefinir el formato para etiquetas que contienen un atributo id específico (por ejemplo, los estilos definidos por #myStyle se aplican a todas las etiquetas que contienen el par atributo-valor id="myStyle").
Las reglas CSS pueden residir en las ubicaciones siguientes:
Hojas de estilos CSS externas
Colecciones de reglas CSS almacenadas en un archivo CSS externo (.css) independiente (no un archivo HTML).Este archivo está vinculado a una o más páginas de un sitio web mediante un enlace o una regla @import en la sección <head> de un documento.
Hojas de estilos CSS internas (o incrustadas)
Colecciones de reglas CSS incluidas en una etiqueta style en la sección head de un documento HTML.
Estilos en línea
Se definen dentro de instancias específicas de etiquetas por todo un documento HTML. (No se recomienda el uso de estilos en línea).
Dreamweaver reconoce estilos definidos en documentos existentes siempre que se ajusten a las pautas de estilo CSS.Dreamweaver también procesa la mayoría de estilos aplicados directamente en la vista Diseño.(Sin embargo, la vista previa del documento en una ventana del explorador le proporciona el renderizado "en vivo" más preciso de la página.)Algunos estilos CSS se muestran de forma diferente en Microsoft Internet Explorer, Netscape, Opera, Apple Safari u otros exploradores, y algunos no son compatibles actualmente con ningún explorador.
Acerca de los estilos en cascada
El término en cascada hace referencia a la forma en que un explorador muestra finalmente los estilos de elementos específicos en una página web. Tres fuentes diferentes son responsables de los estilos que ves en una página web: la hoja de estilos creada por el autor de la página, las opciones de estilo personalizadas del usuario (si las hay) y los estilos predeterminados del propio explorador.Los temas anteriores describen cómo crear estilos para una página web cuando se es el autor tanto de la página web como de la hoja de estilos adjunta a esa página.Pero los exploradores también tienen sus propias hojas de estilo predeterminadas que determinan el renderizado de las páginas web y, además, los usuarios pueden personalizar sus exploradores realizando selecciones que ajustan la visualización de las páginas web. La apariencia final de una página web es el resultado de las reglas de estas tres fuentes que se unen (o "se superponen en cascada") para mostrar la página web de forma óptima.
Una etiqueta común (la etiqueta de párrafo o etiqueta <p>) ilustra el concepto. De forma predeterminada, los exploradores incluyen hojas de estilo que definen la fuente y el tamaño de fuente del texto de párrafo (es decir, el texto que aparece entre las etiquetas <p> en el código HTML). En Internet Explorer, por ejemplo, todo el texto independiente, incluido el texto de párrafo, se muestra en Times New Roman, fuente Medium de forma predeterminada.
Sin embargo, como autor de una página web, puedes crear una hoja de estilos que anule el estilo predeterminado del explorador para la fuente de párrafo y el tamaño de fuente. Por ejemplo, puedes crear la siguiente regla en tu hoja de estilos:
p {
font-family: Arial;
font-size: small;
}
Cuando un usuario carga la página, la configuración de fuente y tamaño de fuente del párrafo establecida por ti como autor anula la configuración predeterminada del texto del párrafo del explorador.
Los usuarios pueden hacer selecciones para personalizar la visualización del explorador de forma óptima para su propio uso. En Internet Explorer, por ejemplo, el usuario puede seleccionar Ver > Tamaño del texto > El más grande para expandir la fuente de la página a un tamaño más legible si cree que la fuente es demasiado pequeña. En última instancia (al menos en este caso), la selección del usuario anula tanto los estilos predeterminados del explorador para el tamaño de fuente del párrafo como los estilos de párrafo creados por el autor de la página web.
La herencia es otro aspecto importante de los estilos en cascada. Las propiedades de la mayoría de elementos en una página web se heredan; por ejemplo, las etiquetas de párrafo heredan ciertas propiedades de las etiquetas del cuerpo, las etiquetas span heredan ciertas propiedades de las etiquetas de párrafo, y así sucesivamente. Por lo tanto, si creas la siguiente regla en tu hoja de estilo:
body {
font-family: Arial;
font-style: italic;
}
Todo el texto de los párrafos de la página web (así como el texto que hereda propiedades de la etiqueta de párrafo) será Arial cursiva porque la etiqueta de párrafo hereda estas propiedades de la etiqueta de cuerpo. No obstante, puede hacer que sus reglas sean más específicas creando estilos que anulen la formula estándar de herencia. Por ejemplo, si crea las siguientes reglas en su hoja de estilos:
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
Todo el texto independiente será Arial e itálica excepto el párrafo (y su texto heredado), que se mostrará como Courier normal (no itálica). Técnicamente, la etiqueta de párrafo primero hereda las propiedades que están establecidas para la etiqueta body, pero luego ignora esas propiedades porque tiene propiedades propias definidas.En otras palabras, aunque los elementos de página generalmente heredan propiedades desde arriba, la aplicación directa de una propiedad a una etiqueta siempre causa una anulación de la fórmula estándar para la herencia.
La combinación de todos los factores comentados anteriormente, más otros factores como la especificidad CSS (un sistema que da diferente peso a tipos particulares de reglas CSS), y el orden de las reglas CSS, crean en última instancia una cascada compleja donde los elementos con prioridades más altas anulan propiedades que tienen prioridades más bajas.Para obtener más información sobre las reglas que rigen la cascada, la herencia y la especificidad, visite www.w3.org/TR/CSS2/cascade.html.
Acerca de la aplicación de formato a texto y CSS
De forma predeterminada, Dreamweaver utiliza hojas de estilos en cascada (CSS) para aplicar formato al texto. Los estilos que se aplican al texto mediante el inspector de propiedades o los comandos de menú crean reglas CSS que se incrustan en la sección head del documento actual.
También puede utilizarse el Diseñador de CSS para crear y editar reglas y propiedades CSS. El Diseñador de CSS es un editor más eficaz que el inspector de propiedades y muestra todas las reglas CSS definidas para el documento actual, con independencia de si están incrustadas en la sección head del documento o si están en una hoja de estilos externa. Adobe recomienda utilizar el Diseñador de CSS (en lugar del inspector de propiedades) como herramienta principal para la creación y edición de hojas de estilos en cascada. Como resultado, el código será más limpio y más fácil de mantener.
Para obtener más información sobre CSS Designer, consulte Diseñar páginas usando CSS Designer.
Además de los estilos y de las hojas de estilos que cree, puede usar hojas de estilos suministradas con Dreamweaver para aplicarlas a los documentos.
Para ver un tutorial sobre formatear texto con CSS, consulte www.adobe.com/go/vid0153.
Acerca de las propiedades de la notación CSS abreviada
La especificación CSS permite la creación de estilos usando una sintaxis abreviada conocida como CSS abreviado.El CSS abreviado te permite especificar los valores de varias propiedades usando una sola declaración.Por ejemplo, la propiedad font te permite establecer las propiedades font-style, font-variant, font-weight, font-size, line-height y font-family en una sola línea.
Un problema clave a tener en cuenta al utilizar CSS abreviado es que los valores omitidos de una propiedad CSS abreviada se asignan a su valor predeterminado.Esto puede hacer que las páginas se muestren incorrectamente cuando dos o más reglas CSS se asignan a la misma etiqueta.
Por ejemplo, la regla h1 que se muestra a continuación utiliza sintaxis CSS desarrollada.Ten en cuenta que las propiedades font-variant, font-stretch, font-size-adjust y font-style se han asignado a sus valores predeterminados.
h1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
Reescrita como una sola propiedad abreviada, la misma regla podría aparecer de la siguiente manera:
h1 { font: bold 16pt/18pt Arial }
Cuando se escribe utilizando notación abreviada, los valores omitidos se asignan automáticamente a sus valores predeterminados.Por tanto, el ejemplo abreviado anterior omite las etiquetas font-variant, font-style, font-stretch y font-size-adjust.
Si tienes estilos definidos en más de una ubicación (por ejemplo, tanto incrustados en una página HTML como importados desde una hoja de estilo externa) utilizando tanto las formas corta como larga de sintaxis CSS, ten en cuenta que las propiedades omitidas en una regla abreviada pueden anular (o aplicar en cascada) propiedades que están establecidas explícitamente en otra regla.
Por esta razón, Dreamweaver utiliza la forma larga de notación CSS de forma predeterminada.Esto evita posibles problemas causados por una regla abreviada que anule una regla larga.Si abres una página web que fue codificada con notación CSS abreviada en Dreamweaver, ten en cuenta que Dreamweaver creará cualquier nueva regla CSS utilizando la forma larga.Puedes especificar cómo Dreamweaver crea y edita las reglas CSS cambiando las preferencias de edición de CSS en la categoría Estilos CSS del cuadro de diálogo Preferencias (Edición > Preferencias en Windows; Dreamweaver > Preferencias en Macintosh).
Dreamweaver y CSS
En Dreamweaver, puedes trabajar con CSS de varias maneras:
- Puede usar el Diseñador de CSS para crear su CSS con una programación mínima. Para obtener más información, consulte Diseño de páginas con el Diseñador de CSS.
- También puede programar CSS a mano. Para obtener más información sobre las características de codificación que ofrece Dreamweaver, consulta Entorno de codificación en Dreamweaver.
- Si prefiere trabajar con archivos Sass, Scss, o Less, puede programar sus archivos usando su sintaxis preferida y utilizarlos en Dreamweaver. Para obtener más información, consulta Preprocesadores CSS.
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
