¿Recuerda HTML (lenguaje de marcado de hipertexto)? ¿El lenguaje de codificación que sirve como base para todo el desarrollo web? Bueno, si HTML es el primer idioma que querrá aprender cuando esté interesado en crear sitios web, su primo CSS es el segundo más cercano.
¿Qué es CSS? ¿Y cómo se relaciona con HMTL?
CSS significa hojas de estilo en cascada con énfasis en «Estilo». Mientras que HTML se usa para estructurar un documento web (definiendo cosas como titulares y párrafos, y permitiéndole incrustar imágenes, videos y otros medios), CSS llega y especifica el estilo de su documento; los diseños de página, los colores y las fuentes están todos determinados con CSS. Piense en HTML como la base (cada casa tiene una) y CSS como las opciones estéticas (hay una gran diferencia entre una mansión victoriana y una casa moderna de mediados de siglo).
¿Cómo funciona CSS?
CSS aporta estilo a sus páginas web al interactuar con elementos HTML. Los elementos son los componentes HTML individuales de una página web, por ejemplo, un párrafo, que en HTML podría tener este aspecto:
<p> ¡Este es mi párrafo! </p>Si quisiera que este párrafo parezca rosado y en negrita para las personas que ven su página web a través de un navegador web, usaría un código CSS que se ve así:
p {color: rosa; font-weight: negrita; }En este caso, «p» (el párrafo) se denomina «selector»; es la parte del código CSS que especifica qué elemento HTML afectará el estilo CSS. En CSS, el selector se escribe a la izquierda del primer corchete. La información entre corchetes se llama declaración y contiene propiedades y valores que se aplican al selector.
Las propiedades son cosas como el tamaño de fuente, el color y los márgenes, mientras que los valores son la configuración de esas propiedades. En el ejemplo anterior, «color» y «font-weight» son propiedades, y «pink» y «bold» son valores. El conjunto completo entre corchetes.
{ color rosa; font-weight: negrita; }es la declaración, y nuevamente, «p» (que significa el párrafo HTML) es el selector. Estos mismos principios básicos se pueden aplicar para cambiar el tamaño de las fuentes, los colores de fondo, las sangrías de los márgenes y más. Por ejemplo. . .
cuerpo {color de fondo: azul claro; }. . . Haría que el fondo de su página sea azul claro, o. . .
p {tamaño de fuente: 20px; color rojo; }. . .creará un párrafo de fuente de 20 puntos con letras rojas.
CSS externo, interno o en línea?
Sin embargo, es posible que se pregunte cómo se aplica realmente este código CSS al contenido HTML. Al igual que HTML, CSS está escrito en texto simple y sin formato a través de un editor de texto o procesador de texto en su computadora, y hay tres formas principales de agregar ese código CSS a sus páginas HTML. El código CSS (u hojas de estilo) puede ser externo, interno o integrado.
Las hojas de estilo externas se guardan como archivos .css y se pueden usar para determinar la apariencia de un sitio web completo a través de un archivo (en lugar de agregar instancias individuales de código CSS a cada elemento HTML que desee ajustar). Para utilizar una hoja de estilo externa, sus archivos .html deben incluir una sección de encabezado que se vincule a la hoja de estilo externa y tenga un aspecto similar a esto:
<head>
<link rel = ”stylesheet” type = ”text / css” href = mysitestyle.css ”>
</head>Esto vinculará el archivo .html a su hoja de estilo externa (en este caso, mysitestyle.css), y todas las instrucciones CSS en ese archivo se aplicarán a sus páginas .html vinculadas.
Las hojas de estilo internas son instrucciones CSS escritas directamente en el encabezado de una página .html específica. (Esto es especialmente útil si tiene una sola página en un sitio que tiene un aspecto único). Una hoja de estilo interna se parece a esto. . .
<cabeza>
<estilo>
Cuerpo {color de fondo: cardo; }
P {tamaño de fuente: 20px; color: azul medio; }
</style>
</head>. . . un color de fondo de cardo y párrafos con 20 puntos, fuente azul media ahora se aplicarán a esta única página .html.
Por último, los estilos en línea son fragmentos de CSS escritos directamente en código HTML y solo se aplican a una única instancia de codificación. Por ejemplo:
<h1 style = ”font-size: 40px; color: violet;”> ¡Mira este título! </h1>haría que un título específico en una sola página .html apareciera en violeta, fuente de 40 puntos.
En términos generales, las hojas de estilo externas son el método más eficiente para implementar CSS en un sitio web (es más fácil realizar un seguimiento e implementar el estilo de un sitio desde un archivo CSS dedicado), mientras que las hojas de estilo internas y el estilo en línea se pueden usar en un caso por base de caso cuando sea necesario realizar cambios de estilo individuales.
Entonces, si HTML es la base, los marcos, las paredes y las vigas que respaldan su sitio web, considere CSS como el color de la pintura, los estilos de ventanas y el paisaje que aparece después. No puede llegar a ninguna parte sin poner esa base primero, pero, una vez que lo haga, querrá seguir con algo de estilo, y CSS es el boleto para dar rienda suelta a su decorador interior.
Artículos Relacionados
¿Qué es HTML? Explicación de los conceptos básicos del lenguaje de marcado de hipertexto
¿Cómo hacer consultas SQL? Guía detallada
NIU UQi revisión, precios, especificaciones
¿Qué es la realidad aumentada? Desarrollo y casos de uso
Los mejores IaaS: proveedores de infraestructura como servicio
