HOJAS DE ESTILO CSS (Cascading Style Sheets)INTRODUCCINHTML tiene muchas limitaciones a la hora de facilitar la homogeneidad y flexibilidad en la distribucin del contenido en una web. Colocar una imagen, crear una pancarta lateral, justificar texto en HTML se convierte en un problema cuya resolucin es posible slo con el uso de instrumentos nacidos con otra finalidad (las tablas, por ejemplo, en el 90% de los casos se utilizan para disponer elementos en la pgina, en lugar de servir para ordenar datos). Tomemos un sitio web de complejidad media, con un nmero de pginas HTML igual a 100. Pongamos que el tipo adoptado para tratar los temas sea un "arial" de cursiva. Con los instrumentos clsicos de HTML el cdigo para obtener este resultado sera:texto de la pgina

que debera repetirse en todas y cada una de las 100 pginas del sitio, en la apertura y cierre del texto para formatear. Pero qu sucede si decidimos cambiar el tipo de fuente a todas las pginas? No tenemos ms remedio que ir abriendo las 100 pginas e ir cambiando en todos los casos el nombre "arial" por el de la nueva fuente. Un webmster medianamente capaz puede tardar algunas decenas de minutos en la operacin, que llegarn a convertirse en horas si se trata de sitios de grandes dimensiones. Para facilitar las tareas de diseo en la web se utilizan las Hojas de Estilo en Cascada (Cascading Style Sheets). Con la expresin "en cascada" se hace referencia a una de las caractersticas principales de este mtodo: la que permite incorporar en el documento distintas hojas de estilo, cada una de las cuales, segn una serie de reglas jerrquicas, tendr prevalencia sobre la otra. Las CSS fueron introducidas por Microsoft a partir de la tercera versin de Internet Explorer, mientras que Netscape incorpora su soporte parcial slo a partir de su cuarta versin. Quien accede con un navegador obsoleto a un documento formateado con CSS se encontrar ante una pgina gestionada por las opciones por defecto del navegador (el fondo, por ejemplo, ser gris; el tipo de fuente, "times new roman"; etc.). Las CSS han sido oficialmente reconocidas y normalizadas por el W3C (consorcio internacional cuyo objeto es el establecimiento de estndares relacionados con el web), en sus disposiciones "CSS1" primero, y "CSS2" despus.

DEFINICIN DE UNA HOJA DE ESTILOPara definir una hoja de estilos en un documento HTML se emplea la etiqueta de la siguiente manera: estilos y sus propiedades

Los comentarios son necesarios para asegurarse la compatibilidad con los navegadores que no las soporten.

Hojas de estilo

1

Para definir estilos y sus propiedades :

Podemos introducir comentarios en una hoja de estilos mediante las etiquetas /*....*/ de la misma manera que en el lenguaje C. Ejemplo: Creamos un estilo que determine que todo el texto que se encuentre entre las etiquetas ser de color azul, y el que est entre las etiquetas ser de un tamao de 10pt y tendr un margen izquierdo de 20 pt. /*Esta es la hoja de estilos*/ h1 {color:blue;} p {font-size:10pt;marginleft:20pt}

COLOCACIN DE HOJAS DE ESTILODentro del documento HTMLCuando hacemos una definicin en grupo de una hoja de estilos utilizando la etiqueta esta tiene que estar colocada en la cabecera del documento HTML es decir dentro de la etiqueta esta es mi primera hoja de estilos h1 {color:blue} p {font-size:10pt;margin-left:20pt} texto azul fuente de tamao de 10 ptos. y margen izquierdo 20

Hojas de estilo

2

En un fichero .cssPodemos definir los estilos en un fichero externo y luego hacer referencia a ste desde la/s pgina/s donde queramos utilizar el/los estilo/s. El fichero hoja_estilos.css es un simple fichero de texto con extensin .css en el que definimos la hoja de estilo en funcin de la sintaxis que hemos descrito anteriormente./*Fichero hoja_estilos.css*/ h1 {color:blue} p {font-size:10pt;margin-left:20pt} /*Final del fichero hoja de estilos.css*/

Para llamar al fichero hoja_estilo.css desde una web se utiliza la etiqueta Esta es mi primera hoja de estilos ...............

En el atributo href debemos indicar la direccin relativa donde est localizado el fichero, en el ejemplo anterior hace referencia a hoja.css que est en la misma carpeta que el documento Web.

Definicin dentro de la propia etiquetaSe puede definir un estilo dentro de una etiqueta. Esta posibilidad se puede utilizar para neutralizar el estilo definido en la cabecera.......

En el siguiente ejemplo la etiqueta tiene definido el color rojo pero si en un momento determinado queremos cambiar esto, podemos definir un estilo dentro de la etiqueta que ser vlido solamente en esa etiqueta. Documento sin ttulo p {color:blue; font-size:12pt} Esta lnea es azul Esta es roja Esta es azul de nuevo

