wow
Diaporama sintaxis basica de HTML y CSS
Osmar Garduño Sandoval Nl:12 Grupo 502
Go!
Como insertar CSS en HTML
Para insertar CSS en HTML correctamente existen tres métodos principales: estilo en línea, CSS incrustado (embedded) y hoja de estilo externa. Además, el uso correcto de comentarios en el código ayuda a la organización y comprensión del proyecto tanto en HTML como en CSS.
Fondos y bordes en CSS
Para dar estilo a los elementos con fondos, bordes y márgenes en CSS es importante conocer el uso adecuado de las propiedades específicas para cada uno, así como su interacción dentro del modelo de caja de CSS.
Fondos en CSS
La propiedad básica para el color de fondo es background-color, que recibe valores de color (nombre, hexadecimal, rgb, etc.). Se pueden usar imágenes con background-image, controlar su posición con background-position, repetirlas o no con background-repeat, y otras opciones avanzadas.
Bordes en CSS Los bordes se definen con border, que combina ancho, estilo y color, Se puede especificar cada lado por separado con border-top, border-right, etc.
Propiedades clave:
border-width: grosor (por ejemplo, thin, medium, thick, o valores en px).
border-style: estilo (none, solid, dashed, dotted, double, groove, ridge, inset, outset).
border-color: color.
Para bordes redondeados se usa border-radius, que puede redondear uno o varios bordes con valores en px o porcentaje.
El fondo puede incluir degradados con background-image: linear-gradient para efectos visuales atractivos.
+ info
<div> no aporta significado semántico, solo organiza visualmente en bloques.
El elemento <div> en HTML es un contenedor genérico y de bloque que se usa para estructurar y organizar el contenido de una página web cuando no hay un elemento semántico específico más adecuado. Es muy versátil para agrupar elementos relacionados, aplicar estilos y crear layouts mediante CSS
Permite crear secciones o áreas visuales en la página para agrupar texto, imágenes, formularios, etc.
+ info
Alineación de elementos en CSS
Para alinear elementos en un contenedor flexible, se utiliza principalmente Flexbox. Algunas propiedades importantes son:
justify-content: Alinea los elementos a lo largo del eje principal (horizontal por defecto). Puede tomar valores como flex-start, center, flex-end, space-between, entre otros.
align-items: Controla la alineación a lo largo del eje transversal (vertical por defecto). Valores comunes son stretch, center, flex-start, flex-end.
Para centrar elementos se puede usar display: flex junto con justify-content: center y align-items: center.
En elementos de bloque, para alinear horizontalmente se usa text-align con valores como left, center, y right.
Para alineación vertical, se puede usar vertical-align junto con ajustes de line-height.
Otra técnica para alinear un bloque es usando position: relative en el contenedor y position: absolute en el hijo, combinando con left, top y transform: translate(-50%, -50%) para centrar sin conocer dimensiones exactas.
Control del diseño de página
El diseño se puede organizar en secciones usando contenedores principales como encabezado, menú de navegación, contenido principal y pie de página.
CSS Grid Layout permite un control avanzado y bidimensional con filas y columnas para organizar mejor el contenido.
Las mejores prácticas incluyen usar unidades relativas (porcentaje, em) para que el diseño sea adaptable a diferentes tamaños de pantalla.
Las media queries permiten aplicar estilos específicos para dispositivos móviles o pantallas pequeñas, haciendo el diseño responsivo.
CSS permite controlar color, fuentes, márgenes, rellenos, bordes y posición (con float, display, position) para lograr un diseño visual atractivo.
Control del diseño de página
El diseño se puede organizar en secciones usando contenedores principales como encabezado, menú de navegación, contenido principal y pie de página.
CSS Grid Layout permite un control avanzado y bidimensional con filas y columnas para organizar mejor el contenido.
Las mejores prácticas incluyen usar unidades relativas (porcentaje, em) para que el diseño sea adaptable a diferentes tamaños de pantalla.
Las media queries permiten aplicar estilos específicos para dispositivos móviles o pantallas pequeñas, haciendo el diseño responsivo.
CSS permite controlar color, fuentes, márgenes, rellenos, bordes y posición (con float, display, position) para lograr un diseño visual atractivo.
Como estilizar:
Tablas
Listas
Enlaces
+ info
+ info
+ info
Propiedades como border, border-collapse, padding, text-align y background-color controlan el borde, separación y alineación de celdas.
Para mejorar la legibilidad se usan estilos alternos usando :nth-child(even) para filas.
Se puede controlar tamaño con width y altura con height.
También es común estilizar encabezados con th y filas con tr para diferenciar visualmente.
Los enlaces HTML (<a>) se pueden estilizar para cambiar color, tipografía, tamaño, bordes, etc.
Se usan pseudoclases para definir estilos según el estado del enlace:
a:link para enlaces no visitados.
a:visited para enlaces visitados.
a:hover para cuando el cursor está sobre el enlace.
a:active para cuando el enlace está activo (clickeado).
Propiedades comunes incluyen color, text-decoration (para subrayados), background-color, border, padding y font-family.
La regla del orden para los pseudoelementos es importante: primero :link y :visited, después :hover, y finalmente :active.
Se puede cambiar la apariencia con list-style-type para modificar los marcadores (círculos, discos, números, etc.).
Propiedades como padding, margin y text-indent afectan la indentación y separación de elementos de lista.
Listas pueden ser horizontales usando display: inline o inline-block en los items.
Para listas personalizadas, se puede usar la propiedad list-style-image o eliminar los puntos/marcadores y usar pseudo-elementos para decoraciones personalizadas.
1. CSS en línea (estilo inline)
Se coloca el código CSS directamente en el atributo style de un elemento HTML. Es útil para aplicar un estilo rápido y puntual solo a un elemento, pero no es recomendable para estilos repetidos o para mantener un proyecto limpio. 2. CSS interno (estilo incrustado)
Se agrega un bloque de CSS dentro de la etiqueta <style> en la sección <head> del documento HTML. Este método separa el estilo del contenido y aplica las reglas CSS a toda la página. 3. CSS externo (archivo separado)
El código CSS se escribe en un archivo con extensión .css separado del HTML. Luego, se enlaza ese archivo en el <head> del HTML mediante la etiqueta <link>. Este es el método más limpio y recomendable para proyectos con múltiples páginas y estilos reutilizables.
Como estilizar imagenes con css
Serie deejercicios 2
Gracias por su atencion
Como usar
Correctamente el padding
El uso correcto de la propiedad padding en CSS consiste en definir espacios internos entre el contenido de un elemento y su borde, lo que da al contenido un “respiro” y evita que quede pegado a los bordes del contenedor. Un uso adecuado del padding mejora la apariencia y experiencia de usuario al otorgar espacios claros y ordenados dentro de los elementos en la página web.
- Características importantes:
Padding afecta solo al espacio interior del elemento, no modifica la distancia con otros elementos (que controla el margin).
No acepta valores negativos.
Es útil para mejorar la legibilidad visual y evitar que el contenido quede demasiado pegado a los bordes.
Diaporama sintaxis basica de HTML y CSS
OSMAR GARDUÑO SANDOVAL
Created on September 17, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Visual Presentation
View
Terrazzo Presentation
View
Colorful Presentation
View
Modular Structure Presentation
View
Chromatic Presentation
View
City Presentation
View
News Presentation
Explore all templates
Transcript
wow
Diaporama sintaxis basica de HTML y CSS
Osmar Garduño Sandoval Nl:12 Grupo 502
Go!
Como insertar CSS en HTML
Para insertar CSS en HTML correctamente existen tres métodos principales: estilo en línea, CSS incrustado (embedded) y hoja de estilo externa. Además, el uso correcto de comentarios en el código ayuda a la organización y comprensión del proyecto tanto en HTML como en CSS.
Fondos y bordes en CSS
Para dar estilo a los elementos con fondos, bordes y márgenes en CSS es importante conocer el uso adecuado de las propiedades específicas para cada uno, así como su interacción dentro del modelo de caja de CSS. Fondos en CSS La propiedad básica para el color de fondo es background-color, que recibe valores de color (nombre, hexadecimal, rgb, etc.). Se pueden usar imágenes con background-image, controlar su posición con background-position, repetirlas o no con background-repeat, y otras opciones avanzadas. Bordes en CSS Los bordes se definen con border, que combina ancho, estilo y color, Se puede especificar cada lado por separado con border-top, border-right, etc. Propiedades clave: border-width: grosor (por ejemplo, thin, medium, thick, o valores en px). border-style: estilo (none, solid, dashed, dotted, double, groove, ridge, inset, outset). border-color: color. Para bordes redondeados se usa border-radius, que puede redondear uno o varios bordes con valores en px o porcentaje.
El fondo puede incluir degradados con background-image: linear-gradient para efectos visuales atractivos.
+ info
<div> no aporta significado semántico, solo organiza visualmente en bloques.
El elemento <div> en HTML es un contenedor genérico y de bloque que se usa para estructurar y organizar el contenido de una página web cuando no hay un elemento semántico específico más adecuado. Es muy versátil para agrupar elementos relacionados, aplicar estilos y crear layouts mediante CSS
Permite crear secciones o áreas visuales en la página para agrupar texto, imágenes, formularios, etc.
+ info
Alineación de elementos en CSS
Para alinear elementos en un contenedor flexible, se utiliza principalmente Flexbox. Algunas propiedades importantes son: justify-content: Alinea los elementos a lo largo del eje principal (horizontal por defecto). Puede tomar valores como flex-start, center, flex-end, space-between, entre otros. align-items: Controla la alineación a lo largo del eje transversal (vertical por defecto). Valores comunes son stretch, center, flex-start, flex-end. Para centrar elementos se puede usar display: flex junto con justify-content: center y align-items: center. En elementos de bloque, para alinear horizontalmente se usa text-align con valores como left, center, y right. Para alineación vertical, se puede usar vertical-align junto con ajustes de line-height. Otra técnica para alinear un bloque es usando position: relative en el contenedor y position: absolute en el hijo, combinando con left, top y transform: translate(-50%, -50%) para centrar sin conocer dimensiones exactas.
Control del diseño de página
El diseño se puede organizar en secciones usando contenedores principales como encabezado, menú de navegación, contenido principal y pie de página. CSS Grid Layout permite un control avanzado y bidimensional con filas y columnas para organizar mejor el contenido. Las mejores prácticas incluyen usar unidades relativas (porcentaje, em) para que el diseño sea adaptable a diferentes tamaños de pantalla. Las media queries permiten aplicar estilos específicos para dispositivos móviles o pantallas pequeñas, haciendo el diseño responsivo. CSS permite controlar color, fuentes, márgenes, rellenos, bordes y posición (con float, display, position) para lograr un diseño visual atractivo.
Control del diseño de página
El diseño se puede organizar en secciones usando contenedores principales como encabezado, menú de navegación, contenido principal y pie de página. CSS Grid Layout permite un control avanzado y bidimensional con filas y columnas para organizar mejor el contenido. Las mejores prácticas incluyen usar unidades relativas (porcentaje, em) para que el diseño sea adaptable a diferentes tamaños de pantalla. Las media queries permiten aplicar estilos específicos para dispositivos móviles o pantallas pequeñas, haciendo el diseño responsivo. CSS permite controlar color, fuentes, márgenes, rellenos, bordes y posición (con float, display, position) para lograr un diseño visual atractivo.
Como estilizar:
Tablas
Listas
Enlaces
+ info
+ info
+ info
Propiedades como border, border-collapse, padding, text-align y background-color controlan el borde, separación y alineación de celdas. Para mejorar la legibilidad se usan estilos alternos usando :nth-child(even) para filas. Se puede controlar tamaño con width y altura con height. También es común estilizar encabezados con th y filas con tr para diferenciar visualmente.
Los enlaces HTML (<a>) se pueden estilizar para cambiar color, tipografía, tamaño, bordes, etc. Se usan pseudoclases para definir estilos según el estado del enlace: a:link para enlaces no visitados. a:visited para enlaces visitados. a:hover para cuando el cursor está sobre el enlace. a:active para cuando el enlace está activo (clickeado). Propiedades comunes incluyen color, text-decoration (para subrayados), background-color, border, padding y font-family. La regla del orden para los pseudoelementos es importante: primero :link y :visited, después :hover, y finalmente :active.
Se puede cambiar la apariencia con list-style-type para modificar los marcadores (círculos, discos, números, etc.). Propiedades como padding, margin y text-indent afectan la indentación y separación de elementos de lista. Listas pueden ser horizontales usando display: inline o inline-block en los items. Para listas personalizadas, se puede usar la propiedad list-style-image o eliminar los puntos/marcadores y usar pseudo-elementos para decoraciones personalizadas.
1. CSS en línea (estilo inline) Se coloca el código CSS directamente en el atributo style de un elemento HTML. Es útil para aplicar un estilo rápido y puntual solo a un elemento, pero no es recomendable para estilos repetidos o para mantener un proyecto limpio. 2. CSS interno (estilo incrustado) Se agrega un bloque de CSS dentro de la etiqueta <style> en la sección <head> del documento HTML. Este método separa el estilo del contenido y aplica las reglas CSS a toda la página. 3. CSS externo (archivo separado) El código CSS se escribe en un archivo con extensión .css separado del HTML. Luego, se enlaza ese archivo en el <head> del HTML mediante la etiqueta <link>. Este es el método más limpio y recomendable para proyectos con múltiples páginas y estilos reutilizables.
Como estilizar imagenes con css
Serie deejercicios 2
Gracias por su atencion
Como usar
Correctamente el padding
El uso correcto de la propiedad padding en CSS consiste en definir espacios internos entre el contenido de un elemento y su borde, lo que da al contenido un “respiro” y evita que quede pegado a los bordes del contenedor. Un uso adecuado del padding mejora la apariencia y experiencia de usuario al otorgar espacios claros y ordenados dentro de los elementos en la página web.
- Características importantes:
Padding afecta solo al espacio interior del elemento, no modifica la distancia con otros elementos (que controla el margin). No acepta valores negativos. Es útil para mejorar la legibilidad visual y evitar que el contenido quede demasiado pegado a los bordes.