La sintaxis de los estilos CSS es muy sencilla y en esta nota nos adentraremos en el tema
Las reglas sintácticas de los estilos CSS son sumamente sencillas.
No hay que incluir ninguna etiqueta especial al principio del documento de texto
(esto se especifica en la etiqueta <link rel=stylesheet… >,
etc). El cuerpo del documento consiste entonces en los nombres de los estilos
y sus reglas.
No hay que incluir ninguna etiqueta especial al principio del documento de texto
(esto se especifica en la etiqueta <link rel=stylesheet… >,
etc). El cuerpo del documento consiste entonces en los nombres de los estilos
y sus reglas.
La sintaxis es así (ver el ejemplo dado
más arriba):
más arriba):
SELECTOR { REGLA1: VALOR; REGLA2: VALOR;}Existe una diferencia para redefiniciones
de HTML y clases. Los nombres
de las clases deben ir precedidos de un punto (.),
y las redefiniciones no. Veamos un ejemplo concreto de redefinición de la etiqueta <body>que utilizaremos:
de HTML y clases. Los nombres
de las clases deben ir precedidos de un punto (.),
y las redefiniciones no. Veamos un ejemplo concreto de redefinición de la etiqueta <body>que utilizaremos:
body {
font-family: arial, helvetica, sans-serif; font-size: 12px; margin: 0px;
}Y ahora, el de una clase:
.comCuerpoCentr {
font-size: 11px; color: #000000; margin: 3px; text-align: center;
}Notar que body no va precedida de un punto,
mientras que comCuerpoCentr sí. El punto, entonces, es el identificador
de una clase.
mientras que comCuerpoCentr sí. El punto, entonces, es el identificador
de una clase.
Reglas sintácticas de los estilos CSS
en 11 puntos:
1) La sintaxis debe empezar con el nombre del estilo, precedida de un punto para
las clases, y sin él para las redefiniciones de etiquetas HTML
(para las que el nombre debe ser el de la etiqueta HTML elegida, por ejemplo, “body”). Se trate de redefiniciones o clases, este nombre
se llama formalmente “selector” (selector).
las clases, y sin él para las redefiniciones de etiquetas HTML
(para las que el nombre debe ser el de la etiqueta HTML elegida, por ejemplo, “body”). Se trate de redefiniciones o clases, este nombre
se llama formalmente “selector” (selector).
2) El selector debe ir seguido de un corchete de apertura “{“.
3) Las reglas de los estilos, y su sintaxis, son predeterminadas; no pueden “inventarse”.
Por ejemplo, para establecer el tamaño de una fuente, debe usarse la regla “font-size“,
y así para cada regla de presentación.
Por ejemplo, para establecer el tamaño de una fuente, debe usarse la regla “font-size“,
y así para cada regla de presentación.
4) La regla debe ir seguida de dos puntos “:“,
no de “=“, como en HTML.
no de “=“, como en HTML.
5) La sintaxis de los valores también son predeterminados, como en
HTML. Deben ir, preferentemente, precedidos de un espacio en
blanco, y seguidos de un punto y coma “;“.
HTML. Deben ir, preferentemente, precedidos de un espacio en
blanco, y seguidos de un punto y coma “;“.
6) El valor depende del tipo de regla que se utilice; para tamaños, consiste en
un número y en una unidad (por ejemplo, “12px”; para píxeles, o “5pt”, para
puntos); para colores, en una palabra determinada (por ej. “orange”) o en el
valor hexadecimal (se recomienda usar esta opción; por ejemplo, para color negro,
“#000000″); y en una serie de opciones para otro tipo de reglas, como alineación
de texto (center, right, etc), o tipo de fuente (arial, helvetica, sans-serif).
un número y en una unidad (por ejemplo, “12px”; para píxeles, o “5pt”, para
puntos); para colores, en una palabra determinada (por ej. “orange”) o en el
valor hexadecimal (se recomienda usar esta opción; por ejemplo, para color negro,
“#000000″); y en una serie de opciones para otro tipo de reglas, como alineación
de texto (center, right, etc), o tipo de fuente (arial, helvetica, sans-serif).
7) No hay límite ni orden de precedencia para el número y tipo de reglas que debe
contener cada estilo, pero éstas deben ir separadas por puntos y comas y un
espacio en blanco.
contener cada estilo, pero éstas deben ir separadas por puntos y comas y un
espacio en blanco.
Las reglas deben ir seguidas de un corchete de cierre “}“.9) Saltos de línea son opcionales para el corchete de apertura “{“,
y reglamentarios para el corchete de cierre “}“.
Es decir, se debe introducir un salto de línea para especificar el estilo siguiente.
y reglamentarios para el corchete de cierre “}“.
Es decir, se debe introducir un salto de línea para especificar el estilo siguiente.
10) Se recomienda, si bien no es reglamentario, utilizar minúsculas para todo el
texto, excepto para los nombres de clases, como en el ejemplo visto, “comCuerpoCentr”,
lo que puede ser útil para indicar cuál es el propósito del estilo. En este
caso, esta abreviatura significa “común”, es decir, común a todas las páginas
del sitio, “Cuerpo” significa que está pensado para el cuerpo de texto de los
documentos, y “Centr” que incluye un regla para centrar el texto.
texto, excepto para los nombres de clases, como en el ejemplo visto, “comCuerpoCentr”,
lo que puede ser útil para indicar cuál es el propósito del estilo. En este
caso, esta abreviatura significa “común”, es decir, común a todas las páginas
del sitio, “Cuerpo” significa que está pensado para el cuerpo de texto de los
documentos, y “Centr” que incluye un regla para centrar el texto.
11)
Se recomienda, si bien no es obligatorio para todos los casos, que todos los
elementos notados vayan delimitados por un espacio en blanco. Es decir, un espacio
entre el selector, corchete de apertura, nombre de regla, valor de regla, y
corchete de cierre.
Se recomienda, si bien no es obligatorio para todos los casos, que todos los
elementos notados vayan delimitados por un espacio en blanco. Es decir, un espacio
entre el selector, corchete de apertura, nombre de regla, valor de regla, y
corchete de cierre.
No hay comentarios:
Publicar un comentario