CSS

Politécnico Miguel Ángel Ibáñez

Distrito: 06-04

Nombre: Frankely Jesús

Apellido: Paulino García

Número: #8

Maestro: Frankely Tavarez Valdez

Modulo técnico: Desarrollo e Implantaciones de Soluciones Web y Multimedia

Asignación: Conceptos básicos sobre CSS

Introducción

CSS (Cascading Style Sheets) es uno de los pilares fundamentales del diseño web moderno, permitiendo separar el contenido de una página web de su apariencia visual. A lo largo de este informe, se abordan diversos conceptos esenciales relacionados con CSS, desde su definición y usos, hasta las propiedades y atributos más utilizados para manipular la presentación de los elementos HTML. Exploraremos la estructura básica de las hojas de estilo, tanto externas como internas, y cómo las clases e identificadores (class e id) ayudan a aplicar estilos específicos. Además, se analizarán propiedades claves como el control del color, el tamaño del texto, y las técnicas para mejorar la interactividad visual al pasar el cursor por encima de los elementos. Esta visión general proporcionará una comprensión sólida de cómo CSS transforma la web, facilitando la creación de interfaces atractivas y accesibles.

1. CSS

Uso: CSS (Cascading Style Sheets) se utiliza para definir la apariencia y el estilo visual de las páginas web, permitiendo controlar el diseño, los colores, las fuentes, el espaciado y el formato de un sitio web de manera separada del HTML.

Definición: Es un lenguaje de diseño que describe cómo se deben mostrar los elementos HTML en pantalla, en papel o en otros medios.

Significado de siglas: CSS significa Cascading Style Sheets, que en español se traduce como Hojas de Estilo en Cascada.

2.<style> en HTML:

La etiqueta <style> en HTML se utiliza para definir estilos CSS dentro del propio documento HTML. El contenido que se coloca entre las etiquetas <style></style> es código CSS que se aplicará a los elementos de esa página web.

Este enfoque permite agregar estilos directamente en el documento HTML, en lugar de usar un archivo CSS externo. Aunque es útil para pruebas o pequeños ajustes, no es la mejor práctica para proyectos grandes, ya que puede hacer que el código sea más difícil de mantener.

1. Color y fondo:

color: Define el color del texto.
background-color: Establece el color de fondo de un elemento.
background-image: Aplica una imagen de fondo a un elemento.
background-repeat: Controla la repetición de una imagen de fondo.

2. Texto y fuentes:

font-family: Especifica la familia de fuentes para el texto.
font-size: Define el tamaño de la fuente.
font-weight: Controla el grosor del texto.
text-align: Alinea el texto (izquierda, derecha, centro o justificado).
text-decoration: Agrega o quita decoraciones como subrayado o tachado.
line-height: Controla el espaciado entre las líneas de texto.
letter-spacing: Ajusta el espaciado entre caracteres.

3. Espaciado y disposición:

margin: Establece el espacio exterior alrededor de un elemento.
padding: Define el espacio interior entre el contenido de un elemento y su borde.
width: Especifica el ancho de un elemento.
height: Define la altura de un elemento.
max-width: Limita el ancho máximo de un elemento.
min-height: Establece la altura mínima de un elemento.

4. Bordes y sombras:

border: Aplica un borde a un elemento.
border-radius: Redondea las esquinas de un elemento.
box-shadow: Añade una sombra alrededor de un elemento.

5. Posicionamiento y visualización:

display: Controla cómo se presenta un elemento (bloque, en línea, etc.).
position: Define la posición de un elemento (relativa, absoluta, fija, sticky).
z-index: Controla el orden de apilamiento de los elementos.
visibility: Define si un elemento es visible o no, sin afectar el espacio que ocupa.
overflow: Controla cómo se maneja el contenido que desborda el contenedor.

6. Flexbox (Diseño flexible):

