Este artículo presenta un tema interesante e importante conocido como Selectores y lo sigue con una demostración práctica de apoyo. En este artículo se cubrirán los siguientes consejos,
- Estilo de elementos HTML
- Selectores CSS
- Selector de ID de CSS
- Selector de clases CSS
- Selector universal de CSS
- Selectores de grupo CSS
Así que comencemos entonces
Estilo de elementos HTML
Comprendamos qué es CSS antes de llegar a los selectores de CSS. Si HTML debe considerarse como un esqueleto, entonces CSS (hojas de estilo en cascada) es como los músculos y la piel. El cerebro es JavaScript. Entonces, para una página web, los estilos CSS son esencialmente el diseño y el diseño. Desde el posicionamiento de las imágenes y el texto hasta el tamaño de fuente y el color de fondo, CSS controla cómo se ven los elementos HTML en un navegador.
Puede comprender mejor CSS, si tiene una buena comprensión de lo que son los selectores de CSS. Estos selectores le permiten seleccionar elementos HTML específicos para que pueda aplicarles el estilo correcto.
Entendamos cómo podemos seleccionar elementos HTML,
¿Cómo seleccionar elementos?
Digamos que desea que un determinado encabezado tenga un estilo diferente al resto del contenido de una página web. Ahora, con los selectores de CSS, puede apuntar a ese elemento HTML para darle un estilo diferente. Los selectores CSS ayudan a definir los elementos para los que se aplica un determinado conjunto de reglas CSS. Hay varios tipos de selectores CSS que le permiten elegir con precisión los elementos que desea diseñar. Puede darle a toda la página web un estilo general y luego trabajar a su manera para diseñar otros elementos de la página.
Los selectores son parte de una regla CSS y estos selectores vienen justo antes de la declaración de bloques CSS. Para una mejor comprensión, puede consultar la imagen a continuación.
Continuando con el artículo de Selectores CSS
Selectores CSS
Este selector le permite seleccionar un elemento HTML por su nombre.
Considere el siguiente código:
p {text-align: center color: magenta}Este estilo se aplicará en todos los párrafos.
Párrafo 1
estructura básica del programa java
Párrafo 2
Este código le dará el siguiente resultado:
Este estilo se aplicará en todos los párrafos.
Párrafo 1
Párrafo 2
En el código anterior, los elementos HTML se han alineado al centro y tienen el color 'magenta'.
Continuando con el artículo de Selectores CSS
Selector de ID de CSS
Al seleccionar el atributo id de un elemento HTML, puede seleccionar ese elemento específico. Dado que la identificación es única para una página, puede seleccionar el elemento correcto utilizando el atributo id.
Puede seleccionar el elemento HTML usando '#' seguido del id de ese elemento. Por ejemplo, '#firstname' selecciona el elemento donde el id es 'firstname'.
Considere el siguiente código:
# para1 {text-align: center color: orange}Hola Mundo
Este párrafo no se verá afectado.
El resultado del código anterior es:
Hola Mundo
Este párrafo no se verá afectado.
Como puede ver en el resultado anterior, al incluir id = ”para1 ″, pudimos cambiar el color de ese elemento a naranja. El otro elemento que no lo tiene permanece inalterado.
Continuando con el artículo de Selectores CSS
ir a c ++
Selector de clases CSS
Con el selector de clases, puede seleccionar elementos HTML que tienen un atributo de clase específico. Puede definir el selector mediante un punto (símbolo de punto) seguido del nombre de la clase. Por ejemplo, .intro selecciona los elementos donde la clase es 'intro'. Una cosa a tener en cuenta es que nunca puede comenzar el nombre de una clase con un número.
Considere el siguiente código:
.center {text-align: center color: pink}Este encabezado es de color rosa y está alineado al centro.
Este párrafo es de color rosa y está alineado al centro.
La salida del código anterior es:
Este encabezado es rosa y está alineado al centro.
Este párrafo es de color rosa y está alineado al centro.
Puede utilizar selectores de clases CSS para un elemento específico. Si solo desea aplicar estilo a un elemento específico, puede usar el nombre del elemento junto con el selector de clases.
Por ejemplo, considere el siguiente código:
p.center {text-align: center color: pink}Este encabezado no se ve afectado
Este párrafo es de color rosa y está alineado al centro.
La salida del código anterior es:
Este encabezado no se ve afectado
Este párrafo es de color rosa y está alineado al centro.
Como puede ver en la salida, el título h2 no se ve afectado por el estilo. Como hemos especificado “p.center”, el estilo solo afecta al párrafo.
Continuando con este artículo de CSS Selectores,
Selector universal de CSS
Este tipo de selector se puede considerar como un carácter comodín que selecciona todos los elementos de la página. Selecciona todos los elementos de la página y se especifica con “*”.
Por ejemplo, considere el siguiente código:
que hace trim en java
* {color: darkgreen font-size: 30px}Esta es una prueba (fuente más pequeña)
Este es un párrafo.
El resultado del código anterior es:
Hola Mundo
Esta es una prueba (fuente más pequeña)
Este es un párrafo.
Como puede ver en la salida, todos los elementos que se definen utilizando el selector de grupo tienen la misma definición de estilo: están alineados al centro y el color de la fuente es cian.
Esto nos lleva al final de este artículo.
Mira nuestro que viene con capacitación en vivo dirigida por un instructor y experiencia en proyectos de la vida real. Esta capacitación lo capacita en habilidades para trabajar con tecnologías web de back-end y front-end. Incluye capacitación en desarrollo web, jQuery, Angular, NodeJS, ExpressJS y MongoDB.
Tienes una pregunta para nosotros? Menciónelo en la sección de comentarios del artículo y nos comunicaremos con usted.