Estilos

CSS ESTILOS
Las Hojas de Estilo (o CSS, por Cascading StyleSheets) son un mecanismo que permiten aplicar formato a los documentos escritos en HTML XHTML (y en otros lenguajes estructurados, como XML) separando el contenido de las pginas de su apariencia. Para el diseador, esto significa que la informacin estar contenida en la pgina HTML, pero este archivo no debe definir cmo ser visualizada esa informacin, sino la hoja de estilos asociada a l. Las indicaciones acerca de la composicin visual del documento estarn especificadas en el archivo de la CSS.
Aplicacin directa en etiquetas

Posibilidades para definir un estilo: Especificarlo directamente en la etiqueta en la que queremos usarlo. Definirlo aparte y aplicarlo en las etiquetas que queramos. Definir estilos globales para las etiquetas.
Para aplicar un estilo a una etiqueta concreta, usaremos la sintaxis: <etiqueta STYLE="propiedad1:valor;...;propiedadN:valor"> ... </etiqueta> Etiqueta es la etiqueta de HTML en la que queremos dar una apariencia concreta (<P>, <B>, <I>, ...).
STYLE es el parmetro que indica que vamos a aplicar el estilo definido a continuacin a la etiqueta en la que se encuentra. La definicin del estilo son pares propiedad:valor separados por punto y coma. Propiedad ser la caracterstica de la etiqueta que queramos modificar (el color, el tamao de la fuente, el tipo de letra, ...) y valor es el valor que queremos darle (color negro, 8 puntos de tamao de letra, ...).
Ejemplo: La negrita que vemos <B STYLE="font-size:14pt;color:red">es ms grande y est en rojo</B>.
Redefinicin de etiquetas
Suele ocurrir es que queremos definir estilos que se apliquen a todas las etiquetas del documento, es decir, queremos que todo el documento tenga un cierto tipo de letra, que las tablas tengan otro, que las cabeceras tengan un color determinado, para ello, definiremos estilos globales por medio de la etiqueta <STYLE> ... </STYLE> como sigue: <STYLE TYPE="text/css"> <!-Etiqueta1, Etiqueta2 : {propiedad1:valor} Etiqueta3 : {propiedad1:valor;...;propiedadS:valor} Etiqueta4 : {propiedad1:valor;...;propiedadT:valor} .Clase1 : {propiedad1:valor;...;propiedadT:valor} //--> </STYLE>
<HTML> <HEAD> <TITLE> Ejemplo con bloque de estilo </TITLE> <STYLE TYPE="text/css"> <!-BODY {font-family:Verdana,sans-serif;font-size:x-small; margin-left:0.25in; margin-right:0.25in} H2 {font-family:Verdana,sans-serif;font-size:14pt;color:red} B, TD {font-family:Verdana,sans-serif;font-size:x-small;color:olive} TH {font-family:Verdana,sans-serif;font-size:x-small; color:white;background-color:#0080C0} TT {font-family:Courier New,Courier;font-size:9pt;color:maroon} //--> </STYLE> </HEAD> <BODY BGCOLOR=white> <H2>Prueba de definicin de estilos en un bloque aparte</H2> Como puede verse, la apariencia de esta pgina queda completamente definida por los estilos que hemos especificado en el bloque STYLE en la cabecera del documento. Los mrgenes son ms amplios de lo habitual, la <B>negrita</B> tiene un tamao y un color fijos, los trozos de texto en teletipo como <TT>este fragmento</TT> tambin tienen definida su fuente, tamao y color, y vamos a ver cmo quedan las tablas, para finalizar el ejemplo: <P> <CENTER> <TABLE BORDER=1 CELLSPACING=2 CELLPADDING=2> <TR> <TH>Cabecera 1</TH> <TH>Cabecera 2</TH> </TR> <TR> <TD>Celda (1,1)</TD> <TD>Celda (1,2)</TD> </TR> </TABLE> </CENTER> </BODY> </HTML>
ejemplo.css /* Manual de CSS de WebEstilo.com */ /* Definicin de estilos en un archivo aparte */
/* Estilo para el documento */ BODY {font-family:Verdana,sans-serif;font-size:x-small; margin-left:0.25in; margin-right:0.25in}

/* Estilo para la cabecera de nivel 2 */ H2 {font-family:Verdana,sans-serif; font-size:14pt;color:red} /* Estilos para otras etiquetas */ B, TD {font-family:Verdana,sans-serif;font-size:x-small; color:olive} TH {font-family:Verdana,sans-serif;font-size:x-small; color:white;background-color:#0080C0} TT {font-family:Courier New,Courier; font-size:9pt;color:maroon}
<HTML> <HEAD> <TITLE> Ejemplo con hoja de estilo externa </TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="ejemplo.css"> </HEAD> <BODY BGCOLOR=white> <H2>Prueba de definicin de estilos en una hoja de estilo externa</H2> Como puede verse, la apariencia de esta pgina queda completamente definida por los estilos que hemos especificado en el bloque STYLE en la cabecera del documento. Los mrgenes son ms amplios de lo habitual, la <B>negrita</B> tiene un tamao y un color fijos, los trozos de texto en teletipo como <TT>este fragmento</TT> tambin tienen definida su fuente, tamao y color, y vamos a ver cmo quedan las tablas, para finalizar el ejemplo: <P> <CENTER> <TABLE BORDER=1 CELLSPACING=2 CELLPADDING=2> <TR> <TH>Cabecera 1</TH> <TH>Cabecera 2</TH> </TR> <TR> <TD>Celda (1,1)</TD> <TD>Celda (1,2)</TD> </TR> </TABLE> </CENTER> </BODY> </HTML>
Separar HTML de CSS Podemos definir los estilos en un fichero distinto al documento HTML, y despus referenciarlo desde el propio documento HTML. Esto lo haremos con la siguiente etiqueta, dentro de la cabecera del documento (entre <HEAD> ... </HEAD>):
<LINK REL="stylesheet" TYPE="text/css" HREF="URL_Hoja.css">
COMENTARIOS CSS Y REGLAS BASICAS

Comentarios en CSS: Podemos definir comentarios dentro de un fichero CSS haciendo uso de una sintaxis muy similar a la C/C++, es decir, se considerar un comentario cualquier seccin del documento que comience con /* y termine con */.
Reglas bsicas:
Con CSS podemos aplicar reglas de estilo a un tipo determinado de elementos dentr del documento HTML, as podemos podemos conseguir el mismo efecto que utilizando el marcado tradicional:
<h2><font color="red">Texto de prueba</font></h2>
Pero con el mnimo esfuerzo:
H2 {color: red;}
A esta expresin se la denomina "regla", y esta en concreto, permite poner en rojo los elementos de tipo h2.
Estructura de las reglas

Cada regla tiene dos partes:
El "selector". Es la parte de la regla que selecciona a qu partes del documento se les debe de
aplicar el estilo. En cuanto a la declaracin se compone de una combinacin de propiedades CSS. Normalmente, el selector es un elemento HTML, aunque puede tomar otros valores.
QUOTE {color: gray;} BIB {color: red;} BOOKTITLE {color: purple;}
La "declaracin". Adems, la declaracin se compone de una lista de parejas "propiedad : valor" separadas por punto y coma, que se corresponden con propiedades vlidas dentro de la especificacin CSS. Los motivos por los que se puede anular una declaracin: son Si utilizamos un propiedad que no existe, la declaracin entera es
ignorada.
Si utilizamos un valor incorrecto para una propiedad, slo debera ignorarse el valor, aunque este aspecto depende de la implementacin del navegador (aunque la mayora son bastante tolerantes con los errores en el cdigo CSS).
Si la definicin del valor de una propiedad permite el uso de ms de una palabra, estas estarn separadas por espacios en blanco. Adems existen unos poco ejemplos en los que se pueden utilizar otros tipo de elementos dentro de la declaracin. Es el caso de la propiedad FONT:
H2 {font: large/150% sans-serif;}
Esta declaracin permite definir adems del tamao de la fuente, el grosor de la lnea en la que est el texto.
AGRUPACION DE SELECTORES
Normalmente, se da el caso en que dos elementos del documento HTML comparten la definicin de la misma propiedad CSS. Estos elementos podemos declararlos de una forma extendida:
H1 {color: purple;} H2 {color: purple;} H3 {color: purple;} H4 {color: purple;} H5 {color: purple;} H6 {color: purple;}
O utilizar la agrupacin para conseguir una declaracin ms compacta (el resultado es el mismo, en ambos casos):
H1, H2, H3, H4, H5, H6 {color: purple;}
Otros ejemplos de estructuras de agrupacin que son equivalentes:

H1 {color: purple; background: white;} H2 {color: purple; background: green;} H3 {color: white; background: green;} H4 {color: purple; background: white;} B {color: red; background: white;}
H1, H2, H4 {color: purple;}

H2, H3 {background: green;} H1, H4, B {background: white;} H3 {color: white;} B {color: red;} H1, H4 {color: purple; background: white;} H2 {color: purple;} H3 {color: white;} H2, H3 {background: green;} B {color: red; background: white;}
Agrupacin de declaraciones:
Podemos agrupar declaraciones cuando tenemos diferentes reglas que definen propiedades
de un mismo elemento. Por ejemplo:
H1 {font: 18pt Helvetica;} H1 {color: purple;} H1 {background: aqua;}
Podemos redefirnirlo como:

H1 {font: 18pt Helvetica; color: purple; background: aqua
Los espacios en blanco sern ignorados, as que el navegador se fiar de la correcta
estructura sintctica de las reglas. Es por eso, que para una ms sencilla visualizacin,
podemos escribir las reglas CSS de esta forma:
H1 { font: 18pt Helvetica; color: purple; background: aqua; }
Ejemplos de combinaciones de agrupacin de selectores y declaraciones:

BODY {background: white; color: gray;}
H1, H2, H3, H4, H5, H6 {font-family: Helvetica, sans-serif; color: white; background: black;}
H1, H2, H3 {border: 2px solid gray; font-weight: bold;} H4, H5, H6 {border: 1px solid gray;} P, TABLE {color: gray; font-family: Times, serif;} PRE {margin: 1em; color: maroon;}
DEFINICIN DEL COLOR color: <color>; Los colores en CSS se pueden definir de varias formas: Hexagesimal: #RRGGBB. Se define con una almohadilla seguida de las cantidades de color para rojo, verde y azul. Las cantidades se expresan en hexagesimal (es decir, dos dgitos de 09 a AF ) . De esta manera negro es #000000, rojo es #FF0000, gris oscuro es #333333 y blanco #FFFFFF. Existen programas que te calculan estas cantidades a partir de un color que se le d. Hexagesimal abreviado: #RGB. Si en el caso anterior los dos dgitos para rojo, verde y azul son los mismos (por ejemplo DD, BB o 22) se puede abreviar dejando slo uno. De esta manera negro es #000, rojo es #F00, gris oscuro es #333 y blanco #FFF. Combinaciones predefinidas en ingls: Existen una serie de colores simples que ya vienen predefinidos y que podemos usar con sus nombres en ingls. De esta manera el negro es black; rojo es red, gris oscuro es gray, y blanco white. Cantidades de color en RGB: rgb(ROJO, VERDE, AZUL). Con esta funcin podemos indicar el color directamente con sus cantidades de rojo, verde y azul; con nmeros del 0 al 255 (mximo). De esta manera el negro es rgb(0,0,0); rojo es rgb(255,0,0), gris oscuro es rgb (100,100,100) y blanco rgb(255,255,255). Tambin se puede indicar en forma porcentual al emplear rgb( nn%,nn%,nn%) color: rgb(20%,60%,90%) Ejemplos: Border-color: green; Background-color:#f80 ; color: #A00000; Background-color: transparent:
Herencia de estilos
<HTML> <HEAD> <TITLE> Ejemplo 1 de herencia </TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="ejemplo.css"> </HEAD> <BODY BGCOLOR=white> Todo el texto tiene definido el estilo Fuente:Verdana, Tamao:x-small, Margen izquierdo:0.25in, Margen derecho:0.25in, <SPAN STYLE="color:red">pero este trozo de lnea es de un color distinto, conservando el resto de propiedades</SPAN>, y eso hace interesante la herencia y la posibilidad de cambiar en partes concretas los estilos heredados. </BODY> </HTML>
Estilo en funcin del contexto

Es la posibilidad de definir, en lugar de un estilo para una etiqueta, sin ms, es definir un estilo en funcin del contexto. Por ejemplo, es posible que solamente queramos que el texto en negrita sea de color verde cuando se encuentre en una celda de una tabla, o que sea de color prpura cuando forme parte de una lista.
<HTML> <HEAD> <TITLE> Ejemplo de estilos segun el contexto </TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="ejemplo.css"> <STYLE TYPE="text/css"> TD B {color:green} UL B {color:purple} </STYLE> </HEAD> <BODY BGCOLOR=white> En este ejemplo, seguimos con los estilos de la hoja externa, pero vamos a comprobar que se verifican los estilos definidos en funcin del contexto: la negrita de una celda cualquiera de una tabla debe ser de color verde, y la negrita de una lista debe ser de color prpura. <P> <UL TYPE=DISC> <LI>Un elemento cualquiera</LI> <LI>Un elemento con una palabra en <B>negrita</B></LI> <LI>Otro elemento cualquiera</LI> </UL><P> <CENTER> <TABLE BORDER=1 CELLSPACING=2 CELLPADDING=2> <TR><TH>Cabecera 1</TH><TH>Cabecera 2</TH></TR> <TR><TD>Celda (1,1)</TD><TD>Celda (1,2)</TD></TR> <TR><TD><B>Celda (2,1) en negrita</B></TD><TD>Celda (2,2)</TD></TR> </TABLE> </CENTER> </BODY> </HTML>

Estilos

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Estilos

Hochgeladen von

Copyright:

Verfügbare Formate

CSS ESTILOS

Aplicacin directa en etiquetas

ejemplo.css /* Manual de CSS de WebEstilo.com / / Definicin de estilos en un archivo aparte */

/* Estilo para el documento */ BODY {font-family:Verdana,sans-serif;font-size:x-small; margin-left:0.25in; margin-right:0.25in}

<LINK REL="stylesheet" TYPE="text/css" HREF="URL_Hoja.css">

COMENTARIOS CSS Y REGLAS BASICAS

Pero con el mnimo esfuerzo:

Estructura de las reglas

Otros ejemplos de estructuras de agrupacin que son equivalentes:

H1, H2, H4 {color: purple;}

Podemos redefirnirlo como:

Los espacios en blanco sern ignorados, as que el navegador se fiar de la correcta

Ejemplos de combinaciones de agrupacin de selectores y declaraciones:

Estilo en funcin del contexto

Das könnte Ihnen auch gefallen