ubiquitour.com

Cómo combinar colores de botón HTML con la fuente

Antes de CSS, los diseñadores de sitios web mezclan fuentes y colores en el mismo código que consta de los elementos de la Página Web. Un botón HTML, por ejemplo, podría haber contenido la etiqueta "input" que define el botón así como una etiqueta de "fuente" para establecer la fuente del botón. Desarrolladores expertos ahora usan hojas de estilo en cascada para separar el código que crea un elemento de la Página Web del código que le dice a los navegadores cómo mostrarlo. Cuando usted necesita añadir un toque de estilo a una página Web, del estilo el botón fuentes y colores mediante clases CSS.

Instrucciones

1 Abrir Bloc de notas o cualquier editor de HTML. Copie el código que se muestra a continuación y péguelo en la sección body de un documento HTML:

< entrada clase = "style1" type = "button" value = "Botón 1" / >

< entrada clase = "style2" de type = "button" value = "Botón 2" / >

Este código crea dos botones que hacen referencia a dos clases CSS llamado "style1" y "style2." Las clases de control como los botones aparecen en la Página Web.

2 Pegue el código siguiente en la sección "head" del documento:

style1 {color: red; fondo-color: amarillo; font-tamaño: 2em; font-weight: bold; font-family: "Times New Roman", Arial, serif;}

.style2 {{color: blue; font-tamaño: 0.8em; font-weight: bold; font-familia: Georgia, Helvetica, Arial;}

Este código CSS crea las clases "style1" y "style2" hace referencia alfabéticas los botones en el paso anterior. Tenga en cuenta los atributos de cada clase. El atributo de color establece el color de texto de primer plano del botón. El atributo de fondo controla el color de fondo del botón. El atributo font-size, 2em unidades en la primera clase, determina el tamaño de la fuente del botón. El atributo font-family dice navegadores para intentar utilizar la lista de fuentes que se muestra en el orden en que aparecen. Poner paréntesis alrededor de nombres de las fuentes que contienen espacios, como "Times New Roman."

3 Guardar el documento y ver en cualquier navegador. Los dos botones mostrarán las características de color y fuente definidas en las definiciones de clase CSS. El segundo botón no tiene fondo color porque la clase style2 que hace referencia a no ha definido esa propiedad.

Consejos y advertencias

  • Es conveniente especificar una lista de nombres de fuente deseado en el atributo CSS font-family ya que algunos usuarios no tenga la deseada fuente instalada en sus equipos. En tales casos, su navegador ignorará esa fuente y trate de usar otro en la lista.
  • Por experimentar con diferentes combinaciones de CSS, puede producir una variedad de modelos personalizados para todos los botones HTML.