• CSS es un lenguaje de hojas de estilos creado para controlar elaspecto o presentación de los documentos electrónicos def...
Significado de la sigla CSSascadetyleheet
La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuestopor Bert Bos. Entre finales de 1994 y 1995 Lie y Bos...
El trabajo del diseñador web siempre está limitado por las posibilidadesde los navegadores que utilizan los usuarios para ...
Estructura básica de CSSCSS define una serie de términos que permiten describir cada una de laspartes que componen los est...
Un archivo CSS puede contener infinitas reglas CSS, cada regla puedecontener infinitos selectores y cada declaración puede...
Aplicando CSS a DocumentosHTMLPodemos aplicar CSS a un documento HTML de tres maneras diferentes.Método 1: En línea (el at...
Método 3: Externo (enlace a una hoja de estilo)El método recomendado es enlazar con lo que se denomina hoja deestilo exter...
Introduccion historia css
Introduccion historia css
Próxima SlideShare
Cargando en…5
×

Introduccion historia css

4.406 visualizaciones

Publicado el

introducción al lenguaje de etiquetas CSS

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
4.406
En SlideShare
0
De insertados
0
Número de insertados
2.773
Acciones
Compartido
0
Descargas
47
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Introduccion historia css

  1. 1. • CSS es un lenguaje de hojas de estilos creado para controlar elaspecto o presentación de los documentos electrónicos definidos conHTML y XHTML. CSS.• Es la mejor forma de separar los contenidos y su presentación y esimprescindible para crear páginas web complejas.• Al crear una página web, se utiliza en primer lugar el lenguajeHTML/XHTML para marcar los contenidos, es decir, para designar lafunción de cada elemento dentro de la página: párrafo, titular, textodestacado, tabla, lista de elementos, etc.• Una vez creados los contenidos, se utiliza el lenguaje CSS para definirel aspecto de cada elemento: color, tamaño y tipo de letra deltexto, separación horizontal y vertical entre elementos, posición decada elemento dentro de la página, etc.
  2. 2. Significado de la sigla CSSascadetyleheet
  3. 3. La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuestopor Bert Bos. Entre finales de 1994 y 1995 Lie y Bos se unieron para definirun nuevo lenguaje que tomaba lo mejor de cada propuesta y lo llamaronCSS (Cascading Style Sheets).En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSSy lo añadió a su grupo de trabajo de HTML. A finales de 1996, el W3Cpublicó la primera recomendación oficial, conocida como "CSS nivel 1".El 12 de Mayo de 1998, el grupo de trabajo de CSS publica su segundarecomendación oficial, conocida como "CSS nivel 2“.En el año 2007, apareció la versión CCS3 de Hojas deEstilo, conjuntamente con una nueva versión del lenguaje de etiquetasHTML5.En el 2011, se ha lanzado el primer borrador de CSS4, se está preparandoversiones definitivas del lenguaje de etiquetas de estilo CCS4.
  4. 4. El trabajo del diseñador web siempre está limitado por las posibilidadesde los navegadores que utilizan los usuarios para acceder a sus páginas.Por este motivo es imprescindible conocer el soporte de CSS en cadauno de los navegadores más utilizados del mercado.SOPORTE DE CSS EN NAVEGADORESLos navegadores Safari y Opera son los más avanzados en el soporte deCSS, ya que incluyen muchos elementos de la futura versión CSS 3 y unsoporte 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.
  5. 5. Estructura básica de CSSCSS define una serie de términos que permiten describir cada una de laspartes que componen los estilos CSS. El siguiente esquema muestra laspartes 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, unsímbolo de "llave de cierre" (}).▪ Selector: indica el elemento o elementos HTML a los que se aplica la reglaCSS.▪ 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.
  6. 6. Un archivo CSS puede contener infinitas reglas CSS, cada regla puedecontener infinitos selectores y cada declaración puede estar formada porun número infinito de pares propiedad/valor.Digamos que queremos un bonito color rojo como fondo de nuestrapá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 anteriormuestra además el modelo CSS fundamental:
  7. 7. Aplicando CSS a DocumentosHTMLPodemos 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>
  8. 8. Método 3: Externo (enlace a una hoja de estilo)El método recomendado es enlazar con lo que se denomina hoja deestilo externa. Una hoja de estilo externa es sencillamente un fichero detexto con la extensión .css. Como cualquier otro fichero, puedes colocarla 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 (porejemplo, default.htm) con la hoja de estilo (style.css). Dicho vínculo sepuede 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 undocumento situado fuera de la página HTML.El atributo rel="stylesheet" especifica que el documento en cuestión esuna 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 (suubicación en Internet).

×