Breaking

Post Top Ad

Your Ad Spot

martes, 7 de mayo de 2019

Introduccion html y css

Aquí, veremos qué es CSS en realidad, y por qué es un ajuste perfecto para HTML.

¿Qué es CSS?

CSS significa hojas de estilo en cascada. CSS es el lenguaje estándar para definir estilos en páginas web. Si bien CSS es más conocido por su aplicación en documentos HTML, se puede usar para definir estilos para cualquier formato de documento estructurado (como XML, por ejemplo).
Los estilos se establecen utilizando las propiedades CSS Por ejemplo, puede establecer propiedades de fuente (tamaño, colores, estilo, etc.), imágenes de fondo, estilos de bordes y mucho más.

Historia CSS

CSS ha pasado por algunos cambios importantes desde que el nivel 1 de CSS se convirtió en una recomendación del W3C en diciembre de 1996. CSS1 describe el lenguaje CSS así como un modelo de formato visual simple. CSS2, que se convirtió en una recomendación W3C en mayo de 1998, se basa en CSS1 y agrega soporte para hojas de estilo específicas de medios (por ejemplo, impresoras y dispositivos auditivos), fuentes descargables, posicionamiento de elementos y tablas.
Al momento de escribir este artículo, CSS3 se encuentra actualmente en desarrollo e incluye funciones más avanzadas, como animaciones, gradientes de fondo, diseños de varias columnas, imágenes de bordes y más.

HTML vs CSS

No es realmente "HTML vs CSS". De hecho, HTML y CSS son los mejores amigos. CSS es una extensión complementaria a HTML. Esto es lo que hace cada uno:
HTML
El propósito de HTML es proporcionar estructura y significado del documento Esto es particularmente cierto con la introducción de HTML5 . Utiliza HTML para especificar qué elementos van en la página (por ejemplo, encabezados, párrafos, tablas, imágenes, etc.). Cada uno de estos elementos (así como sus atributos y valores de atributo) tienen un cierto significado.
CSS
Usas CSS para especificar cómo se ven esos elementos HTML. Pero no solo cómo se ven , cómo se presentan . Después de todo, puede usar CSS para proporcionar estilos para la salida de voz (por ejemplo, para usuarios que usan un lector de pantalla). Por lo tanto, puede escribir un documento HTML sin preocuparse por su presentación, luego usar CSS para especificar cómo se presentará dentro de cualquier contexto dado. No solo esto, sino que también puede cambiar el CSS sin tener que cambiar el HTML. En otras palabras, puede "insertar" una hoja de estilo en un documento HTML y el documento HTML tomará inmediatamente los estilos de esa hoja de estilo.

Ejemplo

antes de

Aquí hay un ejemplo que usa solo HTML. No hay CSS involucrado.
<! DOCTYPE html>
< html > 
< cabeza >
< título > Ejemplo </ título >
</ cabeza >
< cuerpo >
< principal >
< h1 > Página HTML </ h1 >
< p > Esta es una página web básica. </ p >
</ main >
</ cuerpo >
</ html >

Después

En este ejemplo, añadimos algunos CSS.
<! DOCTYPE html>
< html > 
< cabeza >
< título > Ejemplo </ título >
< estilo >
main {
  ancho : 200px ;
  altura : 200px ;
  relleno : 10px ;
  fondo : beige ;
  }
h1 {
  Familia tipográfica : fantasía , cursiva , serif ;
  color : olivedrab ;
  borde inferior : 1px  puntos  verde oscuro ;
  }
p {
  Familia tipográfica : sans-serif ;
  color : naranja ;
  }
</ estilo >
</ cabeza >
< cuerpo >
< principal >
< h1 > Página HTML </ h1 >
< p > Esta es una página web básica. </ p >
</ main >
Todo lo que hicimos fue agregar el siguiente código al segundo ejemplo:
< estilo >
main {
  ancho : 200px ;
  altura : 200px ;
  relleno : 10px ;
  fondo : beige ;
  }
h1 {
  Familia tipográfica : cursiva ;
  color : olivedrab ;
  borde inferior : 1px  puntos  verde oscuro ;
  }
p {
  Familia tipográfica : sans-serif ;
  color : naranja ;
  }
</ estilo >
Continúe y "corte y pegue" las <style>etiquetas y todo lo que hay entre ellas desde el segundo ejemplo hasta el primer ejemplo para ver cómo afecta a ambos ejemplos.
Entonces, sí, puedes crear un documento HTML sin CSS, ¡pero probablemente se verá como si fuera creado en 1995!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas