SlideShare una empresa de Scribd logo
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 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. La siguiente imagen muestra las
tres cajas rectangulares que crean las tres etiquetas HTML que incluye la
página:
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:
Utilizando las propiedades width y height, es posible mostrar las
    imágenes con cualquier altura/anchura, independientemente de
    su altura/anchura real:
                       es una práctica poco recomendable. El motivo es que
                       normalmente dos imágenes diferentes no comparten la
                       misma altura/anchura. Por lo tanto, se debe crear una
                       nueva regla CSS




cuando una imagen forma parte de
un enlace, los navegadores muestran
por defecto un borde azul grueso
alrededor de las imágenes
Estilos básicos
                                Cuando se aplican bordes a las celdas de una
                                tabla, el aspecto por defecto con el que se
                                muestra en un navegador es el siguiente:




El código HTML y CSS del
ejemplo anterior se muestra a
continuación:
El código CSS completo del ejemplo
anterior se muestra a continuación:



                                      Aunque parece sencillo, el
                                      mecanismo que utiliza el
                                      modelo collapse es muy
                                      complejo, ya que cuando los
                                      bordes que se fusionan no
                                      son exactamente iguales,
                                      debe tener en cuenta la
                                      anchura de cada borde, su
                                      estilo y el tipo de celda que
                                      contiene el borde (columna,
                                      fila, grupo de filas, grupo de
                                      columnas) para determinar
                                      la prioridad
Ejemplo de Cambiar el color de fondo
  con CSS
Estás buscandó cómo cambiar el color de fondo de tu página y tus elementos, llegaste al
lugar indicado.
Las hojas de estilo o CSS nos permiten controlar de manera separada el color
de fondo de cada uno de los elementos de nuestra página.
Aquí les dejo un ejemplo para cambiar el color de fondo de los elementos de
una página con CSS.

Más contenido relacionado

La actualidad más candente

Microsoft excel introduccion
Microsoft excel   introduccionMicrosoft excel   introduccion
Microsoft excel introduccion
Gaby Dominguez
 
Manual de marca personal
Manual de marca personalManual de marca personal
Manual de marca personal
MelissaTrujillo17
 
Diseño de paginas web con HTML
Diseño de paginas web con HTMLDiseño de paginas web con HTML
Diseño de paginas web con HTML
La Paradoja educativa
 
Elementos básicos de las presentaciones
Elementos básicos de las presentacionesElementos básicos de las presentaciones
Elementos básicos de las presentaciones
Fany767
 
Pestaña de referencias microsoft word 2010
Pestaña de referencias microsoft word 2010Pestaña de referencias microsoft word 2010
Pestaña de referencias microsoft word 2010
Gabriela Castro Gil
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño web
ciwmx
 
Introducción a la programación
Introducción a la programaciónIntroducción a la programación
Introducción a la programación
Jeckson Loza
 
El Concepto Creativo
El Concepto CreativoEl Concepto Creativo
El Concepto Creativo
Jazmin Ramirez
 
Introduccion photoshop
Introduccion photoshopIntroduccion photoshop
Introduccion photoshop
Andres Mosquera Copete
 
Cotizaciones paginas web
Cotizaciones paginas webCotizaciones paginas web
Cotizaciones paginas web
Luis Di Marco
 
HTML5
HTML5HTML5
Indices, tabla de contenido e ilustraciones
Indices, tabla de contenido e ilustracionesIndices, tabla de contenido e ilustraciones
Indices, tabla de contenido e ilustraciones
Paito Moya
 
Informe de diseño gráfico II
Informe de diseño gráfico IIInforme de diseño gráfico II
Informe de diseño gráfico II
Mayra Alejandra
 
Cuestionario correo electronico.
Cuestionario correo electronico.Cuestionario correo electronico.
Cuestionario correo electronico.
fabian fernandez
 
Glosarios en linea
Glosarios en lineaGlosarios en linea
Glosarios en linea
Lety Badillo
 
Espacio o layout publicitario
Espacio o layout publicitarioEspacio o layout publicitario
Espacio o layout publicitario
LYAR4
 
