Lo mas básico en CSS, es su síntesis a continuacion veremos las diferencias de como se manejan los códigos en HTML y CSS.
* En CSS se manejan unas llaves en sus atributos "{}" a diferencia del HTML que se manejan flechas "<>"
* Los atributos que consten de mas de un termino se separan con punto y coma ";"
* En CSS se usan dos puntos ":" a diferencia del HTML donde se maneja el signo igual "="
* Los atributos compuesto por mas de un termino siempre se separan mediante un guion "-"
Un ejemplo de CSS muy simple es
* Usaremos la estructura básica de HTML
<html>
<head>
</head>
<body>
</body>
</html>
NOTA: en este ejemplo no agregare title pero si quieres un titulo de encabezado deberas agregarlo
* Entre <head> y </head> agregaremos un espacio y otro entre <body> y </body> de esta forma:
<html>
<head>
Espacio agregado
</head>
<body>
Espacio agregado
</body>
</html>
<style type="text/css">
esto nos indica que usaremos texto y css* Justo después de haber agregado la etiqueta <style type="text/css"> hacemos un espacio y agregaremos css.
<html>
<head>
<style type="text/css">
Nuevo espacio agregado
</head>
<body>
Espacio agregado
</body>
</html>
* En el nuevo espacio agregado usaremos css
primero: agregaremos H1, que en HTML es una etiqueta de tamaño de letra.
segundo: agregamos la llave abierta "{", que es la etiqueta que se usa en CSS
tercero: agregaremos una etiqueta que se usa en CSS que es font-family esta etiqueta se usa para elegir la fuente ejemplo "arial" una vez agregamos font-family lo separaremos por dos puntos ":" que en CSS son usados para determinar un valor o dar una opcion en especifica en este caso arial; Nos deberá quedar de momento de esta forma.
H1 { font-family:arial
cuarto: separaremos con punto y coma ":" (ya que usaremos otro termino pero con el mismo font) y pondremos color de la letra, para poner color en CSS se usa igual que en el Español escribimos después del punto y coma color agregamos dos puntos ya que daremos un valor a la propiedad color elegimos como ejemplo blue y cerramos las llaves "}" como resultado nos quedara de esta forma nos quedara de estaforma:
H1 { font-family:arial; color:blue }
en esta etiqueta indicamos que todas las etiquetas que lleven H1 tendrán como fuente arial y va a ser la letra de color azul ahora cerramos la etiqueta </style> y nos debe quedar al finalizar asi:
<style type="text/css">
H1 { font-family:arial; color:blue }
</style>
NOTA: ya agregamos css en el documento HTML
* Ahora usaremos el espacio entre la etiqueta <body y </body> hay agregaremos html.
<H1> Este texto se mostrara con letra de color azul y tipo de letra arial </H1>
NOTA: asiq uedara al finalizar todo:
<html>
<head>
<style type="text/css">
H1 { font-family:arial; color:blue }
</style>
</head>
<body>
<H1> Este texto es de color azul y como fuente arial </H1>
</body>
</html>
Así se visualizara en nuestro navegador:
0 comentarios:
Publicar un comentario