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.
• 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).

Más contenido relacionado

La actualidad más candente

Clasificasion de lenguajes
Clasificasion de lenguajesClasificasion de lenguajes
Clasificasion de lenguajes
Alex Javier
 
Comandos de configuracion de dispositivos cisco
Comandos de configuracion de dispositivos ciscoComandos de configuracion de dispositivos cisco
Comandos de configuracion de dispositivos cisco
CISCO NETWORKING
 
Practica de medidas de almacenamiento
Practica de medidas de almacenamiento Practica de medidas de almacenamiento
Practica de medidas de almacenamiento
rositamelendrez
 
Cuestionario de drivers
Cuestionario de driversCuestionario de drivers
Cuestionario de drivers
ensambleequipo02
 
Operación de sistema operativo monousuario sobre msdos
Operación de sistema operativo monousuario sobre msdosOperación de sistema operativo monousuario sobre msdos
Operación de sistema operativo monousuario sobre msdos
cesar esparza
 
Sistemas de archivo
Sistemas de archivoSistemas de archivo
Sistemas de archivo
Carlos Robayo
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
danneszm
 
Unidad 2 concepto de Programa,Proceso y Procesador
Unidad 2  concepto de Programa,Proceso y ProcesadorUnidad 2  concepto de Programa,Proceso y Procesador
Unidad 2 concepto de Programa,Proceso y Procesador
Mario Alberto Antonio Lopez
 
Estudio de factibilidad técnica (enfoque informático)
Estudio de factibilidad técnica  (enfoque informático)Estudio de factibilidad técnica  (enfoque informático)
Estudio de factibilidad técnica (enfoque informático)
Ronald Rivas
 
Sistema operativo ms dos
Sistema operativo ms dosSistema operativo ms dos
Sistema operativo ms dos
Angel Rios
 
Solaris
SolarisSolaris
Solaris
Cesar Leonel
 
Componentes internos de la pc
Componentes internos de la pcComponentes internos de la pc
Componentes internos de la pc
antraponicoloco
 
Componentes Fisicos Red de datos
Componentes Fisicos Red de datosComponentes Fisicos Red de datos
Componentes Fisicos Red de datos
Jorge Alexander
 
Acceso directo a memoria
Acceso directo a memoriaAcceso directo a memoria
Acceso directo a memoria
alan moreno
 
Estructura física y lógica del disco duro
Estructura física y lógica del disco duroEstructura física y lógica del disco duro
Estructura física y lógica del disco duro
gematic
 
6. configuracion de los sistemas operativos
6. configuracion de los sistemas operativos6. configuracion de los sistemas operativos
6. configuracion de los sistemas operativos
Giovani Ramirez
 
Instalacion Desinstalacion De Software
Instalacion Desinstalacion De SoftwareInstalacion Desinstalacion De Software
Instalacion Desinstalacion De Software
guest640b9b
 
Sistema de Archivos
Sistema de ArchivosSistema de Archivos
Sistema de Archivos
Luis Efrén Rojas Montañez
 
Kernel De Windows
Kernel De WindowsKernel De Windows
Kernel De Windows
eyes
 
Redes wan
Redes wanRedes wan

La actualidad más candente (20)

Clasificasion de lenguajes
Clasificasion de lenguajesClasificasion de lenguajes
Clasificasion de lenguajes
 
Comandos de configuracion de dispositivos cisco
Comandos de configuracion de dispositivos ciscoComandos de configuracion de dispositivos cisco
Comandos de configuracion de dispositivos cisco
 
Practica de medidas de almacenamiento
Practica de medidas de almacenamiento Practica de medidas de almacenamiento
Practica de medidas de almacenamiento
 
Cuestionario de drivers
Cuestionario de driversCuestionario de drivers
Cuestionario de drivers
 
Operación de sistema operativo monousuario sobre msdos
Operación de sistema operativo monousuario sobre msdosOperación de sistema operativo monousuario sobre msdos
Operación de sistema operativo monousuario sobre msdos
 
