 |
|
||||||
|
|||||||
|
|
|
||||||
|
|||||||
|
|
|
|
|
Tutorial elaborado por Jorge
Luna Rivero
PARTE IIAlgunas propiedades para definir estilos.1. Introducción al formato a nivel de bloque.1.1 Elementos de nivel bloque.2. Propiedades para elementos a nivel de bloque. 3.1 Tipo de fuente.4. Propiedades para el texto. 5.1 Unidades.6. Fin de este capítulo. 1. Introducción al formato a nivel de bloque.1.1 Elementos de nivel bloque.Un elemento a nivel bloque es aquel que provoca una ruptura de linea antes y después de su aplicación, por ejemplo los tags de encabezado (<H1>,<H2>,<H3>,<H4>,<H5> y <H6>), el tag <P>, e incluso el tag <BODY>.1.2 Elementos en linea.Un elemento en linea es aquel que conserva el texto que esta antes y después de el en la misma linea, por ejemplo el tag <EM>, <STRONG>, entre otros.1.3 Formato de los elementos a nivel bloque.En las hojas de estilo se considera a los elementos a nivel de bloque como si estuvieran encerrados en una caja, mediante esta metáfora es posible definir márgenes, bordes y la apariencia de los mismos, color de fondo, papel tapiz, alineación del texto, ancho del bloque, entre otras caracteristicas.2. Propiedades para elementos a nivel de bloque.2.1 Color de fondo.Es posible definir el color de fondo de un bloque, mediante el uso de la propiedad "background-color", el color de fondo se puede especificar de diversas formas, como una palabra clave, como un valor RGB hexadecimal, como un valor RGB decimal y como un valor rgb porcentual, por ejemplo:ESTILO{ background-color:#ff0000; }En los cuatro ejemplos anteriores la palabra "ESTILO" representa la definición de estilo (clase, particular o contextual), los cuatro ejemplos representan al color rojo. Cuando se indica el color de forma hexadecimal únicamente basta con escribir el valor del color en su representación hexadecimal (ejemplo 1). Cuando se indica el color como palabra clave se escribe una de las 16 palabras claves de la paleta estándar de Windows (ejemplo 2). Para indicar el color en forma rgb, solo basta con separar los valores de los colores rojo, verde y azul con comas, el valor de cada color puede varia de 0 a 255 (ejemplo 3). Para indicar el color en forma porcentual solo basta con separar los valores de los colores rojo, verde y azul con comas, indicandolos como pocentajes de 0% a 100%. Si tiene dudas sobre la paleta de Windows, colores RGB o como convertirlos a valores hexadecimales consulte la apéndice "colors.htm" incluida en este curso. 2.2 Color del texto del bloque.Para especificar el color del texto del bloque se usa la propiedad "color" con su valor fijado a una de las diversas formas de manejar color igual que cuando se usa la propiedad background-color. Por ejemplo:ESTILO{color:navy;} 2.3 Tapiz de fondo.Es posible especificar una imagen que se usara como fondo de un elemento a nivel bloque, para especificar un tapiz de fondo se usa el atributo "background-image" de la siguiente forma:ESTILO{ background-image:url(fondo.jpg);} Como en los ejemplos de esta sección la palabra "ESTILO" se refiere a la definición de estilo, una clase, un estilo particular o uno contextual. El atributo background-image, toma siempre el valor "url(nombre y ubicación de la imagen...)", dentro de los parentesis se debe escribir el nombre y ubicación de la imagen. 2.4 Márgenes.Es posible fijar los margenes de un bloque (en este caso el margen es la distancia de los lados del bloque a los bordes del documento) usando cualquiera de los cuatro atributos que a continuación se muestran.margin-top (margen superior). margin-bottom (margen inferior). margin-left (margen izquierdo). margin-right (margen derecho). Se pueden usar los cuatro atributos o solo uno, el valor de estos atributos puede ser de puntos, pixeles o porcentajes, por ejemplo: margin-top:20pt; (Indica el tamaño del margen superior en puntos). margin-left:34px; (Indica el tamaño del margen izquierdo en pixeles). margin-right:23%; (Indica el tamaño del margen derecho como valor porcentual). Es importante que para mejores resultados siempre se usen los sufijos "pt" para puntos, "px" para pixeles y el símbolo "%" para los porcentajes ya que si no se indica nada algunos navegadores como Communicator 4.0+ pueden tener problemas para presentar la página. También es posible fijar todos los margenes de una sola vez usando el atributo "margin", margin:superiorderecho inferiorizquierdo; Se especifica el tamaño de cada margen separandolos por un espacio en el orden que se indicó anteriormente: ejemplo: ESTILO {margin:20pt 30pt 20pt 40pt;} 2.5 Margenes internos.Para especificar el ancho de los margenes internos de un bloque, es decir la distancia del contenido de un bloque a los bordes del mismo, se usa el atributo "padding" de la siguiente forma:padding:superiorderechoinferiorizquierdo; Por ejemplo: padding:10pt20pt 10pt 20pt; También es posible lado por lado usando los siguientes atributos: "padding-top" (superior), "padding-bottom" (inferior), "padding-left" (izquierdo) y "padding-right" (derecho). Otra opción cuando todos los margenes son del mismo tamaño es usar el atributo padding de la siguiente forma: paddding:20pt; que automáticamente fija todos los margenes internos a 20 puntos, como en el caso de los margenes del documento es posible usar diversas formas para especificar el tamaño como es el uso de pixeles(px), puntos(pt) o porcentajes(%), en algunos casos es posible usar picas(pc), centímetros(cm), pulgadas(in) y milimetros(mm). Recuerde siempre especificar la unidad puesto que en algunos navegadores pueden no presentar adecuadamente el estilo si no se especifican las unidades. 2.6 Ancho del bloque.Es posible indicar el ancho de un bloque usando el atributo "width", también es posible especificar las unidades del ancho o usar un valor porcentual.Para fijar el ancho de un bloque se usa el atributo "width" de la siguiente forma: ESTILO { width:valor;} 2.7 Alineación de un bloque.Alineación de un bloque es posible alinear un bloque con respecto a su "elemento padre", es decir un bloque con respecto al documento en el que esta, o un bloque con respecto a otro bloque dentro del cual se encuentra.Para alinear el bloque se usa el atributo "float" con alguno de los siguientes valores: "left, right, o none". Esto es muy parecido a usar el atributo "align" dentro de algún elemento como <IMG> o <TABLE>, que indicaba el lado hacia el cual flotaría (saldría del flujo normal del texto) una imagen o tabla. ESTILO { float:valor;} Por ejemplo:
2.8 La propiedad clear.La propiedad "clear", puede tomar los siguientes valores "none", "left", "right" o "both", esta propiedad sirve pare evitar que haya elementos flotando a la derecha, izquierda, o ambos lados, o que se permita la flotación de elementos a cualquier lado. La siguiente tabla explica los cuatro valores posibles.
Es importante decir que no es necesario usar este atributo siempre. 2.9 Ancho de bordes.Es posible especificar el ancho de los bordes de un bloque usando el atributo "border-width", por ejemplo:ESTILO {border-width:12px;} En este caso se indica que el ancho del borde de un bloque es de doce pixeles. También es posible fijar el ancho de cada lado del borde usando uno o todos los siguientes atributos: "border-top-width" (ancho del borde superior). "border-bottom-width"(ancho del borde inferior). "border-left-width" (ancho del borde izquierdo). "border-right-width" (ancho del borde derecho). Los atributos anteriores se pueden usar por ejemplo de la siguiente manera: ESTILO {border-top-width:12px; border-bottom-width:10px; border-left-width:5px; border-right-width:4px;} 2.A Color del borde.Es posible especificar el color del borde de un elemento a nivel bloque usando el atributo "border-color" de la siguiente manera:ESTILO{border-color:color;} El valor del atributo "border-color" puede ser cualquier valor de color especificado usando diversas formas, tal como las que se usan en el atributo "background-color". 2.B Estilo del borde.Existe un atributo mas para los bordes de un bloque, el atributo "border-style", permite seleccionar uno de los ya varios estilos de bloque predefinidos, los cuales se pueden seleccionar usando uno de seis valores: "solid", "double", "inset", "outset", "groove" y "ridge", puede ver los diversos estilos de borde haciendo click en el vinculo ejemplo.2.C Ejemplo de uso de los atributos de bloque.Aquí se puede ver el código de un documento en el que se muestran todos los atributos mostrados anteriormente.
Para visualiza el ejemplo haga click en el vínculo ejemplo 1. Si vio el ejemplo habrá podido notar que no se obtienen los resultados deseados del todo, esto se debe a los errores que tiene cada navegador, este ejemplo 1 se aproxima a lo que se desea usando Netscape Communicator y Explorer 5.0, en todos los casos se definieron los estilos como indica la especificación CSS-1, sin embargo no se interpretan correctamente. De cualquier forma siempre es posible a base de ensayo y error obtener los resultados deseados, además incluiremos una apéndice con las trampas, trucos y bugs de cada browser. 3. Propiedades de las fuentes.Existen cuatro propiedades para manejar fuentes en las hojas de estilo, el uso de uno varias propiedades nos permite controlar todos los aspectos de las fuentes que se pueden manejar por ejemplo en un procesador de textos. La siguiente tabla explica estas propiedades.
A continuación se explica cada propiedad de la tabla. 3.1 Tipo de fuente.Se usa la propiedad "font-family" para especificar que fuente se usará en el estilo, es posible especificar varias fuentes a usar, en caso de que el usuario no tenga la fuente deseada, por ejemplo:ESTILO{font-style:Arial, courier, fantasy;} En el ejemplo anterior se especifica que el estilo usará fuente arial, si esta no esta disponible en el sistema del usuario se usar la fuente courier, si no esta disponible la fuente courier se usará la fantasy. Hay fuentes que son populares, por lo que no es necesario especificar fuentes alternas como en el ejemplo anterior. 3.2 Letra cursiva.Para especificar que se usará fuente cursiva se usa la propiedad "font-style", con su único valor "italic" de la siguiente forma:ESTILO {font-style:italic;} 3.3 Peso de la fuente.Para especificar el peso de la fuente, es decir que tan "negrita" será, se usa la propiedad "font-weight", con uno de los siguientes valores:"bold" (negrita). "bolder" (mas negrita). "lighter" (ligera). O usando un número de 100 a 900, donde 100 es equivalente a "lighter" y 900 a "bolder". Un ejemplo es: ESTILO {font-weight:bold;} Generalmente se usa este atributo con el valor "bold", puesto que casi nunca es necesario manejar un aspecto diferente del peso de la fuente. 3.4 Tamaño de la fuente.Para indicar el tamaño de la fuente se usa la propiedad "font-size", como en todas las propiedades de las hojas de estilo que manejan tamaño, es posible usar diversas unidades, por ejemplo:ESTILO {font-size:12pt;} fija el tamaño de la fuente a 12 puntos, nuevamente quiero decir que se debe especificar siempre la unidad que se usará, puesto que de no hacerlo puede no interpretarse correctamente el estilo. 3.5 Ejemplo de los diversos atributos de las fuentes.El siguiente documento muestra el uso de las fuentes.
Para visualizar el ejemplo haga click este ejemplo debe trabajar sin problemas en todas las versiones de Netscape Communicator a partir de la 4.01 y en Microsoft Internet Explorer a partir de la versión 4. 4. Propiedades para el texto.Además de la posibilidad de controlar las fuentes con un estilo también es posible controlar otros aspectos, esto se puede hacer a través de los atributos: "line-height", "text-decoration", "text-transform", "text-align" y "text-indent".4.1 Altura de un renglón "line-height".Mediante este atributo se puede especificar la altura de una linea de texto como su nombre lo indica o podríamos decir que define la distancia que hay entre las dos lineas base de dos renglones adyacentes. Este atributo puede tener tres valores, un valor porcentual, un número entero, un valor absoluto (en pixeles, puntos, etc.).ESTILO{line-height:1.5;} ESTILO{line-height:150%;} ESTILO{line-height:200px;} El primer ejemplo dice que la altura de la linea de texto actual será 1.2 veces el tamaño de la fuente del renglón actual, el segundo ejemplo dice que la altura de la linea sera 150% del tamaño de la fuente del renglón actual, el tercer ejemplo dice que la altura de la linea o renglón será de 200 pixeles, en este ultimo caso también era posible usar otras unidades de medición como puntos o picas. 4.2 Decoración del texto, la propiedad "text-decoration".Esta propiedad controla la decoración del texto, específicamente controla cuatro posibles formas de presentar el texto: normal, subrayado, con una linea encima, tachado (con una linea en medio del renglón), o parpadeante. Esto se logra a través de cuatro valores posibles: "none", "underline", "overline", "line-through" y "blink", el valor "overline" es posible que no funcione en Netscape Communicator y algunas versiones de IE ya que se este valor se definió en la especificación CSS-2 (que por el momento tiene mas apoyo de IE 5.0), el valor "blink" no funciona en ninguna versión de MSIE hasta la 5.0. Si no se usa esta propiedad el texto sera presentado normalmente.Ejemplo: ESTILO{text-decoration:none;} ESTILO{text-decoration:underline;} ESTILO{text-decoration:line-through;} ESTILO{text-decoration:overline;} ESTILO{text-decoration:blink;} 4.3 La propiedad "text-transform".Mediante esta propiedad se pueden lograr tres efectos, que la letra inicial de cada palabra sea mayúscula, que una o mas palabras se presenten forzosamente en mayúsculas o que se presenten en minúsculas. Ejemplo:ESTILO{text-transform:capitalize;} ESTILO{text-transform:uppercase;} ESTILO{text-transform:lowercase;} El primer ejemplo hace que en el párrafo donde se aplico el estilo la primera letra de cada palabra sea mayúscula, el segundo ejemplo hace que todas las palabras de un párrafo al que se haya aplicado el estilo se presenten en mayúsculas, el tercer ejemplo trabaja en forma contraria al segundo al hacer que las palabras se presenten en minúsculas. 4.4 Alineación del texto, la propiedad "text-align".Mediante esta propiedad se puede controlar la alineación del texto en un renglón o párrafo donde se haya aplicado un estilo, este atributo puede tener los cuatro valores posibles que son comunes en los procesadores de texto: izquierda, derecha, centrado o justificado, aunque en todas las versiones de Netscape Communicator hasta la 4.5 no es posible tener texto justificado.Los valores que puede tomar esta propiedad son: "left", "right", "center", "justify". Ejemplo: ESTILO{text-align:left;} ESTILO{text-align:right;} ESTILO{text-align:center;} ESTILO{text-align:justify;} Los cuatro ejemplos alinean texto en el orden en que se presentan, alineado a la izquierda, alineado a la derecha, centrado y justificado. 4.5 Sangría de la primera linea, la propiedad "text-indent".Mediante esta propiedad es posible definir el sangrado de la primera linea del texto de una parte de un documento donde se aplico un estilo.Esta propiedad solo admite valores de largos absolutos (puntos, pixeles, etc) y largos relativos (porcentajes). Por ejemplo: ESTILO{text-indent:100px;} ESTILO{text-indent:5%;} El primer ejemplo indica que la primera linea de un párrafo estará sangrada 100 px, o separada 100 pixeles del margen izquierdo del elemento que la contiene, el segundo ejemplo indica que estará separada del margen izquierdo del elemento que la contiene 5% del ancho de dicho elemento. 4.6 Ejemplo de las propiedades para estilos de texto.Un ejemplo de todas estas propiedades de texto es:
El documento anterior se puede ver haciendo click en el link ejemplo. Este ejemplo trabaja en todas las versiones de Communicator a partir de la 4.01 y todas las de MSIE a partir de la 4.00, con las excepciones que se mencionaron en cada caso. 5. Misceláneos.5.1 Unidades.En todas la propiedades de las hojas de estilo que controlan el tamaño de algo es posible usar dos tipos de unidades de medición: absolutas y relativas.La siguiente tabla muestra las unidades relativas:
La siguiente tabla muestra las unidades absolutas.
5.2 Herencia.Un elemento HTML que contiene otro elemento es considerado padre de tal elemento, de esta forma un elemento es considerado hijo del elemento que lo contiene. Por ejemplo:<BODY> <BLOCKQUOTE>Esta <STRONG>es una</STRONG>linea de texto,</BLOCKQUOTE> </BODY> En el anterior ejemplo los elementos <STRONG> y <BLOCKQUOTE> son hijos del elemento <BODY>, el elemento <STRONG> es hijo del elemento <BLOCKQUOTE>, el elemento <BODY> es padre de todos los elementos y el elemento <BLOCKQUOTE> es padre del elemento <STRONG>. Lo anterior es importante porque la mayoría de las veces el elemento hijo hereda las características del elemento padre, por ejemplo: <BLOCKQUOTE style="font-size:12pt; color:red">Esta <STRONG>es</STRONG> una linea.</BLOCKQUOTE> En el ejemplo anterior el tag <STRONG> proporcionara sus caracteristicas predeterminadas a la palabra "es", pero heredará de su elemento padre (el tag <BLOCKQUOTE>) un tamaño de fuente de doce puntos. La mayoría de las propiedades son heredables, por ejemplo si se desea que todo un documento use la fuente Arial, se puede hacer lo siguiente; <BODY style="font-family:Arial;"> De esta forma todos los elementos que sean hijos del tag <BODY> usarán fuente Arial. En general podemos decir que si un elemento hijo no especifica sus propio estilo hereda el estilo de su elemento padre. 5.3 Acerca de las recomendaciones CSS-1 y CSS-2.Por aquí debimos empezar los capítulos dedicados a las hojas de estilo.Las recomendaciones del W3C (world wide web consortium), son lineamientos este organismo publica con respecto a ciertas tecnologías que están en desarrollo relacionadas con la Internet. Las recomendaciones CSS-1 y CSS-2 son lineamientos acerca de un lenguaje cuyo único objetivo es definir estilos para otros lenguajes como el HTML, XML (extensible markup language), e incluso SGML (padre del HTML). Los fabricantes de los browsers de cuarta generación dicen apoyar la especificación CSS-1 y parte de la CSS-2 (en lo concerniente al pocisionamiento de texto). Los fabricantes de browsers prometen que la quinta generación de sus productos apoyará totalmente la recomendación CSS-2 que es la mas reciente, de hecho Microsoft Internet Explorer 5.0 hasta donde hemos visto cumple esta promesa. En los capítulos de este curso concernientes a las hojas de estilo tratamos la especificación CSS-1 y parte de la CSS-2. Usted puede consultar estas especificaciones en los siguientes links: De esta forma puede estudiar puntos que no tratamos por omisión voluntaria o por ignorancia. De cualquier forma este es solo un curso básico. 6. Fin de este capítulo.En el siguiente capítulo se tratará el pocisionamiento de bloques usando hojas de estilo, esta ultima característica de las hojas de estilo es la base de la implementación estándar del HTML dinámico, que no es un lenguaje nuevo sino una combinación de HTML 4.0, hojas de estilo CSS y Javascript, Jscript o ECMAscript (estos últimos tres lenguajes de alguna forma son lo mismo).Volver al sumario de este capitulo
|
Alojado en: Recomienda esta pagina a un amigo 
Servicios Gratuitos
Articulos relacionados 
Tienda Virtual - Carrito de compra
Messenger a través de BD en ASP
Miniaplicacion de comercio electronico
Objeto Datagrid de ASP.NET en ASP
Acotación de resultados
Enlaces recomendados |
|
|
||
|
Descargas
de manuales¦ Ejemplos
de código ¦ Artículos
mas visitados ¦ Envía
tu articulo ¦ Foros ¦ |
||
|
© 2001-Hasta hoy Pedro Rufo Martín contactar |
||
Demo
