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

Destacado

JMC 36x28 Fixed Vane Fan
JMC 36x28 Fixed Vane FanJMC 36x28 Fixed Vane Fan
JMC 36x28 Fixed Vane Fan
JMCproducts
 
Modelo ethernet
Modelo ethernetModelo ethernet
Modelo ethernet
Maatva Rg
 
Cbw 30th anniversary
Cbw 30th anniversaryCbw 30th anniversary
Cbw 30th anniversary
Beatrice Watson
 
*Unit2 week2lecture5
*Unit2 week2lecture5*Unit2 week2lecture5
*Unit2 week2lecture5
Alaska Permaculture Institute
 
29386971 hacking
29386971 hacking29386971 hacking
29386971 hacking
joeymar143
 
17
1717
Cellular communication
Cellular communicationCellular communication
Cellular communication
yemarmar
 
Errores de diagnostico
Errores de diagnosticoErrores de diagnostico
Errores de diagnostico
Arturo RUIZ-MOLINA
 
การสร้างโปรแกรมด้วยภาษาคอมพิวเตอร์
การสร้างโปรแกรมด้วยภาษาคอมพิวเตอร์การสร้างโปรแกรมด้วยภาษาคอมพิวเตอร์
การสร้างโปรแกรมด้วยภาษาคอมพิวเตอร์Last'z Regrets
 
Donde habita el placer lf
Donde habita el placer  lfDonde habita el placer  lf
Donde habita el placer lf
Robin Hood
 
Stallings.william. .sistemas.operativos.5ed
Stallings.william. .sistemas.operativos.5edStallings.william. .sistemas.operativos.5ed
Stallings.william. .sistemas.operativos.5ed
Gerardo Aguero
 
Presentacion de MER
Presentacion de MERPresentacion de MER
Presentacion de MER
adrianbanchon
 
Uccn1003 may10 - lab 08 - wireshark analysis of trace files - answer-update...
Uccn1003   may10 - lab 08 - wireshark analysis of trace files - answer-update...Uccn1003   may10 - lab 08 - wireshark analysis of trace files - answer-update...
Uccn1003 may10 - lab 08 - wireshark analysis of trace files - answer-update...
Shu Shin
 
Catalogo 1
Catalogo 1Catalogo 1
Catalogo 1
arnold777
 
Social Media Assessment for Higher Ed Professionals
Social Media Assessment for Higher Ed ProfessionalsSocial Media Assessment for Higher Ed Professionals
Social Media Assessment for Higher Ed Professionals
Jennifer Keegin
 

Destacado (15)

JMC 36x28 Fixed Vane Fan
JMC 36x28 Fixed Vane FanJMC 36x28 Fixed Vane Fan
JMC 36x28 Fixed Vane Fan
 
Modelo ethernet
Modelo ethernetModelo ethernet
Modelo ethernet
 
Cbw 30th anniversary
Cbw 30th anniversaryCbw 30th anniversary
Cbw 30th anniversary
 
*Unit2 week2lecture5
*Unit2 week2lecture5*Unit2 week2lecture5
*Unit2 week2lecture5
 
29386971 hacking
29386971 hacking29386971 hacking
29386971 hacking
 
17
1717
17
 
Cellular communication
Cellular communicationCellular communication
Cellular communication
 
Errores de diagnostico
Errores de diagnosticoErrores de diagnostico
Errores de diagnostico
 
การสร้างโปรแกรมด้วยภาษาคอมพิวเตอร์
การสร้างโปรแกรมด้วยภาษาคอมพิวเตอร์การสร้างโปรแกรมด้วยภาษาคอมพิวเตอร์
การสร้างโปรแกรมด้วยภาษาคอมพิวเตอร์
 
Donde habita el placer lf
Donde habita el placer  lfDonde habita el placer  lf
Donde habita el placer lf
 
Stallings.william. .sistemas.operativos.5ed
Stallings.william. .sistemas.operativos.5edStallings.william. .sistemas.operativos.5ed
Stallings.william. .sistemas.operativos.5ed
 
Presentacion de MER
Presentacion de MERPresentacion de MER
Presentacion de MER
 
Uccn1003 may10 - lab 08 - wireshark analysis of trace files - answer-update...
Uccn1003   may10 - lab 08 - wireshark analysis of trace files - answer-update...Uccn1003   may10 - lab 08 - wireshark analysis of trace files - answer-update...
Uccn1003 may10 - lab 08 - wireshark analysis of trace files - answer-update...
 
Catalogo 1
Catalogo 1Catalogo 1
Catalogo 1
 
Social Media Assessment for Higher Ed Professionals
Social Media Assessment for Higher Ed ProfessionalsSocial Media Assessment for Higher Ed Professionals
Social Media Assessment for Higher Ed Professionals
 

Similar a Informatica 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
 
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
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
Simoney Llamas
 
INTRODUCCION AL CSS CLASE NUEVA CURSO CSS
INTRODUCCION AL CSS CLASE NUEVA CURSO CSSINTRODUCCION AL CSS CLASE NUEVA CURSO CSS
INTRODUCCION AL CSS CLASE NUEVA CURSO CSS
orcel97pa
 
Gordo
GordoGordo

Similar a Informatica 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
 
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
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
INTRODUCCION AL CSS CLASE NUEVA CURSO CSS
INTRODUCCION AL CSS CLASE NUEVA CURSO CSSINTRODUCCION AL CSS CLASE NUEVA CURSO CSS
INTRODUCCION AL CSS CLASE NUEVA CURSO CSS
 
Gordo
GordoGordo
Gordo
 

Más de 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 (6)

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
 

Informatica 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.