El documento introduce los conceptos básicos de CSS, incluyendo su sintaxis, propiedades comunes y el modelo de cajas. Explica que CSS se usa para dar estilo a los elementos HTML controlando propiedades como el color, fuente y espaciado. Además, describe la estructura de una declaración CSS, unidades comunes y cómo el modelo de cajas representa cada elemento como una caja que contiene el contenido, relleno, borde y margen.
0 calificaciones0% encontró este documento útil (0 votos)
15 vistas14 páginas
El documento introduce los conceptos básicos de CSS, incluyendo su sintaxis, propiedades comunes y el modelo de cajas. Explica que CSS se usa para dar estilo a los elementos HTML controlando propiedades como el color, fuente y espaciado. Además, describe la estructura de una declaración CSS, unidades comunes y cómo el modelo de cajas representa cada elemento como una caja que contiene el contenido, relleno, borde y margen.
El documento introduce los conceptos básicos de CSS, incluyendo su sintaxis, propiedades comunes y el modelo de cajas. Explica que CSS se usa para dar estilo a los elementos HTML controlando propiedades como el color, fuente y espaciado. Además, describe la estructura de una declaración CSS, unidades comunes y cómo el modelo de cajas representa cada elemento como una caja que contiene el contenido, relleno, borde y margen.
El documento introduce los conceptos básicos de CSS, incluyendo su sintaxis, propiedades comunes y el modelo de cajas. Explica que CSS se usa para dar estilo a los elementos HTML controlando propiedades como el color, fuente y espaciado. Además, describe la estructura de una declaración CSS, unidades comunes y cómo el modelo de cajas representa cada elemento como una caja que contiene el contenido, relleno, borde y margen.
Descargue como PDF, TXT o lea en línea desde Scribd
Descargar como pdf o txt
Está en la página 1/ 14
Introducción a CSS
¡Hola! 👋 Hoy aprenderemos sobre CSS, que significa "Cascading Style Sheets" ("Hojas de estilo en cascada").
CSS es un lenguaje que se utiliza para dar estilo a los HTML con elementos como colores, fuentes y espaciado para generar páginas web visualmente atractivas. Separar el estilo de la estructura de una página web hace que sea más fácil mantener y actualizar el contenido.
A continuación, cubriremos los conceptos básicos de CSS incluyendo los tipos,
selectores y propiedades, y luego aplicaremos CSS a la página HTML.
¡Comencemos! 🚀 Sintaxis de CSS
La sintaxis de CSS es fundamental para darle el estilo deseado a una página web porque permite definir las propiedades que determinarán la apariencia visual de los elementos del documento HTML.
Veamos un ejemplo de cómo se estructura la sintaxis:
A tener en cuenta sobre las declaraciones CSS:
● Tienen un formato específico de "propiedad: valor;"
Si queremos, por ejemplo, aplicar el estilo de color rojo y un tamaño de fuente
de 18px a un título que se encuentra dentro de una etiqueta h1 en HTML, lo declararíamos en CSS de la siguiente manera: Con lo anterior, estamos seleccionando el elemento "h1" del HTML y aplicando las propiedades "color" y "font-size" con sus respectivos valores para cambiar su estilo en la página web.
● No se ven afectadas por el espacio en blanco. Las propiedades se pueden
escribir de corrido o una debajo de la otra. Otra forma en la que podemos declarar el CSS anterior, por ejemplo, sería la siguiente:
● Al definir una propiedad numérica se debe especificar la unidad de medida
que se está usando. No se deben agregar espacios entre el número y la unidad de medida.
Por ejemplo, si queremos definir el tamaño de letra en 18 píxeles, debemos
escribir "font-size: 18px;" y no solo "font-size: 18;".
📌La unidad de medida más utilizada es el píxel, seguida por el porcentaje.
Si quieres saber más sobre unidades de medida puedes ver el siguiente link 👉Valores y unidades CSS ● Al definir una propiedad de color se debe especificar el color a usar. Los colores pueden usarse de 3 maneras diferentes:
/* Usando un nombre de color */
p { color: red; }
/* Usando un código hexadecimal */
h1 { color: #00ff00; /* Verde */ }
/* Usando un código RGB */
span { color: rgb(255, 0, 0); /* Rojo */ }
📌La unidad de color más utilizada es la hexadecimal. Para ver más detalles sobre esto pueden ingresar al siguiente link 👉Valores y unidades CSS
● No se ven afectadas por los comentarios. En CSS, los comentarios se realizan
con la sintaxis /* comentario */. Todo lo que se encuentra dentro de los símbolos /* y */ será ignorado por el navegador, lo que permite agregar notas o aclaraciones en el código sin afectar su funcionamiento. Ejemplo de comentario:
Propiedades básicas del CSS
Las propiedades de CSS se utilizan para definir estilos para los elementos HTML.
Estas son como las instrucciones de diseño que le damos a una página web para que se vea visualmente bonita y atractiva. Podemos cambiar el color del texto, el tamaño de la fuente, la imagen de fondo y muchos otros aspectos visuales.
En otras palabras, las propiedades CSS son una forma de hacer que nuestra página web se vea única y personalizada.
A continuación, te compartimos algunas de las propiedades de CSS más comunes:
● Color: Se utiliza para establecer el color del texto dentro de un elemento HTML. El valor de la propiedad puede ser un nombre de color, un código hexadecimal o un valor RGB. Por ejemplo:
● Background-color: Se utiliza para establecer el color de fondo de un
elemento HTML. Como sucede con la propiedad color, el valor de la propiedad puede ser un nombre de color, un código hexadecimal go un valor RGB. Por ejemplo:
● Font-family: Se utiliza para establecer la fuente para el texto dentro de un
elemento HTML. El valor de la propiedad es una lista de nombres de fuentes separados por comas, y si la primera fuente no está disponible, se utilizará la siguiente en la lista. Por ejemplo:
● Font-size: Se utiliza para establecer el tamaño del texto dentro de un
elemento HTML. El valor de la propiedad puede ser un número seguido de una unidad de medida como píxeles o em, o puede ser una palabra clave como small, medium o large. Por ejemplo: ● Margin: Se utiliza para establecer el espacio entre el borde de un elemento y cualquier elemento adyacente. El valor de la propiedad puede ser un número seguido de una unidad de medida como píxeles o em, o puede ser una serie de valores separados por espacios para establecer diferentes márgenes correspondientes a diferentes lados del elemento. Por ejemplo:
● Padding: Se utiliza para establecer el espacio entre el contenido de un
elemento y su borde. El valor de la propiedad puede ser un número seguido de una unidad de medida como píxeles o em, o puede ser una serie de valores separados por espacios para establecer diferentes rellenos correspondientes a diferentes lados del elemento. Por ejemplo: Modelo de cajas El Box Model (“modelo de caja”) es uno de los conceptos más importantes en CSS, y es fundamental para comprender cómo se estructuran y diseñan los elementos en una página web.
Describe cómo se componen los elementos HTML en una página.
Para CSS cada elemento es considerado como una "caja" que consta de cuatro partes:
● Content ● Padding ● Border ● Margin Veamos en más detalle de qué trata cada parte:
Content → Es el área donde se muestra el contenido real del elemento (como el
texto o las imágenes).
Padding → La propiedad de padding (“relleno”) se usa para definir el espacio entre
el contenido de un elemento y su borde. Los valores que se pueden utilizar incluyen:
● Un valor numérico, que define el espacio en píxeles.
● Un valor porcentual, que define el espacio en relación al ancho del elemento. ● La palabra clave "auto", que centra el contenido horizontalmente.
Border → La propiedad de border se usa para definir el borde de un elemento, es
decir, es la línea que rodea el contenido y el padding. Los valores que se pueden utilizar incluyen:
● El ancho del borde en píxeles, como "1px".
● El tipo de borde, como "solid" para un borde sólido o "dashed" para un borde discontinuo. ● El color del borde, como "black" para un borde negro o "#cccccc" para un color hexadecimal.
👉 Puedes ver más efectos de borde en el siguiente link Borde CSS
Margin → La propiedad de margin (“margen”) se usa para definir el espacio entre el borde y el elemento adyacente (como otro elemento o el borde del navegador). Los valores que se pueden utilizar incluyen:
● Un valor numérico, que define el espacio en píxeles.
● Un valor porcentual, que define el espacio en relación al ancho del elemento padre. ● La palabra clave "auto", que centra el elemento horizontalmente.
Veamos un ejemplo de cómo se aplica el box model a un elemento HTML simple:
En este caso, el elemento es un “div” con la clase “ejemplo”. El contenido es
simplemente el texto: "Este es un ejemplo de contenido".
El padding, border y margin no se han definido explícitamente, por lo que serían 0.
💡De todas maneras, el navegador por defecto agrega estilos. Por lo que, si quisiéramos resetearlos, vamos a poder hacerlo con el siguiente código CSS:
Ahora, si aplicamos algunos estilos CSS para agregar padding, border y margin, se podría declarar así: 💡Como podemos observar en la imagen, la propiedad de border tiene asignados varios valores en una misma línea (el ancho, tipo y color). Se escribe de esa manera para simplificar el código y que sea más legible y eficiente.
Y el resultado final se vería así:
Como se puede ver, el contenido está rodeado por un espacio de 10px de padding, luego por un borde negro sólido de 1px, y finalmente por un margen de 20px. Todo esto compone la "caja" del elemento.
Ahora bien, si quisiéramos darle diferentes valores a los espacios de cada uno de los cuatro lados del elemento, las propiedades de padding y margin se pueden declarar junto con la palabra: top, right, bottom o left, para especificar la cantidad de espacio que se desea agregar en una dirección específica. Por ejemplo:
Para agregar 200px de margen en la parte superior y a la parte derecha de un
elemento, pero no en la parte izquierda y en la parte inferior, podríamos utilizar la siguiente regla CSS: Y el resultado final se vería así:
Otra forma de declarar los margins que vimos anteriormente sería la siguiente: 💡Cuando el margin se declara de manera abreviada se divide en cuatro valores separados por espacios. El primer valor corresponde al margen superior (top), el segundo al margen derecho (right), el tercero al margen inferior (bottom) y el cuarto al margen izquierdo (left).
De esta manera, al asignar "200px 200px 0px 0px" se está indicando un margen superior y derecho de 200px y un margen inferior e izquierdo de 0px, simplificando la escritura del código y haciendo que sea más fácil de leer. Y el resultado que obtenemos será el mismo:
Resumen ¡Felicidades!
Esperamos que esta información te haya sido de utilidad y que te lleves para repasar: ● Cómo es la sintaxis correcta para escribir CSS ● Cuáles son las propiedades básicas de CSS ● Qué es el modelo de cajas y por qué es importante aprenderlo.
