SlideShare una empresa de Scribd logo
1 de 9
Descargar para leer sin conexión
Guillermo Augusto Alcaraz Domínguez
4101
¿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.
LENGUAJE CSS
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el
aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación
horizontal y vertical entre elementos, posición de cada elemento dentro de la
página, etc.
EL MODELO DE CAJAS
El modelo de cajas es el comportamiento de CSS que hace que todos los
elementos de las páginas se representen mediante cajas rectangulares. Las
cajas de una página se crean automáticamente. Cada vez que se inserta una
etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos
de ese elemento.
¿CÓMO FUNCIONA?
Las hojas de estilo están compuestas por una o más reglas.
Las regla tiene dos partes: un selector y la declaración.
A su vez la declaración está compuesta por una propiedad y el valor que se le
asigne:
h1 {color: red;}
DONDE:
h1 es el selector y {color: red;} es la declaración.
TIPOGRAFÍA
CSS define numerosas propiedades para modificar la apariencia del texto. A
pesar de que no dispone de tantas posibilidades como los lenguajes y
programas específicos para crear documentos impresos, CSS permite aplicar
estilos complejos y muy variados al texto de las páginas web.
A continuación se muestran varias reglas CSS que establecen el color del texto
de diferentes formas:
h1{color: #369;}
p{color: black;}
a, span{color: #B1251E;}
div{color: rgb(71,98,176);}
VENTAJAS
• Separación de forma y contenido: diseñador y programador pueden
trabajar independientemente.
• Tráfico en el servidor: Las páginas pueden reducir su tamaño entre un 40%
y un 60%, y los navegadores guardan la hoja de estilos en la caché, esto
reduce los costos de envío de información.
• Tiempos de carga: Por la gran reducción en el peso de las páginas, mejora
la experiencia del usuario, que valora de un sitio el menor tiempo en la
descarga.
• Precisión: La utilización de CSS permite un control mucho mayor sobre el
diseño.
• Mantenimiento: Reduce notablemente el tiempo de mantenimiento cuando
es necesario introducir un cambio porque se modifica un solo archivo.
• Posicionamiento: Las páginas diseñadas con CSS tienen un código más
limpio porque no llevan diseño, sólo contenido. Esto es semánticamente más
correcto y la página aparecerá mejor posicionada en los buscadores. Google
navega obviando el diseño.
DESVENTAJAS
• Navegadores como ie6 interpretan los estándares a su manera por lo que
hay que recurrir a CSS hacks.
• Tiempo, es más fácil por ejemplo diseñar con tablas y valerse de las
herramientas de estilo inline, sin embargo esto hace más pesado el sitio y
definitivamente unfriendly a los buscadores.

Más contenido relacionado

La actualidad más candente

La actualidad más candente (13)

Css
CssCss
Css
 
Conceptos Básicos CSS
Conceptos Básicos CSSConceptos Básicos CSS
Conceptos Básicos CSS
 
Pp css
Pp cssPp css
Pp css
 
Html vs css
Html vs cssHtml vs css
Html vs css
 
CSS
CSSCSS
CSS
 
CSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en CascadaCSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en Cascada
 
Hablando de css
Hablando de cssHablando de css
Hablando de css
 
02 introduccion-css
02 introduccion-css02 introduccion-css
02 introduccion-css
 
Html5+css3 02
Html5+css3 02Html5+css3 02
Html5+css3 02
 
menú ver de ofimaticos
menú ver de ofimaticosmenú ver de ofimaticos
menú ver de ofimaticos
 
Diaposf 1
Diaposf 1Diaposf 1
Diaposf 1
 
Instrucciones html
Instrucciones htmlInstrucciones html
Instrucciones html
 
Vista
VistaVista
Vista
 

Destacado

Segunda forma normal
Segunda forma normalSegunda forma normal
Segunda forma normalITCV
 
Apuntes 1 parcial
Apuntes 1 parcialApuntes 1 parcial
Apuntes 1 parcialeleazar dj
 
Cuarta forma normal y quinta forma normal
Cuarta forma normal y quinta forma normalCuarta forma normal y quinta forma normal
Cuarta forma normal y quinta forma normalMemo Wars
 
U1 t1 act1_raul_martinezpaz
U1 t1 act1_raul_martinezpazU1 t1 act1_raul_martinezpaz
U1 t1 act1_raul_martinezpazcoyotecosmic
 
Encuesta redes sociales
Encuesta  redes sociales Encuesta  redes sociales
Encuesta redes sociales danielstiven99
 
Immanuel Kumc
Immanuel KumcImmanuel Kumc
Immanuel Kumcsjundosa
 
Vorsicht, Kamera!
Vorsicht, Kamera!Vorsicht, Kamera!
Vorsicht, Kamera!Dirk Haun
 
Weber.Vortrag Berlin.6.03.06
Weber.Vortrag Berlin.6.03.06Weber.Vortrag Berlin.6.03.06
Weber.Vortrag Berlin.6.03.06Stiftung Heureka
 
La armada de española
La armada de españolaLa armada de española
La armada de españolaRaulTheGoul
 
Kaimo Turizmas - Dorftourismus
Kaimo Turizmas - DorftourismusKaimo Turizmas - Dorftourismus
Kaimo Turizmas - DorftourismusRegina Bartkuviene
 
Goldmedia Trendmonitor 2012
Goldmedia Trendmonitor 2012Goldmedia Trendmonitor 2012
Goldmedia Trendmonitor 2012Goldmedia Group
 
MANUAL DE BIENVENIDA
MANUAL DE BIENVENIDAMANUAL DE BIENVENIDA
MANUAL DE BIENVENIDAYessica Ruano
 
Via crucis dibujos_fano
Via crucis dibujos_fanoVia crucis dibujos_fano
Via crucis dibujos_fanoirissubir
 
Enfermero interno residente (EIR)
Enfermero interno residente (EIR)Enfermero interno residente (EIR)
Enfermero interno residente (EIR)bloginformatica14
 
El efecto discoteca en las redes sociales
El efecto discoteca en las redes socialesEl efecto discoteca en las redes sociales
El efecto discoteca en las redes socialesNicolacito Acosta
 

Destacado (20)

Segunda forma normal
Segunda forma normalSegunda forma normal
Segunda forma normal
 
Apuntes 1 parcial
Apuntes 1 parcialApuntes 1 parcial
Apuntes 1 parcial
 
Cuarta forma normal y quinta forma normal
Cuarta forma normal y quinta forma normalCuarta forma normal y quinta forma normal
Cuarta forma normal y quinta forma normal
 
U1 t1 act1_raul_martinezpaz
U1 t1 act1_raul_martinezpazU1 t1 act1_raul_martinezpaz
U1 t1 act1_raul_martinezpaz
 
Para mis amigos..
Para mis amigos..Para mis amigos..
Para mis amigos..
 
Encuesta redes sociales
Encuesta  redes sociales Encuesta  redes sociales
Encuesta redes sociales
 
Immanuel Kumc
Immanuel KumcImmanuel Kumc
Immanuel Kumc
 
Vorsicht, Kamera!
Vorsicht, Kamera!Vorsicht, Kamera!
Vorsicht, Kamera!
 
Weber.Vortrag Berlin.6.03.06
Weber.Vortrag Berlin.6.03.06Weber.Vortrag Berlin.6.03.06
Weber.Vortrag Berlin.6.03.06
 
La armada de española
La armada de españolaLa armada de española
La armada de española
 
Kaimo Turizmas - Dorftourismus
Kaimo Turizmas - DorftourismusKaimo Turizmas - Dorftourismus
Kaimo Turizmas - Dorftourismus
 
Goldmedia Trendmonitor 2012
Goldmedia Trendmonitor 2012Goldmedia Trendmonitor 2012
Goldmedia Trendmonitor 2012
 
MANUAL DE BIENVENIDA
MANUAL DE BIENVENIDAMANUAL DE BIENVENIDA
MANUAL DE BIENVENIDA
 
Akzente Web
Akzente WebAkzente Web
Akzente Web
 
Via crucis dibujos_fano
Via crucis dibujos_fanoVia crucis dibujos_fano
Via crucis dibujos_fano
 
CD-Einlage
CD-EinlageCD-Einlage
CD-Einlage
 
Enfermero interno residente (EIR)
Enfermero interno residente (EIR)Enfermero interno residente (EIR)
Enfermero interno residente (EIR)
 
Sin título 1
Sin título 1Sin título 1
Sin título 1
 
Monografia
MonografiaMonografia
Monografia
 
El efecto discoteca en las redes sociales
El efecto discoteca en las redes socialesEl efecto discoteca en las redes sociales
El efecto discoteca en las redes sociales
 

Similar a Css (20)

Qué es CSS y con qué se come?
Qué es CSS y con qué se come?Qué es CSS y con qué se come?
Qué es CSS y con qué se come?
 
Qué es diseño 3d y sus ventajas.pptx
Qué es diseño 3d y sus ventajas.pptxQué es diseño 3d y sus ventajas.pptx
Qué es diseño 3d y sus ventajas.pptx
 
Qué es CSS.ppsx
Qué es CSS.ppsxQué es CSS.ppsx
Qué es CSS.ppsx
 
Paginas web css
Paginas web cssPaginas web css
Paginas web css
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
Organización de contenido en dreamweaver
Organización de contenido en dreamweaverOrganización de contenido en dreamweaver
Organización de contenido en dreamweaver
 
Identificación del lenguaje de css
Identificación del lenguaje de cssIdentificación del lenguaje de css
Identificación del lenguaje de css
 
Introduccion historia css
Introduccion historia cssIntroduccion historia css
Introduccion historia css
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
manualrapido_css.pdf
manualrapido_css.pdfmanualrapido_css.pdf
manualrapido_css.pdf
 
Manualrapido css
Manualrapido cssManualrapido css
Manualrapido css
 
manua.pdf
manua.pdfmanua.pdf
manua.pdf
 
CSS estilos.pptx
CSS estilos.pptxCSS estilos.pptx
CSS estilos.pptx
 
introduccic3b3n-css.pptx
introduccic3b3n-css.pptxintroduccic3b3n-css.pptx
introduccic3b3n-css.pptx
 
Hojas de estilo (css)
Hojas de estilo (css)Hojas de estilo (css)
Hojas de estilo (css)
 
Curso FPE Diseño Web. Módulo 4. CSS
Curso FPE Diseño Web. Módulo 4. CSSCurso FPE Diseño Web. Módulo 4. CSS
Curso FPE Diseño Web. Módulo 4. CSS
 
Identificacion
IdentificacionIdentificacion
Identificacion
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
 

Más de Memo Wars

Supresión de tablas
Supresión de tablasSupresión de tablas
Supresión de tablasMemo Wars
 
Representación de tablas
Representación de tablasRepresentación de tablas
Representación de tablasMemo Wars
 
Relaciones en bases de datos
Relaciones en bases de datosRelaciones en bases de datos
Relaciones en bases de datosMemo Wars
 
Reglas de integridad
Reglas de integridadReglas de integridad
Reglas de integridadMemo Wars
 
Primera forma normal
Primera forma normalPrimera forma normal
Primera forma normalMemo Wars
 
Notación gráfica del modelo entidad
Notación gráfica del modelo entidadNotación gráfica del modelo entidad
Notación gráfica del modelo entidadMemo Wars
 
Modificación de tablas
Modificación de tablasModificación de tablas
Modificación de tablasMemo Wars
 
Instalación del sistema gestor de bases de datos
Instalación del sistema gestor de bases de datosInstalación del sistema gestor de bases de datos
Instalación del sistema gestor de bases de datosMemo Wars
 
Herramientas de programación
Herramientas de programaciónHerramientas de programación
Herramientas de programaciónMemo Wars
 
Forma normal de boyce codd
Forma normal de boyce coddForma normal de boyce codd
Forma normal de boyce coddMemo Wars
 
Entorno de trabajo
Entorno de trabajoEntorno de trabajo
Entorno de trabajoMemo Wars
 
Entidades y atributos
Entidades y atributosEntidades y atributos
Entidades y atributosMemo Wars
 
Creación de tablas
Creación de tablasCreación de tablas
Creación de tablasMemo Wars
 
Creación de bases de datos
Creación de bases de datosCreación de bases de datos
Creación de bases de datosMemo Wars
 
Claves primarias y ajenas
Claves primarias y ajenasClaves primarias y ajenas
Claves primarias y ajenasMemo Wars
 
Cardinalidad de las relaciones
Cardinalidad de las relacionesCardinalidad de las relaciones
Cardinalidad de las relacionesMemo Wars
 
Bases de datos distribuidas
Bases de datos distribuidasBases de datos distribuidas
Bases de datos distribuidasMemo Wars
 

Más de Memo Wars (20)

Supresión de tablas
Supresión de tablasSupresión de tablas
Supresión de tablas
 
Representación de tablas
Representación de tablasRepresentación de tablas
Representación de tablas
 
Relaciones en bases de datos
Relaciones en bases de datosRelaciones en bases de datos
Relaciones en bases de datos
 
Relaciones
RelacionesRelaciones
Relaciones
 
Reglas de integridad
Reglas de integridadReglas de integridad
Reglas de integridad
 
Primera forma normal
Primera forma normalPrimera forma normal
Primera forma normal
 
Notación gráfica del modelo entidad
Notación gráfica del modelo entidadNotación gráfica del modelo entidad
Notación gráfica del modelo entidad
 
Modificación de tablas
Modificación de tablasModificación de tablas
Modificación de tablas
 
Lenguajes
LenguajesLenguajes
Lenguajes
 
Instalación del sistema gestor de bases de datos
Instalación del sistema gestor de bases de datosInstalación del sistema gestor de bases de datos
Instalación del sistema gestor de bases de datos
 
Herramientas de programación
Herramientas de programaciónHerramientas de programación
Herramientas de programación
 
Forma normal de boyce codd
Forma normal de boyce coddForma normal de boyce codd
Forma normal de boyce codd
 
Entorno de trabajo
Entorno de trabajoEntorno de trabajo
Entorno de trabajo
 
Entidades y atributos
Entidades y atributosEntidades y atributos
Entidades y atributos
 
Creación de tablas
Creación de tablasCreación de tablas
Creación de tablas
 
Creación de bases de datos
Creación de bases de datosCreación de bases de datos
Creación de bases de datos
 
Conceptos
ConceptosConceptos
Conceptos
 
Claves primarias y ajenas
Claves primarias y ajenasClaves primarias y ajenas
Claves primarias y ajenas
 
Cardinalidad de las relaciones
Cardinalidad de las relacionesCardinalidad de las relaciones
Cardinalidad de las relaciones
 
Bases de datos distribuidas
Bases de datos distribuidasBases de datos distribuidas
Bases de datos distribuidas
 

Último

La electricidad y la electrónica.pdf.iluw
La electricidad y la electrónica.pdf.iluwLa electricidad y la electrónica.pdf.iluw
La electricidad y la electrónica.pdf.iluwDanielaEspaa3
 
Taller Evaluativo Tecnologías Web 2.0.docx
Taller Evaluativo Tecnologías Web 2.0.docxTaller Evaluativo Tecnologías Web 2.0.docx
Taller Evaluativo Tecnologías Web 2.0.docxSANTIAGOREYES92
 
Violencia sexual a través de Internet [ICAS 2024]
Violencia sexual a través de Internet [ICAS 2024]Violencia sexual a través de Internet [ICAS 2024]
Violencia sexual a través de Internet [ICAS 2024]QuantiKa14
 
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdf
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdfCuadernillo de Comunicación 1. Primer grado de Primaria.pdf
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdfRosaAmeliaLlacsahuan
 
PRESENTACION DE "CASO NOKIA" // PDF.EDU.
PRESENTACION DE "CASO NOKIA" // PDF.EDU.PRESENTACION DE "CASO NOKIA" // PDF.EDU.
PRESENTACION DE "CASO NOKIA" // PDF.EDU.SARA BUENDIA RIOJA
 
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024Mariano Cabrera Lanfranconi
 
Perspectivas en ciberseguridad para el año 2024
Perspectivas en ciberseguridad para el año 2024Perspectivas en ciberseguridad para el año 2024
Perspectivas en ciberseguridad para el año 2024Educática
 

Último (7)

La electricidad y la electrónica.pdf.iluw
La electricidad y la electrónica.pdf.iluwLa electricidad y la electrónica.pdf.iluw
La electricidad y la electrónica.pdf.iluw
 
Taller Evaluativo Tecnologías Web 2.0.docx
Taller Evaluativo Tecnologías Web 2.0.docxTaller Evaluativo Tecnologías Web 2.0.docx
Taller Evaluativo Tecnologías Web 2.0.docx
 
Violencia sexual a través de Internet [ICAS 2024]
Violencia sexual a través de Internet [ICAS 2024]Violencia sexual a través de Internet [ICAS 2024]
Violencia sexual a través de Internet [ICAS 2024]
 
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdf
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdfCuadernillo de Comunicación 1. Primer grado de Primaria.pdf
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdf
 
PRESENTACION DE "CASO NOKIA" // PDF.EDU.
PRESENTACION DE "CASO NOKIA" // PDF.EDU.PRESENTACION DE "CASO NOKIA" // PDF.EDU.
PRESENTACION DE "CASO NOKIA" // PDF.EDU.
 
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024
 
Perspectivas en ciberseguridad para el año 2024
Perspectivas en ciberseguridad para el año 2024Perspectivas en ciberseguridad para el año 2024
Perspectivas en ciberseguridad para el año 2024
 

Css

  • 1. Guillermo Augusto Alcaraz Domínguez 4101
  • 2. ¿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.
  • 3. LENGUAJE CSS Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.
  • 4. EL MODELO DE CAJAS El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares. Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.
  • 5. ¿CÓMO FUNCIONA? Las hojas de estilo están compuestas por una o más reglas. Las regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne: h1 {color: red;} DONDE: h1 es el selector y {color: red;} es la declaración.
  • 6. TIPOGRAFÍA CSS define numerosas propiedades para modificar la apariencia del texto. A pesar de que no dispone de tantas posibilidades como los lenguajes y programas específicos para crear documentos impresos, CSS permite aplicar estilos complejos y muy variados al texto de las páginas web. A continuación se muestran varias reglas CSS que establecen el color del texto de diferentes formas: h1{color: #369;} p{color: black;} a, span{color: #B1251E;} div{color: rgb(71,98,176);}
  • 7. VENTAJAS • Separación de forma y contenido: diseñador y programador pueden trabajar independientemente. • Tráfico en el servidor: Las páginas pueden reducir su tamaño entre un 40% y un 60%, y los navegadores guardan la hoja de estilos en la caché, esto reduce los costos de envío de información. • Tiempos de carga: Por la gran reducción en el peso de las páginas, mejora la experiencia del usuario, que valora de un sitio el menor tiempo en la descarga.
  • 8. • Precisión: La utilización de CSS permite un control mucho mayor sobre el diseño. • Mantenimiento: Reduce notablemente el tiempo de mantenimiento cuando es necesario introducir un cambio porque se modifica un solo archivo. • Posicionamiento: Las páginas diseñadas con CSS tienen un código más limpio porque no llevan diseño, sólo contenido. Esto es semánticamente más correcto y la página aparecerá mejor posicionada en los buscadores. Google navega obviando el diseño.
  • 9. DESVENTAJAS • Navegadores como ie6 interpretan los estándares a su manera por lo que hay que recurrir a CSS hacks. • Tiempo, es más fácil por ejemplo diseñar con tablas y valerse de las herramientas de estilo inline, sin embargo esto hace más pesado el sitio y definitivamente unfriendly a los buscadores.