martes, 20 de agosto de 2013

Lenguaje CSS

                                                   
                                                                               
                                                                       CSS



¿Para que sirve?
CSS es una especificación desarrollada por el W3C (World Wide Web Consortium) para permitir la separación de los contenidos de los documentos escritos en HTML, XML, XHTML, SVG, o XUL de la presentación del documento con las hojas de estilo, incluyendo elementos tales como los colores, fondos, márgenes, bordes, tipos de letra..., modificando as la apariencia de una página web de una forma más sencilla, permitiendo a los desarrolladores controlar el estilo y formato de sus documentos.

 ¿Cómo funciona?
El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla consiste en un selector y una declaración, esta última va entre corchetes y consiste en una propiedad o atributo, y un valor separados por dos puntos.

Es muy simple, primero se coloca el selector, luego se abre una llave "{" y se empiezan a colocar los atributos, seguidos de dos puntos ":" y luego el valor seguido de punto y coma ";", al final de todo se cierra el estilo para el selector con el cierre de llave "}". Se pueden definir tantos atributos con sus respectivos valores como se desee, separándolos con un espacio o un salto de línea. En CSS se deben escribir los atributos y valores con minúsculas y los comentarios se encierran con "/*" para abrir y "*/" para cerrar, como veremos en el siguiente ejemplo:

/*CSS sobre selector de etiquetas*/
body {
font-family: arial;
font-size: 12px;
color: black;
background-color: #cccccc;
}

Este tipo de selector no requiere de aplicación en el documento HTML, las etiquetas a las que se les defina un estilo de esta forma automáticamente heredarán los estilos.
/*CSS sobre selector de identificador*/
#header {
background-color: #ff0000;
color: #ffffff;
font-size: 26px;
}

En este caso, se lo aplicamos a la etiqueta con solo colocarle el identificador, como en este ejemplo:
<div id="header">Aqui el contenido</div>
/*CSS sobre selector de clase*/
.mi_clase {
margin: 5px;
height: 100px;
width: 200px;
}

En los selectores de clase, usamos el atributo "class" en las etiquetas HTML para darles el estilo. Ejemplo:
<div class="mi_clase">Aqui el contenido</div>

BIBLIOGRAFIA
http://es.wikipedia.org/wiki/HTML
http://www.masadelante.com/faqs/css
http://tutoriales-ro0driig0o.blogspot.com/
http://www.taringa.net/posts/hazlo-tu-mismo/10322320/Codigos-HTML-Basico-Crear-paginas-web-con-el-bloc-de-nota.html


No hay comentarios:

Publicar un comentario