SQL_INFO: Hojas de estilo CSS

¿Qué es CSS?

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación

De los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de

Separar los contenidos y su presentación y es imprescindible para crear páginas web

Complejas.

Características y ventajas de las CSS

El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial,

La forma de presentación que le aplicaremos a:

Un web entero, de modo que se puede definir la forma de todo el web de una sola Vez.

Un documento HTML o página, se puede definir la forma, en un pequeño trozo de

Código en la cabecera, a toda la página.

Una porción del documento, aplicando estilos visibles en un trozo de la página.

Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes

Para una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra

Programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en

Azul, con márgenes, sin ellos...

Y ahora tenemos muchas más herramientas que

Nos permiten definir estas formas:

Podemos definir la distancia entre líneas del documento.

Se puede aplicar a las primeras líneas del párrafo.

Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores.

Y mucho más, como definir la visibilidad de los elementos, márgenes, subrayados,

Tachados.

También tenemos muchas más unidades como:

· Pixeles (px) y porcentaje (%), como antes.

· Pulgadas (in)

· Puntos (pt)

· Centímetros (cm)

Navegadores que lo soportan:

Esta tecnología es bastante nueva, por lo que no todos los navegadores la soportan. En

Concreto, sólo los navegadores de Netscape versiones de la 4 en adelante y de Microsoft a

Partir de la versión 3 son capaces de comprender los estilos en sintaxis CSS. Además

Cabe destacar que no todos los navegadores implementan las mismas funciones de hojas

De estilos, por ejemplo, Microsoft Internet Explorer 3 no soporta todo lo relativo a capas.

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>

Como pueden observar hay muchas formas

</p>

</div>

Que tiene como resultado:

Estas etiquetas van en azul y negrita

Como pueden observar hay muchas formas

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.

En este 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">

<!--

H1 {text-decoration: underline; text-align:center}

P {font-Family:arial,verdana; color: white; background-color: black}

