Css

Introduccin
En la Internet existe muchos sitios web que a diario navegamos, pero acaso hemos mirado cmo funciona?, en esta presentacin mostraremos una parte de este tema, el estilo. El diseo web de un sitio se divide en 3 partes:

Contenido Diseo Comportamiento

Cdigo HTML y la informacin del sitio, como el esqueleto del diseo. Diseo grfico del sitio y la codificacin en CSS. Las animaciones con Javascript o las nuevas incluidas en CSS3

Qu es CSS?
En espaol Hojas de Estilo en Cascada (Entiendase en ingles como Cascade Style Sheets), fue un estndar sugerido por la W3C, en la cual se busca darle formato a los documentos HTML, de tal forma que est estrictamente separado del cdigo. Esto ocurri en el ao 1994 y 1994, se presentaron 2 ideas, las cuales eran: CHSS (Cascading HTML Style Sheets) SSP (Stream-based Style Sheet Proposal).

Las dos eran excelentes maneras de administrar los estilos, por lo cual decidieron unir fuerzas y crear un solo estndar que es el que actualmente conocemos como CSS.

y cmo inicio con CSS?

Hay 2 tipos de funcionamiento y ejecucin del cdigo, la primera es directamente en el documento html, y la segunda es en un archivo con nombre .css.

Dirctamente

Abrimos una etiqueta html llamada STYLE:

<style type="text/css">
Teniendo una propiedad llamada type, que contiene text/css, una instruccin que indica el tipo de cdigo que vamos a mostrar. y lgicamente cerramos el cdigo con

</style>
Archivo .css
Esta es la forma ms recomendada, las ventajas son: 1. Mantenimiento ms rpido 2. Mayor rapidez al cargar un documento html, por la funcin de Cach del navegador, la cual guarda el archivo .css y no necesita volver a descargarlo. 3. Portabilidad, lo que le da la posibilidad de aplicarla a cualquier documento. Creamos un documento .css por ejemplo prueba.css, lo guardamos en una carpeta llamada css (Este paso no es necesario, pero nos ayudar a tener ordenado nuestro proyecto) y luego vamos al documento html en el cual insertaremos el siguiente cdigo:

<link rel="stylesheet" href="prueba.css"/>

La propiedad rel, nos indica que es un archivo de tipo CSS, y en el caso de href contiene el nombre del archivo al cual le vamos a importar el cdigo.

Formato de CSS
Este lenguaje admite varias propiedades y trminos, entre ellos estn los elementos, las clases, elementos globales, herencia

Los elementos
Son etiquetas que son nicas, las cuales no repiten propiedades o caractersticas con otras. Por ejemplo el elemento Logo, Men Principal, Ttulo de la obra, etc... Estos elementos en CSS se delimitan con un # (Numeral Almohadilla que llaman), por ejemplo: #logo #menu #titulo_de_la_obra

Recordemos que no se usa espacios ni caracteres diferentes al estndar americano. por ejemplo #men estara mal escrito, lo correcto sera #menu sin tilde. Para indicarle al html que una etiqueta hace parte de un elemento en los estilos, lo que hacemos es darle la propiedad id, quedara algo as para el contenedor del men: <div id=menu> </div> El formato de los elementos en css es as: #elemento{ /*propiedades css...*/ }

Las clases
Esta es la parte donde manejamos elementos con caractersticas iguales o repetidas, por ejemplo si tenemos esto: <div id=listado_de_frutas> <ul> <li>Guanbana</li> <li>Pera</li> <li>Guayaba</li> <li>Manzana</li> <li>Uva</li> </ul> </div> Sera ilgico darle un id identificador a cada uno de las etiquetas li, para eso creamos una clase llamada estilo_de_li por decirlo as. El formato para las clases va con un punto inicial y no con un numeral como en los elementos, por ejemplo .estilo_de_li. Para llamar en el cdigo html una clase es algo relativamente sencillo, simplemente basta con usar la etiqueta class que significa en ingls clase. <div id=listado_de_frutas> <ul> <li class=estilo_de_li>Guanbana</li> <li class=estilo_de_li>Pera</li> <li class=estilo_de_li>Guayaba</li> <li class=estilo_de_li>Manzana</li> <li class=estilo_de_li>Uva</li> </ul> </div>

El cdigo css para este fin es: .estilo_de_li{ /*propiedades css...*/ }

Elementos globales
Claro, es muy bueno usas clases, nos ahorrara mucho cdigo. con una sola clase podemos darle estilo a varios elementos, pero hay formas ms eficientes de hacer cosas como esta. Los elementos globales son elementos que no son necesarios indicar con un # para que el css los interprete y les de estilo, por ejemplo si queremos darle estilo a todos los li de un documento html, sin indicarle cuales, sera algo as: elemento_global{ /*propiedades css...*/ } Que sera algo as: li{ /*propiedades css...*/ } y en el html, no tengo que ponerle propiedades adicionales. <div id=listado_de_frutas> <ul> <li>Guanbana</li> <li>Pera</li> <li>Guayaba</li> <li>Manzana</li> <li>Uva</li> </ul> </div>

