dijo:Hola taringeros, bueno este post lo ago mas que nada para que me den puntos, ya que estoy hace 1 año, ago post geniales y nunca llego a ser NFU =/… Bueno vamos a empezar por algo dificil de manejar, por ló menos ami me costo tomarle la mano cuando empecé con este gran mundo de disensión Web… Hoy les enseñare a como se usa Css. Bueno empecemos…
CSS (Cascading Style Sheets) es un lenguaje de estilo pensado para dar al navegador detalles sobre el aspecto de un objeto, su principal objetivo es el de separar el documento (estructura y datos) en sí de el aspecto del mismo.
Usar CSS tiene muchas ventajas frente a el HTML de hace algunos años, pues además de permitir definir un estilo más depuradamente, nos permite definir un estilo concreto para un determinado grupo de elementos, podemos realizar estilos diferentes para la misma página (como skins), usar el mismo estilo en páginas distintas...
Se puede aplicar CSS directamente en un elemento utilizando el parámetro style como podemos ver en el siguiente ejemplo:
dijo:<input style="border: 1px solid black;" type="text">
También podemos agrupar los estilos entre las etiquetas style y asignar cada estilo a un elemento usando selectores, veamos un ejemplo de documento HTML con etiquetas style:
dijo:<html>
<head>
<title>Ejemplo</title>
<style>
input {
border: 1px solid black;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
Otra opción, es guardar todos los estilos del documento en un archivo aparte al que daremos la extensión css, y luego llamaremos a este archivo en todas nuestras páginas, veamos un ejemplo de archivo .css:
dijo:input {
border: 1px solid black;
}
Y finalmente veamos un método incluir el archivo con el CSS en nuestra página.
dijo:
<html>
<head>
<title>Este es un ejemplo</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<input type="text">
</body>
</html>
Y de esta manera, tenemos un documento con todos los estilos de nuestra Web, que podremos incluir en todas nuestras páginas para que tengan un mismo diseño.
Vamos a ver cómo debemos escribir para crear un CSS válido que los navegadores sean capaces de interpretar, para ello tendremos que tener en cuenta tres elementos:
dijo:X atributos - Son una palabra que identifica a que estilo nos referimos
X valores - Indican como queremos que sea ese atributo
X selectores - Indican sobre que elementos queremos trabajar
La sintaxi de CSS es muy simple, consiste en poner el nombre del atributo, seguido por dos puntos y el valor que se le asigna, ademas, si queremos escribir varios estilos los separaremos por punto y coma y/o opcionalmente un salto de línea:
dijo:color: #000000;
background: #FFFFFF
En el caso que estemos trabajando fuera de un objeto, es decir, que no estemos usando el parametro style="", tendremos que indicar sobre que elemento de la página queremos aplicar ese estilo, esto lo haremos con selectores.
Escribiremos el selector seguido de los atributos del objeto entre corchetes, veamos un ejemplo:
dijo:input {
color: #000000;
background: #FFFFFF
}
Este ejemplo en concreto, se aplicará para todos los elementos input del documento dándole el color #000000 (negro) y de fondo el #FFFFFF (blanco).
Los valores que aplicamos al atributo, dependerán del atributo en cuestión y se explicarán más adelante en este mismo curso.