Mapa conceptual de word
Mapa conceptual de wordMapa conceptual de word
Mapa conceptual de word
dihanithatovar
 
Adobe Illustrator: historia y desarrollo
Adobe Illustrator: historia y desarrolloAdobe Illustrator: historia y desarrollo
Adobe Illustrator: historia y desarrollo
disseny2d1
 
Estandares de diseño web
Estandares de diseño webEstandares de diseño web
Estandares de diseño web
dwebslide
 
Definicion de imagen
Definicion de imagenDefinicion de imagen
Definicion de imagen
Yuliana Piedrahita Morales
 

La actualidad más candente (20)

Microsoft excel introduccion
Microsoft excel   introduccionMicrosoft excel   introduccion
Microsoft excel introduccion
 
Manual de marca personal
Manual de marca personalManual de marca personal
Manual de marca personal
 
Diseño de paginas web con HTML
Diseño de paginas web con HTMLDiseño de paginas web con HTML
Diseño de paginas web con HTML
 
Elementos básicos de las presentaciones
Elementos básicos de las presentacionesElementos básicos de las presentaciones
Elementos básicos de las presentaciones
 
Pestaña de referencias microsoft word 2010
Pestaña de referencias microsoft word 2010Pestaña de referencias microsoft word 2010
Pestaña de referencias microsoft word 2010
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño web
 
Introducción a la programación
Introducción a la programaciónIntroducción a la programación
Introducción a la programación
 
El Concepto Creativo
El Concepto CreativoEl Concepto Creativo
El Concepto Creativo
 
Introduccion photoshop
Introduccion photoshopIntroduccion photoshop
Introduccion photoshop
 
Cotizaciones paginas web
Cotizaciones paginas webCotizaciones paginas web
Cotizaciones paginas web
 
HTML5
HTML5HTML5
HTML5
 
Indices, tabla de contenido e ilustraciones
Indices, tabla de contenido e ilustracionesIndices, tabla de contenido e ilustraciones
Indices, tabla de contenido e ilustraciones
 
Informe de diseño gráfico II
Informe de diseño gráfico IIInforme de diseño gráfico II
Informe de diseño gráfico II
 
Cuestionario correo electronico.
Cuestionario correo electronico.Cuestionario correo electronico.
Cuestionario correo electronico.
 
Glosarios en linea
Glosarios en lineaGlosarios en linea
Glosarios en linea
 
Espacio o layout publicitario
Espacio o layout publicitarioEspacio o layout publicitario
Espacio o layout publicitario
 
Mapa conceptual de word
Mapa conceptual de wordMapa conceptual de word
Mapa conceptual de word
 
Adobe Illustrator: historia y desarrollo
Adobe Illustrator: historia y desarrolloAdobe Illustrator: historia y desarrollo
Adobe Illustrator: historia y desarrollo
 
Estandares de diseño web
Estandares de diseño webEstandares de diseño web
Estandares de diseño web
 
Definicion de imagen
Definicion de imagenDefinicion de imagen
Definicion de imagen
 

Destacado

TABLAS CSS
TABLAS CSSTABLAS CSS
TABLAS CSS
95697045
 
Propiedades css
Propiedades cssPropiedades css
Propiedades css
John Orellana
 
Endarteriectomie carotidienne pour sténose athéromateuse asymptomatique:
Endarteriectomie carotidienne pour sténose athéromateuse asymptomatique: Endarteriectomie carotidienne pour sténose athéromateuse asymptomatique:
Endarteriectomie carotidienne pour sténose athéromateuse asymptomatique:
Pelouze Guy-André
 
The Preamble to The US Constitution
The Preamble to The US ConstitutionThe Preamble to The US Constitution
The Preamble to The US Constitution
bkind2animals
 
Guerra Do Vietna
Guerra Do VietnaGuerra Do Vietna
Guerra Do Vietna
Fabio Santos
 
UD 8. Las actividades del sector servicios
UD 8. Las actividades del sector serviciosUD 8. Las actividades del sector servicios
UD 8. Las actividades del sector servicios
IES Lucas Mallada (Huesca)
 