display: flex: Habilita el modelo de caja flexible.
flex-direction: Establece la dirección en la que se organizan los elementos flexibles.
justify-content: Alinea los elementos flexibles horizontalmente.
align-items: Alinea los elementos flexibles verticalmente.

7. Grid (Diseño de cuadrícula):

display: grid: Habilita el diseño basado en cuadrículas.
grid-template-columns: Define las columnas de una cuadrícula.
grid-gap: Controla el espacio entre las filas y columnas de una cuadrícula.

8. Transformaciones y animaciones:

transform: Aplica transformaciones como rotación, escalado o traslación.
transition: Define transiciones suaves entre diferentes estados de un elemento.
animation: Especifica animaciones para un elemento.

9. Responsive Design:

media queries: Define reglas condicionales que permiten aplicar diferentes estilos según el tamaño de la pantalla o dispositivo.

3. Atributo en CSS

Un atributo en CSS es una propiedad que define el estilo de un elemento HTML. Los atributos permiten personalizar la apariencia visual de los elementos, como su color, tamaño, espaciado, etc. Cada atributo se escribe en formato de par propiedad: valor;, y se aplica a los elementos seleccionados en la hoja de estilos.

4. Atributo ID en CSS

El atributo ID es un identificador único que se asigna a un elemento HTML para aplicarle estilos específicos en CSS. Como cada ID es único en una página web, solo puede ser utilizado una vez por cada elemento. En CSS, se selecciona un ID utilizando el símbolo #, seguido del nombre del ID.

Características del atributo ID:

Solo se usa una vez por documento.

Tiene mayor especificidad que otros selectores, lo que significa que tiene prioridad en caso de conflicto de estilos.

4. Atributo class en CSS

El atributo class es un identificador reutilizable que se asigna a uno o más elementos HTML. Esto permite aplicar los mismos estilos a varios elementos dentro de una página. En CSS, se selecciona una clase utilizando el símbolo . (punto), seguido del nombre de la clase.
Características del atributo class:

Puede ser utilizado en múltiples elementos.

Facilita el agrupamiento de elementos con estilos comunes.

Un elemento puede tener más de una clase, separadas por espacios.

5. ¿Cuál es el código de HTML correcto para referirse a una hoja de estilo externa?

Para vincular una hoja de estilo externa en HTML, se utiliza la etiqueta <link> dentro del <head> del documento HTML. Aquí está el código correcto:

rel="stylesheet" especifica que el archivo vinculado es una hoja de estilo.

href="styles.css" proporciona la ruta al archivo CSS externo.

6. ¿Qué etiqueta HTML se utiliza para definir una hoja de estilo interna?

Para definir una hoja de estilo interna, se utiliza la etiqueta <style> dentro del <head> del documento HTML. Aquí está el código:

7. ¿Cuál es el código de HTML correcto para usar CSS en línea de código?

Para aplicar CSS en línea directamente a un elemento HTML, se usa el atributo style dentro de la etiqueta del elemento. Aquí está el código:

<p style="color: red; font-size: 20px;">Este es un párrafo con estilo en línea.</p>

style="color: red; font-size: 20px;" aplica estilos específicos directamente al elemento <p>.

8. ¿Cómo se inserta un comentario en CSS?

En CSS, los comentarios se utilizan para agregar notas o explicaciones dentro del código que no afectan la apariencia de la página web. Estos comentarios son útiles para documentar el código y hacerlo más comprensible para otros desarrolladores o para ti mismo en el futuro.

Los comentarios se colocan entre /* y */, y todo el texto dentro de estos delimitadores se ignora al procesar el código, sirviendo únicamente para proporcionar notas o descripciones dentro del archivo CSS.

9. ¿Cuál es la propiedad de CSS que permite cambiar el color de fondo?

La propiedad de CSS que permite cambiar el color de fondo de un elemento es background-color. Puedes especificar un color usando nombres de colores, valores hexadecimales, RGB, RGBA, HSL o HSLA.

10. ¿Cuál es la propiedad de CSS que es usada para cambiar el color de un elemento?