Sistemas de archivo
Sistemas de archivoSistemas de archivo
Sistemas de archivo
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Unidad 2 concepto de Programa,Proceso y Procesador
Unidad 2  concepto de Programa,Proceso y ProcesadorUnidad 2  concepto de Programa,Proceso y Procesador
Unidad 2 concepto de Programa,Proceso y Procesador
 
Estudio de factibilidad técnica (enfoque informático)
Estudio de factibilidad técnica  (enfoque informático)Estudio de factibilidad técnica  (enfoque informático)
Estudio de factibilidad técnica (enfoque informático)
 
Sistema operativo ms dos
Sistema operativo ms dosSistema operativo ms dos
Sistema operativo ms dos
 
Solaris
SolarisSolaris
Solaris
 
Componentes internos de la pc
Componentes internos de la pcComponentes internos de la pc
Componentes internos de la pc
 
Componentes Fisicos Red de datos
Componentes Fisicos Red de datosComponentes Fisicos Red de datos
Componentes Fisicos Red de datos
 
Acceso directo a memoria
Acceso directo a memoriaAcceso directo a memoria
Acceso directo a memoria
 
Estructura física y lógica del disco duro
Estructura física y lógica del disco duroEstructura física y lógica del disco duro
Estructura física y lógica del disco duro
 
6. configuracion de los sistemas operativos
6. configuracion de los sistemas operativos6. configuracion de los sistemas operativos
6. configuracion de los sistemas operativos
 
Instalacion Desinstalacion De Software
Instalacion Desinstalacion De SoftwareInstalacion Desinstalacion De Software
Instalacion Desinstalacion De Software
 
Sistema de Archivos
Sistema de ArchivosSistema de Archivos
Sistema de Archivos
 
Kernel De Windows
Kernel De WindowsKernel De Windows
Kernel De Windows
 
Redes wan
Redes wanRedes wan
Redes wan
 

Similar a Introduccion historia css

Paginas web css
Paginas web cssPaginas web css
Paginas web css
axel lopez
 
C3 lenguaje de presentación.
C3 lenguaje de presentación.C3 lenguaje de presentación.
C3 lenguaje de presentación.
Alejandro Hernandez
 
Css básico
Css básicoCss básico
manualrapido_css.pdf
manualrapido_css.pdfmanualrapido_css.pdf
manualrapido_css.pdf
YolitaGaona
 
Manualrapido css
Manualrapido cssManualrapido css
Manualrapido css
juan flores méndez
 
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
ssuseraf13d4
 
manua.pdf
manua.pdfmanua.pdf
manua.pdf
NostromoMX
 
Estilos cascadas
Estilos cascadasEstilos cascadas
Estilos cascadas
Mabeciita Ayala
 
Introduccion a CSS I
Introduccion a CSS IIntroduccion a CSS I
Introduccion a CSS I
Héctor Estigarribia
 
Css.html(1)
Css.html(1)Css.html(1)
Css.html(1)
Odali Suarez A
 
Introducción a CSS
Introducción a CSSIntroducción a CSS
Introducción a CSS
Joaquin Lara Sierra
 
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
Bartolomé Palazón Cascales
 
Guia de css para principiantes
Guia de css para principiantesGuia de css para principiantes
Guia de css para principiantes
Pedro Antonio Villalta (Pavillalta)
 
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
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
Diivenii Sykes
 
Css
CssCss
Css
CssCss
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)
Aplicaciones Gráficas
 

Similar a 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
 
Manualrapido css
Manualrapido cssManualrapido css
Manualrapido css
 
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
 
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)
 

Último

Planificación Ejemplo con la metodología TPACK
Planificación Ejemplo con la metodología  TPACKPlanificación Ejemplo con la metodología  TPACK
Planificación Ejemplo con la metodología TPACK
ssusera6697f
 
