10_workshop_css by Ariel Karlen

(English)

Conferencias

Exposiciones

Workshops

Reuniones

Informes

CSS Cascading Style Sheets

Ejercicios

Una 'style sheet' u “hoja de estilo” es una serie de reglas de estilos que le dicen al browser cómo presentar un documento. Permiten al diseñador definir un “estilo” (una lista de detalles de formato como tipografías, cuerpos, colores) que después puede ser aplicado a una o más porciones del HTML en una página, utilizando un “selector”.

Apuntes

Son muy prácticas para poder separar el contenido de la estructura de un website. Como las CSS fueron creadas para darle forma a la presentación de las páginas, las estructura de las mismas puede ser usada por documentos HTML estáticos, o dinámicos (PHP, ASP, XML, etc). Son fáciles de manejar, de actualizar o cambiar, y hacen que los documentos en sí mismos sean más sencillos y rápidos de cargar.

Legibilidad Tipografía en la web Tipografías para pantalla “Tipografías pixeladas” [ CCS - Cascading Style Sheets ] Bibliografía

Si bien la mayoría de los programas de edición de páginas del estilo de Macromedia Dreamweaver o Adobe GoLive escriben este código directamente, creemos que es interesante entender cómo funcionan y cuál es la lógica con la cual fueron creadas. Hay varias maneras de vincular las CSS a los documentos HTML: Incluírlas en el documento mismo, utilizando el 'tag' “STYLE” de HTML. Este elemento se incluye dentro del HEAD del documento y contiene la información de estas reglas de estilo para esa página. Se pueden poner tantas como uno desee contenidas entre la apertura . <STYLE TYPE="text/css"> P { background: yellow; color: black } .note { margin-left: 5em; margin-right: 5em } </STYLE> El atributo TYPE estamos usando aunque también en Netscape 4.x

que vemos en el ejemplo especifica qué lenguaje para definir los estilos. Generalmente se usa “texto”, se puede usar “javascript”, que como sólo funciona practicamente no se utiliza.

