Programar fácil con Arduino

Programar fácil con Arduino, entiende cómo funciona el mundo.

  • Blog
  • ¿Quién soy?
  • Podcast
  • Curso Arduino [GRATIS]
  • Curso Domótica [GRATIS]
  • Acceder
Usted está aquí: Inicio / Blog / Introducción a CSS

Introducción a CSS

Luis del Valle Hernández

w3c-css

CSS u «Hoja de estilos en cascada» es un lenguaje vinculado a HTML donde definimos los estilos de nuestras páginas web. Funciona a base de reglas, tenemos un selector (etiquetas o conjunto de etiquetas de HTML) que a través de una declaración le damos valor a las propiedades de diseño. Más adelante os lo explicaremos con detalle. La declaración de una propiedad de un CSS se haría de la siguiente manera:

Selector {propiedad: valor; propiedad2: valor2;… }

El CSS lo podemos aplicar de tres formas diferentes:

  1. Directamente en la etiqueta: <body id=»mibody» background-color=»red»> Esta opción no es recomendable, no separa el contenido de la presentación. Aunque si podemos utilizarla de  forma puntual.
  2. En la cabecera del archivo HTML: <html> <head> <title>Hoja de estilo interna</title> <style type=»text/css»> <!– Conjunto de reglas –> body { font-family: «Times New Roman»; color: red; background-color: #d8da3d; } h1, h2 { font-family: Arial; } </style> </head> <body></body> </html> Esta forma es poco eficiente, ya que si nuestra página web se compone de varios archivos HTML (lo más usual) tendremos que definir nuestro CSS en cada una de los archivos HTML.
  3. En un archivo aparte:
    Este es la forma más eficiente de utilizar CSS ya que podemos utilizar todas estas reglas para todas las paginas HTML que forman nuestra web. Tendremos un archivo con la extensión .css vinculado a nuestro HTML indicándolo en la cabecera de este de la siguiente forma:   <head> <link href=”miestilo.css” type=text/css rel=stylesheet> </head> Dentro de este archivo tendremos las reglas que definen el estilo de nuestras páginas web. Se declararían de la misma forma que en el caso dos

Como hemos comentado, para darle estilo a nuestra página web utilizamos una serie de reglas.  Podemos hacerlo de varias formas:

  • Reglas a una o varias etiquetas:
    • En este caso el selector puede ser una única etiqueta: body { font-family: «Times New Roman»; color: red; background-color: #d8da3d; }
    • O varias etiquetas separadas por coma: h1, h2 { font-family: Arial; color: #2980b9 } En estos casos con el selector body estamos aplicando la fuente Times a toda nuestra página web con un color rojo y de fondo de pantalla el color #d8da3d que corresponde a un amarillo. La siguiente regla, decimos que los encabezados h1 y h2 su fuente será distinta, en este caso Arial y el color de estos azul en particular el #2980B9. Mencionaros que los colores en CSS2 pueden declararse de tres formas:
      • Hexadecimal
      • RGBA (Red Green Blue Alpha)
      • Colores básicos en ingles
      En este punto seria interesante que como ya os comentamos en el podcast de HTML con el navegador Chrome o Firefox podéis practicar a modificar el CSS en vuestra maquina de cualquier página. Acordaros, sobre un elemento de la pagina hay que darle botón derecho inspeccionar elemento. En este caso nosotros hemos modificado el color de nuestros links al amarillo #d8da3d:
  • cambiar_color.jpg
  • Reglas a un elemento
    Estas reglas solo se aplican a un único elemento de la página, para ello debemos tener definido en nuestro HTML a través del atributo id:   <p id=»elemento1″> Para aplicarle estilo a este elemento en nuestro archivo lo haríamos así: #elemento1 { font-family: “Arial”;}  
  • Reglas a un conjunto de elementos (clase)
    En nuestro HTML tenemos que tener un conjunto de elementos declarados con el mismo valor en el atributo class, no tienen por qué ser del mismo tipo de etiqueta. Por ejemplo en nuestro HTML tenemos:   <br class=»clase1″ > <a href=»www.programarfacil.com» class=”clase1”>Web Programar Fácil</a> En nuestro CSS aplicaríamos el diseño al conjunto de etiquetas que tengan declarado el atributo class=”clase1” de la siguiente forma: .clase1 { align: center; font-size: 12px; }  
  • Elemento y clase
    Para aplicar estilo a un elemento de HTML que tenga declarada el atributo class lo haríamos de la siguiente forma:   a.clase1 { font-family: «Times New Roman»; } Esto solo se aplicaría para las etiquetas “a” (enlaces) que tuvieran declarada la class=”clase1”, por lo que no se aplicaría para cualquier enlace o para cualquiera etiqueta que tuviera declarado el atributo class=”clase1”.

Existen más tipos de reglas para aplicar estilo en nuestros archivos CSS, como serian los referentes a los eventos. Pero los que os hemos mostrado son los más importantes y por donde debéis empezar.

La última versión de CSS es el CSS3, este nuevo estándar trae muchos cambios os listamos unas cuantas de ellas:

  • Bordes redondeados
  • Utilizar imagen como borde
  • Varias imágenes de fondo superpuestas
  • Colores con el canal Alpha (Trasparencia)
  • Fuentes alojadas en servidor
  • Efectos en texto
  • Trasformar objetos, darle animación

Os ponemos un ejemplo de cómo modificar el borde y hacerlo redondeado:

1
2
3
4
5
6
#rcorners1 {
    border-radius: 25px;
    padding: 20px;
    width: 200px;
    height: 150px;
}

No podemos terminar este artículo sin recordaros que con la multitud de resoluciones y diferentes dispositivos que hoy se conectan a la web, necesitamos hacer las webs para que se ajusten a estos diferentes tamaños, moviendo el contenido y siempre intentando que sean amigables. Esto lo conseguimos con CSS Responsive. Para que veáis la importancia que tiene, el buscador Google penaliza desde Abril de 2015 a aquellas páginas que no estén preparadas para dispositivos móviles.

Para realizar esta tarea os recomendamos que utilicéis un frameworks que os facilitara mucho la tarea, os dejamos tres para que los probéis:

  • CSS960
  • Bootstrap 
  • Skeeleton
kicad

KiCad diseña y fabrica tu primera PCB

Si alguna vez has desmontado algún equipo electrónico, debes haber visto en su interior una tarjeta que soporta una gran cantidad de componentes. Se … [+ info...]

Fuentes-de-alimentación

Fuente de alimentación

Creo que estarás de acuerdo conmigo si digo que, para la subsistencia de un ser humano, después del aire, lo más importante es el agua y la comida; es … [+ info...]

Motor-AC-asincrono-sincrono-monofasico-trifasico

El mundo del Motor AC

Es incomprensible que uno de los mejores inventos del ser humano pase casi completamente desapercibido. Y es que si le preguntas a muchas personas si … [+ info...]

Copyright © 2023 · Programar Fácil · Aviso legal

Utilizamos cookies propios y de terceros para mejorar nuestros servicios y experiencia de usuario. Si continua navegando, consideramos que acepta su uso.Aceptar Política de privacidad y cookies
Política de cookies

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
GUARDAR Y ACEPTAR