Hasta este momento ya llevo el tutorial sobre lo básico en HTML y Javascript, ya llego el momento de aprender a darle una mejor apariencia a la página web y esto lo lograremos a través de CSS.
Formalmente CSS es un lenguaje usado para describir la apariencia de un documento que use etiquetas para identificar el contenido. Dentro de CSS podemos declarar un cambio de propiedad del mismo elemento, es como la trayectoría del agua que caé por una cascada, por cada piedra que tropieza el agua cambiará su trayectoría hasta llegar a la superficie, para CSS las piedras son las declaraciones de propiedades y la superficie es la apariencia final que esta muestra en la pantalla. Gracias a este funcionamiento es que recibe el nombre Cascading Style Sheets (Hoja de estilos en cascada en español).
1 - Hola CSS
Al igual que en Javascript aquí también podemos declarar el estilo dentro del mismo HTML usando la etiqueta style, esto realmente no se acostumbra hacer pero se los muestro para que tengan una primera idea fácil de CSS.
Lo primero que vemos es que dentro de la etiqueta style se hace referencia a h1 y se le está agregando 2 propiedades, un nuevo color y centrar texto. Para especificar el color se puede tomar el nombre para muchos colores predefinidos (aquí pueden ver una lista de todos los colores definidos) aunque normalmente queremos especificarlo a través de la representación hexadecimal, de este para tener un mayor grado de personalización. El haber definido estas propiedades sobre h1 quiere decir que cada vez que usemos h1 dentro del documento, esta obedecerá las propiedades descritas a menos que se alteren posteriormente.
Para este ejemplo ya hago uso de otro atributo muy importante dentro de las etiquetas y es el id, el cual para el primer párrafo tiene el nombre texto, esto nos sirve para varias cosas, pero de momento para lo qu interesa es que se vea que dentro de la etiqueta style una sección de código que utiliza el id texto y le asigna unas propiedades. Es muy importante el simbolo # que precede a texto ya que este indica id, más adelante veremos que existen otros. La personalización que hacemos en este caso es cambiar el color de la fuente a blanco, el fondo a un color azul y tamaño de la fuente 20 píxeles.
Por último el menos recomendable en proyectos grandes pero también disponible, es el atributo style en la etiqueta p en este caso, donde vemos que se altera el color de fondo. Digo que no se recomienda ya que como buena práctica de programación es tener la menor cantidad de código y repetir funciones lo menos posible.
2 - Uso de librerias, clases y propiedades de altura y ancho
El código necesario para tener acceso a un archivo de estilo de CSS se tiene usando la etiqueta link el cual tiene los atributos para especificar que se trata de una hoja de estilo. Por buena práctica coloco la ruta a la imagen desde la carpeta css.
Dentro del estilo de las etiquetas se especifica para el id cuadrado, un color de fondo azul claro, un ancho y alto de 100 píxeles.
Se especifíca la clase elemento con color de fondo cyan y ancho del 100% de la pantalla. Noten que el símbolo . que precede al nombre elemento es la forma de describir propiedades en una clase.
Un poco más formal con los ids y clases, los podemos definir como:
3 - Márgenes y rellenos
Para este ejemplo lo que tenemos es el uso de las propiedades margin (márgen) y padding (relleno).
4 - Texto y propiedad hover
En este caso quiero mostrar un ejemplo que tiene id fondo en el que podemos centrar el elemento especificando el ancho y márgenes izquierdo y derecho automáticos. Otro atributo que incluyo en el ejemplo es el cambio de cursor al colocar el mouse sobre el elemento boton.
En el ejemplo incluyo el comportamiento hover que significa colocar el mouse sobre el elemento. La descripción de esto se logra como en la línea 17 del archivo estilo-4.css.
El elemento boton cambiaría como se ve en la siguiente imagen:
Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.
Descarga aquí todos los archivos fuente.
Formalmente CSS es un lenguaje usado para describir la apariencia de un documento que use etiquetas para identificar el contenido. Dentro de CSS podemos declarar un cambio de propiedad del mismo elemento, es como la trayectoría del agua que caé por una cascada, por cada piedra que tropieza el agua cambiará su trayectoría hasta llegar a la superficie, para CSS las piedras son las declaraciones de propiedades y la superficie es la apariencia final que esta muestra en la pantalla. Gracias a este funcionamiento es que recibe el nombre Cascading Style Sheets (Hoja de estilos en cascada en español).
1 - Hola CSS
Al igual que en Javascript aquí también podemos declarar el estilo dentro del mismo HTML usando la etiqueta style, esto realmente no se acostumbra hacer pero se los muestro para que tengan una primera idea fácil de CSS.
Lo primero que vemos es que dentro de la etiqueta style se hace referencia a h1 y se le está agregando 2 propiedades, un nuevo color y centrar texto. Para especificar el color se puede tomar el nombre para muchos colores predefinidos (aquí pueden ver una lista de todos los colores definidos) aunque normalmente queremos especificarlo a través de la representación hexadecimal, de este para tener un mayor grado de personalización. El haber definido estas propiedades sobre h1 quiere decir que cada vez que usemos h1 dentro del documento, esta obedecerá las propiedades descritas a menos que se alteren posteriormente.
Para este ejemplo ya hago uso de otro atributo muy importante dentro de las etiquetas y es el id, el cual para el primer párrafo tiene el nombre texto, esto nos sirve para varias cosas, pero de momento para lo qu interesa es que se vea que dentro de la etiqueta style una sección de código que utiliza el id texto y le asigna unas propiedades. Es muy importante el simbolo # que precede a texto ya que este indica id, más adelante veremos que existen otros. La personalización que hacemos en este caso es cambiar el color de la fuente a blanco, el fondo a un color azul y tamaño de la fuente 20 píxeles.
Por último el menos recomendable en proyectos grandes pero también disponible, es el atributo style en la etiqueta p en este caso, donde vemos que se altera el color de fondo. Digo que no se recomienda ya que como buena práctica de programación es tener la menor cantidad de código y repetir funciones lo menos posible.
2 - Uso de librerias, clases y propiedades de altura y ancho
El código necesario para tener acceso a un archivo de estilo de CSS se tiene usando la etiqueta link el cual tiene los atributos para especificar que se trata de una hoja de estilo. Por buena práctica coloco la ruta a la imagen desde la carpeta css.
Dentro del estilo de las etiquetas se especifica para el id cuadrado, un color de fondo azul claro, un ancho y alto de 100 píxeles.
Se especifíca la clase elemento con color de fondo cyan y ancho del 100% de la pantalla. Noten que el símbolo . que precede al nombre elemento es la forma de describir propiedades en una clase.
Un poco más formal con los ids y clases, los podemos definir como:
- id: Es el identificador y por lo tanto único.
- class: Es el que permite clasificar elementos y dando el mismo comportamiento para todos aquellos que sean de la misma clase.
3 - Márgenes y rellenos
Para este ejemplo lo que tenemos es el uso de las propiedades margin (márgen) y padding (relleno).
- margin: Sirve para declarar los márgenes en píxeles alrededor de un elemento. Esta propiedad de puede usar de dos formas:
- margin: 10px 20px 30px 40px;
- margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;
- padding: Con este podemos declarar un relleno dentro del elemento y al igual que margin se pueden declarar de las 2 formas.
4 - Texto y propiedad hover
En este caso quiero mostrar un ejemplo que tiene id fondo en el que podemos centrar el elemento especificando el ancho y márgenes izquierdo y derecho automáticos. Otro atributo que incluyo en el ejemplo es el cambio de cursor al colocar el mouse sobre el elemento boton.
En el ejemplo incluyo el comportamiento hover que significa colocar el mouse sobre el elemento. La descripción de esto se logra como en la línea 17 del archivo estilo-4.css.
El elemento boton cambiaría como se ve en la siguiente imagen:
Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.
Descarga aquí todos los archivos fuente.
No hay comentarios:
Publicar un comentario