CSS

CSS es una abreviatura del inglés Cascading Style Sheets. CSS es una tecnología básica para definir la visualización de varios elementos de las páginas web: texto, imágenes, encabezados, listas, tablas, etc. Esta tecnología es utilizada por los webmasters para definir colores, fuentes y la posición de bloques individuales, así como otros aspectos de la apariencia de las páginas de un sitio web.

Todas las preguntas sobre el uso y la configuración de CSS pueden enviarse a la página de discusión de este artículo.

Historia de CSS

A principios de la década de 1990, diferentes navegadores tenían sus propios estilos para mostrar las páginas web. El desarrollo de HTML era muy rápido y podía satisfacer todas las necesidades existentes de formato de información en ese momento, por lo que CSS no ganó un reconocimiento amplio en ese entonces.

No fue hasta 1994 que Håkon Wium Lie propuso utilizar el concepto de "hojas de estilo en cascada" para documentos HTML. En ese momento, los navegadores tenían una funcionalidad limitada. En 1990, HTML, creado por Tim Berners-Lee, estaba destinado a proporcionar una representación estructural en lugar de visual de los documentos. Uno de los fundadores de Netscape, Marc Andreessen, anunció el 13 de octubre de 1994 que la primera versión de Netscape Navigator estaba disponible para pruebas. Tres días antes de las pruebas, el programador noruego Håkon Wium Lie publicó una versión preliminar de CSS. Hoy en día tiene muy poco en común con los estándares modernos adoptados, pero fue entonces cuando se estableció el concepto general. No solo CSS, sino también varios otros lenguajes de programación de estilos podrían usarse para el diseño visual.

En noviembre de 1994, en la Conferencia Web en Chicago, como estaba planeado, se presentó el primer borrador de CSS. Los debates políticos y la resolución de algunos problemas técnicos continuaron durante dos años, pero el 17 de diciembre de 1996, el W3C recomendó oficialmente CSS1.

Desde entonces, se han lanzado las siguientes versiones de CSS con funcionalidad ampliada y capacidades mejoradas para el diseño de páginas web:

CSS1 - 1994: Funcionalidad limitada que incluía la configuración del tamaño de la fuente, cambiar su estilo: normal, cursiva o negrita, definir bordes, fondos, colores de texto y otros elementos de la página. También establecer el espaciado entre palabras, el espaciado entre líneas y el espaciado entre caracteres, la alineación del texto, tablas, imágenes. Hay propiedades para los márgenes internos y externos, bordes, ancho, altura de los bloques y la posición de los elementos.
CSS2 - 1998-2009: Se conservaron todas las funciones anteriores y se agregaron varias adicionales, a saber: posicionamiento fijo, absoluto y relativo de elementos, un mecanismo de selección ampliado y varias otras características al trabajar con elementos gráficos y de sonido.
CSS3 - El desarrollo actual de CSS, que permite animaciones, varios redondeos de bordes, tablas, así como configuraciones de sombras, múltiples fondos y otras capacidades.

Conceptos básicos de CSS

Todos los que comienzan a crear sitios web tienen un problema con su diseño y el diseño general de todas las páginas. Es necesario hacerlo correctamente, para que todas las páginas se vean similares entre sí en todos los navegadores web como Internet Explorer, FireFox, Chrom y otros. El diseño correcto proporciona una carga rápida de la página y su indexación rápida por parte de los motores de búsqueda como Google. Este manual y otros artículos dedicados a CSS le brindan una guía general sobre el tema, cómo se pueden hacer todos los elementos de la página y el diseño del sitio web utilizando CSS. Este manual es para aquellos que comienzan a aprender la creación de sitios web.

Cómo crear un archivo CSS y conectarlo a un sitio web

Hay tres formas de conectar CSS a un sitio web y hacer un diseño con su tecnología:

1) Use el siguiente código en HTML que debe colocarse entre las etiquetas head - <head>. El código CSS debe colocarse allí entre las etiquetas style - <style type="text/css"> y </style>. Este método tiene la desventaja de que todas las configuraciones de CSS no están conectadas a otras páginas de un sitio web, sino que solo funcionan en la página donde se coloca el código.

<head>
<style type="text/css"> 
#example {
  width: 100%
}
.class_example {
 border: 1px solid red;
 }
</style>
</head>