Inteligencia Artificial para Docentes HIA Ccesa007.pdf
Inteligencia Artificial para Docentes  HIA  Ccesa007.pdfInteligencia Artificial para Docentes  HIA  Ccesa007.pdf
Inteligencia Artificial para Docentes HIA Ccesa007.pdf
Demetrio Ccesa Rayme
 
SEMIOLOGIA DE HEMORRAGIAS DIGESTIVAS.pptx
SEMIOLOGIA DE HEMORRAGIAS DIGESTIVAS.pptxSEMIOLOGIA DE HEMORRAGIAS DIGESTIVAS.pptx
SEMIOLOGIA DE HEMORRAGIAS DIGESTIVAS.pptx
Osiris Urbano
 
efemérides del mes de junio 2024 (1).pptx
efemérides del mes de junio 2024 (1).pptxefemérides del mes de junio 2024 (1).pptx
efemérides del mes de junio 2024 (1).pptx
acgtz913
 
Nuevos espacios,nuevos tiempos,nuevas practica.pptx
Nuevos espacios,nuevos tiempos,nuevas practica.pptxNuevos espacios,nuevos tiempos,nuevas practica.pptx
Nuevos espacios,nuevos tiempos,nuevas practica.pptx
lautyzaracho4
 
Liturgia día del Padre del siguiente domingo.pptx
Liturgia día del Padre del siguiente domingo.pptxLiturgia día del Padre del siguiente domingo.pptx
Liturgia día del Padre del siguiente domingo.pptx
YeniferGarcia36
 
EVALUACION ESTUDIANTIL 2023-2024 Ecuador - Costa.pptx
EVALUACION ESTUDIANTIL 2023-2024 Ecuador - Costa.pptxEVALUACION ESTUDIANTIL 2023-2024 Ecuador - Costa.pptx
EVALUACION ESTUDIANTIL 2023-2024 Ecuador - Costa.pptx
Victor Elizalde P
 
Docentes y el uso de chatGPT en el Aula Ccesa007.pdf
Docentes y el uso de chatGPT   en el Aula Ccesa007.pdfDocentes y el uso de chatGPT   en el Aula Ccesa007.pdf
Docentes y el uso de chatGPT en el Aula Ccesa007.pdf
Demetrio Ccesa Rayme
 
Clase Prensencial, Actividad 2.pdf.......
Clase Prensencial, Actividad 2.pdf.......Clase Prensencial, Actividad 2.pdf.......
Clase Prensencial, Actividad 2.pdf.......
LuanaJaime1
 
CONTENIDOS Y PDA DE LA FASE 3,4 Y 5 EN NIVEL PRIMARIA
CONTENIDOS Y PDA DE LA FASE 3,4 Y 5 EN NIVEL PRIMARIACONTENIDOS Y PDA DE LA FASE 3,4 Y 5 EN NIVEL PRIMARIA
CONTENIDOS Y PDA DE LA FASE 3,4 Y 5 EN NIVEL PRIMARIA
ginnazamudio
 
Triduo Eudista: Jesucristo, Sumo y Eterno Sacerdote; El Corazón de Jesús y el...
Triduo Eudista: Jesucristo, Sumo y Eterno Sacerdote; El Corazón de Jesús y el...Triduo Eudista: Jesucristo, Sumo y Eterno Sacerdote; El Corazón de Jesús y el...
Triduo Eudista: Jesucristo, Sumo y Eterno Sacerdote; El Corazón de Jesús y el...
Unidad de Espiritualidad Eudista
 
La vida de Martin Miguel de Güemes para niños de primaria
La vida de Martin Miguel de Güemes para niños de primariaLa vida de Martin Miguel de Güemes para niños de primaria
La vida de Martin Miguel de Güemes para niños de primaria
EricaCouly1
 
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024.pdf
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024.pdfFEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024.pdf
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024.pdf
Jose Luis Jimenez Rodriguez
 
