Introducción a CSS3
CSS3, trabaja describiendo ciertas partes de una página web, ya sea mediante una etiqueta, un identificador, clases o subclases.
La función básica de CSS desde sus inicios fue la aplicación de estilos una página mediante el uso de reglas que posteriormente veremos.
<!DOCTYPE HTML><html lang = "es"><head><title>Estilos con CSS</title><meta charset = "UTF-8" /><!--En la actualidad ya no es necesario especificar el tipo de estilo, ya quepor defecto los estilos se aplican con CSS--><style type = "text/css">p {background-color: lightblue;color: blue}#identificador {background-color: black;color: white;}.clase {background-color: blue;color: lightblue;}</style></head><body><h2>Estilos con CSS</h2><p id = "identificador">Esto es un párrafo con el identificador</p><p>Esto es un párrafo regular</p><p class = "clase">ESto es un párrafo con clase</p><p>Esto es un párrafo regular</p><p class = "alternate">Esto es otro párrafo con otra clase
</p></body></html>
Note que la magia de este documento no se encuentra entre las etiquetas <body> y </body>, sino en entre <head> y <head>, ubique la parte en azul y vera unas etiquetas <style> y </style>, las cuales se emplean para insertar código de CSS y darle estilos a nuestro documento.
También encontrará un comentario en verde, donde menciono que ya no es necesario especificar el tipo de estilos (type = "text/css"), esto es por que desde la implementación de HTML5, solo se contemple a CSS, como la herramienta que dará estilos a nuestro documento.
Del código anterior, lo que veremos en el navegador será:
Un Pequeño Instructivo para añadir CSS
- Comienza con un Documento HTML válido, de lo contrario algunos estilos podrían no responder como lo deseamos.
- Existen diferentes formas de vincular estilos al documento, ya sea dentro de la misma etiqueta, el <head> y con un enlace exteron las cuales veremos posteriormente. En el ejemplo anterior fue dentro del <head>, y debe ser especificado mediante el uso de las etiquetas <style> y </style>
- Después especificamos el elemento que deseamos modificar, el cual puede ser: una etiqueta, un "id" o identificador, una clase "class", además de otros selectores mas específicos que posteriormente veremos.
- Después abrimos enfrente del elemento a modificar las llaves de apertura y cierre { }, dentro de las cuales colocaremos los estilos correspondientes al elemento. La colocación y distribución de nuestro código es indistinto, sin embargo es recomendable que mientras estemos aprendiendo lo hagamos de la manera mas legible posible.
- La sintaxis de la mayoría de los estilos esta determinada por:
- estilo(atributo): formato(valor);
- El estilo o atributo, especifica un conjunto de características predefinidas
- El formato o valor, es la disposición que le daremos a esas características
- Note que entre el atributo y el valor hay (":" dos puntos), y al final de cada estilo un (";" punto y coma).
- Y otra cosa que nos va a permitir en un futuro hacer cosas muy interesantes, es que a un mismo elemento le podemos dar varios estilos.
Acompáñenos en este fascinante mundo del diseño y programación Web que con las nuevas disposiciones y las revolucionarias tecnologías podremos hacer cosas que no creen una emoción sino toda una experiencia en nuestros clientes o usuarios de nuestros propios sitios web.
Recuerden Compartir y Darle
Hasta la Próxima
No hay comentarios:
Publicar un comentario