Hojas de Estilo Resumen

HOJAS DE ESTILO CSS (Cascading Style Sheets)
INTRODUCCIN
HTML 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:
<font face="arial"><i>texto de la pgina</i></font>
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 ESTILO

Para definir una hoja de estilos en un documento HTML se emplea la etiqueta <STYLE> de la siguiente manera:
<style type=text/css> estilos y sus propiedades </style>
Los comentarios son necesarios para asegurarse la compatibilidad con los navegadores que no las soporten.
Hojas de estilo
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 <h1> </h1> ser de color azul, y el que est entre las etiquetas <p> </p> ser de un tamao de 10pt y tendr un margen izquierdo de 20 pt.
<style type=text/css> /*Esta es la hoja de estilos*/ h1 {color:blue;} p {font-size:10pt;marginleft:20pt} </style>
COLOCACIN DE HOJAS DE ESTILO

Dentro del documento HTML
Cuando hacemos una definicin en grupo de una hoja de estilos utilizando la etiqueta <style> esta tiene que estar colocada en la cabecera del documento HTML es decir dentro de la etiqueta <head>
<html> <head> <title> esta es mi primera hoja de estilos</title> <style type=text/css> h1 {color:blue} p {font-size:10pt;margin-left:20pt} </style> </head> <body> <h1>texto azul</h1> <p>fuente de tamao de 10 ptos. y margen izquierdo 20</p> </body> </html>
Hojas de estilo
En un fichero .css
Podemos 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 <link>
<html> <head> <title> Esta es mi primera hoja de estilos</title> <link rel="stylesheet" type="text/css" href="hoja.css"> </head> ............... </html>
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 etiqueta

Se puede definir un estilo dentro de una etiqueta. Esta posibilidad se puede utilizar para neutralizar el estilo definido en la cabecera.
<etiqueta style=propiedad:valor;.....>......</etiqueta>
En el siguiente ejemplo la etiqueta <p> 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.
<!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <title>Documento sin ttulo</title> <style type="text/css"> p {color:blue; font-size:12pt} </style> </head> <body> <p>Esta lnea es azul</p> <p style="color:red">Esta es roja</p> <p>Esta es azul de nuevo</p> </body> </html>
HERENCIA DE ESTILO
Las etiquetas de un documento HTML estn organizadas de manera que unas engloban a otras. Por ejemplo todas las etiquetas se encuentran dentro del <body> y otras como <b> las podemos encontrar entre <p>, <h1>, 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
<style type=text/css> body {font-family:arial;color:blue} </style>
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 <p>. 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
<html> <head> <title>Documento sin ttulo</title> <style type="text/css"> body {margin-left:20} p {color:blue; font-size:12pt} em {color:red; text-transform:uppercase} </style> </head> <body> <p> este es un prrafo donde la etiqueta que <b>hereda el estilo</b> de la hoja de estilos</p> <p>en cambio; al estar <em>definido prevalece</em> su propio estilo.</p> </body> </html>
Observamos como la etiqueta <b> utilizada para colocar la negrita si que remarca el texto pero lo deja en azul ya que hereda este valor de <p>. En cambio, <em> aparece en maysculas y verde a pesar de estar dentro de <p> ya que le hemos definido su propio estilo. En la etiqueta <body> se ha definido el margen izquierdo que afectar a todo el texto de la web.
HERENCIA EN FUNCIN DEL CONTEXTO

Otra 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 <b> 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.
<html> <head> <title>Documento sin título</title> <style type="text/css"> p b {color:blue} li b {color:red} </style> </head> <body> <p>Aqu aparece <b>azul</b></p> <p>En cambio en la siguiente lnea</p> <ul>
Hojas de estilo
<li> Aparece <b>en rojo</b> </ul> </body> </html>
</li>
CLASES
Hasta 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 <STYLE> 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

<p class=nombreclase> texto </p> <h2 class=nombreclase> texto <h2>
En el siguiente ejemplo definimos una clase que determina el color azul del texto y despus la aplicamos a distintas etiquetas.
<html> <head> <style type="text/css"> .cazul {color:blue} </style> </head> <body> <p class="cazul" >Esta prrafo es un azul</p> <h2 class="cazul">Este tambin</h2> </body> </html>
PSEUDOCLASES
En 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.
Pseudoclases
Por el momento slo podemos definir pseudoclases para los enlaces, es decir slo se utiliza con la etiqueta <a..> 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 visitado
Hojas de estilo
: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.
<html> <head> <title>Documento sin título</title> <style type="text/css"> a:link {color:green} a:visited {color:blue} </style> </head> <body> Un <a href="http://terra.es"> enlace </a> </body> </html>
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} .. <a class:external href=ejem.htm>enlace</a>
IDENTIFICADORES
Las etiquetas HTML pueden poseer un atributo llamado id al que se le puede asignar un nombre identificativo, por ejemplo,
<body> .... <h1 id=cabeceraPrincipal/> ... </body>
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
<html> <head> <style type="text/css"> .cazul {color:blue} </style> </head> <body> <h1 id="titulo">Este tambin</h2> <p >Ahora os comento alguna cosa</p> </body> </html>
Hojas de estilo
RESUMEN DE SELECTORES
Ya 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 estilo

Hojas de Estilo Resumen

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Hojas de Estilo Resumen

Încărcat de

Drepturi de autor:

Formate disponibile

HOJAS DE ESTILO CSS (Cascading Style Sheets)

DEFINICIN DE UNA HOJA DE ESTILO

Para definir estilos y sus propiedades :

COLOCACIN DE HOJAS DE ESTILO

Definicin dentro de la propia etiqueta

<style type=text/css> body {font-family:arial;color:blue} </style>

HERENCIA EN FUNCIN DEL CONTEXTO

<li> Aparece <b>en rojo</b> </ul> </body> </html>

que luego asociamos a la etiqueta HTML con el atribulo CLASS

S-ar putea să vă placă și