CSS: Sintaxis

En las CSS, las reglas se las llama "Estamento" así que toda regla que se aplique en un CSS se le llamará estamento (que manera de complicarse... ).

Hay dos tipos de estamentos (reglas):

• Reglas:
  
  
  
  • Las reglas (estamentos), identifican un elemento de la página HTML y le dicen al navegador el estilo que tiene. Es decir, que busca el elemento que va a retocar en el documento HTML y a la hora de mostrarlo en nuestro navegador le pega el cambiazo ;-P y nos lo enseña tal y como él lo tiene definido.
    

Vamos a ver una parte de mi CSS.

---

BODY {

FONT-SIZE: 13px; BACKGROUND: url(http://direccion de la imagen.jpg) #000000 fixed repeat-x 50% bottom; MARGIN: 0px 0px 10px; COLOR: #000000; FONT-FAMILY: Trebuchet MS, Verdana, Arial, Sans-serif

}

---

Vamos por partes:
- BODY - = A esta parte del codigo se le llama "selector" porque selecciona que parte del codigo va ha estar retocado por CSS.

- } y { - = Entre estos dos signos se colocan las declaraciones, usease, propiedades para el selector (si tiene algún color, si lleva imagen...).

Cada declaración consta de dos partes:

• Propiedades -- (font, background,... Son palabras clave que van seguidas del valor que se les quiera dar.
  
  EJEMPLOS
  - FONT-SIZE: 13px
  - COLOR: #000000
  - BACKGROUND: url(http://direccion
  
• Valor -- Son los valores que se les da a las propiedades
  

Las declaraciones van separadas por - ; - unas de otras

EJEMPLO

MARGIN: 0px 0px 10px; COLOR: #000000; FONT-FAMILY: Trebuchet MS, Verdana, Arial, Sans-serif

El otro tipo de estamento es:

• Reglas-arroba
  
  
  
  • Estas empiezan con una arroba - @ - y seguido el nombre del selector ( en nuestro ejemplo es el BODY). Las reglas-arroba sirven para decirle al navegador algo más que el estilo que debe mostrar.
    

Veamos un ejemplo:

---

@media print {
BODY { font-size: 10pt }
}

---

Con esto, lo que decimos es como de grande nos imprimiria la fuente. Para tener una refenrencia, 12pt es el tamaño normal en Times New Roman ( que es la fuente predeterminada en el word)
Como podemos ver, no sólo dice que estilo coger a la hora de verlo en pantalla, sino que tambien se puede decidir como imprimirlo

Vamos ahora otro ejemplo:

---

@import "hoja2.css";

---

Oh! resulta que tenemos dos formas de escribir las reglas-arroba!
No ;-P según el tipo de regla-arroba se escribe de una manera u otra. En este caso sólo llama a otro CSS para trabajar conjuntamente con el primero y como no lleva propiedades de ningún tipo se señala al archivo y se termina con un punto y coma.
En el otro caso se hace referencia a una parte del CSS primero, y le decimos que sólo el BODY será cambiado cuando se imprima y cómo será imprimida la letra, es por eso que lleva dos llaves ( { } ). Una para indicar un "selector" y la segunda indica; del selector que hemos puesto, qué va a ser cambiado.

No se si esto lo he explicado con claridad....
Seguimos ahora con los comentarios dentro del codigo.
Estos comentarios sirven para anotar cosas (por ejemplo para indicar para que sirve una parte del codigo, para agradecer algo o para lo que se quiera poner.)
Se escribe de la siguiente manera:
/* Hola me llamo Diuska */
Esto se puede poner donde se quiera y no aparecerá en ningun sitio, sólo cuando abramos el CSS en modo edición.

---

EJEMPLO
BODY {

FONT-SIZE: 13px; BACKGROUND: url(http://direccion de la imagen.jpg)/* Direccion para la imagen de fondo */ #000000 fixed repeat-x 50% bottom; MARGIN: 0px 0px 10px; COLOR: #000000; FONT-FAMILY: Trebuchet MS, Verdana, Arial, Sans-serif

}

---

Y con todo esto ya hemos acabado de explicar lo básico para poder empezar :-)

NOTA: La CSS de la que hablo es la de mi primer blog, el de ya.com

Por: Diuska | CSS | Comentarios (1) | Referencias (0)