CSS

Que onda!!!! jeje, disculpen muchisimo la laaaaaarga ausencia, pero fue por mi proyecto escolar el EXAMinator, del cual les hablare despues....


En fin, esta entrada sera acerca del Cascade Style Sheet

y pues con que empezamos.... hmmm....

SINTAXIS

Como ya lo habia mencionado, es bastante sencillo
Primero llamamos al objeto, para esto puede haber millones de maneras, las más básicas son:

#objeto{}



.objeto{}



elemento{}

donde:
# se usa para llamar a objetos en particular.
Como lo son los objetos(DIV, P, SPAN, etc...)¹ a los que se les asignan una ID y que NO SE DEVE DE REPETIR ESE ID . para objetos en general.
Como lo son los objetos(DIV, P, SPAN, etc...) a los que se les asignan un CLASS del cual existen muchos elementos con la misma clase.
Y finalmente al elemento en si, que podria venir siendo un encabezado h1, un div o inclusive el body completo
dentro de las llaves { } se pondran los ATRIBUTOS que tendra ese objeto/elemento
por supuesto, existen muchas más pero esas las reservare para tutoriales mas avanzados.


ATRIBUTOS
Los atributos se colocan dentro de las llaves, de preferencia se IDENTA para que sea mas facil corregir o modificar el codigo.
Entre los atributos que se pueden asignar a un elemento/objeto estan: position, display, background, color, font-family, etc...
Explicare solo los basicos

position: sirve para situar los elementos en un lugar en especifico dentro de la pagina.
display: se usa para ocultar los elementos para que en algun momento se descubran, usados principalmente para menus desplegables, contenido oculto, etc...
background: el color de fondo o la imágen se desigan con este atributo, tiene muchisimas opciones como un borde estatico (el contenido de la pagina se mueve pero el fondo no), etc...
color: este atributo designa el color de las letras, los mas recomendable es ponerlo en el body

body{color: color}

donde color es el nombre o el codigo del color
si gustan revisar la lista completa de atributosW3C <- La empresa que "controla" el HTML y relacionados

EJEMPLO

#objeto{
position: absolute;
top: 100px;
left: 15pt;
}

.objeto{
background: url('imagen.jpg'), #ff0000;

}

elemento{
font-family: blood of dracula, arial, sans serif;
color: white;
}

Ok... ahora si es mucho que explicar XD pero para eso estoy XD
como veran se identa de manera que los atributos queden debajo de objeto y despues del { esto por simple comodidad pero igual lo puedes poner todo en una sola linea aunque no es algo muy recomendable
ahora veran la sintaxis:

#objeto{
atributo: valor(es);
}

Se tiene que respetar MUCHISIMO los puntos : y ; ya que : define el valor del atributo y ; define donde se acaban los atributos
Esto ultimo es algo complicado ya que un atributo puede tener muchos valores, como es el caso del borde

border: solid red 1px;

el borde tiene 3 valores aqui y quedaria algo asi como:

borde ROJO solido(linea continua) y de 1 pixel de ancho

Pero de la misma manera ese mismo cuadro podria quedar igual de otra manera

border-style: solid;
border-color: red;
border-width: 1px;

border-style: solid;
border-color: red;
border-width: 1px;

Como ven, queda completamente igual
y es mucho mas simple hacerlo en una sola lina.
es por eso que siempre tienen que "cerrar" los valores del atributo con ;


Ahora algo muy util, digamos que en su página tienen varios elementos que les quieren dar el mismo estilo, como podria ser el caso de los encabezados
para eso es indispensable el agrupamiento en donde definen diferentes elementos al mismo tiempo

h1, h2, h3{
color: red; font-family: arial; }

esto pondra todos los encabezados con el tipo de letra arial y de color rojo

---

Espero les sea util esta derramada de CSS y esperen con ansias las siguientes entradas n_n


XD