HERENCIA DE ESTILOLas etiquetas de un documento HTML estn organizadas de manera que unas engloban a otras. Por ejemplo todas las etiquetas se encuentran dentro del y otras como las podemos encontrar entre , , etc. Esta organizacin permite una relacin padre-hijo de manera que los estilos definidos para etiquetas padre sern heredados por los hijos. Por ejemplo si definimos: Hojas de estilo 3 body {font-family:arial;color:blue} En principio todo el documento estar con una fuente arial de color azul. Esta caracterstica puede resultar muy til ya que evita tener que volver a definir los mismos estilos para diferentes etiquetas. Es decir con el ejemplo anterior evitamos tener que definir la fuente y color en la etiqueta . El mecanismo de herencia siempre funciona a menos que un elemento hijo tenga definido su propio estilo, el cual prevalece sobre el heredado e incluso en algunos casos se complementan. En el siguiente caso Documento sin ttulo body {margin-left:20} p {color:blue; font-size:12pt} em {color:red; text-transform:uppercase} este es un prrafo donde la etiqueta que hereda el estilo de la hoja de estilos en cambio; al estar definido prevalece su propio estilo. Observamos como la etiqueta utilizada para colocar la negrita si que remarca el texto pero lo deja en azul ya que hereda este valor de . En cambio, aparece en maysculas y verde a pesar de estar dentro de ya que le hemos definido su propio estilo. En la etiqueta se ha definido el margen izquierdo que afectar a todo el texto de la web.HERENCIA EN FUNCIN DEL CONTEXTOOtra caracterstica importante es que podemos dar estilos a un elemento dependiendo de donde se encuentre colocado en la pgina, es decir a una etiqueta no tiene porque corresponder siempre el mismo estilo sino que podemos hacer que ste dependa de la situacin en la que se encuentre. En el siguiente ejemplo la etiqueta aparece definida con el color rojo en una situacin y en azul en otro. Azul cuando se encuentra dentro de un prrafo normal y rojo cuando esta en una lista. Documento sin ttulo p b {color:blue} li b {color:red} Aqu aparece azul En cambio en la siguiente lnea

Hojas de estilo4 Aparece en rojo CLASESHasta ahora hemos definido los estilos ligados a las etiquetas, esto tiene la limitacin de que la etiqueta siempre presenta el mismo aspecto y esto no siempre interesa. Para evitar esta situacin disponemos de las clases, stas nos van a permitir definir un estilo y despus aplicarlo a la etiqueta que queramos. Para definir una clase utilizamos la etiqueta en la cabecera pero en vez de el nombre de la etiqueta para definirlos utilizamos un nombre creado por nosotros..NombreClase {propiedad:valor;...}que luego asociamos a la etiqueta HTML con el atribulo CLASS texto texto En el siguiente ejemplo definimos una clase que determina el color azul del texto y despus la aplicamos a distintas etiquetas. .cazul {color:blue} Esta prrafo es un azul Este tambin PSEUDOCLASESEn algunos casos el HTML ya proporciona a ciertas etiquetas un estilo especial propio. El hecho de que los enlaces se marquen y se subrayen es n ejemplo de estilo que ya existe incluso antes de ser especificado en nuestra hoja de estilo. A estos elementos le denominaremos pseudoclases.PseudoclasesPor el momento slo podemos definir pseudoclases para los enlaces, es decir slo se utiliza con la etiqueta La forma de utilizarlas es la siguiente:Etiqueta:pseudoclase {definicin de estilo}Se disponen de las siguientes pseudoclases :link, nos indica el estilo con el que debe aparecer el enlace antes de ser visitado :visited, nos indica el estilo con el que aparece un enlace visitadoHojas de estilo5:active, nos indica el estilo en el que aparece el enlace en el momento de activarlo :hover, nos indica el estilo en el que aparece el enlace al pasar por encima el ratn. En el siguiente ejemplo, el enlace aparece en primer lugar de color verde y si se trata de un enlace ya visitado se vuelve azul. Documento sin ttulo a:link {color:green} a:visited {color:blue} Un enlace Las pseudoclases se pueden combinar con las clases. Es decir, podemos aplicar estar pseudoclases slo a la clase de enlace que nos interese. En el siguiente ejemplo slo aplicaremos a los enlaces definidos con la clase external.a.external:link {color:blue} a.external:vidited {color:purple} .. enlaceIDENTIFICADORESLas etiquetas HTML pueden poseer un atributo llamado id al que se le puede asignar un nombre identificativo, por ejemplo, .... ... El identificador debe ser nico en un documento Web. Para referenciar ese elemento desde la hoja de estilos se debe utilizar la siguiente sintaxis: #identificador. En el siguiente ejemplo podemos observar define un estilo para el identificador titulo .cazul {color:blue} Este tambin Ahora os comento alguna cosa Hojas de estilo6RESUMEN DE SELECTORESYa hemos visto como seleccionar elementos desde la hoja de estilos para aplicarle un grupo de propiedades CSS. Como se muestra en la imagen siguiente se debe indicar el selector y a continuacin encerrar entre llaves las propiedades CSS a aplicar a los elementos referenciados por el selector (en este caso es p)Hojas de estilo7