Вы находитесь на странице: 1из 36

14-7-2012

CHALOO

TUTORIAL DE CSS

CSS BASICO | Carlos

Ao de la Integracin Nacional y el Reconocimiento de Nuestra Diversidad

Trabajo de investigacin: TUTORIAL DE HOJAS DE ESTILO (CSS)

Autor: CHATA YAURI, CARLOS

La sintaxis de CSS
Comenzamos con la sintaxis bsica de CSS y como agregar un comentario.

Cmo se estructura CSS?


CSS funciona a base de reglas. Cada regla est compuesta por un selector y la declaracin. La declaracin a su vez est compuesta por una propiedad y su valor.

Veamos un ejemplo donde el selector p indica que todos los elementos p del documento HTML sern afectados por la declaracin cuya propiedad es color y su valor es blue (azul).

Si el valor tiene mltiples palabras, agrguelo entre comillas.

Si desea especificar ms de una propiedad, deber separarlas con un punto y coma (;).

Para definir los estilos de forma ms clara y fcil de leer, puede describir cada propiedad en diferentes lneas.

Si desea definir una misma propiedad para varios selectores, solo debe agruparlos separndolos con una coma (,).

El selector class
Con el selector class se pueden definir diferentes estilos para un mismo elemento HTML. Por ejemplo el elemento <p> puede ser de color azul o de color rojo.

Y as se vera en el documento HTML:

El selector ID

HTML introduce el atributo id, el cual tiene un valor nico en todo el documento. Hacemos referencia a l anteponiendo el smbolo "#".

Y en HTML se vera asi:

Comentarios en CSS
Para agregar un comentario que ayude a ser ms legible el documento utilizamos "/* comentario */".

TABLA DE ATRIBUTO DE CSS

Cmo se usan los estilos?


Donde debemos utilizar CSS y cmo funciona en cada lugar.

Dnde se ubican los estilos?


Cuando un navegador lee una hoja de estilos, este formatea el documento de acuerdo a la misma. Hay 3 formas de insertar una hoja de estilos:

1. Entre lneas
Definimos el estilo directamente dentro del cdigo HTML. Debemos usar esta forma cuando un nico estilo es aplicado a un solo elemento. Su uso est dado por el atributo style.

2. Hojas de estilo interna


Las hojas de estilo interna deben usarse cuando una pgina tiene un estilo nico. Las definimos con la etiqueta <style> en la cabecera del documento entre las etiquetas <head> y </head>

10

En este ejemplo se muestra que la etiqueta <style> con su atributo type define una hoja de estilo. Entre las etiquetas style definimos al selector body con un color de fondo azul y al selector p de color blanco.

3. Hojas de estilo externas


Esta es la forma ideal para cuando una misma hoja de estilos es aplicada a varias pginas. Con realizar los cambios en un solo archivo, podemos cambiar el aspecto de todo el sitio web. Las hojas de estilo deben llevar la terminacin .css. As se vera por ejemplo, un archivo CSS externo que llamaremos "fuentes.css":

Nota: el cdigo, en los archivos de hojas de estilos externos, comienzan directamente con el selector. Cada pgina del sitio debe vincularse con la hoja de estilos usando la etiqueta <link> ubicada en la cabecera del documento.

11

rel="stylesheet" nos indica que la relacin es una hoja de estilo. type="text/css" nos dice que el tipo es texto y css. href="fuentes.css" es el nombre del documento que contiene el cdigo css.

CSS Background Fondo


Decora el fondo de pantalla de tu sitio con colores o imgenes.

12

El fondo con CSS


Las propiedades de fondo (en ingls background) en CSS, nos permiten controlar el color de fondo de un elemento. Colocar una imagen de fondo, la ubicacin de la misma dentro del fondo (centrada, a la izquierda, en alguna coordenada de x,y, etc.) y la cantidad de veces que se va a repetir. Por ejemplo, si quisiramos un fondo de color rojo:

En caso que optemos por una imagen como fondo de nuestra pgina esta sera una solucin:

13

Qu pasa si la imagen es ms pequea que el tamao del fondo?


Si la imagen que elegimos de fondo es ms chica que este, esta se repetir tantas veces como sea necesario hasta cubrir todo el fondo. Por ejemplo para una imagen como esta este sera el resultado:

Propiedades del fondo

14