Los adjetivos
Los adjetivosLos adjetivos
Los adjetivos
Meudys Figueroa
 

Destacado (7)

TABLAS CSS
TABLAS CSSTABLAS CSS
TABLAS CSS
 
Propiedades css
Propiedades cssPropiedades css
Propiedades css
 
Endarteriectomie carotidienne pour sténose athéromateuse asymptomatique:
Endarteriectomie carotidienne pour sténose athéromateuse asymptomatique: Endarteriectomie carotidienne pour sténose athéromateuse asymptomatique:
Endarteriectomie carotidienne pour sténose athéromateuse asymptomatique:
 
The Preamble to The US Constitution
The Preamble to The US ConstitutionThe Preamble to The US Constitution
The Preamble to The US Constitution
 
Guerra Do Vietna
Guerra Do VietnaGuerra Do Vietna
Guerra Do Vietna
 
UD 8. Las actividades del sector servicios
UD 8. Las actividades del sector serviciosUD 8. Las actividades del sector servicios
UD 8. Las actividades del sector servicios
 
Los adjetivos
Los adjetivosLos adjetivos
Los adjetivos
 

Similar a Qué es css

Diseño de Paginas Web modelo de caja y contenedores caja
Diseño de Paginas Web modelo de caja y contenedores cajaDiseño de Paginas Web modelo de caja y contenedores caja
Diseño de Paginas Web modelo de caja y contenedores caja
WilherQuintero
 
Css
CssCss
Identificacion
IdentificacionIdentificacion
Identificacion
Juan Carlos Medrano
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
Juan Carlos Medrano
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
Caro Duran
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
Caro Duran
 
Capítulo 13 Parte 2
Capítulo 13 Parte 2Capítulo 13 Parte 2
Capítulo 13 Parte 2
Tay_SR
 
guia sintaxis css.pdf
guia sintaxis css.pdfguia sintaxis css.pdf
guia sintaxis css.pdf
JhoelAlanHuaracaNez
 
Hojas de calculo CSS
Hojas de calculo CSSHojas de calculo CSS
Hojas de calculo CSS
guest382425
 
Manual css3 nov2014
Manual css3 nov2014Manual css3 nov2014
Manual css3 nov2014
Yadith Gomez Nolasco
 
Trabajo css
Trabajo cssTrabajo css
Introducción a CSS3
Introducción a CSS3Introducción a CSS3
Introducción a CSS3
Mayra Zurita
 
Box Model
Box ModelBox Model
Pp css
Pp cssPp css
Organización de contenido en dreamweaver
Organización de contenido en dreamweaverOrganización de contenido en dreamweaver
Organización de contenido en dreamweaver
Universidad Mesoamericana de San Agustín
 
introduccic3b3n-css.pptx
introduccic3b3n-css.pptxintroduccic3b3n-css.pptx
introduccic3b3n-css.pptx
PedroAlonzo20
 
Html vs css
Html vs cssHtml vs css
Html vs css
MAngelesBravo
 
Paginas web css
Paginas web cssPaginas web css
Paginas web css
axel lopez
 
Css posicionamiento de pag web presentacion de la semana
Css posicionamiento de pag web      presentacion de la semanaCss posicionamiento de pag web      presentacion de la semana
Css posicionamiento de pag web presentacion de la semana
Anel García Pumarino
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
Simoney Llamas
 

Similar a Qué es css (20)

Diseño de Paginas Web modelo de caja y contenedores caja
Diseño de Paginas Web modelo de caja y contenedores cajaDiseño de Paginas Web modelo de caja y contenedores caja
Diseño de Paginas Web modelo de caja y contenedores caja
 
Css
CssCss
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
 
Capítulo 13 Parte 2
Capítulo 13 Parte 2Capítulo 13 Parte 2
Capítulo 13 Parte 2
 
guia sintaxis css.pdf
guia sintaxis css.pdfguia sintaxis css.pdf
guia sintaxis css.pdf
 
Hojas de calculo CSS
Hojas de calculo CSSHojas de calculo CSS
Hojas de calculo CSS
 
Manual css3 nov2014
Manual css3 nov2014Manual css3 nov2014
Manual css3 nov2014
 
