Conjunto de reglas CSS
Sintaxis
SelectorEl valor de la propiedad;
Ejemplo 1
Para seguir este conjunto de reglas en nuestro código CSS, debemos escribir algún código en HTML y diseñar estos elementos HTML en un archivo CSS siguiendo la regla en nuestro código CSS. Debemos crear un archivo nuevo y luego, después de seleccionar HTML como idioma, comenzar a codificar en este archivo. También puede usar el bloc de notas o cualquier editor de texto para compilar estos códigos.
Ahora, vamos a declarar el encabezado 1 y 2 usando las etiquetas y crear un párrafo simple debajo de estos encabezados. Estamos creando estos encabezados y los párrafos en el cuerpo del HTML, y después de guardar esto, vamos a pasar al archivo CSS para aplicar propiedades a estos encabezados y párrafos siguiendo la regla. Debemos vincular el archivo CSS a este archivo para que todas las propiedades que usaremos en el archivo CSS se aplican aquí a este párrafo y encabezados.
Vamos a seguir la regla para diseñar estos encabezados y párrafos; Primero, usamos el nombre del selector y luego colocamos aparatos ortopédicos rizados de acuerdo con la regla. Después de esto, debemos dar el nombre de la propiedad que queremos usar. Aquí, "H1" está el selector, y dentro de los aparatos ortopédicos rizados, tenemos la propiedad "color", que se usa para cambiar el color de la fuente a ese color que colocamos aquí como un valor para esta propiedad. Vamos a usar el color "blanco" como el color de la fuente y luego cambiar la "familia de fuentes" estableciendo "Times New Roman" como el valor de esta "familia de fuentes."
Como hemos seleccionado el color "blanco" para la fuente, por lo que debemos cambiar el color del fondo. Entonces, para esto, utilizamos la propiedad "de color de fondo" y establecemos el "negro" como el valor de esta propiedad. Aquí, completamos el estilo de "H1", y cerramos los frenos rizados. Ahora, para aplicar el estilo en "H2", nuevamente usamos el selector, que es "H2", y luego damos la propiedad dentro de los aparatos ortopédicos rizados. Establecemos la propiedad "color de fuente" y la propiedad "Font-Family" que estamos usando aquí y damos "Arial" como su valor. Como aquí, estamos usando Fuente Negra, por lo que establecemos la propiedad de "color de fondo" en "Blanco" y cerramos los aparatos ortopédicos del "H2" aquí.
Luego viene el párrafo, por lo que vamos a usar la "P" como selector y luego declarar propiedades aquí para el párrafo. Estamos configurando el tamaño de la fuente del párrafo utilizando la propiedad "tamaño de fuente" y luego estableciendo el valor "15px" para esto. Luego, cambie la "familia de fuentes" de este párrafo a "Calibri", que establece la fuente simple del párrafo a la fuente "Calibri". También queremos cambiar el estilo de la fuente, por lo que, para esto, estamos utilizando la propiedad "estilo de fuente" y usar la "palabra clave" aquí, que es "italic."Nuestra fuente de párrafo aparecerá en" Cutics "" estilo fuente."Entonces, tenemos la propiedad" Font-Weight "y usamos la palabra clave" en negrita "para cambiar la fuente a un estilo audaz. El color de fuente del párrafo se establece utilizando la propiedad "color" para "rojo."
La salida dada muestra que todas las propiedades que hemos utilizado en el archivo CSS se aplican al texto que escribimos en el código HTML. El estilo de fuente, el color y el color de fondo, todas las propiedades que utilizamos todas las que se presentan aquí en la salida. Si no seguimos la regla, entonces estas propiedades de estilo no se aplican a nuestro texto o documento.
Ejemplo # 2
Aquí, en este código HTML, creamos un "div" al principio, dentro del cuerpo. Entonces, vamos a crear dos encabezados diferentes. Después de estos encabezados, también tenemos un párrafo en este código. Todos estos encabezados y párrafos están escritos dentro del "Div."Cerramos el" div "al final del código antes de cerrar la etiqueta" cuerpo ".
Ahora, aquí puedes ver cómo cambiamos el estilo de todos estos encabezados, div y párrafos. Nuevamente seguimos la regla para aplicar el estilo. Primero, estamos cambiando el "color" de la fuente y estableciendo su valor como "naranja."Y use otra propiedad para cambiar la familia de fuentes utilizando la propiedad" Font-Family "y estableciendo el nombre" Argelino "como su valor.
Luego, simplemente cambiamos el color del segundo encabezado usando la propiedad "color" y establecemos el color del segundo encabezado a "azul."También tenemos un párrafo, por lo que establecemos su" color de fondo "en" rosa."Luego, la propiedad de" color "cambia el color de fuente a" negro "y el valor" 15px "para configurar el" tamaño de fuente."También queremos renderizar todo esto en el centro de la página, por lo que para esto, usamos la propiedad" Align de texto "y establecemos la palabra clave" Centro ", que establece todos estos selectores en el" Centro "y, como usamos Para aplicar este "alineación de texto" en todos los selectores, por lo que usamos "cuerpo" y dentro de este "cuerpo" usamos esta propiedad.
En la salida, puede ver que todos los encabezados y párrafos están alineados en el centro, y todas las propiedades que definimos anteriormente se aplican aquí. En la salida, puede notar fácilmente la diferencia en el texto, ya que usamos diferentes propiedades para todos los selectores.
Ejemplo # 3
En nuestro tercer y último ejemplo, vamos a crear tres encabezados, un párrafo y también una lista que sea una lista desordenada, y haremos algo de estilo sobre todos estos.
Primero, vamos a aplicar el estilo a "H1". Ponemos el nombre del selector "H1" y usamos diferentes propiedades aquí. Establecemos su color de texto usando "Color: Verde" y luego usamos "Font-Family", que es una propiedad, y usamos "Argeliano" para esto. Luego viene el "color de fondo", que establecemos como "amarillo."Además, alinee este rumbo al" centro "con la ayuda de la propiedad" alineada de texto "y le dé un estilo" cursiva "a este" H1 ".
Ahora, vamos a cambiar el estilo de "H2" de la misma manera que "H1". El "color" se establece aquí como "naranja", y la "familia de fuentes" es "arial" para esto. El "color de fondo" para esto es "rosa", y está "centro" alineado. También tenemos un párrafo, así que ahora vamos a usar esta "P" como selector; La propiedad que estamos utilizando para esta es la propiedad "del tamaño de una fuente", y la establecemos como "15px", y la "familia de fuentes" es "Calibri", y el "peso de fuente" que usamos es "audaz."
Como tenemos una lista en este ejemplo, usamos este selector "UL" y aplicamos estilos. Establecemos su "color", que define el color del texto a "púrpura", y el "tamaño de fuente" de esta lista es "20px" y "cursiva" en "estilo de fuente."
En la salida, el color de fondo del primer encabezado es diferente del segundo encabezado, y la familia de fuentes cambia. Entonces la familia, el color y el estilo de fuentes para párrafos y listas también son diferentes. Utilizamos diferentes propiedades para todos los selectores, por lo que aquí está la salida, se aplican todas estas propiedades.
Conclusión
Hemos discutido el conjunto de reglas en CSS en este tutorial. Hemos escrito este tutorial para explicar cuál es el conjunto de reglas y cómo seguimos este conjunto de reglas en CSS para aplicar diferentes propiedades. Hemos explicado que primero debemos usar el nombre del selector y luego abrir un soporte rizado; Luego, después de abrir este soporte rizado, colocamos el nombre de la propiedad que queremos usar y luego establecemos su valor, o también usamos la palabra clave si está disponible para esta propiedad. Hemos discutido que debemos seguir esta regla en CSS. Después de aprender este concepto de este tutorial, utilizará la propiedad en su código CSS.