SlideShare una empresa de Scribd logo
1 de 10
Grupo # 2
*Integrantes:
* Angie Paola Rivera Castro
* Ingrid Yamileth Vega Sánchez
* Jessica Johana Gámez Alvarado
* Carlos Javier Echeverri Zeron
* Heber Jonathan Vega Rodríguez
* Lester Josué Guzmán Brizuela
* Luis Antonio Urbina Gutiérrez
* Rony Gabriel Alfaro Rodríguez
¿Qué es CSS?
*CSS es un lenguaje de hojas de estilos creado
para controlar el aspecto o presentación de los
documentos electrónicos definidos con HTML y
XHTML. CSS es la mejor forma de separar los
contenidos y su presentación y es
imprescindible para crear páginas web
complejas.
*Además, mejora la accesibilidad del
documento, reduce la complejidad de su
mantenimiento y permite visualizar el mismo
documento en infinidad de dispositivos
diferentes.
Primer paso para crea en un menú en HMTL-CSS
es ingresar códigos de HTML en un bloc de
notas.
Aquí podemos observar que sin un código en css se
muestra solo como simples listas de HMTL.
Solo usaremos un nombre de ID para aplicar CSS
Se llamará “button”
Aquí podemos observar el primer cambio de css,
se agruparon todas las palabras.
Ahora viene lo divertido. Vamos a aplicar los
colores, fuentes y tamaños del menú (a nuestro
gusto, claro está).
Modificando con css podemos ir dando color formar
y movimiento a los menús.
Vamos a aplicar un efecto :hover al mover el ratón
encima de un elemento de la lista (menú). Nótese la
diferencia de padding, margen y color de fondo que
mostraremos.
El efecto sería este:
Css menus
Css menus

Más contenido relacionado

La actualidad más candente

La actualidad más candente (7)

Agostina, mariquena y melisa
Agostina, mariquena y melisaAgostina, mariquena y melisa
Agostina, mariquena y melisa
 
Presentacion slideshare
Presentacion slidesharePresentacion slideshare
Presentacion slideshare
 
Presentacion slideshare
Presentacion slidesharePresentacion slideshare
Presentacion slideshare
 
Presentación wiki como usar nuestra wki2
Presentación wiki como usar nuestra wki2Presentación wiki como usar nuestra wki2
Presentación wiki como usar nuestra wki2
 
Google drive
Google driveGoogle drive
Google drive
 
Configuraciones de un navegador web
Configuraciones de un navegador webConfiguraciones de un navegador web
Configuraciones de un navegador web
 
Word 3
Word 3Word 3
Word 3
 

Similar a Css menus

Similar a Css menus (20)

html y css
html y csshtml y css
html y css
 
Maquetacion
MaquetacionMaquetacion
Maquetacion
 
CSS 3 Selectors - Detalles Finales
CSS 3 Selectors - Detalles FinalesCSS 3 Selectors - Detalles Finales
CSS 3 Selectors - Detalles Finales
 
Html
HtmlHtml
Html
 
Pagina web
Pagina webPagina web
Pagina web
 
Css
CssCss
Css
 
Presentación CSS y HTML en Gummurcia
Presentación CSS y HTML en GummurciaPresentación CSS y HTML en Gummurcia
Presentación CSS y HTML en Gummurcia
 
Tag s
Tag sTag s
Tag s
 
Introduccion historia css
Introduccion historia cssIntroduccion historia css
Introduccion historia css
 
Articulo monica y christian "español"
Articulo monica y christian "español"Articulo monica y christian "español"
Articulo monica y christian "español"
 
Como programar en htmil 5
Como programar en htmil 5Como programar en htmil 5
Como programar en htmil 5
 
Plan asignatura
Plan asignaturaPlan asignatura
Plan asignatura
 
04_Estilos CSS y modelos de caja.pptx
04_Estilos CSS y modelos de caja.pptx04_Estilos CSS y modelos de caja.pptx
04_Estilos CSS y modelos de caja.pptx
 
Hojas de estilo_css
Hojas de estilo_cssHojas de estilo_css
Hojas de estilo_css
 
Introducción a css
Introducción a cssIntroducción a css
Introducción a css
 
Que es css
Que es cssQue es css
Que es css
 
Guía Básica de CSS.pptx
Guía Básica de CSS.pptxGuía Básica de CSS.pptx
Guía Básica de CSS.pptx
 
