Cómo funciona CSS
CSS se puede usar para cambiar el diseño del diseño, por lo que solo necesita escribir un código para todos sus elementos. Al usar CSS, puede usar menos código para crear su página web. Puede aplicar una regla CSS a todas las etiquetas en una página. Al aprender CSS, puede hacer que su sitio web se vea genial.
Cómo funciona CSS
El proceso en cascada de CSS permite combinar múltiples hojas de estilo. Ayuda a evitar conflictos cuando diferentes estilos definen la misma propiedad, como el tamaño de la fuente. Cuando un elemento tiene más de una hoja de estilo, el navegador elegirá el más apropiado (el último) y resolverá el conflicto.
Componentes de un código CSS
Esta sección describe las instancias fundamentales de un código CSS.
Tomemos el ejemplo de un código CSS simple para un encabezado (H1):
H1 color: negro; Font-Weight: Bold;El código CSS anterior comprende las siguientes partes:
- H1 que se conoce como "selector"
- El texto escrito dentro de los aparatos ortopédicos se llama "declaración"; El código dentro de los aparatos ortopédicos rizados se aplica al selector que se define antes de los aparatos ortopédicos rizados.
- El color y pescado son las propiedades mientras que el negro y atrevido son los valores de las propiedades
Aparte de los componentes mencionados anteriormente, un punto y coma se inserta después de cada propiedad antes de comenzar la otra. En resumen, un código CSS simple tiene cuatro componentes: selector, declaración, propiedad y valor.
Cómo está incrustado el código CSS
Un código CSS se puede integrar de una de las siguientes maneras:
- Dentro de un elemento HTML: Las propiedades se definen en un elemento específico de HTML y la imagen que se muestra a continuación muestra la aplicación de CSS en línea.
- Como CSS interno: El código está escrito usando elemento y dentro del cabeza Etiqueta del archivo HTML. Para entender mejor el CSS interno, hemos adjuntado la imagen que muestra la fuente y el color están establecidos para los párrafos:
- Como archivo CSS externo: un código CSS se escribe dentro de un archivo separado y luego el archivo CSS está vinculado al archivo HTML:
Cómo funcionan CSS y HTML juntos
El fenómeno CSS y HTML se entrelazan entre sí. Se puede denominar un código HTML como la estructura del edificio, mientras que CSS es el proceso de embellecimiento de esa estructura. Una estructura cruda es inútil sin pintura y otras decoraciones. El HTML y CSS funcionan en colaboración en una página web:
Una página web sigue el proceso establecido a continuación para cargarse correctamente:
- El navegador carga una página HTML
- El navegador convierte ese html en el árbol DOM (modelo de objeto de datos)
- Mientras tanto, el navegador carga los estilos asociados con esa página HTML: para eso, el archivo CSS (vinculado a ese archivo HTML) se analiza para crear un árbol de modelo de objetos de datos (DOM).
- Después de la adición exitosa de las reglas de estilo, se lleva a cabo el último paso (pantalla)
La representación visual de la carga de una página web se muestra a continuación
El modelo de objeto de datos (DOM) es una estructura jerárquica (similar a un árbol) del código HTML. Cada elemento y sus propiedades asociadas se conocen como nodos DOM. Los selectores CSS (puede ser cualquier elemento HTML) se verifican con los nodos DOM y los nodos coincidentes adoptan las propiedades/valores que se definen en un archivo CSS.
Conclusión
El proceso CSS identifica los elementos de una página web. También determina cómo se aplican los estilos a estos elementos. Es esencial entender que CSS no es un idioma que se limite a un idioma o una sola hoja de estilo. Esta publicación descriptiva ilumina los fundamentos y el funcionamiento de CSS. Inicialmente, hemos proporcionado breves detalles sobre el concepto fundamental de CSS y luego describimos el funcionamiento colaborativo de HTML y CSS.
Computación feliz!