encuentraperu.com

Manuales Gratis

Aplicaciones de las Hojas de Estilo en cascada. En este capítulo veremos las más sencillas.

Vamos ahora a describir los diferentes usos de las CSS introducidos en el anterior capítulo. Vamos por orden, describiendo los puntos según su dificultad e importancia.

Hemos partido este capítulo en dos partes por su extensión y por haber varias formas distintas de aplicar estilos, aquí veremos las más sencillas y en el capítulo siguiente otras más complicadas pero más potentes.

Pequeñas partes de la página

Para definir estilos en secciones reducidas de una página se utiliza la etiqueta <SPAN>. Con su atributo style indicamos en sintaxis CSS las características de estilos. Lo vemos con un ejemplo, pondremos un párrafo en el que determinadas palabras las vamos a visualizar en color verde.

<p>
Esto es un párrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>. resulta muy fácil.
</p>

Que tiene como resultado:

Esto es un párrafo con varias palabras en color verde. resulta muy fácil.

Estilo definido para una etiqueta

De este modo podemos hacer que toda una etiqueta muestre un estilo determinado. Por ejemplo, podemos definir un párrafo entero en color rojo y otro en color azul. Para ello utilizamos el atributo style, que es admitido por todas las etiquetas del HTML (siempre y cuando dispongamos de un navegador compatible con CSS).

<p style="color:#990000">
Esto es un párrafo de color rojo.
</p>
<p style="color:#000099">
Esto es un párrafo de color azul.
</p>

Que tiene como resultado:

Esto es un párrafo de color rojo.

Esto es un párrafo de color azul.

Estilo definido en una parte de la página

Con la etiqueta <DIV> podemos definir secciones de una página y aplicarle estilos con el atributo style, es decir, podemos definir estilos de una vez a todo un bloque de la página.

<div style="color:#000099; font-weight:bold">
<h3>Estas etiquetas van en <i>azul y negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>

Que tiene como resultado:

Estas etiquetas van en azul y negrita

Seguimos dentro del DIV, luego permanecen los etilos
Hasta aquí este capítulo, en el siguiente seguiremos viendo formas más avanzadas de usar las CSS.

Hojas de estilo en cascada. Para poder utilizarlas de la manera más potente.

Estilo definido para toda una página

Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la página. Es una manera muy cómoda de darle forma al documento y muy potente, ya que estos estilos serán seguidos en toda la página y nos ahorraremos así muchas etiquetas HTML que apliquen forma al documento. Además, si deseamos cambiar los estilos de la página lo haremos de una sola vez.

Este ejemplo es más complicado, puesto que se utiliza la sintaxis CSS de manera más avanzada. Pero no te preocupes puesto que con los ejemplos irás aprendiendo su uso y más tarde comentaremos la sintaxis en profundidad.

En el ejemplo vemos que se utiliza la etiqueta <STYLE> colocada en la cabecera de la página para definir los distintos estilos del documento.

A grandes rasgos, entre de <STYLE> y </STYLE>, se coloca el nombre de la etiqueta que queremos definir los estilos y entre llaves -{}- colocamos en sintaxis CSS las características de estilos.

<html>
<head>
<title>Ejemplo de estilos para toda una página</title>
<STYLE type="text/css">

</STYLE>
</head>

<body>
<h1>Página con estilos</h1>
Bienvenidos...
<p>Siento ser tan hortera, pero esto es un ejemplo sin más importancia</p>
</body>
</html>

Como se puede apreciar en el código, hemos definido que la etiqueta <H1> se presentará

Subrayado
Centrada

También, por ejemplo, hemos definido que el cuerpo entero de la página (etiqueta <BODY>) se le apliquen los estilos siguientes:

Color del texto negro
Color del fondo grisaceo
Margen lateral de 1 centímetro

Caber destacar que si aplicamos estilos a la etiqueta <BODY>, estos serán heredados por el resto de las etiquetas del documento. Esto es así siempre y cuando no se vuelvan a definir esos estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta más concreta será el que mande. Puede verse este detalle en la etiqueta <P>, que tiene definidos estilos que ya fueron definidos para <BODY>. Los estilos que se tienen en cuenta son los de la etiqueta <P>, que es más concreta.

Por último, ha de apreciarse los comentarios HTML que engloban toda la declaración de estilos: . Estos comentarios se utilizan para que los navegadores antiguos, que no comprenden la sintaxis CSS, no incluyan ese texto en el cuerpo de la página. Si no se pusiera, los navegadores antiguos (por ejemplo Netscape 3) escribirían ese "feo código" en la página.

Pulsa para ver el ejemplo anterior.

Hemos preparado la misma página, pero con declaraciones de estilos distintas, para que comprobéis las diferencias en la forma del documento con sólo unos cambios en sus estilos. Puedes verla pinchando aquí.

Estilo definido para todo un sitio web

Una de las características más potentes de la programación con hojas de estilos consiste en que, de una vez, podemos definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan sólo colocamos las declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese archivo. De este modo, todas las páginas comparten una misma declaración de estilos y, por tanto, si la cambiamos, cambiarán todas las páginas. Con las ventajas añadidas de que se ahorra en líneas de código HTML (lo que reduce el peso del documento) y se evita la molestia de definir una y otra vez los estilos con el HTML, tal como se comentó anteriormente.

Veamos ahora cómo el proceso para incluir estilos con un fichero externo.

1- Creamos el fichero con la declaración de estilos
Es un fichero de texto normal, que puede tener cualquer extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es decir, sería erroneo incluir código HTML en el: etiquetas y demás. Podemos ver un ejemplo a continuación.

P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}

H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}

TD {
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : 666666;
}

BODY {
background-color : #006600;
font-family : arial;
color : White;
}