Trabajo css
Trabajo cssTrabajo css
Trabajo css
 
Introducción a CSS3
Introducción a CSS3Introducción a CSS3
Introducción a CSS3
 
Box Model
Box ModelBox Model
Box Model
 
Pp css
Pp cssPp css
Pp css
 
Organización de contenido en dreamweaver
Organización de contenido en dreamweaverOrganización de contenido en dreamweaver
Organización de contenido en dreamweaver
 
introduccic3b3n-css.pptx
introduccic3b3n-css.pptxintroduccic3b3n-css.pptx
introduccic3b3n-css.pptx
 
Html vs css
Html vs cssHtml vs css
Html vs css
 
Paginas web css
Paginas web cssPaginas web css
Paginas web css
 
Css posicionamiento de pag web presentacion de la semana
Css posicionamiento de pag web      presentacion de la semanaCss posicionamiento de pag web      presentacion de la semana
Css posicionamiento de pag web presentacion de la semana
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 

Más de maryesther20_95

Informatica css
Informatica cssInformatica css
Informatica css
maryesther20_95
 
Informatica css
Informatica cssInformatica css
Informatica css
maryesther20_95
 
Informática etiquetas html
Informática etiquetas htmlInformática etiquetas html
Informática etiquetas html
maryesther20_95
 
Informática etiquetas html
Informática etiquetas htmlInformática etiquetas html
Informática etiquetas html
maryesther20_95
 
etiquetas html
 etiquetas html etiquetas html
etiquetas html
maryesther20_95
 
Informática derechos de reproducción
Informática derechos de reproducciónInformática derechos de reproducción
Informática derechos de reproducción
maryesther20_95
 
Informática derechos de reproducción
Informática derechos de reproducciónInformática derechos de reproducción
Informática derechos de reproducción
maryesther20_95
 

Más de maryesther20_95 (7)

Informatica css
Informatica cssInformatica css
Informatica css
 
Informatica css
Informatica cssInformatica css
Informatica css
 
Informática etiquetas html
Informática etiquetas htmlInformática etiquetas html
Informática etiquetas html
 
Informática etiquetas html
Informática etiquetas htmlInformática etiquetas html
Informática etiquetas html
 
etiquetas html
 etiquetas html etiquetas html
etiquetas html
 
Informática derechos de reproducción
Informática derechos de reproducciónInformática derechos de reproducción
Informática derechos de reproducción
 
Informática derechos de reproducción
Informática derechos de reproducciónInformática derechos de reproducción
Informática derechos de reproducción
 

Qué es css

  • 1. 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.
  • 2. 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.
  • 3. 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. La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:
  • 4. 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:
  • 5. Utilizando las propiedades width y height, es posible mostrar las imágenes con cualquier altura/anchura, independientemente de su altura/anchura real: es una práctica poco recomendable. El motivo es que normalmente dos imágenes diferentes no comparten la misma altura/anchura. Por lo tanto, se debe crear una nueva regla CSS cuando una imagen forma parte de un enlace, los navegadores muestran por defecto un borde azul grueso alrededor de las imágenes
  • 6. Estilos básicos Cuando se aplican bordes a las celdas de una tabla, el aspecto por defecto con el que se muestra en un navegador es el siguiente: El código HTML y CSS del ejemplo anterior se muestra a continuación:
  • 7. El código CSS completo del ejemplo anterior se muestra a continuación: Aunque parece sencillo, el mecanismo que utiliza el modelo collapse es muy complejo, ya que cuando los bordes que se fusionan no son exactamente iguales, debe tener en cuenta la anchura de cada borde, su estilo y el tipo de celda que contiene el borde (columna, fila, grupo de filas, grupo de columnas) para determinar la prioridad
  • 8. Ejemplo de Cambiar el color de fondo con CSS Estás buscandó cómo cambiar el color de fondo de tu página y tus elementos, llegaste al lugar indicado. Las hojas de estilo o CSS nos permiten controlar de manera separada el color de fondo de cada uno de los elementos de nuestra página. Aquí les dejo un ejemplo para cambiar el color de fondo de los elementos de una página con CSS.