La propiedad de CSS que se usa para cambiar el color del texto de un elemento es color. Similar a background-color, puedes definir el color usando diferentes formatos.

11. ¿Qué propiedad de CSS controla el tamaño del texto?

La propiedad de CSS que controla el tamaño del texto es font-size. Esta propiedad permite definir el tamaño de la fuente del texto dentro de un elemento HTML.

12. ¿Cuál es la sintaxis correcta de CSS para asignar negritas a todas las etiquetas `<p>` de un archivo HTML?

Para asignar negritas a todas las etiquetas <p> en un archivo HTML, debes usar la propiedad font-weight con el valor bold. Aquí está la sintaxis correcta:

13. ¿Cuál sería la sintaxis en CSS para mostrar los links o hipervínculos sin el subrayado?

Para mostrar los enlaces o hipervínculos sin el subrayado, debes usar la propiedad text-decoration con el valor none. Aquí está la sintaxis:

14. ¿Cuál sería la forma de hacer que cada palabra en un texto inicie con una mayúscula mediante un código de CSS?

Para hacer que cada palabra en un texto comience con una letra mayúscula, se utiliza la propiedad text-transform con el valor capitalize. Esta propiedad permite cambiar la capitalización del texto dentro de un elemento HTML de diferentes maneras. Al usar capitalize, todas las palabras del texto comenzarán con una letra en mayúscula, independientemente de cómo estén escritas en el código HTML.

15. ¿Cuál propiedad es usada para cambiar el tipo de letra en un texto, de cualquier tipo de HTML, con CSS?

La propiedad utilizada en CSS para cambiar el tipo de letra (o fuente) de un texto es font-family. Esta propiedad permite especificar una lista de fuentes que el navegador debe utilizar para renderizar el texto. Si la primera fuente de la lista no está disponible, el navegador intentará usar las siguientes en orden, hasta encontrar una fuente compatible.

16. ¿Cómo se puede hacer en CSS para poner un texto en negritas?

Para poner un texto en negritas en CSS, se utiliza la propiedad font-weight. Esta propiedad controla el grosor del texto y permite aplicar diferentes niveles de negrita.

font-weight: Esta propiedad especifica el grosor del texto. Los valores posibles incluyen palabras clave como normal y bold, y valores numéricos que van desde 100 hasta 900. Los valores más bajos (100, 200, etc.) representan grosores más delgados, mientras que los valores más altos (700, 800, 900) representan grosores más gruesos. El valor 400 generalmente representa el grosor normal, y 700 es el valor comúnmente usado para texto en negritas.

17. ¿Cuál es la propiedad de CSS para cambiar el margen izquierdo de cualquier elemento HTML?

La propiedad de CSS que se utiliza para cambiar el margen izquierdo de cualquier elemento HTML es margin-left. Esta propiedad controla el espacio en blanco que se coloca a la izquierda del borde del elemento, separándolo de otros elementos o del borde del contenedor.

margin-left: Esta propiedad define el margen (espacio) en el lado izquierdo de un elemento. Puedes especificar el tamaño del margen utilizando diferentes unidades de medida, como píxeles (px), ems (em), porcentajes (%), entre otros. El margen izquierdo puede ser ajustado para proporcionar el espaciado deseado entre el elemento y otros elementos o el borde de su contenedor.

18. ¿Cuál sería la forma de colocar cuadrados en vez de círculos en una lista no ordenada mediante CSS?

Para cambiar los puntos predeterminados de una lista no ordenada (<ul>) de círculos a cuadrados en CSS, se utiliza la propiedad list-style-type. Esta propiedad permite especificar el estilo de los marcadores de lista, y uno de los valores disponibles es square, que cambia los puntos predeterminados a cuadrados.

list-style-type: Esta propiedad define el tipo de marcador que se usa para los elementos de una lista. Entre los valores posibles se incluyen disc (círculo), circle (círculo vacío), square (cuadrado) y none (sin marcador). Cambiar a square convierte los puntos de la lista en cuadrados.