Soluciones Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinar...
Soluciones Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinar...Soluciones Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinar...
Soluciones Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinar...
Juan Martín Martín
 
Manual de procedimiento para gráficos HC
Manual de procedimiento para gráficos HCManual de procedimiento para gráficos HC
Manual de procedimiento para gráficos HC
josseanlo1581
 
Hablemos de ESI para estudiantes Cuadernillo
Hablemos de ESI para estudiantes CuadernilloHablemos de ESI para estudiantes Cuadernillo
Hablemos de ESI para estudiantes Cuadernillo
Mónica Sánchez
 
ACERTIJO DESCIFRANDO CÓDIGO DEL CANDADO DE LA TORRE EIFFEL EN PARÍS. Por JAVI...
ACERTIJO DESCIFRANDO CÓDIGO DEL CANDADO DE LA TORRE EIFFEL EN PARÍS. Por JAVI...ACERTIJO DESCIFRANDO CÓDIGO DEL CANDADO DE LA TORRE EIFFEL EN PARÍS. Por JAVI...
ACERTIJO DESCIFRANDO CÓDIGO DEL CANDADO DE LA TORRE EIFFEL EN PARÍS. Por JAVI...
JAVIER SOLIS NOYOLA
 
Maristella Svampa-La sociedad excluyente.pdf
Maristella Svampa-La sociedad excluyente.pdfMaristella Svampa-La sociedad excluyente.pdf
Maristella Svampa-La sociedad excluyente.pdf
belbarcala
 
Libro Integrado 8vo egb len-mat-ccnn-eess
Libro Integrado 8vo egb len-mat-ccnn-eessLibro Integrado 8vo egb len-mat-ccnn-eess
Libro Integrado 8vo egb len-mat-ccnn-eess
maxgamesofficial15
 
La necesidad de bienestar y el uso de la naturaleza.pdf
La necesidad de bienestar y el uso de la naturaleza.pdfLa necesidad de bienestar y el uso de la naturaleza.pdf
La necesidad de bienestar y el uso de la naturaleza.pdf
JonathanCovena1
 

Último (20)

Planificación Ejemplo con la metodología TPACK
Planificación Ejemplo con la metodología  TPACKPlanificación Ejemplo con la metodología  TPACK
Planificación Ejemplo con la metodología TPACK
 
Inteligencia Artificial para Docentes HIA Ccesa007.pdf
Inteligencia Artificial para Docentes  HIA  Ccesa007.pdfInteligencia Artificial para Docentes  HIA  Ccesa007.pdf
Inteligencia Artificial para Docentes HIA Ccesa007.pdf
 
SEMIOLOGIA DE HEMORRAGIAS DIGESTIVAS.pptx
SEMIOLOGIA DE HEMORRAGIAS DIGESTIVAS.pptxSEMIOLOGIA DE HEMORRAGIAS DIGESTIVAS.pptx
SEMIOLOGIA DE HEMORRAGIAS DIGESTIVAS.pptx
 
efemérides del mes de junio 2024 (1).pptx
efemérides del mes de junio 2024 (1).pptxefemérides del mes de junio 2024 (1).pptx
efemérides del mes de junio 2024 (1).pptx
 
Nuevos espacios,nuevos tiempos,nuevas practica.pptx
Nuevos espacios,nuevos tiempos,nuevas practica.pptxNuevos espacios,nuevos tiempos,nuevas practica.pptx
Nuevos espacios,nuevos tiempos,nuevas practica.pptx
 
Liturgia día del Padre del siguiente domingo.pptx
Liturgia día del Padre del siguiente domingo.pptxLiturgia día del Padre del siguiente domingo.pptx
Liturgia día del Padre del siguiente domingo.pptx
 
EVALUACION ESTUDIANTIL 2023-2024 Ecuador - Costa.pptx
EVALUACION ESTUDIANTIL 2023-2024 Ecuador - Costa.pptxEVALUACION ESTUDIANTIL 2023-2024 Ecuador - Costa.pptx
EVALUACION ESTUDIANTIL 2023-2024 Ecuador - Costa.pptx
 
