SlideShare une entreprise Scribd logo
1  sur  10
• 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.
• Al crear una página web, se utiliza en primer lugar el lenguaje
HTML/XHTML para marcar los contenidos, es decir, para designar la
función de cada elemento dentro de la página: párrafo, titular, texto
destacado, tabla, lista de elementos, etc.
• 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.
Significado de la sigla CSS
ascade
tyle
heet
La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuesto
por Bert Bos. Entre finales de 1994 y 1995 Lie y Bos se unieron para definir
un nuevo lenguaje que tomaba lo mejor de cada propuesta y lo llamaron
CSS (Cascading Style Sheets).
En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS
y lo añadió a su grupo de trabajo de HTML. A finales de 1996, el W3C
publicó la primera recomendación oficial, conocida como "CSS nivel 1".
El 12 de Mayo de 1998, el grupo de trabajo de CSS publica su segunda
recomendación oficial, conocida como "CSS nivel 2“.
En el año 2007, apareció la versión CCS3 de Hojas de
Estilo, conjuntamente con una nueva versión del lenguaje de etiquetas
HTML5.
En el 2011, se ha lanzado el primer borrador de CSS4, se está preparando
versiones definitivas del lenguaje de etiquetas de estilo CCS4.
El trabajo del diseñador web siempre está limitado por las posibilidades
de los navegadores que utilizan los usuarios para acceder a sus páginas.
Por este motivo es imprescindible conocer el soporte de CSS en cada
uno de los navegadores más utilizados del mercado.
SOPORTE DE CSS EN NAVEGADORES
Los navegadores Safari y Opera son los más avanzados en el soporte de
CSS, ya que incluyen muchos elementos de la futura versión CSS 3 y un
soporte casi perfecto de la actual version 2.1.
El navegador Firefox no tiene un soporte tan avanzado de CSS 3 pero las
últimas versiones están alcanzando rápidamente a Safari y Opera.
Estructura básica de CSS
CSS define una serie de términos que permiten describir cada una de las
partes que componen los estilos CSS. El siguiente esquema muestra las
partes que forman un estilo CSS muy básico:
Los diferentes términos se definen a continuación:
▪ Regla: cada uno de los estilos que componen una hoja de estilos CSS.
Cada regla está compuesta de una parte de "selectores", un símbolo de
"llave de apertura" ({), otra parte denominada "declaración" y por último, un
símbolo de "llave de cierre" (}).
▪ Selector: indica el elemento o elementos HTML a los que se aplica la regla
CSS.
▪ Declaración: especifica los estilos que se aplican a los elementos. Está
compuesta por una o más propiedades CSS.
▪ Propiedad: permite modificar el aspecto de una característica del elemento.
▪ Valor: indica el nuevo valor de la característica modificada en el elemento.
Un archivo CSS puede contener infinitas reglas CSS, cada regla puede
contener infinitos selectores y cada declaración puede estar formada por
un número infinito de pares propiedad/valor.
Digamos que queremos un bonito color rojo como fondo de nuestra
página web:
Usando HTML podríamos haberlo conseguido así:
<body bgcolor="#FF0000">
Con CSS el mismo resultado puede lograrse así:
body {background-color: #FF0000;}
El código usado es idéntico para HTML y CSS. El ejemplo anterior
muestra además el modelo CSS fundamental:
Aplicando CSS a Documentos
HTMLPodemos aplicar CSS a un documento HTML de tres maneras diferentes.
Método 1: En línea (el atributo style)
Un modo de aplicar CSS a HTML es usando el atributo de HTML style.
<html>
<head>
<title>Ejemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta es una página con fondo rojo</p>
</body>
</html>
Método 2: Interno (la etiqueta style)
Otra forma es incluir el código CSS usando la etiqueta HTML <style>.
<html>
<head>
<title>Ejemplo</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta es una página con fondo rojo</p>
</body>
</html>
Método 3: Externo (enlace a una hoja de estilo)
El método recomendado es enlazar con lo que se denomina hoja de
estilo externa. Una hoja de estilo externa es sencillamente un fichero de
texto con la extensión .css. Como cualquier otro fichero, puedes colocar
la hoja de estilo en el servidor web o en el disco duro.
Por ejemplo, digamos que tu hoja de estilo se llama style.css y está
localizada en una carpeta que se llama estilos.
El truco consiste en crear un vínculo desde el documento HTML (por
ejemplo, default.htm) con la hoja de estilo (style.css). Dicho vínculo se
puede crear con una sencilla línea de código HTML:
<link rel="stylesheet" type="text/css" href="style/style.css" />
La etiqueta <LINK> le indica al navegador que debe buscar un
documento situado fuera de la página HTML.
El atributo rel="stylesheet" especifica que el documento en cuestión es
una hoja de estilo externa.
El atributo type="text/css" especifica el tipo de hoja de estilo.
El atributo href=" URL " muestra la URL de la hoja de estilo (su
ubicación en Internet).

Contenu connexe

Tendances (20)

Sistema de archivos distribuido o DFS
Sistema de archivos distribuido o DFSSistema de archivos distribuido o DFS
Sistema de archivos distribuido o DFS
 
Adobe dreamweaver
Adobe dreamweaverAdobe dreamweaver
Adobe dreamweaver
 
Conceptos basicos
Conceptos basicosConceptos basicos
Conceptos basicos
 
Active Directory
Active DirectoryActive Directory
Active Directory
 
Metodologias de diseño de bd
Metodologias de diseño de bdMetodologias de diseño de bd
Metodologias de diseño de bd
 
Consultas base de datos en SQL
Consultas base de datos en SQLConsultas base de datos en SQL
Consultas base de datos en SQL
 
Comandos ddl
Comandos ddlComandos ddl
Comandos ddl
 
1-2 Arquitectura base de datos.pptx
1-2 Arquitectura base de datos.pptx1-2 Arquitectura base de datos.pptx
1-2 Arquitectura base de datos.pptx
 
Asp .net
Asp .netAsp .net
Asp .net
 
Csma cd
Csma cdCsma cd
Csma cd
 
Iso 9126
Iso 9126Iso 9126
Iso 9126
 
Bases de datos en red
Bases de datos en redBases de datos en red
Bases de datos en red
 
8.realizacion de pruebas
8.realizacion de pruebas8.realizacion de pruebas
8.realizacion de pruebas
 
Modelo entidad relacion
Modelo entidad relacionModelo entidad relacion
Modelo entidad relacion
 
BD para Dispositivos Moviles - Unidad 3 SMBD Moviles
BD para Dispositivos Moviles - Unidad 3 SMBD MovilesBD para Dispositivos Moviles - Unidad 3 SMBD Moviles
BD para Dispositivos Moviles - Unidad 3 SMBD Moviles
 
Hojas de estilo (css)
Hojas de estilo (css)Hojas de estilo (css)
Hojas de estilo (css)
 
Estandar IEEE 802
Estandar IEEE 802Estandar IEEE 802
Estandar IEEE 802
 
Ado net
Ado netAdo net
Ado net
 
Sistema de Archivos Distribuidos
Sistema de Archivos DistribuidosSistema de Archivos Distribuidos
Sistema de Archivos Distribuidos
 
Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3
 

Similaire à Introduccion historia css (20)

Paginas web css
Paginas web cssPaginas web css
Paginas web css
 
C3 lenguaje de presentación.
C3 lenguaje de presentación.C3 lenguaje de presentación.
C3 lenguaje de presentación.
 
Css básico
Css básicoCss básico
Css básico
 
manualrapido_css.pdf
manualrapido_css.pdfmanualrapido_css.pdf
manualrapido_css.pdf
 
Manual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSSManual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSS
 
manua.pdf
manua.pdfmanua.pdf
manua.pdf
 
Manualrapido css
Manualrapido cssManualrapido css
Manualrapido css
 
Estilos cascadas
Estilos cascadasEstilos cascadas
Estilos cascadas
 
Introduccion a CSS I
Introduccion a CSS IIntroduccion a CSS I
Introduccion a CSS I
 
Css.html(1)
Css.html(1)Css.html(1)
Css.html(1)
 
Introducción a CSS
Introducción a CSSIntroducción a CSS
Introducción a CSS
 
DISEÑO WEB 2020-2021 - 1ª PARTE
DISEÑO WEB 2020-2021 - 1ª PARTEDISEÑO WEB 2020-2021 - 1ª PARTE
DISEÑO WEB 2020-2021 - 1ª PARTE
 
Guia de css para principiantes
Guia de css para principiantesGuia de css para principiantes
Guia de css para principiantes
 
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
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
Css
CssCss
Css
 
Css
CssCss
Css
 
1. Introducción a las Hojas de estilo (CSS)
1. Introducción a las Hojas de estilo (CSS)1. Introducción a las Hojas de estilo (CSS)
1. Introducción a las Hojas de estilo (CSS)
 

Dernier

PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptAlberto Rubio
 
Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024IES Vicent Andres Estelles
 
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxCONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxroberthirigoinvasque
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxYadi Campos
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfapunteshistoriamarmo
 
semana 4 9NO Estudios sociales.pptxnnnn
semana 4  9NO Estudios sociales.pptxnnnnsemana 4  9NO Estudios sociales.pptxnnnn
semana 4 9NO Estudios sociales.pptxnnnnlitzyleovaldivieso
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfUPTAIDELTACHIRA
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOluismii249
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docxEliaHernndez7
 
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIAFabiolaGarcia751855
 
La Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalLa Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalJonathanCovena1
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...jlorentemartos
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxpvtablets2023
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Juan Martín Martín
 
Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.JonathanCovena1
 

Dernier (20)

PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
 
Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024
 
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxCONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdf
 
semana 4 9NO Estudios sociales.pptxnnnn
semana 4  9NO Estudios sociales.pptxnnnnsemana 4  9NO Estudios sociales.pptxnnnn
semana 4 9NO Estudios sociales.pptxnnnn
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
 
La Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalLa Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración Ambiental
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024
 
Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.
 

Introduccion historia css

  • 1.
  • 2. • 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. • Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc. • 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. Significado de la sigla CSS ascade tyle heet
  • 4.
  • 5. La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuesto por Bert Bos. Entre finales de 1994 y 1995 Lie y Bos se unieron para definir un nuevo lenguaje que tomaba lo mejor de cada propuesta y lo llamaron CSS (Cascading Style Sheets). En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a su grupo de trabajo de HTML. A finales de 1996, el W3C publicó la primera recomendación oficial, conocida como "CSS nivel 1". El 12 de Mayo de 1998, el grupo de trabajo de CSS publica su segunda recomendación oficial, conocida como "CSS nivel 2“. En el año 2007, apareció la versión CCS3 de Hojas de Estilo, conjuntamente con una nueva versión del lenguaje de etiquetas HTML5. En el 2011, se ha lanzado el primer borrador de CSS4, se está preparando versiones definitivas del lenguaje de etiquetas de estilo CCS4.
  • 6. El trabajo del diseñador web siempre está limitado por las posibilidades de los navegadores que utilizan los usuarios para acceder a sus páginas. Por este motivo es imprescindible conocer el soporte de CSS en cada uno de los navegadores más utilizados del mercado. SOPORTE DE CSS EN NAVEGADORES Los navegadores Safari y Opera son los más avanzados en el soporte de CSS, ya que incluyen muchos elementos de la futura versión CSS 3 y un soporte casi perfecto de la actual version 2.1. El navegador Firefox no tiene un soporte tan avanzado de CSS 3 pero las últimas versiones están alcanzando rápidamente a Safari y Opera.
  • 7. Estructura básica de CSS CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy básico: Los diferentes términos se definen a continuación: ▪ Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaración" y por último, un símbolo de "llave de cierre" (}). ▪ Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS. ▪ Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS. ▪ Propiedad: permite modificar el aspecto de una característica del elemento. ▪ Valor: indica el nuevo valor de la característica modificada en el elemento.
  • 8. Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener infinitos selectores y cada declaración puede estar formada por un número infinito de pares propiedad/valor. Digamos que queremos un bonito color rojo como fondo de nuestra página web: Usando HTML podríamos haberlo conseguido así: <body bgcolor="#FF0000"> Con CSS el mismo resultado puede lograrse así: body {background-color: #FF0000;} El código usado es idéntico para HTML y CSS. El ejemplo anterior muestra además el modelo CSS fundamental:
  • 9. Aplicando CSS a Documentos HTMLPodemos aplicar CSS a un documento HTML de tres maneras diferentes. Método 1: En línea (el atributo style) Un modo de aplicar CSS a HTML es usando el atributo de HTML style. <html> <head> <title>Ejemplo</title> </head> <body style="background-color: #FF0000;"> <p>Esta es una página con fondo rojo</p> </body> </html> Método 2: Interno (la etiqueta style) Otra forma es incluir el código CSS usando la etiqueta HTML <style>. <html> <head> <title>Ejemplo</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Esta es una página con fondo rojo</p> </body> </html>
  • 10. Método 3: Externo (enlace a una hoja de estilo) El método recomendado es enlazar con lo que se denomina hoja de estilo externa. Una hoja de estilo externa es sencillamente un fichero de texto con la extensión .css. Como cualquier otro fichero, puedes colocar la hoja de estilo en el servidor web o en el disco duro. Por ejemplo, digamos que tu hoja de estilo se llama style.css y está localizada en una carpeta que se llama estilos. El truco consiste en crear un vínculo desde el documento HTML (por ejemplo, default.htm) con la hoja de estilo (style.css). Dicho vínculo se puede crear con una sencilla línea de código HTML: <link rel="stylesheet" type="text/css" href="style/style.css" /> La etiqueta <LINK> le indica al navegador que debe buscar un documento situado fuera de la página HTML. El atributo rel="stylesheet" especifica que el documento en cuestión es una hoja de estilo externa. El atributo type="text/css" especifica el tipo de hoja de estilo. El atributo href=" URL " muestra la URL de la hoja de estilo (su ubicación en Internet).