BODY {color:black;background-color: #cccccc; text-indent:1cm}

// -->

</STYLE>

</head>

<body>

<h1>Página con estilos</h1>

Bienvenidos...

<p>Esto es solo 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á

o Subrayado

o 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 grisáceo

Margen lateral de 1 centímetro

Enlazamos para 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 el 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>

<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í (esto es solo un ejemplo)

Ejemplo de párrafo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Ejemplo de estilos con CSS</title>

h1 { color: red; font-family: Arial; font-size: large; }

p { color: grey; font-family: Verdana; font-size: medium; }

</style>

</head>

<body>

<h1>Titular de la página</h1>

<p>Un párrafo de texto no muy largo.</p>

</body>

</html>

En el ejemplo anterior, no importa el número de elementos <p> que existan en la página,

ya que todos tendrán el mismo aspecto definido mediante CSS. No obstante, esta forma

de trabajar con CSS no es ideal, ya que si el sitio web dispone de 10.000 páginas, habría

que definir un mismo estilo CSS 10.000 veces.

Ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Ejemplo de estilos CSS en el propio documento</title>

p { color: black; font-family: Verdana; }

</style>

</head>

<body>

<p>Un párrafo de texto.</p>

</body>

</html>

Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren

Incluir estilos específicos en un determinado documento HTML que completen los

Estilos que se incluyen por defecto en todos los documentos del sitio web.

El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos,

Es necesario modificar todas las páginas que incluyen el estilo que se va a modificar

Imágenes de fondo:

El siguiente ejemplo utiliza una imagen muy pequeña para establecer un fondo complejo

A toda una página:

Imagen original

Reglas CSS

body {

background-image:url(images/fondo.gif);

}

Resultado

FONDO - BACKGROUND
Background-color	Un color, con su nombre o su valor RGB	background-color: green; background-color: #000055;
Sirve para indicar el color de fondo de un elemento de la página
Background-image	El nombre de la imagen con su camino relativo o absoluto	background-image: url (mármol.gif) ; background-image: url(http:// www.x.com/fondo.gif)

Listas:

Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una

Viñeta formada por un pequeño círculo de color negro. Los elementos de las listas ordenadas

Se muestran por defecto con la numeración decimal utilizada en la mayoría de

Países.

No obstante, CSS define varias propiedades para controlar el tipo de viñeta que muestran

Las listas, además de poder controlar la posición de la propia viñeta. La propiedad

Básica es la que controla el tipo de viñeta que se muestra y que se denomina

list-style-type.

list-style-type	Tipo de viñeta
Valores	disc \| circle \| square \| decimal \| decimal-leading-zero \| lower-roman \| upper-roman \| lower-greek \| lower-latin \| upper-latin \| armenian \| georgian \| lower-alpha \| upper-alpha \| none \| inherit
Se aplica a	Elementos de una lista
Valor inicial	disc
Descripción	Permite establecer el tipo de viñeta mostrada para una lista

Se aplica a Elementos de una lista

Valor inicial disc

Descripción Permite establecer el tipo de viñeta mostrada para una lista

En primer lugar, el valor none permite mostrar una lista en la que sus elementos no contienen viñetas, números o letras. Se trata de un valor muy utilizado, ya que es imprescindible

para los menús de navegación creados con listas, como se verá más adelante.

El resto de valores de la propiedad list-style-type se dividen en tres tipos: gráficos,

numéricos y alfabéticos.

▪ Los valores gráficos son disc, circle y square y muestran como viñeta un círculo

relleno, un círculo vacío y un cuadrado relleno respectivamente.

▪ Los valores numéricos están formados por decimal, decimal-leading-zero, lowerroman,

upper-roman, armenian y georgian.

▪ Por último, los valores alfanuméricos se controlan mediante lower-latin, loweralpha,

upper-latin, upper-alpha y lower-greek.

La siguiente imagen muestra algunos de los valores definidos por la propiedad liststyle-

type:

El código CSS de algunas de las listas del ejemplo anterior se muestra a continuación:

<li>list-style-type: square</li>

<li>Elemento</li>

</ul>

<li>list-style-type: lower-roman</li>

<li>Elemento</li>

</ol>

<li>list-style-type: decimal-leading-zero</li>

<li>Elemento</li>

</ol>

Tablas:

Cuando se aplican bordes a las celdas de una tabla, el aspecto por defecto con el que se

muestra en un navegador es el siguiente:

El código HTML y CSS del ejemplo anterior se muestra a continuación:

.normal {

width: 250px;

border: 1px solid #000;

}

.normal th, .normal td {

border: 1px solid #000;

}

<tr>

</tr>

...

</table>

Normalmente, la separación entre los bordes de las diferentes celdas no es deseable, ya

que es preferible mostrar las celdas sin separación. CSS define la propiedad borderspacing

para controlar la separación entre las celdas de una tabla.

Cuadros de texto:

Por defecto, los campos de texto de los formularios no incluyen ningún espacio de relleno,

por lo que el texto introducido por el usuario aparece pegado a los bordes del cuadro

de texto.

Añadiendo un pequeño padding a cada elemento <input>, se mejora notablemente el aspecto

del formulario:

La regla CSS necesaria para mejorar el formulario es muy sencilla:

form.elegante input {

padding: .2em;

}

El código HTML del ejemplo anterior es el siguiente:

<form>

<legend>Alta en el servicio</legend>

<label for="nombre">Nombre</label>

<label for="apellidos">Apellidos</label>

<label for="contrasena">Contraseña</label>

</fieldset>

</form>

Texto:

La recomendación más importante cuando se trabaja con las propiedades tipográficas de CSS

está relacionada con el tamaño de la letra. La propiedad font-size permite utilizar cualquiera

de las nueve unidades de medida definidas por CSS para establecer el tamaño de la letra. Sin

embargo, la recomendación es utilizar únicamente las unidades relativas % y em.

PÁRRAFOS - TEXT
line-height	normal y unidades CSS	line-height: 12px; line-height: normal;
El alto de una línea, y por tanto, el espaciado entre líneas. Es una de esas Características que no se podían modificar utilizando HTML.
text-decoration	none \| [ underline \|\| overline \|\| linethrough ]	text-decoration: none; text-decoration: underline;
Para establecer la decoración de un texto, es decir, si está subrayado, Sobre rayado o tachado.
text-align	left \| right \| center \| justify	text-align: right; text-align: center;
Sirve para indicar la alineación del texto. Es interesante destacar que las hojas de estilo permiten el justificado de texto, aunque recuerda que no tiene por qué funcionar en todos los sistemas.
text-indent	Unidades CSS	text-indent: 10px; text-indent: 2in;
Un atributo que sirve para hacer sangrado o márgenes en las páginas. Muy útil y novedosa.
text-transform	capitalize \| uppercase \| lowercase \| none	text-transform: none; text-transform: capitalize;
Nos permite transformar el texto, haciendo que tenga la primera letra en Mayúsculas de todas las palabras, todo en mayúsculas o minúsculas.

SQL_INFO

viernes, 11 de mayo de 2012

Hojas de estilo CSS

No hay comentarios:

Publicar un comentario

Datos personales

Archivo del blog