CSS Textos
Transforma, decora y alinea los textos de tu sitio para hacerlos ms claros para la lectura.

15

Los textos con CSS


Las propiedades de los textos nos permiten controlar la apariencia de los mismos. Podemos cambiar el color, alinearlo, decorarlo, controlar los espacios entre palabras y mucho ms.

Texto en color
En este ejemplo se define que el elemento "p" sea de color azul y que tenga una separacin entre palabras de 10 pxeles.

Sangra
La propiedad "text-indent" nos permite dejar sangra dentro del texto.

16

Enlace sin subrayar


La propiedad "text-decoration" nos permite, entre otras cosas, eliminar el subrayado en un enlace como podemos observar en este ejemplo.

Texto centrado
La propiedad "text-align" nos permite ubicar el texto a la derecha, izquierda o en el centro. En este ejemplo, vamos a utilizar tambin la propiedad "letter-spacing" que define el espacio que dejar entre letras.

17

Propiedades de los textos

18

Bordes CSS
Dale color, estilo y espesor a los bordes de las tablas.

Bordes con CSS


Los bordes nos sirven para decorar algunos elementos con lneas de diferentes espesores, colores y formas.

19

Un ejemplo de bordes, podra ser esta tabla a la cual le aplicamos diferentes propiedades para hacerla ms atractiva.

Tabla de las propiedades de los bordes

20

21

CSS Contornos
Agrgale un contorno a los textos para resaltarlos.

22

Contornos con CSS


Los contornos son lneas que se encuentran alrededor del elemento, por afuera del borde, con el fn de hacerlo resaltar. Podemos especificar el estilo, el ancho y el color de los contornos con la propiedad "outline".

Un ejemplo de estilos

Nota: los contornos no funcionan en el navegador Internet Explorer.

Un ejemplo de ancho y color

23

Nota: para que se visualice el ancho (outline-width) es necesario definir el estilo solido (outline-style: solid) de lo contrario no se visualizar.

Tabla de las propiedades de las lneas exteriores

CSS Mrgenes
Mantn distancia entre elementos utilizando mrgenes alrededor de los mismos.

Mrgenes con CSS


El margen es un espacio invisible alrededor del elemento, que le permite al mismo mantener distancia de otros elementos.

24

Modelo de cajas
Las propiedades de los mrgenes(margin en ingls) nos permiten definir el ancho de los mismos.

Tabla de las propiedades de los mrgenes

25

CSS Relleno
Deja un espacio entre el elemento y el borde del mismo.

Relleno con CSS


El relleno se comporta exactamente igual que los mrgenes con la excepcin que deja el espacio blanco entre el elemento y los bordes, o en caso que no posea bordes, con el margen.

26

Modelo de cajas
Las propiedades del relleno (padding en ingls) nos permiten definir el ancho de los mismos.

Tabla de las propiedades de padding (relleno)

27

CSS Listas
Define que aspecto le quieres dar a las listas de tu sitio: numerado, con letras, nmeros romanos, un pequeo grfico, etc.

28

Listas con CSS


Las propiedades de las listas nos permiten establecer el estilo de las mismas, la imagen, nmero o letra de los diferentes Items y la posicin de la misma.

Listas ordenadas

Listas desordenadas

29

Uso de una imagen

Tambin podemos incluir un pequeo smbolo de nuestra creacin en lugar de los smbolos estndar del lenguaje.

Tabla de las propiedades de las listas

30

Tablas CSS
Aprenda como definir el tamao de las tablas, espacio entre celdas, o la ubicacin del ttulo con CSS.

Tablas con CSS


Las propiedades de las tablas nos permiten definir los distintos elementos que componen una tabla: La ubicacin del ttulo con respecto a la tabla. Celdas de tamao fijo o ajustable. Espaciado entre celdas.

31

Ubicacin del ttulo

La propiedad "caption-side" nos permite ubicar el ttulo de la tabla por encima o por debajo de la misma.

Formato de las celdas


La propiedad "table-layout" define si las celdas, filas o columnas, van a tener el tamao fijo que estipulemos (fixed) o se adecuarn al contenido sin importar la medida que hayamos establecido (auto).

32

Espacio entre celdas


La propiedad "border-spacing" nos permite dejar espacio libre entre celdas.

33

Propiedades de las tablas

34

Ejemplos prcticos ilustrados:

35