Para evitar que los browsers que no admiten CSS las muestren como un texto dentro del documento, se les pueden agregar un comentario: <STYLE TYPE="text/css"> <!-P { background: yellow; color: black } .note { margin-left: 5em; margin-right: 5em } --> </STYLE> Vincularlas a un documento separado, que contiene toda la información de estilos, y que puede ser utilizado todas las veces que sea necesario. Es un documento de texto, generalmente con la extensión “css”. Se puede incluír más de uno en la misma página. <LINK REL="StyleSheet" HREF="estilos.css" TYPE="text/ css"> Importándolas desde otro documento con el comando "@import". Este método puede ser útil en caso de querer utilizar varias 'style sheets' en la misma página, por ejemplo el estilo “basico.css”, que podría ser para todo el website, y uno llamado “seccion.css”, que podría ser específico de una sección. También mediante el 'link' descripto anteriormente se puede vincular el documento a varias 'style sheets'. <STYLE TYPE="text/css"> <!-@import url(http://www.nuestrositio.com.ar/basico.css); @import url(/stylesheets/seccion.css); DT { background: yellow; color: black }

--> </STYLE> Utilizándolas dentro del documento con el atributo “STYLE” en cualquier elemento del BODY, incluyendo este último. Los distintos detalles de estilo se separan con un punto y coma. <P STYLE="color: red; font-family: 'Verdana', sansserif">Este texto esta compuesto en Verdana, color rojo.</P> Selectores Cada definición de CSS tiene dos componentes: un “selector”, que define cuales 'tags' de HTML tal como BODY, P, H1 están afectados; y un “atributo”, que especifica lo que el estilo deberá hacer. Cada “atributo” tiene un “valor”, que describe cómo debe verse el “selector”. Para un elemento se pueden definir numerosas atributos. Así es la sintáxis: selector { atributo: valor } Múltiples atributos se separan con un punto y coma: selector { atributo1: valor1; atributo2: valor2; atributo3: valor3 } Por ejemplo, el siguiente código define el color y el cuerpo para los elementos H1 y H2 (títulos). <HEAD> <TITLE>Ejemplo de CSS</TITLE> <STYLE TYPE="text/css"> H1 { font-size: 16px; color: red } H2 { font-size: 14px; color: blue } </STYLE> </HEAD> Esto significa que el browser deberá mostrar los títulos de primer nivel (H1) en un tamaño de 16 pixeles, en color rojo, y los de segundo nivel (H2) en 14 pixeles, color azul. Selectores de 'tags' Elementos de HTML como 'tags' <P>, <H1>, <DIV>, etc. a los que se le puede aplicar un estilo para cada vez que el mismo aparezca en un documento. Pseudo-clases y Pseudo-elementos Son “clases” y “elementos” especiales que los browsers que admiten CSS reconocen automáticamente. Las reglas para estas pseudo-clases se escriben con la forma: selector:pseudo-clase { atributo: valor } ó selector:pseudo-elemento { atributo: valor } Pseudo-clase <A> ('Anchor') Esta clase es la más versatil y es muy útil para asignarle al 'tag' <A> cómo mostrar los vínculos, vínculos visitados, y vínculos activados (LINK, VLINK y ALINK) en forma diferente. Se les puede asignar a cada uno diferentes valores de color, tipografía, estilo, etc. Por ejemplo: A:link { color: blue } A:active { color: red; font-size: 125% } A:visited { color: green; font-size: 85% } A:hover { color: yellow; font-size: 125%; textdecoration: underline } Esto se traduce de la siguiente manera: el vínculo está normalmente rojo, cuando está activado, se pone azul y crece un 125%, cuando el mouse está sobre él, es amarillo y está subrayado, y una vez que ha sido visitado, se verá en verde y un 85% más chico. También existen los pseudo elementos “primera línea” ('first-line'), que se usa para determinar la primera línea del artículo en diarios, por ejemplo, en versalitas y bold.

P:first-line { font-variant: small-caps; font-weight: bold } Lo mismo para las capitales ('first-letter'), a las cuales se les puede otorgar una característica diferencial: P:first-letter { font-size: 300%} Selectores de clase (“CLASS”) Se utilizan aplicados a cualquier elemento, un ejemplo típico es el caso de querer tener más de un estilo para un 'tag' (<P>, <H1>, etc) que ya estaba definido anteriormente P { color: blue; font-size: 12px} .rojo { color: red} Los selectores “CLASS” se escriben con un punto y se aplican a cualquier 'tag' de la siguiente manera: <P CLASS="rojo">Este texto es de 12 pixeles pero de color rojo.</P> <A CLASS="rojo" HREF="link.html">link del estilo rojo</A> También es posible combinar un selector ‘tag’ con un “CLASS”, en el caso de querer, por ejemplo, que el vínculo del estilo “rojo” definido anteriormente sea bold: A.rojo:link { font-weight: bold} Este efecto de aplicarle estilos múltiples a un simple elemento se llama “cascading” (efecto catarata) y es de donde sale el nombre de Cascading Style Sheets. Selectores contextuales Es un selector que aplica dentro de un contexto. Sirve, por ejemplo, en el caso de tener un párrafo con un selector “CLASS” determinado (un párrafo diferente al definido por defecto) que tiene vínculos dentro del mismo, que tienen que tener un estilo también diferente al definido por defecto. Digamos, entonces, que dentro del párrafo al que le aplicamos la clase “rojo” queremos que los vínculos aparezcan siempre bold: P.rojo A:link { font-weight: bold; color: rojo} Ahora sin necesidad de indicarlos de modo especial, todos los <LINK> dentro del <P CLASS="rojo"> serán bold. Selectores “ID” Similares a los “CLASS” son utilizados para seleccionar un ‘tag’ en particular, en vez de un grupo de ‘tags’. El ‘tag’ seleccionado se identifica con un “ID” de la siguiente manera: <P ID="especial">texto definido exclusivamente con el ID ‘especial’</P> Se escriben con el signo numeral (#) antes del nombre #especial { color: white} También se pueden usar combinados con otros selectores al igual que los “CLASS”. Atributos A continuación mencionaremos los atributos más comunes de CSS admitidos por los browsers actuales (Netscape 4 o posterior, Microsoft Internet Explorer 4 o posterior) Una lista completa de los atributos de las CSS1 y CSS2 pueden encontrarse en los siguientes websites: http://www.w3.org/TR/REC-CSS1#css1-properties http://www.w3.org/TR/REC-CSS2/ Lo interesante de las CSS es que posibilitan la aplicación de efectos que no pueden ser reproducidos usando HTML simple.

border-color Determina el color del recuadro o borde que rodea a los elementos seleccionados. Se pueden seleccionar los lados por sepado definiendo cada uno de ellos: Superior: border-top-color, derecho: border-right-color, inferior: border-bottom-color, e izquierdo: border-left-color. Ejemplo: .recuadro { border-color: #FF0000; } border-style Determina el estilo del borde descripto anteriormente. Los estilos posibles se indican con la siguiente denominación: double, groove, inset, none, outset, ridge, solid. Y pueden ser definidos por separado, de la siguiente manera: Superior: border-top-style, derecho: border-right-style, inferior: border-bottom-style, e izquierdo: border-left-style. Ejemplo: .recuadroEspecial { border-style: ridge; } border-width Determina el ancho del recuadro, también puede definirse individualmente: Superior: border-top-width, derecho: border-right-width, inferior: border-bottom-width, e izquierdo: border-left-width. Ejemplo: .recuadroGrueso { border-width: 3px; } margin Determina la distancia (margen) entre el exterior de un borde y el resto de los elementos en la página. El margen para cada lado puede ser establecido por separado: Superior: margin-top, derecho: margin-right, inferior: marginbottom, e izquierdo: margin-left. Ejemplo: .espacios { margin-top: 10px; margin-right: 0px; margin-bottom: 6px; margin-left: 20px } padding Determina el espacio entre el interior de un borde y el elemento mismo. El espacio puede ser establecido por separado: Superior: padding-top, derecho: padding-right, inferior: paddingbottom, e izquierdo: padding-left. Ejemplo: .alredeor { padding-top: 10px; padding-left: 4px} background-attachment Especifica si la imagen de fondo de un elemento, en particular del < BODY>, se repite con dicho elemento, o queda fija en una posición. Este atributo no está disponible para el Netscape 4. Ejemplo: BODY { background-attachment: fixed; } background-color Determina el color de fondo de un elemento, puede ser indicado con el nombre del color, por el código hexadecimal del color, o transparente. Ejemplo: .destacado { background-color: yellow; } background-image Especifica la imagen de fondo de un elemento, puede ser direccionada a un URL. Ejemplo: .rayado { background-image: url(rayas.gif); } background-position Este atributo no está disponible para el Netscape 4; permite determinar si el elemento fondo (background) tiene una posición determinada. Para fondos tramados, se especifica la esquina izquierda superior como inicio. Para fondos no tramados, se

especifica la posición de la imagen de fondo desde la esquina superior izquierda. Se puede establecer uno o dos porcentajes, largos, o posiciones (izquierda, centro, derecha) en donde la primera especifica la posición horizontal y la segunda la vertical. Si la vertical no está especialmente definida toma el 50%. Ejemplo: .fondoLogo { background-image: url(logo.gif); background-position: center center; background-repeat: no-repeat; } Esto es una imagen única (en este caso un logo), que no se repite, centrada en la página. .fondoBarras { background-image: url(barras.gif); background-position: 12px 50px; background-repeat: no-repeat; } En este caso sería una imagen única también posicionada a 12 pixeles del borde superior y a 50 del borde izquierdo. background-repeat Esta opción es la repetición (de una trama) de la imagen de fondo del elemento seleccionado; se puede determinar que la repetición de la imagen sea sólo horizontal (repeat-x) o sólo vertical (repeat-y), en ambos sentidos (repeat), o que no se repita (no-repeat). Este atributo no está disponible para el Netscape 4. Ejemplo para el fondo de una sección de una tabla: TD.fondoRayado { background-image: url(rayas.gif); background-repeat: repeat-x; } color Determina el color del elemento afectado, generalmente se usa para el color de textos. Ejemplo: P.menuRojo { color: #FF3300; background-color: black; } list-style-type En una lista, determina el estilo (bullet) para marcar los ítems. Para las listas sin orden <UL> los ítems pueden estar antecedidos de un círculo sólido (circle), un círculo outline (disc) o un cuadrado (square). Para las listas ordenadas <OL> las posibilidades son números decimales (1), letras minúsculas (a) o mayúsculas (A), números romanos en minúscula (i) o en mayúsculas (I). Ejemplo: UL { list-style-type: square; } list-style-image Asimismo, para las listas se puede utilizar una miscelánea o ícono como ‘bullet’, que es una imagen de la cual se indica su URL. Puede especificarse para una lista (<DL>, <OL>, <UL>) o para los ítems en particular (<DT>, <LI>). Este atributo no está disponible para el Netscape 4. Ejemplo: #item1 { list-style-image: url(flecha.gif); } list-style-position Determina si el marcador de los ítems (‘bullet’ o número) se ubica dentro o por fuera de la caja de texto de los ítems. Este atributo no está disponible para el Netscape 4. Ejemplo: OL { list-style-position: inside; } font-family Determina la familia tipográfica. El valor debe indicarse con una lista

de tipografías separadas por comas, en orden de preferencia, y las fuentes que tienen espacios en su nombre, deben estar entre comillas. Para la última opción se recomienda usar una tipografía generica del tipo: serif, sans-serif, cursive, fantasy, or monospace. Ejemplo: P { font-family: Georgia, “Times New Roman”, Times, serif; } font-size Especifica el cuerpo tipográfico para el elemento seleccionado. Se puede determinar utilizando tamaños preestablecidos del tipo: xxsmall, x-small, small, medium, large, x-large, xx-large. Asimismo se puede establecer que el tamaño sea menor (smaller) o mayor (larger) en relación al establecido en el nivel superior o en relación al que está por defecto en el browser. Alternativamente, puede especificarse en pixeles (px), puntos (pt), ancho de m (em) o como porcentaje respecto del standard o del definido por defecto (%). Ejemplo: .menu { font-size: 8px; } font-style Sirve para determinar si la tipografía tiene que ser romana (normal), o itálica (italic). Ejemplo: EM { font-style: italic } font-variant Puede utilizarse para mostrar el texto en mayúsclas, a modo de versalitas. Este estilo no está disponible para Netscape 4. Ejemplo: H1 { font-variant: small-caps; } font-weight Determina el peso de la tipografía. La mayoría de los browsers sólo muestran los valores normal y bold, pero con las CSS se pueden definir más valores, denominados de la siguiente manera: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900; 400 es el valor normal, y bold es igual a 700. Ejemplo: B { font-weight: bolder; } letter-spacing Especifica el espacio entre caracteres (interletrado). El valor normal toma el interletrado por defecto, medidas positivas o negativas (pt, em, px) pueden ser usadas para estrechar o relajar el espacio, respectivamente. Este estilo no está disponible para Netscape 4. Ejemplo: .ajustado { letter-spacing: -0.1em } text-align Determina la alineación de un texto: hacia la izquierda (left), derecha (right), centrado (center) o justificado (justify), La opción justificado se ve desflecado a la izquierda en el Netscape 4 de Windows y en el Explorer 4 de Macintosh. Ejemplo: .noticias { text-align: justify; } text-decoration Permite aplicar efectos a los textos determinados. Los efectos incluyen subrayado (underline), (overline), tachado (line-through), ó ninguno (none). Este último sirve para aplicarle a los vínculos, para que no aparezcan subrayados. Netscape 4 ignora el “overline”. Ejemplo: A:link { text-decoration: none; } line-height Especifica la interlinea de un texto. Los valores pueden ser “normal” (el que tiene el browser por defecto), un número (dónde “1” es espacio simple, “2” es doble espaciado, y “1.5” un intermedio entre ambos), una medida (px, pt, em), o un porcentaje (en donde 100% es espaciado simple). Hay que tener en consideración que los browsers 4.x no admiten algunos de estos estilos. Ejemplo: .dobleespacio { line-height: 2; } text-indent

Determina el indentado (positivo o negativo) de la primera línea del párrafo seleccionado. El valor puede ser una medida (px, pt, em), ó un porcentaje del ancho del párrafo en cuestión. Ejemplo: P.copete { text-indent: 12px; } text-transform Transforma el texto a mayúsculas, si el valor es nulo, queda según el código fuente. La opción de capitalizar (“capitalize”) cambia la primera letra de cada palabra a mayúscula, la opción minuscula (“lowercase”) cambia a caja baja y la opción mayúscula (“uppercase”) la cambia a caja alta. Ejemplo: H1 { text-transform: capitalize; } vertical-align Determina la alineación vertical del texto en los elementos seleccionados (inferior: “bottom” o superior: “top”), o del elemento seleccionado en relación al texto que lo rodea, las posibilidades se denominan de la siguiente manera: baseline, middle, sub, super, text-bottom, or text-top. Ejemplo: .exponencial { vertical-align: super; text-size: smaller } Agrupamiento Para evitar repeticiones entre estilos, los selectores pueden agruparse, por ejemplo en el caso de utilizar siempre la misma fuente tipográfica: P, H1, H2, H3, DIV { font-family: "Verdana, Helvetica, Arial" } Herencia Virtualmente, todos los selectores incluídos en otros selectores heredan los valores de las atributos asignadas al selector superior salvo que sean expresamente modificadas. Por ejemplo, el color asignado en el ‘tag’ de BODY será automáticamente heredado y aplicado al ‘tag’ P. Hay algunos casos en los que el selector secundario no hereda los valores, como en el caso de la atributo “margen superior” (‘margintop’) ya que, lógicamente, un párrafo (P) no puede tener el mismo margen superior que el BODY del documento. El poder de las CSS es muy importante si se las combina y es posible ubicar todos los elementos de una página con una precisión bastante efectiva. Es una excelente sustitución de las tablas, que se han estado usando desde hace tiempo para organizar los elementos en la puesta en página, justamente a falta otras de posibilidades. Derechos de reproducción de este artículo: Copyright © (bi)gital» 2001 | http://bigital.com/

Desarrollado por