SlideShare una empresa de Scribd logo
1 de 8
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

La actualidad más candente (11)

Identificación del lenguaje de css
Identificación del lenguaje de cssIdentificación del lenguaje de css
Identificación del lenguaje de css
 
Menus CSS Grupo#3
Menus CSS Grupo#3Menus CSS Grupo#3
Menus CSS Grupo#3
 
Taller de Maquetación Web
Taller de Maquetación WebTaller de Maquetación Web
Taller de Maquetación Web
 
Css
CssCss
Css
 
Aspectos técnicos y estéticos de un sitio web
Aspectos técnicos y estéticos de un sitio webAspectos técnicos y estéticos de un sitio web
Aspectos técnicos y estéticos de un sitio web
 
3 saltos de seccion y pagina
3 saltos de seccion y pagina3 saltos de seccion y pagina
3 saltos de seccion y pagina
 
Juan seba..
Juan seba..Juan seba..
Juan seba..
 
Capas dentro de la css
Capas dentro de la cssCapas dentro de la css
Capas dentro de la css
 
Presentación CSS
Presentación CSSPresentación CSS
Presentación CSS
 
Lenguaje html y css
Lenguaje html y cssLenguaje html y css
Lenguaje html y css
 
GUIA DE HTML
GUIA DE HTMLGUIA DE HTML
GUIA DE HTML
 

Destacado

RIA-utveckling Kalmar
RIA-utveckling KalmarRIA-utveckling Kalmar
RIA-utveckling KalmarDavid Waller
 
Teckenkodning Pa Webben Pt 2
Teckenkodning Pa Webben Pt 2Teckenkodning Pa Webben Pt 2
Teckenkodning Pa Webben Pt 2Lars Gunther
 
Google analytics 2014
Google analytics 2014Google analytics 2014
Google analytics 2014Idespiran
 
PHP och MySQL
PHP och MySQLPHP och MySQL
PHP och MySQLbjornh
 
The Near Future of CSS
The Near Future of CSSThe Near Future of CSS
The Near Future of CSSRachel Andrew
 
Activism x Technology
Activism x TechnologyActivism x Technology
Activism x TechnologyWebVisions
 
Classroom Management Tips for Kids and Adolescents
Classroom Management Tips for Kids and AdolescentsClassroom Management Tips for Kids and Adolescents
Classroom Management Tips for Kids and AdolescentsShelly Sanchez Terrell
 

Destacado (7)

RIA-utveckling Kalmar
RIA-utveckling KalmarRIA-utveckling Kalmar
RIA-utveckling Kalmar
 
Teckenkodning Pa Webben Pt 2
Teckenkodning Pa Webben Pt 2Teckenkodning Pa Webben Pt 2
Teckenkodning Pa Webben Pt 2
 
Google analytics 2014
Google analytics 2014Google analytics 2014
Google analytics 2014
 
PHP och MySQL
PHP och MySQLPHP och MySQL
PHP och MySQL
 
The Near Future of CSS
The Near Future of CSSThe Near Future of CSS
The Near Future of CSS
 
Activism x Technology
Activism x TechnologyActivism x Technology
Activism x Technology
 
Classroom Management Tips for Kids and Adolescents
Classroom Management Tips for Kids and AdolescentsClassroom Management Tips for Kids and Adolescents
Classroom Management Tips for Kids and Adolescents
 

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
 
Capítulo 13 Parte 2
Capítulo 13 Parte 2Capítulo 13 Parte 2
Capítulo 13 Parte 2
 
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
 
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
 
Box Model
Box ModelBox Model
Box Model
 
Introducción a CSS3
Introducción a CSS3Introducción a CSS3
Introducción a CSS3
 
Pp css
Pp cssPp css
Pp css
 
Html vs css
Html vs cssHtml vs css
Html vs css
 
introduccic3b3n-css.pptx
introduccic3b3n-css.pptxintroduccic3b3n-css.pptx
introduccic3b3n-css.pptx
 
Organización de contenido en dreamweaver
Organización de contenido en dreamweaverOrganización de contenido en dreamweaver
Organización de contenido en dreamweaver
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
Paginas web css
Paginas web cssPaginas web css
Paginas web css
 
Gordo
GordoGordo
Gordo
 
programacion
programacionprogramacion
programacion
 

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.