2- Enlazamos la página web con la hoja de estilos
Para ello, vamos a colocar la etiqueta <LINK> con los atributos

rel="STYLESHEET" indicando que el enlace es con una hoja de estilos
type="text/css" porque ela archivo es de texto, en sintaxis CSS
href="estilos.css" indica el nombre del fichero fuente de los estilos

Veamos una página web entera que enlaza con la declaración de estilos anterior:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Página que lee estilos</title>
</head>

<body>
<h1>Página que lee estilos</h1>
Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil.
<br>
<br>
<table width="300" cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Esto está dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td>
</tr>
<tr>
<td>La segunda fila del TD</td>
</tr>
</table>

</body>
</html>

El resultado conseguido se puede ver aquí

Reglas de importancia en los estilos

Los estilos se heredan de una etiqueta a otra, como se indicó anteriormente. Por ejemplo, si tenemos declarado en el <BODY> unos estilos, por lo general, estas declaraciones también afectatarán a etiquetas que estén dentro de esta etiqueta, o lo que es lo mismo, dentro de todo el cuerpo.

En muchas ocasiones más de una declaración de estilos afecta a la misma porción de la página. Siempre se tiene en cuenta la declaración más particular. Pero las declaraciones de estilos se pueden realizar de múltiples modos y con varias etiquetas, también entre estos modos hay una jerarquía de importancia para resolver conflictos entre varias declaracionesde estilos distintas para una misma porción de página. Se puede ver a continuación esta jerarquía, primero ponemos las formas de declaración más generales, y por tanto menos respetadas en caso de conflicto:

Declaración de estilos con fichero externo. (Para todo un sitio web)
Declaración de estilos para toda la página. (Con la etiqueta <STYLE> en la cabecera de la página)
Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en cuestión)
Declaración de estilo para una porción pequeña del documento. (Con la etiqueta <SPAN>)

Ya vimos cómo incluir estilos en la página, de todas las maneras posibles e hicimos un repaso con la lista anterior. Ahora estás en condiciones de empezar a usar las hojas de estilo en cascada para mejorar tus páginas y aumentar la productividad de tu trabajo. Pero estate atento a los siguientes capítulos donde aprenderás las lecciones que te faltan para dominar bien la materia: conocer la sintaxis, los distintos atributos de estilos y otras cosas que mejorarán tus páginas.

• Introducción a CSS

• Usos de CSS

• Caracteristicas de CSS

• Archivo Externo de CSS

• Explicación en Video de CSS

• Recursos de CSS

Enlaces:

Foro Sobre Php, Si te estas iniciando en el Lenguaje Php aqui puedes poner tus dudas

Por CLIFTON CABELLO

Manuales de PHP

	Historia de Php
	Libro de Php
	Clases en PHP
	Cookies en PHP
	Autenticación de Usuario
	Carrito de Compras en Php
	Emails en Php
	Encuestas en Php
	Funciones de Fecha en Php
	Tablas en Php
	Variables en Php
	Error 404 en Php
	Zend en Php
	Bucles For y Foreach en PHP
	Datos de un formulario
	Variables de Sistema en PHP
	Variables por post en PHP
	Gestión de Archivos en Php
	Lectura Secuencial
	Funciones de Archivos
	Funcion Fopen

Manuales de Ayax

	POST y GET con Ayax
	Subir Archivos con Ayax
	Ajax sin XMLHttpRequest
	Ajax con Mootools
	Ajax jQuery
	Ajax jQuery Mensaje Carga
	Ajax jQuery Video Tutorial

Manuales de CSS

	Introducción a CSS
	Usos de CSS
	Caracteristicas de CSS
	Archivo Externo de CSS
	Explicación en Video de CSS
	Recursos de CSS

Contáctenos • Ver Portal • Ver Foro • Consulados Peruanos • Comunidades Peruanas • La información mas Usada por Peruanos en el Exterior

Av. Petith Thouars 1251 Of. 302 Lima - Perú - Teléfonos: 2662540 / (062)510733 / 7959969
Celular: (Movistar)96929470, (Movistar)(62)9928634 Perú
EMAIL: MSN:

Peruanos en el exterior, Peruanos en EE.UU, Peruanos en Argentina, Peruanos en colombia, Peruanos en Ecuador, Peruanos en Mexico, Peruanos en Venezuela, peruanos en España,Peruanos en Brazil, Peruanos en Bolivia, Peruans en Dinamarca, Peruanos en Dinamarca, Peruanos en Bulgaria, Peruanos en Bélgica, Peruanos en Chile, Peruanos en China, Peruanos en corea, Peruanos en Francia, Peruanos en Grecia, Peruanos en Holanda, Peruanos en Inglaterra, Peruanos en Japon, Peruanos en Inglaterra, Peruanos en Egipto, Peruanos en Camerun, Peruanos en Austria, Peruanos Millonarios, Chicas lindas del perú en el extranjero, Doctores del Peru en el Extranjero, Peruanos Deportistas en el Extrabjero, Fisicoculturistas Peruanos en el Extranjero, Musicos peruanos en el Extranjero, modelos Peruanos en el Exterior, Poetas Peruanos en el Exterior, Chefs peruanos en el Exterior, Como hacer un proyecto en el Exterior, Organizaciones peruanas en el Exterior, Ultimas noticias del Perú, Lo que suce den el Mundo y en el Perú, Quejas de peruanos en el Extranjero, Club de Peruanos en el Extranjero, Embajadas del Perú en el Exterior, Estas en el Exterior Reunate con mas peruanos, Peruanos por todo el Mundo, Manuales, Manuales Practicos, Videos de Peruanos, Fotos de Chicas, fotos de peruanos, Conosca a Gente del perú.