Sintaxis de CSS

En este tutorial, aprenderemos cómo definir reglas CSS en las hojas de estilo, a través de las propiedades CSS puede configurar el estilo de los elementos HTML. Diferentes elementos HTML pueden tener diferentes propiedades CSS que se pueden configurar. Las propiedades CSS pueden organizarse en reglas CSS. Las reglas CSS combinan un grupo de propiedades CSS y aplican todas las propiedades a los elementos HTML que coinciden con la regla CSS.

Conocer la sintaxis de CSS

La hoja de estilo CSS se compone de un conjunto de reglas, que son interpretadas por el navegador web y luego aplicadas a los elementos correspondientes del documento, como párrafos, títulos, etc.

Las reglas CSS tienen dos partes principales, un selector y una o más declaraciones:

El selector especifica qué elemento de la página HTML se aplica la regla CSS.

mientras que las declaraciones dentro del bloque determinan el formato del elemento en la página web. Cada declaración contiene una propiedad y un valor, estos valores y valores se separan por dos puntos (:) separadas por punto y coma (;) termina, y el grupo de declaraciones se encierra entre corchetes{}。

Esta propiedad es la propiedad de estilo que desea cambiar. Pueden ser fuente, color, fondo, etc. Cada propiedad tiene un valor, por ejemplo, el atributo color puede tener value azulo#0000FFetc。

h1　{color:blue;text-alineación:center;}

Para que el CSS sea más legible, puedes colocar una declaración en cada línea, como se muestra a continuación:

h1　{
　　　　color:　azul;
　　　　text-alineación:　centro;
　　　}

En el ejemplo anteriorh1es un selector,colorytext-alineaciónes una propiedad de CSS, mientras que la dadaazul（h1Color del texto dentro de la etiqueta como azul)ycentrado(h1Texto alineado al centro dentro de la etiqueta)son los valores correspondientes a estos atributos.

Escribe comentarios con CSS

Generalmente se agregan comentarios para que el código fuente sea más fácil de entender. Ayudan a otros desarrolladores (o a ti mismo en el futuro cuando edites el código fuente) a entender lo que estás tratando de hacer con CSS. Los comentarios son importantes para los programadores, pero son ignorados por los navegadores.

Los comentarios de CSS se inician con/*，para terminar*/，como se muestra en el siguiente ejemplo:

/*　Este es un comentario de CSS　*/
h1　{
　　　　color:　azul;
　　　　text-alineación:　centro;
}
/*　Este es un multi-comentario de CSS que se extiende a más de una línea　*/
p　{
　　　　fuente-tamaño:　18px;
　　　　text-transform:　uppercase;
}

También puedes comentar parte del código CSS para depurar, como se muestra a continuación:

h1　{
　　　　color:　azul;
　　　　text-alineación:　centro;}
/*p　{
　　　　fuente-tamaño:　18px;
　　　　text-transform:　uppercase;}
*/

Distinción de mayúsculas y minúsculas en CSS

Aunque los nombres de propiedades en CSS y muchos valores de propiedades no son sensibles a mayúsculas y minúsculas. Pero los selectores en CSS son sensibles a mayúsculas y minúsculas, por ejemplo:.maincontentCon.mainContentSon dos diferentes selectores de clase, sensibles a mayúsculas y minúsculas.

Por lo tanto, por seguridad, debes asumir que todos los componentes de las reglas CSS son sensibles a mayúsculas y minúsculas.

EnCapítulo siguienteEn, aprenderás varios tipos de selectores en CSS.