(Cascading Style Sheets) CSS fue una tecnología recomendada por el Consorcio World Wide Web (W3C) en 1996. Una manera fácil de entender el propósito de CSS es verlo como una adición a HTML que ayuda a simplificar y mejorar el diseño de páginas web. De hecho, algunos efectos CSS no son posibles a través de HTML solo.

Otra ventaja de CSS es que le permite especificar un estilo de una vez, pero el navegador puede aplicar ese estilo muchas veces en un documento. Por ejemplo, si usted quiere algunas de las imágenes que aparecen en su sitio web para tener un marco azul fina alrededor de ellos, se puede definir este marco como un estilo en el CSS. Entonces, en vez de tener que repetir una definición HTML del cuerpo delgado y azul - cada uno y cada vez que quiera ese particular marco - que simplemente puede insertar el estilo CSS como un atributo para cada elemento gráfico que desea enmarcado.

Dicho de otra manera, se utiliza CSS para definir reglas generales sobre cómo los elementos en sus páginas web se comportan y cómo se ven - dónde se encuentren, su tamaño, su opacidad, y así sucesivamente. A continuación, puede simplemente hacer referencia al nombre de la regla cada vez que desee hacer cumplir dentro de su página HTML.

He aquí una regla CSS que define un par de cualidades que decida aplicar a sus titulares más grandes, H1:

Con esta regla CSS, en efecto, cualquier código HTML que contiene un elemento H1 se hace de forma automática en el tipo de 16 puntos y de color azul:

este titular es azul y 16 pt.

Reglas CSS se pueden definir en un archivo .css separado o integrados dentro del archivo HTML. Aquí está la regla de estilo titular CSS incrustado en el encabezado de un archivo HTML:

este titular es azul y 16 pt.

Note la elemento. Puede definir sus estilos CSS dentro de este elemento. (Usted también puede tener múltiples elementos de una página si lo desea.)

body {font-size: 24px;}

p {border: 12px;}

p {border: 12px sólido;}

BODY {color: marrón-}

BODY {color: marrón-background-color: amarillo-}

Este es un efecto de desenfoque en el tiempo.

Trate de variar la velocidad del filtro mediante el ajuste del valor 130 en esta línea:

 timerhandle = setInterval ("SizeIt",130)

Encuentra A List Apart

Una fuente de excelentes ideas, ejemplos y artículos - presentado por algunos de los diseñadores de páginas web con más talento de todo - es A List Apart, que cuenta con un foro dedicado a la CSS.

Usando sus propias balas en las listas

Con CSS, diseño de viñetas personalizadas en un programa de gráficos y luego asignarlos a la lista de artículos es fácil. El siguiente código produce el resultado se muestra en la figura que sigue inmediatamente.

primero
segundo
tercera

Especificar ubicaciones gráficos

Si guarda un archivo de gráficos en la misma carpeta que el archivo .htm o .html, el código HTML sólo necesita el nombre del archivo de gráficos, así:

list-style-image: url ("mybullet.jpg")

Sin embargo, si el archivo se encuentra en otra ubicación, debe proporcionar la ruta de acceso a ese lugar, y hace algo de puntuar extraño, así - la adición de un ///, por alguna razón. Este siguiente ejemplo busca este archivo en el directorio raíz de la unidad C:

list-style-image: url ("file: /// C: mause.jpg")

Aquí hay un archivo ubicado en el fotos subdirectorio del f: drive:

list-style-image: url ("file: /// C: Fotos mause.jpg")

Aquí está la puntuacion bizarro adicional (/// ) debe agregar una ubicación de red local:

list-style-image: url ("file: /// Hp servr FOTOS mause.jpg")

Si mantiene sus archivos gráficos en un sitio de Internet, proporcione la dirección URL.

Por último, si el archivo gráfico se almacena en el transbordador espacial, utilice este puntuacion:

"file: /// / ^^^ espacio exterior servr FOTOS mause.jpg"

La misma puntuacion y convenciones se utilizan cuando se especifica el src = atribuir a cargar un gráfico en un archivo HTML elemento.

Es posible que no vea algunos de sus gráficos al mover sus páginas web desde el ordenador local a un servidor para publicarlos en Internet. Si eso ocurre, rutas de archivos de verificación para asegurarse de que los archivos de gráficos se encuentran en el código dice que son. La táctica más simple es seguir todos los archivos de dependencia (como archivos gráficos) en el mismo directorio que el .htm y archivos .css. De esa manera, puede utilizar pariente caminos, lo que significa que no se especifica ninguna ruta para nada en el código, sólo el nombre de archivo. El navegador entiende que debe ser para sus gráficos en el mismo camino que encontró el archivo HTML.

Combinando clases

Usted puede ahorrar un poco de tiempo y problemas mediante la definición de las clases que luego se combinan, al igual que los adjetivos se combinan con sustantivos. Digamos que usted quiere algunos de sus párrafos enmarcado en verde, algunos en azul, y otros en rosa. Se puede crear una clase separada para cada tipo de párrafo, o usted podría ser inteligente y crear una clase general estilo de borde, y tres clases adicionales para la coloración. Así es como funciona. En primer lugar, se crean cuatro estilos, y luego combinar los nombres de clase en los elementos HTML cuando se utiliza el class = atributo:

class = "enmarcada verde"> Usted puede ahorrar un poco de tiempo y problemas mediante la definición de las clases que luego se combinan, al igual que los adjetivos se combinan con sustantivos.
class = "blue enmarcada"> Usted puede ahorrar un poco de tiempo y problemas mediante la definición de las clases que luego se combinan, al igual que los adjetivos se combinan con sustantivos.
class = "enmarcado rosa"> Usted puede ahorrar un poco de tiempo y problemas mediante la definición de las clases que luego se combinan, al igual que los adjetivos se combinan con sustantivos.

La siguiente figura muestra las partes de un CSS regla. Esta regla dice, "Pantalla en rojo el texto de todo el párrafo

en el documento con un atributo de nombre de clase alerta."

Usted puede hacer cualquier nombre para el nombre de la clase (el escritor del código anterior eligió alerta), Pero el nombre de la regla CSS debe coincidir con el nombre utilizado más adelante en el atributo HTML.

Las siguientes tablas muestran las propiedades y valores de estilo CSS comunes.

Unidades de medida

px	píxeles
em	M-ancho
pt	punto
en	pulgadas
mm	milímetro
cm	centímetro
pc	picas
ex	x altura

Las propiedades de fuente

fuente

Familia tipográfica

tamaño de fuente

Estilo de fuente

variante de la fuente

peso de la fuente

Las propiedades del texto

espaciado entre letras

word-spacing

altura de la línea

vertical-align

text-align

text-decoration

guion de texto

text-transform

Las propiedades de borde

border-top color

border-right; de color

de color; border-left

border-bottom color

al estilo borde superior

border-right; estilo

border-left; estilo

al estilo fondo frontera

Las propiedades de posicionamiento

posición

cima

fondo

derecho

visualización

claro

z-index