19. ¿Cuál sería el código para seleccionar (solo afectar) solo a las etiquetas `<p>` dentro de una etiqueta `<div>` dentro de un archivo de HTML?

Para seleccionar solo las etiquetas <p> que están dentro de una etiqueta <div>, se utiliza un selector descendente en CSS. Los selectores descendentes permiten aplicar estilos solo a los elementos que son descendientes de otros elementos.

En CSS, el selector descendente se define separando los selectores de los elementos con un espacio en blanco. En este caso, para afectar solo a los elementos <p> que están dentro de un <div>, usaríamos el siguiente código:

20. ¿Cuál es una de las propiedades que se utilizan para generar espacio alrededor del contenido de un elemento, en el interior de cualquier frontera definida en CSS?

La propiedad que se utiliza para generar espacio alrededor del contenido de un elemento, pero dentro de sus bordes, es padding.

padding: Esta propiedad agrega espacio interno (dentro del borde del elemento) alrededor del contenido del elemento. El padding no afecta a los elementos fuera del borde, pero ajusta el espacio interior entre el contenido y el borde, haciendo que el contenido tenga más espacio. Puedes establecer diferentes valores para el padding en los lados superior, derecho, inferior e izquierdo del elemento.

21. ¿Cuál es una de las propiedades que se utilizan para generar una línea que se dibuja alrededor de los elementos, fuera de las fronteras, para hacer que el elemento "destaque" mediante CSS?

La propiedad que se utiliza para generar una línea o borde alrededor de los elementos y hacer que destaquen es border.

border: Esta propiedad en CSS define una línea que se dibuja alrededor del elemento, fuera del contenido y el padding, delimitando el área del elemento. La propiedad border puede personalizarse completamente en cuanto a grosor, estilo y color. Puedes utilizar diferentes valores para crear bordes sólidos, discontinuos, dobles, o incluso invisibles. También puedes controlar cada lado del borde de forma independiente si es necesario.

22. ¿Cuál es una de las propiedades que se emplean para manipular el estilo cuando el cursor del mouse pasa por encima?

La propiedad que se emplea para manipular el estilo cuando el cursor del mouse pasa por encima de un elemento es el pseudo-clase :hover.

hover: Es una pseudo-clase en CSS que se activa cuando un usuario coloca el cursor sobre un elemento específico. Con :hover, puedes cambiar el estilo de un elemento al interactuar con él, lo cual es útil para botones, enlaces o cualquier otro elemento que quieras destacar al pasar el mouse por encima.

23. Uso de la propiedad Inline

Propiedad Inline en CSS se refiere a los estilos que se aplican directamente dentro de una etiqueta HTML usando el atributo style. Esta técnica permite aplicar estilos de manera puntual a un elemento específico sin la necesidad de escribir CSS en un archivo separado o en un bloque <style>.

Inline styles se usan a menudo para aplicar estilos únicos a un solo elemento en el documento HTML. Aunque no es una práctica recomendada para proyectos grandes debido a la falta de escalabilidad y mantenibilidad, es útil cuando necesitas hacer ajustes rápidos o únicos para un elemento.

Conclusión

Sin CSS, el mundo digital que conocemos sería muy distinto. Las páginas web se verían monótonas, sin diseño ni estructura visual, y la experiencia del usuario sería mucho más limitada. La flexibilidad que brinda CSS para controlar colores, fuentes, márgenes, y la interactividad es clave para la funcionalidad y estética de la web moderna. A lo largo de este informe, hemos visto cómo cada propiedad y concepto en CSS contribuye a hacer de la web un espacio más visualmente atractivo y accesible. Si CSS no existiera, los sitios serían meramente bloques de texto sin estilo, y sería mucho más difícil para los diseñadores y desarrolladores ofrecer experiencias de usuario dinámicas e intuitivas. CSS es, sin duda, la herramienta que da vida a la estructura que HTML provee.

CSS