Docentes y el uso de chatGPT en el Aula Ccesa007.pdf
Docentes y el uso de chatGPT   en el Aula Ccesa007.pdfDocentes y el uso de chatGPT   en el Aula Ccesa007.pdf
Docentes y el uso de chatGPT en el Aula Ccesa007.pdf
 
Clase Prensencial, Actividad 2.pdf.......
Clase Prensencial, Actividad 2.pdf.......Clase Prensencial, Actividad 2.pdf.......
Clase Prensencial, Actividad 2.pdf.......
 
CONTENIDOS Y PDA DE LA FASE 3,4 Y 5 EN NIVEL PRIMARIA
CONTENIDOS Y PDA DE LA FASE 3,4 Y 5 EN NIVEL PRIMARIACONTENIDOS Y PDA DE LA FASE 3,4 Y 5 EN NIVEL PRIMARIA
CONTENIDOS Y PDA DE LA FASE 3,4 Y 5 EN NIVEL PRIMARIA
 
Triduo Eudista: Jesucristo, Sumo y Eterno Sacerdote; El Corazón de Jesús y el...
Triduo Eudista: Jesucristo, Sumo y Eterno Sacerdote; El Corazón de Jesús y el...Triduo Eudista: Jesucristo, Sumo y Eterno Sacerdote; El Corazón de Jesús y el...
Triduo Eudista: Jesucristo, Sumo y Eterno Sacerdote; El Corazón de Jesús y el...
 
La vida de Martin Miguel de Güemes para niños de primaria
La vida de Martin Miguel de Güemes para niños de primariaLa vida de Martin Miguel de Güemes para niños de primaria
La vida de Martin Miguel de Güemes para niños de primaria
 
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024.pdf
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024.pdfFEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024.pdf
FEEDBACK DE LA ESTRUCTURA CURRICULAR- 2024.pdf
 
Soluciones Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinar...
Soluciones Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinar...Soluciones Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinar...
Soluciones Examen de Selectividad. Geografía junio 2024 (Convocatoria Ordinar...
 
Manual de procedimiento para gráficos HC
Manual de procedimiento para gráficos HCManual de procedimiento para gráficos HC
Manual de procedimiento para gráficos HC
 
Hablemos de ESI para estudiantes Cuadernillo
Hablemos de ESI para estudiantes CuadernilloHablemos de ESI para estudiantes Cuadernillo
Hablemos de ESI para estudiantes Cuadernillo
 
ACERTIJO DESCIFRANDO CÓDIGO DEL CANDADO DE LA TORRE EIFFEL EN PARÍS. Por JAVI...
ACERTIJO DESCIFRANDO CÓDIGO DEL CANDADO DE LA TORRE EIFFEL EN PARÍS. Por JAVI...ACERTIJO DESCIFRANDO CÓDIGO DEL CANDADO DE LA TORRE EIFFEL EN PARÍS. Por JAVI...
ACERTIJO DESCIFRANDO CÓDIGO DEL CANDADO DE LA TORRE EIFFEL EN PARÍS. Por JAVI...
 
Maristella Svampa-La sociedad excluyente.pdf
Maristella Svampa-La sociedad excluyente.pdfMaristella Svampa-La sociedad excluyente.pdf
Maristella Svampa-La sociedad excluyente.pdf
 
Libro Integrado 8vo egb len-mat-ccnn-eess
Libro Integrado 8vo egb len-mat-ccnn-eessLibro Integrado 8vo egb len-mat-ccnn-eess
Libro Integrado 8vo egb len-mat-ccnn-eess
 
La necesidad de bienestar y el uso de la naturaleza.pdf
La necesidad de bienestar y el uso de la naturaleza.pdfLa necesidad de bienestar y el uso de la naturaleza.pdf
La necesidad de bienestar y el uso de la naturaleza.pdf
 

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