2) El segundo método requiere un archivo CSS especial donde se realizan todas las configuraciones de CSS. Por ejemplo, mystyles.css donde se debe colocar todo el código CSS. Este archivo se puede crear y editar utilizando programas simples como "Notepad" y otro software gratuito como Notepad++, Visual Studio Code, etc. Si desea crear un archivo CSS separado, debe indicarlo en el HTML de todas las páginas de su sitio web (se puede hacer en la plantilla del encabezado) el enlace a este archivo CSS de la siguiente manera:

<head>
<link rel="stylesheet" type="text/css" href="mystyles.css"/>
</head>

href="mystyles.css" - la dirección en el servidor del archivo CSS.
Este método es el mejor, ya que todas las configuraciones de CSS están conectadas con todas las páginas del sitio web. Este método también es conveniente en caso de edición de CSS, ya que solo necesita hacer todos los cambios en un archivo, y todos los cambios se aplicarán a todas las páginas a la vez.

3) Los parámetros de CSS se pueden indicar dentro del código HTML de la siguiente manera:

<div style="border: 1px solid blue; padding: 5px;">Texto u otro elemento HTML en la página.</div>

Después de style= puede establecer cualquier configuración de CSS.

Sintaxis de CSS

En primer lugar, es importante saber que el código CSS tiene tres elementos principales:

Selector: el nombre del elemento HTML o su nombre de ID. CSS permite crear un grupo de selectores y aplicar las mismas propiedades.
Propiedad: alguna configuración que se aplica al selector. (color, font, size, etc.)
Valor: el valor de la propiedad. Depende de qué propiedad se utilice.

A continuación, puede ver un ejemplo de cómo se puede hacer el código CSS:

Para aplicar valores de CSS a algún elemento HTML, debe hacer lo siguiente:

Asignar un nombre de ID a un elemento HTML en una página (a toda la página, una imagen, una tabla o un elemento div). La mejor manera de colocar un elemento HTML es crear un bloque llamado <div> y asignarle un nombre de ID para aplicar estilos CSS posteriormente:

<div id="id_name">Texto, imagen u otro elemento</div>

Los diseñadores web lo usan casi todos los días, pero no muchos saben realmente lo que significa la etiqueta div y dónde debe usarse. Este artículo tiene como objetivo desmitificar la etiqueta div, explicar cuándo y dónde debe usarse y compararla con la etiqueta span similar. div-etiqueta (o elemento), abreviatura de división. Un contenedor genérico para bloques de contenido, como imágenes y párrafos de texto. Puede ser identificado de manera única por un ID para vincularlo a una hoja de estilo CSS.

Consulte artículos especiales dedicados a CSS en WikiJournal que describen todo tipo de selectores, sus propiedades y valores.

Es posible establecer propiedades y valores para él entre llaves {} tan pronto como se establezca el nombre para algún elemento HTML en la página o su selector. Puede verse así:

div {
font-size: 12px;
font-family: Verdana;
}

#id_name {
background: blue;
border: 1px solid blue;
}

body {
background: gray;
border: 1px solid black;
}

img {border: 1px solid red;}

div - establece los parámetros y valores comunes para todos los elementos que están incluidos en el bloque div.
#id_name - establece el nombre para algún elemento HTML específico. Las propiedades y los valores se establecen entre llaves, como se muestra en el ejemplo anterior (en el ejemplo se establecen el fondo y el borde).
body - en este caso, establecemos propiedades CSS para toda la página, ya que todos los elementos HTML están dentro de la etiqueta <body></body>.
img - establece parámetros y valores para todas las imágenes en la página. También es posible establecer propiedades para una imagen específica asignándole una ID única. En este caso, el selector debería verse así: #id_name img, es decir, una imagen dentro de un elemento con su ID - #id_name.
table - establece parámetros y valores para todas las tablas en la página o en todo el sitio web.
td, th - establece parámetros y valores para todas las celdas de las tablas en la página o en el sitio web en general.

Ejemplo de un sitio web hecho con CSS

Pruebe el código en una página separada

Conclusión

Básicamente, la sintaxis de CSS no es complicada y puede usarse fácilmente para el diseño de páginas y el diseño general de un sitio web. Para obtener más información sobre cómo usar CSS para ciertos elementos en una página, siga los enlaces a continuación. Si tiene alguna pregunta sobre cómo usar CSS y establecer algunas propiedades o valores, no dude en publicar sus mensajes en la página de discusión.

Configuración de elementos CSS

Plantilla:Navegación/CSS