Herencia
Los elementos globales funcionan cuando tenemos etiquetas en todo el html con el mismo estilo, tambin en css existe la Herencia, esto trata sobre que todas las etiquetas dentro de una etiqueta heredan las propiedades de la contenedora, pero no la contenedora de sus contenidas. Las propiedades que yo le de a listado_de_frutas, posiblemente las heredar ul, li, y dems etiquetas. Algunas propiedades como el borde, fondo, posicin, margen, etc no se heredan. las que s se heredan son las relacionadas con fuentes, por ejemplo el tamao, el tipo de letra, color de letra, etc...

Selectores
Css permite selectores bsicos, por ejemplo si queremos darle estilos a una primera lista relacionada con sopas, pero no a la de frutas, podemos aplicar selectores. en este caso sera: #listado_de_sopas ul li{ /*propiedades css...*/ } si notamos le damos un espacio entre cada etiqueta, esto nos dir que seleccione un div llamado listado_de_sopas, luego que seleccione los elementos ul que hay dentro de l y luego los elementos li, cuando llega al final de esta seleccin aplica los estilos respectivos. Otro selector es darle propiedades mltiples a un grupo de elementos, por ejemplo

#listado_de_sopas, #listado_de_frutas, #listado_de_ensaladas, #listado_de_jugos{ /*propiedades css...*/ } en este caso a todos los elementos nombrados ah, se les asignar las mismas propiedades, lo mismo ocurre con las clases: .clase_1, .clase_2, .clase_3, .clase_4{ /*propiedades css...*/ }

Propiedades
Veamos las propiedades que se aplican generalmente a texto.

font-size
Es la propiedad que maneja el tamao de un texto, para lo cual trabaja con varias medidas, una de ellas es PX (Pixel) y la ms usada. esta es una medida fija, hay otras como la EM que son relativas. La sintaxis es simple, nombramos la propiedad, dos puntos : el valor y continuo indicamos que trabajamos con pixels, para lo cual ponemos px. font-size: 40px;

font-family
O familia de fuente, es una propiedad en la cual asignamos un puado de fuentes en las cuales se supone que el sistema operativo desde donde visitamos la pgina web las tiene, en el caso

de que la primera fuente no se encuentre, pasa automaticamente a la segunda y de la segunda a la tercera, as hasta llegar al final de la lista. Existen unas fuentes que son estndar, las cuales se encuentran en la mayora de sistemas operativos ya sean mviles o de otro tipo. los principales grupos de fuentes accesibles en general son: Arial, Helvetica, sans-serif. Times New Roman, Times, serif. Courier New, Courier, monospace. Georgia, Times New Roman, Times, serif. Verdana, Arial, Helvetica, sans-serif. Geneva, Arial, Helvetica, sans-serif.

Rara vez estos grupos no te funcionarn, existen mtodos para usar letras que no estn instaladas y son accesibles, pero no los tocaremos ac. Si se quiere ahondar en el tema puede buscar en Google Google Fonts y encontrar informacin suficiente. El formato es: font-family: Arial, Helvetica, sans-serif;

Color
Es la propiedad que nos permite asignarle un determinado tinte a un texto, existe 2 formas conocidas para esto. La primera es colocarle los colores con la palabra por ejemplo red, green, black, blue, etc... La forma complementaria es ingresar su cdigo hexadecimal y con esto abre un abanico de mayores colores, por ejemplo el negro es #000000, el blanco es #FFFFFF. un tipo de gris es #B1B1B1 y otros ms. Tambin hay una opcin que es recortar el cdigo hexadecimal cuando este repite los caracteres, por ejemplo con el color negro #000000 se puede simplificar a #000, tambie el color blanco #FFFFFF a #FFF. El formato es: color: #B1B1B1;

text-align
Nos permite alinear el texto. Hacia la derecha, izquierda, centro o justificar. para lo cual usamos lo siguiente:

text-align:left; text-align:right; text-align:center; text-align:justify;

Alinear a la izquierda Alinear a la derecha Centrar Justificar

Ahora miramos las propiedades para el resto de las etiquetas:

margin
Es la margen de una etiqueta visible, se mide desde el borde de este hasta la medida que se de. por ejemplo:

margin: 1px;

padding
es la margen interna que toma el elemento, igual que el margin se indica su medida hacia dentro:

border
Borde del elemento, los parmetros son: Ancho Tipo de borde Color de borde

hay varios tipos de bordes, por ejemplo:

dotted dashed solid double

backgound

Linea conformada por puntos Linea conformada por pequeas lineas Linea continua Doble linea

Propiedad que nos sirve para especificar el fondo del elemento, por ejemplo una imagen o un color slido. Ejemplo para un color slido:

background: #6FA8DC; Ahora veamos un ejemplo para una imagen:

background:url(img/nyan_cat.png); Estas direcciones de imagen, puede ser absolutas o relativas. Adicionalmente, si queremos otros parmetros como repeticiones y color alternativo de la imagen se lo ponemos as:

no-repeat repeat-x repeat-y

No repetir Repetir en el eje X Repetir en el eje Y

y el fondo adicional a la imagen simplemente le indicamos el color hexadecimal, por ejemplo:

background:url(img/orange-the-annoying-orange.png) repeat-x #6FA8DC;