SlideShare uma empresa Scribd logo
1 de 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).

Mais conteúdo relacionado

Mais procurados

Antecedentes de la tgs
Antecedentes de la tgsAntecedentes de la tgs
Antecedentes de la tgsjulianj
 
HISTORIA DE LAS BASES DE DATOS
HISTORIA DE LAS BASES DE DATOSHISTORIA DE LAS BASES DE DATOS
HISTORIA DE LAS BASES DE DATOSdfgdfgs
 
Sistema de archivos
Sistema de archivosSistema de archivos
Sistema de archivosDon Augusto
 
Clases y objetos de java
Clases y objetos de javaClases y objetos de java
Clases y objetos de javainnovalabcun
 
Unidad 1. Fundamentos de Base de Datos
Unidad 1. Fundamentos de Base de DatosUnidad 1. Fundamentos de Base de Datos
Unidad 1. Fundamentos de Base de Datoshugodanielgd
 
Herramientas de Programacion Cliente Servidor
Herramientas de Programacion Cliente ServidorHerramientas de Programacion Cliente Servidor
Herramientas de Programacion Cliente ServidorHectlys Piña
 
Instalacion de un (SGBD)sistema gestor de base de datos.
Instalacion de un (SGBD)sistema gestor de base de datos.Instalacion de un (SGBD)sistema gestor de base de datos.
Instalacion de un (SGBD)sistema gestor de base de datos.SergioLopez467
 
Una base de datos relacional
Una base de datos relacionalUna base de datos relacional
Una base de datos relacionalAlex Javier
 
Ventajas y desventajas de sgbds
Ventajas y desventajas de sgbdsVentajas y desventajas de sgbds
Ventajas y desventajas de sgbdsjsucarmona
 
Bases de datos.ppt presentacion
Bases de datos.ppt presentacionBases de datos.ppt presentacion
Bases de datos.ppt presentacionandreaydarlys
 
Paradigmas de Bases de Datos
Paradigmas de Bases de DatosParadigmas de Bases de Datos
Paradigmas de Bases de Datosjazzme
 
ESTRUCTURA DE DIRECTORIOS UTI
ESTRUCTURA DE DIRECTORIOS UTIESTRUCTURA DE DIRECTORIOS UTI
ESTRUCTURA DE DIRECTORIOS UTIedwinwalls
 

Mais procurados (20)

Antecedentes de la tgs
Antecedentes de la tgsAntecedentes de la tgs
Antecedentes de la tgs
 
HISTORIA DE LAS BASES DE DATOS
HISTORIA DE LAS BASES DE DATOSHISTORIA DE LAS BASES DE DATOS
HISTORIA DE LAS BASES DE DATOS
 
Sistema de archivos
Sistema de archivosSistema de archivos
Sistema de archivos
 
Clases y objetos de java
Clases y objetos de javaClases y objetos de java
Clases y objetos de java
 
Primer Ejemplo de Proyecto en Android Studio
Primer Ejemplo de Proyecto en Android StudioPrimer Ejemplo de Proyecto en Android Studio
Primer Ejemplo de Proyecto en Android Studio
 
Unidad 1. Fundamentos de Base de Datos
Unidad 1. Fundamentos de Base de DatosUnidad 1. Fundamentos de Base de Datos
Unidad 1. Fundamentos de Base de Datos
 
Herramientas de Programacion Cliente Servidor
Herramientas de Programacion Cliente ServidorHerramientas de Programacion Cliente Servidor
Herramientas de Programacion Cliente Servidor
 
Instalacion de un (SGBD)sistema gestor de base de datos.
Instalacion de un (SGBD)sistema gestor de base de datos.Instalacion de un (SGBD)sistema gestor de base de datos.
Instalacion de un (SGBD)sistema gestor de base de datos.
 
Una base de datos relacional
Una base de datos relacionalUna base de datos relacional
Una base de datos relacional
 
cc302modulo2
cc302modulo2cc302modulo2
cc302modulo2
 
10 distribuciones linux
10 distribuciones linux10 distribuciones linux
10 distribuciones linux
 
Ventajas y desventajas de sgbds
Ventajas y desventajas de sgbdsVentajas y desventajas de sgbds
Ventajas y desventajas de sgbds
 
Bases de datos.ppt presentacion
Bases de datos.ppt presentacionBases de datos.ppt presentacion
Bases de datos.ppt presentacion
 
Paradigmas de Bases de Datos
Paradigmas de Bases de DatosParadigmas de Bases de Datos
Paradigmas de Bases de Datos
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Gestores de base de datos
Gestores de base de datosGestores de base de datos
Gestores de base de datos
 
Integridad en las bases de datos
Integridad en las bases de datosIntegridad en las bases de datos
Integridad en las bases de datos
 
Tablas html
Tablas htmlTablas html
Tablas html
 
ESTRUCTURA DE DIRECTORIOS UTI
ESTRUCTURA DE DIRECTORIOS UTIESTRUCTURA DE DIRECTORIOS UTI
ESTRUCTURA DE DIRECTORIOS UTI
 
Sql presentacion
Sql presentacionSql presentacion
Sql presentacion
 

Semelhante a Introduccion historia css (20)

Paginas web css
Paginas web cssPaginas web css
Paginas web css
 
Css básico
Css básicoCss básico
Css básico
 
manualrapido_css.pdf
manualrapido_css.pdfmanualrapido_css.pdf
manualrapido_css.pdf
 
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)
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
Hojas de estilos css
Hojas de estilos cssHojas de estilos css
Hojas de estilos css
 

Último

MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMarjorie Burga
 
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfGUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfPaolaRopero2
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioELIASAURELIOCHAVEZCA1
 
Valoración Crítica de EEEM Feco2023 FFUCV
Valoración Crítica de EEEM Feco2023 FFUCVValoración Crítica de EEEM Feco2023 FFUCV
Valoración Crítica de EEEM Feco2023 FFUCVGiustinoAdesso1
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.amayarogel
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxlupitavic
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...JonathanCovena1
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dstEphaniiie
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...JAVIER SOLIS NOYOLA
 
Estrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxEstrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxdkmeza
 
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñotapirjackluis
 
actividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° gradoactividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° gradoJosDanielEstradaHern
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxlclcarmen
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Lourdes Feria
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfEjercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfMaritzaRetamozoVera
 
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...JAVIER SOLIS NOYOLA
 
Programacion Anual Matemática5 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática5    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática5    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática5 MPG 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 

Último (20)

MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grande
 
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfGUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 
Valoración Crítica de EEEM Feco2023 FFUCV
Valoración Crítica de EEEM Feco2023 FFUCVValoración Crítica de EEEM Feco2023 FFUCV
Valoración Crítica de EEEM Feco2023 FFUCV
 
Presentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza MultigradoPresentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza Multigrado
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
 
Estrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxEstrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptx
 
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
 
actividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° gradoactividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° grado
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
 
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfEjercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
 
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
 
Programacion Anual Matemática5 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática5    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática5    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática5 MPG 2024 Ccesa007.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).