Guía Básica de CSS.pptx
Guía Básica de CSS.pptxGuía Básica de CSS.pptx
Guía Básica de CSS.pptx
 
Trabajo final tecnologias web
Trabajo final tecnologias webTrabajo final tecnologias web
Trabajo final tecnologias web
 
MúLtiples ImáGenes De Fondo Con Css
MúLtiples ImáGenes De Fondo Con CssMúLtiples ImáGenes De Fondo Con Css
MúLtiples ImáGenes De Fondo Con Css
 

Último

microsoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamtemicrosoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamte
2024020140
 
Editorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdfEditorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdf
Yanitza28
 
Chat GPT para la educación Latinoamerica
Chat GPT para la educación LatinoamericaChat GPT para la educación Latinoamerica
Chat GPT para la educación Latinoamerica
EdwinGarca59
 

Último (20)

BUSCADORES DE INTERNET (Universidad de Sonora).
BUSCADORES DE INTERNET (Universidad de Sonora).BUSCADORES DE INTERNET (Universidad de Sonora).
BUSCADORES DE INTERNET (Universidad de Sonora).
 
microsoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamtemicrosoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamte
 
Tipos de datos en Microsoft Access de Base de Datos
Tipos de datos en Microsoft Access de Base de DatosTipos de datos en Microsoft Access de Base de Datos
Tipos de datos en Microsoft Access de Base de Datos
 
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
 
presentación del desensamble y ensamble del equipo de computo en base a las n...
presentación del desensamble y ensamble del equipo de computo en base a las n...presentación del desensamble y ensamble del equipo de computo en base a las n...
presentación del desensamble y ensamble del equipo de computo en base a las n...
 
Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024
 
Actividad 6/Las TIC en la Vida Cotidiana.
Actividad 6/Las TIC en la Vida Cotidiana.Actividad 6/Las TIC en la Vida Cotidiana.
Actividad 6/Las TIC en la Vida Cotidiana.
 
Editorial. Grupo de 12B. La Salle Margarita.pdf
Editorial. Grupo de 12B. La Salle Margarita.pdfEditorial. Grupo de 12B. La Salle Margarita.pdf
Editorial. Grupo de 12B. La Salle Margarita.pdf
 
Introduccion-a-la-electronica-industrial.pptx
Introduccion-a-la-electronica-industrial.pptxIntroduccion-a-la-electronica-industrial.pptx
Introduccion-a-la-electronica-industrial.pptx
 
Desarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - EstradaDesarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - Estrada
 
Función del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacionFunción del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacion
 
herramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaherramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el tema
 
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptxinfor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
 
De Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptxDe Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptx
 
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdfRedes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
 
Editorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdfEditorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdf
 
10°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-810°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-8
 
Chat GPT para la educación Latinoamerica
Chat GPT para la educación LatinoamericaChat GPT para la educación Latinoamerica
Chat GPT para la educación Latinoamerica
 
Imágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la informaciónImágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la información
 
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdfpresentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
 

Css menus

  • 1.
  • 2. Grupo # 2 *Integrantes: * Angie Paola Rivera Castro * Ingrid Yamileth Vega Sánchez * Jessica Johana Gámez Alvarado * Carlos Javier Echeverri Zeron * Heber Jonathan Vega Rodríguez * Lester Josué Guzmán Brizuela * Luis Antonio Urbina Gutiérrez * Rony Gabriel Alfaro Rodríguez
  • 3. ¿Qué es CSS? *CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas. *Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.
  • 4. Primer paso para crea en un menú en HMTL-CSS es ingresar códigos de HTML en un bloc de notas.
  • 5. Aquí podemos observar que sin un código en css se muestra solo como simples listas de HMTL.
  • 6. Solo usaremos un nombre de ID para aplicar CSS Se llamará “button” Aquí podemos observar el primer cambio de css, se agruparon todas las palabras.
  • 7. Ahora viene lo divertido. Vamos a aplicar los colores, fuentes y tamaños del menú (a nuestro gusto, claro está). Modificando con css podemos ir dando color formar y movimiento a los menús.
  • 8. Vamos a aplicar un efecto :hover al mover el ratón encima de un elemento de la lista (menú). Nótese la diferencia de padding, margen y color de fondo que mostraremos. El efecto sería este: