Hemos producido un video para acompañar esta lección. Se recomienda que lea el texto de abajo también, sin embargo. El video está aquí:

Hoja de estilo en cascada Reglas

Una regla de la Hoja de Estilo en Cascada le dice al navegador cómo se ve el HTML, y lo que debería hacer. Una regla puede dictar cómo debe ser una sola etiqueta HTML, o puedes construir tu propia regla para aplicarla como y donde quieras.

Por ejemplo, se puede establecer una regla que indique al navegador que dé formato a cada de manera que su primera línea esté sangrada. O se puede construir su propio párrafo y aplicar el estilo a ciertos párrafos, no a todos.

Hay tres partes en una regla: El Selector, la Propiedad y el Valor.

El Selector

Hay tres tipos diferentes de Selector de CSS: Un selector de HTML, una clase y un selector de identificación.

Un selector de HTML es la parte de texto de un La etiqueta HTML. La etiqueta del párrafo completo es... Así que su selector es sólo P En otras palabras, quita los paréntesis angulares y obtienes el selector de HTML.

A Selector de clase es uno que tú mismo has establecido, para ser usado en cualquier parte de su página. La fuente 1 de nuestro ejemplo de ESTILO de arriba fue un selector de clase. Elegimos el nombre nosotros mismos y luego aplicamos el estilo a algún texto en la página.

Un Selector de ID es similar a un Selector de Clase, pero las usas para identificar un elemento en particular, un elemento de cuadro de texto en un formulario, por ejemplo.

Aquí hay un ejemplo de lo que los tres selectores se ven en una etiqueta STYLE.

Reglas de la hoja de estilo en cascada

El primero, H1 , es el selector de HTML. Fíjate que ha tenido su se han quitado los soportes de los ángulos. Con un selector HTML, todas las etiquetas HTML de la página será formateado en el estilo que has establecido. Así que para la H1 anterior, todo el texto entre las etiquetas de la página estarán ahora en rojo.

El segundo, .NewFont , es el selector de clase. Obsérvese que un selector de clase debe empezar con un punto (punto). Luego escribes el nombre para tu selector (cualquier cosa que quieras). No se añade ningún espacio entre el punto completo y el nombre de tu selector.

El tercero, #NewTextboxColour , es el selector de identificación. Un selector de ID comienza con el símbolo de hachís/libra (#). Luego escribes el nombre que quieres usar para su selector de identificación. De nuevo, no se añade ningún espacio entre el símbolo y el nombre de su selector.

Propiedad y valor

Una vez que haya configurado su Selector, entonces define las Propiedades y Valores para ese selector.

La propiedad para el selector es lo que estás tratando de cambiar. Ejemplos son: Fuente, color, fondo, margen, texto.

El valor del selector es el nuevo ajuste de la propiedad. Por ejemplo, para nuestra propiedad COLOR, podemos fijarlo en un valor de un color real (rojo, azul, amarillo), o un código de color (#FFFF00, #000000).

La propiedad y el valor están entre corchetes { }. La sintaxis de todo el asunto sería entonces:

Selector {Propiedad: Valor}

Un ejemplo es:

H1 {Color: Rojo}

H1 es el selector, el Color es la propiedad, y el Rojo es el valor de la propiedad. Nótense los dos puntos ( : ) después de la propiedad. Esto se usa para separar una propiedad de un Valor, para que el navegador sepa cuál es cuál.

Si quieres añadir más de una propiedad y valor, hay dos maneras de hacerlo todo en una línea, con cada par de propiedades y valores separados por un punto y coma ( ; ). O puedes poner cada par de propiedades y valores en múltiples líneas separadas por un punto y coma ( ; ). Así:

H1 {Color: Rojo; Peso de la fuente: Negrita; Tamaño de letra: 16pt;}

La versión de múltiples líneas es esta:

Reglas de la hoja de estilo en cascada

La versión de múltiples líneas es más fácil de leer.

Así que, para resumir:

  • Una regla CSS tiene tres partes, un Selector, una Propiedad y un Valor
  • El selector puede ser un selector de HTML, un selector de clase o un selector de ID
  • Separa la Propiedad y el Valor del Selector, incluyéndolos en paréntesis rizados, un paréntesis rizado izquierdo primero { y un paréntesis rizado derecho para cerrar la regla } (etiqueta__4)
  • Una propiedad está separada de un valor por dos puntos ( : )
  • Si estás usando más de un par de propiedades y valores para el mismo selector, separarlos con punto y coma ( ; ) (etiqueta__4)

En la próxima lección, verás dónde poner tus estilos.

...introducción al CSS, dónde poner los estilos...