sintaxis CSS
Un conjunto de reglas CSS consta de un selector y un bloque de declaración:
Los puntos selector para el elemento HTML que desea estilo.
El bloque de declaración contiene una o más declaraciones separadas por punto y coma.
Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
Una declaración CSS siempre termina con un punto y coma, y los bloques de declaraciones están rodeados por llaves.
En el siguiente ejemplo todos <p> elementos serán alineados-centro, con un color rojo texto:
Los selectores CSS
Selectores CSS se utilizan para "find" (o seleccionar) elementos HTML en función de su nombre de elemento, de la identificación, clase, atributo, y mucho más.
El selector de elemento
El selector de elementos selecciona elementos basados en el nombre del elemento.
Puede seleccionar todos los <p> elementos en una página como esta (en este caso, todos los <p> elementos serán alineados-centro, con un color rojo texto):
El selector de ID
El selector de ID utiliza el atributo id de un elemento HTML para seleccionar un elemento específico.
La identificación de un elemento debe ser único dentro de una página, por lo que el selector de ID se utiliza para seleccionar un elemento único!
Para seleccionar un elemento con un ID específico, escribe un carácter almohadilla (#), seguido por el id del elemento.
La regla de estilo a continuación se aplica al elemento HTML con id="para1" :
 | Nota: Un nombre de ID no puede comenzar con un número! |
|---|
El selector de clase
El selector de clase selecciona los elementos con un atributo de clase específica.
Para seleccionar elementos con una clase específica, escribe un period (.) Carácter, seguido del nombre de la clase.
En el siguiente ejemplo, todos los elementos HTML con class="center" será de color rojo y alineado al centro:
También puede especificar que los elementos HTML específicos solamente deben verse afectadas por una clase.
En el siguiente ejemplo, solamente <p> elementos con class="center" estarán alineados-centro:
elementos HTML también puede referirse a más de una clase.
En el siguiente ejemplo, el <p> elemento se diseñó de acuerdo a class="center" y para class="large" :
| Nota: un nombre de clase no puede comenzar con un número! |
|---|
La agrupación de selectores
Si tiene elementos con las mismas definiciones de estilo, como este:
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Será mejor al grupo de los selectores, para reducir al mínimo el código.
Para selectores de grupo, separar cada selector con una coma.
En el siguiente ejemplo, hemos agrupado los selectores del código anterior:
CSS Comentarios
Los comentarios se utilizan para explicar el código, y pueden ayudar al editar el código fuente en una fecha posterior.
Los comentarios son ignorados por los navegadores.
Un comentario CSS comienza con /* and ends with */ . Los comentarios también pueden abarcar varias líneas:
Ejemplo
p
{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»